实现方式有很多种,主要有如下:
① 内联首屏关键CSS ② 异步加载CSS ③ 资源压缩
④ 合理使用选择器 ⑤ 减少使用昂贵的属性 ⑥ 不要使用@import
⑦ 减少重排和不必要的重绘 ⑧ 其他
① 内联首屏关键CSS
在打开一个页面,页面首要内容出现在屏幕的时间影响着用户的体验,而通过内联
css
关键代码能够使浏览器在下载完html
后就能立刻渲染。而如果外部引用css
代码,在解析html
结构过程中遇到外部css
文件,才会开始下载css
代码,再渲染。所以,CSS
内联使用使渲染时间提前。注意:但是较大的
css
代码并不合适内联(初始拥塞窗口、没有缓存),而其余代码则采取外部引用方式
② 异步加载CSS
在
CSS
文件请求、下载、解析完成之前,CSS
会阻塞渲染,浏览器将不会渲染任何已处理的内容。前面加载内联代码后,后面的外部引用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<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
- 通过rel属性将link元素标记为alternate可选样式表,也能实现浏览器异步加载。同样别忘了加载完成之后,将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.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
⑦ 减少重排操作,减少不必要的重绘
避免设置大量的style属性,因为通过设置style属性改变结点样式的话,每一次设置都会触发一次reflow,所以最好是使用class属性
实现元素的动画,它的position属性,最好是设为absoulte或fixed,这样不会影响其他元素的布局
动画实现的速度的选择。比如实现一个动画,以1个像素为单位移动这样最平滑,但是reflow就会过于频繁,大量消耗CPU资源,如果以3个像素为单位移动则会好很多。
不要使用table布局,因为table中某个元素旦触发了reflow,那么整个table的元素都会触发reflow。那么在不得已使用table的场合,可以设置table-layout:auto;或者是table-layout:fixed这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围
CSS3动画或者过渡尽量使用transform和opacity来实现动画,不要使用left和top属性
⑧ 其他
- 了解哪些属性可以继承而来,避免对这些属性重复编写;
- cssSprite,合成所有icon图片,用宽高加上backgroud-position的背景图方式显现出我们要的icon图,减少了http请求
- 把小的icon图片转成base64编码
总结
css
实现性能的方式可以从选择器嵌套、属性特性、减少http
这三面考虑,同时还要注意css
代码的加载顺序