标签：属性 哪些 CSS 使用 加载 优化 选择器 css 页面

加载性能

css压缩：将写好的css进行打包压缩，可以减小文件体积。

css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。

减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能

• 关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。

当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；

• 如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

• 避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

• 尽量少的去对标签进行选择，而是用class。

• 尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

• 了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能

• 慎重使用高性能属性：浮动、定位。

• 尽量减少页面重排、重绘。

• 去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

• 属性值为0时，不加单位。

• 属性值为浮动小数0.**，可以省略小数点之前的0。

• 标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

• 不使用@import前缀，它会影响css的加载速度。

• 选择器优化嵌套，尽量避免层级过深。

• css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

• 正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

• 不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性

将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

样式与内容分离：将css代码定义到外部css中。

标签：属性,哪些,CSS,使用,加载,优化,选择器,css,页面
来源： https://www.cnblogs.com/anpu/p/16330942.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。