css优化处理

css优化处理

优化原则：减少css样式的渲染加载时间，通过削减css样式的代码体积等相关操作

实践型优化：

1、内联首屏关键CSS（Critical CSS）：内联CSS能够使浏览器开始页面渲染的时间提前

• 性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间
• 这一指标影响用户看到页面前所需等待的时间，而内联首屏关键CSS（即Critical CSS，可以称之为首屏关键CSS）能减少这一时间。

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

2、异步加载CSS

• CSS会阻塞渲染，在CSS文件请求、下载、解析完成之前，浏览器将不会渲染任何已处理的内容。

• 有时，这种阻塞是必须的，因为我们并不希望在所需的CSS加载之前，浏览器就开始渲染页面。 那么将首屏关键CSS内联后，剩余的CSS内容的阻塞渲染就不是必需的了，可以使用外部CSS，并且异步加载

• 使用JavaScript动态创建样式表link元素，并插入到DOM中。

• 将link元素的media属性设置为用户浏览器不匹配的媒体类型（或媒体查询），如media=“print”，甚至可以是完全不存在的类型media=“noexist”。对浏览器来说，如果样式表不适用于当前媒体类型，其优先级会被放低，会在不阻塞页面渲染的情况下再进行下载。

3、文件压缩
通过相关的构建工具对css样式进行打包压缩，去除多余的空格和换行。如 webpack、rollup、grunt/gulp.js 等

4、去除无用CSS

• 筛选去除相关重复的css样式
• 去除在页面中无法生效或不生效的css样式

建议型优化：

1、有选择地使用选择器

2、减少使用昂贵的属性

• 在浏览器绘制屏幕时，所有需要浏览器进行操作或计算的属性相对而言都需要花费更大的代价。

• 当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写CSS时，我们应该尽量减少使用昂贵属性
  昂贵属性： 如box-shadow/border-radius/filter/透明度/伪类:nth-child()等

3、优化重排与重绘

• 减少重排
  1. 重排会导致浏览器重新计算整个文档，重新构建渲染树，这一过程会降低浏览器的渲染速度。有很多操作会触发重排，我们应该避免频繁触发这些操作。
• 避免不必要的重绘
  1. 当元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘。
  2. 在网站的使用过程中，重绘是无法避免的。不过，浏览器对此做了优化，它会将多次的重排、重绘操作合并为一次执行。
  3. 不过我们仍需要避免不必要的重绘，如页面滚动时触发的hover事件，可以在滚动的时候禁用hover事件，这样页面在滚动时会更加流畅。

4、不要使用@import

• 首先，使用@import引入CSS会影响浏览器的并行下载。使用@import引用的CSS文件只有在引用它的那个css文件被下载、解析之后，浏览器才会知道还有另外一个css需要下载，这时才去下载，然后下载后开始解析、构建render tree等一系列操作。这就导致浏览器无法并行下载所需的样式文件。

• 其次，多个@import会导致下载顺序紊乱。在IE中，@import会引发资源文件的下载顺序被打乱，即排列在@import后面的js文件先于@import下载，并且打乱甚至破坏@import自身的并行下载

—————————————————
“ 核桃品相不好，怎么盘也是徒劳 ”