css优化 | 易学教程

2017最新前端面试题

阅读更多关于 2017最新前端面试题

HTML、CSS部分要点：对Web标准的理解、浏览器差异、CSS基本功：布局、盒子模型、选择器优先级及使用、HTML5、CSS3、移动端开发技术等 Doctype作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? （1）、声明位于文档中的最前面，处于标签之前。告知浏览器的解析器，用什么文档类型规范来解析这个文档。（2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。（3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。（4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。行内元素有哪些？块级元素有哪些？空(void)元素有那些？（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值，比如div默认display属性值为“block”，成为“块级”元素；span默认display属性值为“inline”，是“行内”元素。（2）行内元素有：a b span img input select strong（强调的语气）块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p （3）知名的空元素：鲜为人知的是： CSS的盒子模型？（1）两种， IE 盒子模型、标准 W3C 盒子模型；IE

【译】统一样式语言

阅读更多关于【译】统一样式语言

原文地址： A Unified Styling Language 原文作者：本文已获原作者 Mark Dalgleish 授权译文出自：掘金翻译计划译者： ZhangFe 校对者： JackGit , yifili09 , sunshine940326 , sunui 统一样式语言在过去几年中，我们见证了 CSS-in-JS 的兴起，尤其是在 React 社区。但它也饱含争议，很多人，尤其是那些已经精通 CSS 的人，对此持怀疑态度。 "为什么有人要在 JS 中写 CSS？这简直是一个可怕的想法！但愿他们学过 CSS !" 如果这是你听到 CSS-in-JS 时的反应，那么请阅读下去。我们来看看为什么在 JavaScript 中编写样式并不是一个可怕的想法，以及为什么我认为你应该长期关注这个快速发展的领域。相互误解的社区 React 社区经常被 CSS 社区误解，反之亦然。对我来说这很有趣，因为我同时混迹于这两个社区。我从九十年代后期开始学习 HTML，并且从基于表格布局的黑暗时代就开始专职于 CSS。受 CSS 禅意花园启发，我是最早一批将现有代码向语义化标签和层叠样式表迁移的开发者。不久后我开始痴迷于 HTML 和 JavaScript 的分离工作，在服务器渲染出来的页面中使用非侵入式 JavaScript 同客户端交互。围绕这些实践

前端静态资源缓存

阅读更多关于前端静态资源缓存

1.项目中boot cdn 引入的多个文件缓存时间太短了，是否应该设置足够大？比如一年，如果真有bug需要修复，在手动改？更彻底就是直接作为配置项：就像basket.js nprogress.css nprogress.js jquery.min.js xlsx.core.min.js analytics.js 然后以vendor为单位 send batch requests 参考资料：https://www.sitepoint.com/how-to-improve-loading-time-with-basket-js/ 2. 使用webpack-html-plugin 打出来的css 放到js后面去了，阻塞了css 渲染是不是应该把index。css提前？？？？放到js前面啊 3. 有些方法太慢了，考虑两种优化方式 1）parallelJS 多线程 2）基于函数式的缓存来源： oschina 链接： https://my.oschina.net/u/2267438/blog/709737

前端性能优化相关问题

阅读更多关于前端性能优化相关问题

前端优化搜索引擎（seo）：合理的title，description，keywords 搜索引擎对这三项的权重逐个减小：title值强调重点即可，关键词设定要突出，重要的关键词不要出现超过两次，而且要靠前，不同页面的title有所不同；description围绕网站主题内容和目标关键字，对网站做概要介绍，要能突出特点，体现优势，不过分堆砌关键字，不同页面的description有所不同；keyword应将title中的关键词，包括长尾中的段关键词罗列。语义化标签让搜索引擎容易理解网页：恰当使用语义化的html标签、class类名等内容，让页面具有良好的结构和含义，便于浏览器、搜索引擎解析。网站的导航尽量使用纯文字进行导航。重要内容的html代码放在最前面：seo抓取html顺序是由上至下。重要内容不用js输出：爬虫不会执行js获取内容。少用iframe：搜索引擎不会抓取iframe中的内容。非装饰性图片必须加alt。提高网站速度：网站速度是搜索引擎排序的一个重要指标。如何进行网站性能优化：减少http请求：合并css、合并js、利用css sprtes图片精灵合并图片、用LazyLoad Images使得页面刚加载时减少http请求数。将css放在页面最上部，使用<link>引入，不使用@import编写样式。将js放在页面最下面，如果页面解析时就需要用到js

