WEB学习进阶之路-之性能优化三

本章主要介绍CSS的优化

1.禁止使用@import

主要原因是以下这几点：

1). @import混合js文件时，在IE中引发资源文件的下载顺序被打乱，即 使排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载

2). link混合@import会破坏并行下载，这是一个很严重的问题，这会导致原本并行下载的样式变成一个一个的同步下载

3). 而仅仅使用LINK 可确保样式在所有浏览器里面都能被并行下载，并且按照顺序被下载

2.style放在head中，不要放在body尾部

如果放在body尾部导致css后下载，body渲染完成后，css加载，不但给用户的体验不好，而且引起页面重绘回流导致性能损失。

3.合并css属性

比如合并border-style border-witdh border-color为border，不过这条不是强制性的，根据情况使用，他的优势就是减少文件大小，加快文件下载速度。

4.避免使用一些特殊的css样式

background-color: expression((new Date()).getHours()%2?"#FFFFFF": "#000000" );

如expression,filter等，一则是因为都是个别浏览器支持，兼容性不好，另外一个则是因为他的效率实在太低下了。

5.利用css的继承机制

比如一些通用的css，可以统一书写，针对不同的属性在个性化设置，这样一来维护有好处，而且文件大小也会缩小。

6.理解css的匹配顺序

书写css选择时，都是从左至右，而浏览器的解析恰恰相反，它是从右至左的。

比如#id > li，首页浏览器查找所有的li标签，然后在过滤ID为id的标签。

7.移除无用的css

一个是减少文件大小，另外一个可以提高浏览器在匹配索引时查找的效率。

8.避免使用通配符或者正则选择器

常见的有*=， |=， ^=， $=， 和 ~=语法的属性选择器。

9.发布版本时，尽量压缩css，合并css

10.内联首屏关键CSS，不过要尽量css尽量小，不超过14.6KB

因为初始拥塞窗口3存在限制（TCP相关概念，通常是 14.6kB，压缩后大小），如果内联CSS后的文件超出了这一限制，系统就需要在服务器和浏览器之间进行更多次的往返，这样并不能提前页面渲染时间。

11.一些不太重要的css可以采用异步加载的方式延迟加载或者懒加载

let laycss = document.createElement("link");

laycss.rel = "stylesheet";

laycss.href = "mystyles.css";

document.head.insertBefore(laycss, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);

12. 尽量降低使用能引起重绘或回流的css样式。

https://csstriggers.com/

引起重绘的常见属性

引起回流的常见属性