css提高性能的方法

一提到css，但是很多人都认为css主要是用来完成页面布局的，没有想过做些优化，css作为整个网站的第一体验，css性能优化同样要进行实现

内联css：

通过内联css代码能够使浏览器在下载完html后就能立刻渲染

资源压缩：

利用 webpack 模块工具，将css代码进行压缩，使文件更小，大大降低了浏览器的加载时间

异步加载css：

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

 // 异步加载css
    var link = document.createElement("link");
    link.type = "text/css";
    link.rel = "stylesheet";
    link.href = 'css/style.css';
    document.getElementsByTagName("head")[0].appendChild(link);

效果：

2、设置link标签media属性为noexis，浏览器会认为当前样式不适合当前类型，会在不阻塞页面的情况下进行下载，加载完成后再将media的值设为screen或all，浏览器重新解析css

<link rel="stylesheet" href="css/style,css" media="noexist" onload="this.media='all'">

3、设置rel属性将link元素记为alternate可选样式表，也能实现浏览器异步加载，加载完成后将rel设置回stylesheet

<link rel="alternate stylesheet" href="css/style,css" media="noexist" onload="this.rel='stylesheet'">

合理使用选择器

css匹配规则是从右往左匹配的，例如：#app .box h1 匹配规则：

先找h1标签元素  ==>  去除祖先不是.box的元素 ==> 去除不是#app的元素

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

所以使用id选择器就没必要再进行嵌套 。通配符和属性选择器效率最低，避免使用减少使用昂贵的属性

不要使用@import

@import会影响浏览器的并行下载，使得页面在加载时增加额外的延迟，增添了额外的往返耗时

而且多个@import可能会导致下载顺序紊乱

减少重绘和回流

批量操作 DOM，比如读取某元素 offsetWidth 属性存到一个临时变量，再去使用，而不是频繁使用这个计算属性；又比如利用 document.createDocumentFragment() 来添加要被添加的节点，处理完之后再插入到实际 DOM 中。

使用 absolute 或 fixed 使元素脱离文档流，这在制作复杂的动画时对性能的影响比较明显。

开启 GPU 加速，利用 css 属性 transform  、will-change  等，比如改变元素位置，我们使用 translate 会比使用绝对定位改变其 left 、top 等来的高效，因为它不会触发重排或重绘，transform 使浏览器为元素创建⼀个 GPU 图层，这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变，就没有必要进行重绘。