前端性能优化 css和js的加载与执行

阅读更多关于前端性能优化 css和js的加载与执行

一个网站在浏览器端是如何进行渲染的？ html本身首先会被渲染成 DOM 树，实际上 html 是最先通过网址请求过来的，请求过来之后，html 本身会由一个字节流转化成一个字符流，浏览器端拿的就是字符流，然后通过词法分析之后，将相应的语法分析成相应的 token ，比如说 header token，转化不同的 token tag ，然后通过 token 类型 append 到 dom 树。遇到 link token tag，然后去请求 css ，请求过来之后再去对 css 进行解析，生成 CSSOM ，然后和 DOM 树进行结合形成 Render Tree 这样的渲染树。然后再进行布局和渲染。遇到 script tag ，然后去请求 JS 相关的 web 资源，请求回来的 js 会交给浏览器的 v8 引擎进行解析， HTML渲染过程的一些特点 1、顺序执行因为他是使用词法分析的能力，从上到下依次分析整个html,tag 相应的情况，所以第一个特点是顺序执行。词法分析是对 html 这个文档解析的一个方式，对 tag 依次从上到下解析，这个从上到下决定了很多阻塞的情况。 2、并发加载我们的html中可能会引入很多的 css,js 的 web 资源，这些 web 资源在浏览器端是并发加载的，这里需要优化的一点就是这个并发加载过程的并发度是受我们浏览器域名限制的。所以会设置

京东首页项目(1)---总述

阅读更多关于京东首页项目(1)---总述

京东首页项目总述这里做一个京东首页的项目。主要目的是总结和提高 HTML+ CSS 技术。该项目暂不涉及JS相关技术。一、首页效果先看首页完成最终完成的效果说明项目做完后，也会附上项目github地址(包含整个项目的素材和代码)。二、项目介绍 1、设计目标 - 熟悉CSS+DIV布局，页面的搭建工作 - 了解常用电商类网站的布局模式 2、浏览器兼容问题因为浏览器的不同，所以需要我们在前端开发的时候去兼容不同的浏览器，而这部分css样式肯定不需要我们自己去写，这里使用一个叫CSS Rest 类库,为跨浏览器兼容做准备。 normalize.css 只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。它的作用如下： - 保护有用的浏览器默认样式而不是完全去掉它们 - 一般化的样式：为大部分HTML元素提供 - 修复浏览器自身的bug并保证各浏览器的一致性 - 优化CSS可用性：用一些小技巧 - 解释代码：用注释和详细的文档来 3、技术栈 HTML5 结构 + CSS3 布局 (在这里不涉及到JS 和后端技术) 4、目录说明要实现结构和样式相分离的设计思想。根目录下有这4个文件。写代码之前，先引入css基础公共样式文件  <link rel="stylesheet" href="css

阿里巴巴面试题

阅读更多关于阿里巴巴面试题

