前端性能优化

HTML渲染过程

style标签中的样式

由html解析器解析
不阻塞浏览器的渲染（可能会产生闪屏现象）
不阻塞DOM解析

link引入的外部css样式

由css解析器解析
阻塞浏览器渲染（可以利用这种阻塞避免闪屏）
不阻塞DOM解析（DOM的解析和CSS的解析是并行）
1.外部css会阻塞后续脚本的执行，直到外部样式加载并解析完毕
2.外部css不会阻塞外部脚本的加载，但会阻塞外部脚本的执行
3.如果后续外部脚本含有async或者defer，外部样式不会阻塞该脚本的加载与执行
4.动态创建的css不会阻塞其后动态创建的js加载与执行，不管其是否含有async属性。但对于非动态创建的js，以上三条仍使用
5.css样式表会阻塞渲染树的构建，但 DOM 树依然继续构建（除非遇到 script 标签且 css 文件此时仍未加载完成），但不会渲染绘制到页面上。页面的渲染是依靠render树，也就是说如果css没有加载完成，页面也不会渲染显示。

js阻塞

1.JS脚本会阻塞DOM 和渲染树的构建，
在html解析过程中，解析器如果遇到Script标签会立即解析并执行内容，
如果该脚本是外部的，那么解析会停止，直到从网络资源抓取并执行完毕，在解析后续内容
2.阻塞后续js执行