前端性能优化-CSS性能优化

本文介绍一些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'">

当然，这么做只是为了实现CSS的异步加载，