浏览器工作原理与实践 课程学习笔记
一、DOM怎么生成的
浏览器开启下载文件后，就要开始生成DOM树了。问题：DOM树是怎么生成的？
在渲染引擎内部，有一个叫HTML 解析器（HTMLParser）的模块，它的职责就是负责将 HTML 字节流转换为 DOM 结构。
解析原理:HTML字节流 -> 分词器 (文本 & Tag)token -> 生成 Node 节点 -> DOM
这里老师还回答了一个问题： HTML 解析器是等整个 HTML 文档加载完成之后开始解析的，还是随着 HTML 文档边加载边解析的？
答案是后者：HTML 解析器并不是等整个文档加载完成之后再解析的，而是网络进程加载了多少数据，HTML 解析器便解析多少数据。
具体流程引入一段原文：
网络进程接收到响应头之后，会根据响应头中的 content-type 字段来判断文件的类型，比如 content-type 的值是“text/html”，那么浏览器就会判断这是一个 HTML 类型的文件，然后为该请求选择或者创建一个渲染进程。渲染进程准备好之后，网络进程和渲染进程之间会建立一个共享数据的管道，网络进程接收到数据后就往这个管道里面放，而渲染进程则从管道的另外一端不断地读取数据，并同时将读取的数据“喂”给 HTML 解析器。你可以把这个管道想象成一个“水管”，网络进程接收到的字节流像水一样倒进这个“水管”，而“水管”的另外一端是渲染进程的 HTML 解析器，它会动态接收字节流，并将其解析为 DOM。
二、JS 对 DOM 树的影响
DOM在解析过程中， 如果遇到 Javascript 标签时，会暂停整个DOM解析，执行Javascript 代码。如果是需要下载JS文件，那就看网络情况及文件大小判断下载时间的影响。
解决策略:
- 使用 CDN 来加速 JavaScript 文件的加载，
- 压缩 JavaScript 文件的体积。
- 如果 JavaScript 文件中没有操作 DOM 相关代码，就可以将该 JavaScript 脚本设置为异步加载，通过 async 或 defer 来标记代码。（async 和 defer 虽然都是异步的，不过还有一些差异，使用 async 标志的脚本文件一旦加载完成，会立即执行；而使用了 defer 标记的脚本文件，需要在 DOMContentLoaded 事件之前执行。）
三：CSS对DOM的影响
JavaScript 引擎在解析 JavaScript 之前，是不知道 JavaScript 是否操纵了 CSSOM 的，所以渲染引擎在遇到 JavaScript 脚本时，不管该脚本是否操纵了 CSSOM，都会执行 CSS 文件下载，解析操作，再执行 JavaScript 脚本。
文章隐藏的一个优化的常规操作就是， CSS 放在 JS 文件前，可以优先下载，当然同域名下可以同时开启6个TCP请求，未必能先下完，但也先放前面。
网友评论