前端面试题目 1. div和span的区别？ div是块级标签，span是行级标签 2. 在html中，position取值有哪几种，默认值是什么？取值：static、relative、fixed、absolute 默认值：static 3. 前端页面由哪三层构成，分别是什么？作用是什么？前端页面构成：结构层、表示层、行为层结构层（structural layer）由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。” 表示层（presentation layer）由 CSS 负责创建。 CSS对“如何显示有关内容”的问题做出了回答。行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域。 4. 如何居中一个浮动元素？方式1:设置容器的浮动方式为相对定位，然后确定容器的宽高比如宽500 高 300 的层，然后设置层的外边距。 <!DOCTYPEHTML> <html> <head> <styletype="text/css"> div{ width: 500px; height: 300px; margin:

link和@import的区别

阅读更多关于 link和@import的区别

本质上，这两种方式都是为了加载css文件区别 1.从属关系区别 @import 是 CSS 提供的语法规则，只有导入样式表的作用； link 是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。 2.加载顺序区别加载页面时， link 标签引入的 CSS 被同时加载； @import 引入的 CSS 将在页面加载完毕后被加载。 3.兼容性区别 @import 是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别； link 标签作为 HTML 元素，不存在兼容性问题。 4.DOM可控性区别可以通过 JS 操作 DOM ，插入 link 标签来改变样式；由于 DOM 方法是基于文档的，无法使用 @import 的方式插入样式。 5.权重区别(该项有争议，下文将详解) link 引入的样式权重大于 @import 引入的样式。 CSS 选择器的权重高，即选择器的优先级高。 CSS 的优先级特性表现为，对同一 HTML 元素设置样式时，不同选择器的优先级不同，优先级低的样式将被高优先级的样式层叠掉。 CSS 权重优先级顺序简单表示为： !important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符 6.链入方式上有区别。 link导入方式： <link rel="stylesheet" type=

博客园 Markdown CSS样式调整

阅读更多关于博客园 Markdown CSS样式调整

根据博客园的Markdown文章样式优化实战经历，大部分的事情已经搞定了，而且原作者 huizong 已经把所有 .markdown-body 替换成了 .cnblogs-markdown ，不需要自己再手动操作了。 huizong的CSS 我的主题是SimpleMemory，应用后发现个问题：发表后的blockquote样式会和原来的模板重叠，同时有竖线和引号显示。经过检查发布后的元素，发现了一个新的外部容器， .postBody 。如果这个不做修改，那么显示结果仍旧可能会比较糟糕。这就需要在页面定制 CSS 代码中，对于显示不正常的元素，增加一条 .postBody 样式，比如 .postBody blockquote{background:none;} 。增加之后显示正常。其他CSS 对于其他没有定义外部容器的CSS，如果直接应用会影响整个页面的显示。所以要在css里批量加 .cnblogs-markdown 。暂时还没发现什么好的方法。幸好不多，手动改改吧。。推荐少数派CSS ，很好看。来源： https://www.cnblogs.com/bowen404/p/11947458.html

如何通过优化网站提高网页打开速度

阅读更多关于如何通过优化网站提高网页打开速度

网页打开速度慢慢的所造成的影响很重大的，因此站长对于网页打开速度的在意程度也是不断的在加重。但是站长不知道除了外部环境（带宽速度）会影响网页的打开速度之外，网站内部也是存在有影响因素的，不过站长可以通过优化从而提高网页的打开速度。所以香港葵芳IDC小编今天就为大家科普下，优化网页打开速度的内容有哪些。　　　　1、缩小Javascript和CSS文件　　　　如果你的网站大约有50-60%!的(MISSING)用户是第一次访客，那么这些人会下载Javascript和CSS，如果这些文件很大浏览器会下载很长时间。使用压缩工具可以减少Javascript和CSS尽一半的文件大小。同时，使用香港服务器时，我们要开启缓存机制，使用户首次访问时，将图片、CSS和Javascript在其浏览器缓存，这样他们下一次访问就特别快。Apache Web服务器，可以使用mod_cache模块开启缓存。　　　　2、减少HTTP请求　　　　小编告诉你浏览器会花费80%!的(MISSING)时间获取外部元件，包括脚本、样式表、图像等，只有20%!的(MISSING)时间用来加载内容，每个网站都会有许多HTTP请求，由于只有2个HTTP请求可以在同一时间传送，所以请求一旦过多就会造成延迟。通过Yslow等网站性能评分工具可以查看你的网站HTTP请求数，可以看到JS、CSS和CSS引用的图片文件过多

订阅 css优化