css性能 | helenNote

# 这一节主要讲css网络性能：

样式表不要太大：例如1M
- 因为下载样式表、直到解析样式表，花费的时间会很多。
- 把大文件分解为多个小文件。
不要在样式表里放置base64格式的图片
- 因为这影响了关键帧的渲染——把非关键资源放在了关键路径上
- 页面会渲染缺少图片的页面，但是不会渲染缺少css的页面。
不要再样式表里使用@import引入其他css
- 会导致网络延迟。使用@import的css文件会被单独下载，知道下载完成之后才去下载其他文件，这就丢掉了网络并行下载【浏览器在http1.1下可同时下载5个左右的文件】的能力。
  - 此时样式表里一旦发现使用@import引入了样式表，那么会先暂停cssdom的生成，先下载被引入的css然后解析这个css，之后再继续往后生成ccdom。
- 修复方法：把css全部通过link标签写在页面里。
浏览器是从右向左读取css选择器的。
- 因为浏览器想尽早确认是否能匹配到结果：如果最右边的第一个选择器都匹配不到结果，那么选择器就没有必要再启用左侧的选择器了，他就可以丢弃这个css样式了不去处理。
- 不要在css里写标签、*号选择器，因为浏览器视图去匹配页面所有标签。
- 子元素选择器比非子元素选择器快，例如：ul > li > .block 快于 ul li .block
  - 因为子元素选择器匹配元素时只做一个层级的dom检查，做的事情更少。
按顺字母排序写你的css
- 这样得到gzip的文件更小。tcp/ip每次只能携带大约14kb的内容，如果一个css文件使用@mixin的方式去写压缩得到14kb大小的gzip文件；而使用@extend的方式被压缩过后文件大于14kb，此时就需要2此tcp/ip连接，浪费时间。
  - 所以我们在使用@mixin和@extend去写sass时，我们选择@mixin。如下：
  - ，编译之后如下;
  - ，尽管@mxin产生的文件更大，但是压缩效果更好，因为里面重复的内容更多【gzip更喜欢重复的内容】。
我们把资源放在不同的域中时，请求主域之外的资源时是会增加额外的dns tcp和tls协商时间
- 我们可以启用http2来除去这些额外的时间开销
- 如果我们使用的是http1.1那么可以使用link标签开启预计解析来减少这些时间。
link元素放在页面的头部。不要将link标签放在body里，会阻塞页面的渲染。如果发现body里有link标签，那么就会【发现样式表=》暂停渲染=》下载并解析样式表=》渲染，如此循环】
把大的css文件拆分为多个小的css文件。因为css文件在未完全下载之前页面无法被渲染。
- 分解为多个小的css利用到了并行加载，可以更快的下载并解析css。
在头部的js脚本代码之前不要有任何样式：否则会等到样式文件下载并解析之后才会下载/执行脚本，失去了对于网络并行加载资源（浏览器支持在同一个域中并行加载5~6个资源）的能力。正确的做法是js代码【script标签】之后才是css。