文章目录
本文介绍一些CSS性能优化的方案。
一、内联首屏关键CSS
渲染的大概流程:
- 加载HTML资源
- 解析HTML
- 加载CSS资源,同时构建DOM树
- 解析CSS,同时渲染DOM树
当CSS文件过大,就会停留在第3步,网速慢时,打开网站的时候经常遇到没有样式的情况。
所以我们需要先加载部分CSS(首屏需要用到的CSS),其他优先级比较低的CSS就以异步的方式加载。
将渲染首屏内容所需的关键CSS内联到HTML中,能使CSS更快速地下载。在HTML下载完成之后就能渲染了,页面渲染的时间提前,从而缩短首屏渲染时间;
其余CSS使用外部CSS文件,在HTML文档下载完成后再下载它们。这样能够启用缓存,除此之外还可以异步加载它们。
缺点:内联之后的CSS不会进行缓存,每次都会重新下载。
二、异步加载CSS
CSS会阻塞渲染,在CSS文件请求、下载、解析完成之前,浏览器将不会渲染任何已处理的内容。有时,这种阻塞是必须的,因为我们并不希望在所需的CSS加载之前,浏览器就开始渲染页面。那么将首屏关键CSS内联后,剩余的CSS内容的阻塞渲染就不是必需的了,可以使用外部CSS,并且异步加载。
异步加载的几种方式
1.js动态创建样式表link元素,并插入到DOM中。
// 创建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 );
2.设置media属性
将link元素的media属性设置为用户浏览器不匹配的媒体类型(或媒体查询),如media=“print”,甚至可以是完全不存在的类型media=“noexist”。对浏览器来说,如果样式表不适用于当前媒体类型,其优先级会被放低,会在不阻塞页面渲染的情况下再进行下载。
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all&#