超级会员免费看
本文详细介绍了浏览器渲染页面的流程，从HTML字节流解码、输入流预处理、令牌化到DOM树构建，再到CSSOM树的生成，最后如何通过渲染树、布局和绘制将DOM和CSSOM合成为可视页面。在解析过程中，浏览器会暂停执行内联script，处理document.write等特殊情况。
假设我们在浏览器中输入了一个网址，得到了下面的 html 文件，渲染引擎是怎样通过解析代码生成页面的呢？
<html>
<head>
</head>
<body>
CSDN
</body>
</html>
一、从HTML到DOM
1、字节流解码
对于上面的代码，我们看到的是它的字符形式。浏览器通过 HTTP 协议接收到的文档内容是字节数据，下图是抓包工具截获的报文截图，报文内容为左侧高亮显示的区域（为了查看方便，该工具将字节数据以十六进制方式显示）。当浏览器得到字节数据后，通过“编码嗅探算法”来确定字符编码，然后根据字符编码将字节流数据进行解码，生成截图右侧的字符数据，也就是我们编写的代码。
这个把字节数据解码成字符数据的过程称之为“字节流解码”。
我们通过浏览器调试工具查看网络请求时，也是经过了上述操作过程，才能直观地看到字符串。
订阅专栏 解锁全文
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
