异步加载CSS

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

前面加载内联代码后，后面的外部引用 css 则没必要阻塞浏览器渲染。这时候就可以采取异步加载的方案，主要有如下：

• 使用javascript将link标签插到head标签最后

1. // 创建link标签 
2. const myCSS = document.createElement( "link" ); 
3. myCSS.rel = "stylesheet"; 
4. myCSS.href = "mystyles.css"; 
5. // 插入到header的最后位置 
6. document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length – 1 ].nextSibling ); 

• 设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将 media 的值设为 screen 或 all ，从而让浏览器开始解析CSS

1. <link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'"> 

• 通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet

1. <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 等，会降低浏览器的渲染性能