如果要做优化，CSS提高性能的方法有哪些？

一、序言

每两个页面都有赖于css，但许多人又认为，css主要就是用以顺利完成页面产业布局的，像一些技术细节或是强化，就不须要怎么考量，事实上这种设想是不恰当的

作为页面图形和文本展现出的关键步骤，css负面影响着使用者对整个中文网站的第三新体验

因此，在整座产品研制操作过程中，css操控性强化反之亦然须要横跨不间断

二、同时实现形式

同时实现形式有许多种不同，主要就有如下表所示：

H55N井字关键性CSS触发器读取CSS天然资源填充科学合理采用示例增加采用高昂的特性千万别采用@import

H55N井字关键性CSS

在关上两个页面，页面重中之重文本出现在萤幕的天数负面影响着使用者的新体验，而通过H55Ncss关键性标识符能使应用程序在浏览完html后就能马上图形

而假如内部提及css标识符，在导出html内部结构操作过程中碰到内部css文档，才会开始浏览css标识符，再图形

所以，CSSH55N采用使图形天数提早

特别注意：但非常大的css标识符并不最合适H55N（如上所述冗余询问处、没有内存），而余下标识符则采行内部提及形式

触发器读取CSS

在CSS文档允诺、浏览、导出顺利完成以后，CSS会堵塞图形，应用程序将不会图形任何人已处置的文本

前面读取H55N标识符后，前面的内部提及css则没必要性堵塞应用程序图形。这时就可以采行触发器读取的计划，主要就有如下表所示：

采用javascript将link条码插到head条码最终

// 建立link条码 const myCSS = document.createElement( “link” ); myCSS.rel = “stylesheet”; myCSS.href = “mystyles.css”; // 填入到header的最终边线 document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length – 1 ].nextSibling );

增设link条码media特性为noexis，应用程序会认为当前样式表不适用当前类型，会在不堵塞页面图形的情况下再进行浏览。读取顺利完成后，将media的值设为screen或all，从而让应用程序开始导出CSS

通过rel特性将link元素标记为alternate可选样式表，也能同时实现应用程序触发器读取。反之亦然别忘了读取顺利完成之后，将rel设回stylesheet

天然资源填充

利用webpack、gulp/grunt、rollup等模块化工具，将css标识符进行填充，使文档变小，大大降低了应用程序的读取天数

科学合理采用示例

css匹配的规则是从右往左开始匹配，例如#markdown .content h3匹配规则如下表所示：

先找到h3条码元素然后去除祖先不是.content的元素最终去除祖先不是#markdown的元素

假如嵌套的层级更多，页面中的元素更多，那么匹配所要花费的天数代价自然更高

所以我们在编写示例的时候，可以遵循以下规则：

千万别嵌套采用过多复杂示例，最好千万别三层以上采用id示例就没必要性再进行嵌套通配符和特性示例效率最低，避免采用

增加采用高昂的特性

在页面发生重绘的时候，高昂特性如box-shadow/border-radius/filter/透明度/:nth-child等，会降低应用程序的图形操控性

千万别采用@import

css样式文档有两种引入形式，一种是link元素，另一种是@import

@import会负面影响应用程序的并行浏览，使得页面在读取时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致浏览顺序紊乱

比如两个css文档index.css包含了以下文本：@import url(“reset.css”)

那么应用程序就必须先把index.css浏览、导出和执行后，才浏览、导出和执行第二个文档reset.css

其他

增加重排操作，以及增加不必要性的重绘了解什么样特性可以继承而来，避免对这些特性重复编写cssSprite，合成所有icon图片，用宽高加上backgroud-position的背景图形式显现出我们要的icon图，增加了http允诺把小的icon图片转成base64编码CSS3动画或是过渡尽量采用transform和opacity来同时实现动画，千万别采用left和top特性