Web前端性能优化（二）
Unsplash
1. 一个网站在浏览器端是如何进行渲染的呢？
我们在浏览器地址栏输入网址之后，浏览器会对我们输入的 url 进行解析，并对相应的 IP 地址发起请求，请求所返回的是一段 HTML 文档，浏览器对该段 HTML 文档从上到下进行词法分析，其具体过程为：遇到 HTML 标签时，会生成一个 Token，不同类型的标签会解析成不同的 Token，根据 Token 产生对应的节点 Node，最终这些节点根据其嵌套关系，添加到 DOM 树上
在词法分析的过程中，HTML 文档中会通过 <link> 标签进行 CSS 资源引入，此时浏览器就会 并发 的向互联网或 CDN 请求相关的静态资源，请求回来之后的 CSS 资源同样会被浏览器解析，根据选择器进行匹配并生成相应的 CSSOM 规则树，跟 DOM 树相结合生成渲染树 Render Tree，从而进行布局 Layout 和绘制 Paint，利用渲染树的信息，计算渲染树中所有节点在页面上的位置和大小，填充 Layout 中的具体内容和样式
我们在 HTML 中所引入的外部资源，虽然是并发去请求的，但对于单个域名是存在并发上限的，即并发请求数是有一个上限的，这就导致很多资源没有全部做到并发请求，所以我们在生产环境中，常常会设置 3 到 4 个 CDN 域名
2. 阻塞关系
CSS 和 JS 的加载都会引起阻塞，其中，CSS 通过 <link> 方式在 <head> 中进行引用，会阻塞页面的渲染；CSS 不阻塞 JS 的加载，但会阻塞 JS 的执行，其原因在于 JS 有可能进行 DOM 操作，涉及到 CSS 样式的修改，该操作基于所引入的 CSS 样式基础上进行的
直接引入的 JS 会阻塞页面的渲染，JS 在执行过程中运行 document.write，修改相关的文档结构，阻塞后面节点的创建，影响后续的文档结构渲染和分析，可以通过 defer属性 和 async 方式引入，避免这种情况出现，如果 JS 还操作了 CSSOM，而正好相关的 CSS 资源还没有引入，浏览器甚至会延迟 JS 的执行和 DOM 树的构建，直到完成其 CSSOM 的下载和构建，因此我们在引入 JS 资源时需要遵循两个原则：1. CSS 资源优先引入；2. JS 资源于页面底部引入，并尽量少影响 DOM 树的构建
Webkit 具有预先扫描器和预资源加载器的能力，执行当前 JS 代码的时候，会通过预先扫描器去扫描后面的词是否有引用到其他 JS 资源，就可以使用预先加载器并发的去请求后续资源，所以 JS 的执行不阻塞资源的加载
JS 执行在浏览器中是单线程的，所以 JS 是顺序执行并且会阻塞后续 JS 逻辑的执行，会保持我们引用的依赖关系进行执行
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
