(一)解析 style 内联样式
1. style 标签里的样式是异步解析的,容易产生“闪屏”现象,浏览器加载资源是异步的,边加载边渲染
下面就是加载 style 内联标签的纪录,内联标签必须足够大,6000多行差不多吧,可以看出是一边加载html,一边解析,加载一点,解析一点,html 中的 style 内联标签是用HTML 解析器解析的
加载一点 解析一点就会产生 “闪屏” 现象,HTML 是异步解析的,不会阻塞浏览器渲染,不会阻塞DOM解析
(二)link 标签外链css文件
Parse Stylesheet,解析 css 样式,只解析一次,是同步的,等所有的 css 全部加载完再解析,所以只会看到一次 Parse Stylesheet,
如果我在页面中引入了两个 link css 外部标签
先从 HTML 开始解析,发送了三个 request,一个图片以及两个 link css
每一个link css 样式表都要解析。。。如果link 没加载完成,谁都不能动,都在那等着,阻塞浏览器渲染、阻塞后面js语句的执行,不阻塞 DOM 解析
HTML 发起资源请求,等待资源加载,css 资源全部加载回来后,统一解析,解析完毕后,统一渲染页面
(三)style 标签 和 link 外样式对比,比如 6000 多行代码就是改一个 div 的背景颜色、
style:内联
一进页面,就看见了盒子,这个盒子背景颜色 赤橙红绿青蓝紫 闪一遍,最终颜色是紫色 (过程都看出来)
link:外链
一进页面先空白,因为这个时候在请求资源、解析,等着 Stylesheet 解析完了,统一渲染,盒子出来,背景颜色是紫色 (只看见结果)
所以我们一般用 link 外链,只向用户显示最终结果,画个图吧
所以 外链 css 会阻塞页面渲染
(四)性能优化的方法
1. 使用 cdn 节点进行外部资源加速
2. 对 css 进行压缩,比如使用(webpack、gulp等)
3. 减少 http 资源请求次数,多个 css 文件合并
4. 优化样式表的代码
不阻塞加载 阻塞解析
https://www.jianshu.com/p/9c71c70be3dc
阻塞比如 css 外部链接的内容 2s 后返回