（1）浏览器内核（渲染引擎）
在浏览器中有一个最重要的模块，它主要把一切请求回来的资源变为可视化的图像，这个模块就是浏览器内核，通常也被称为渲染引擎。
这让我想起了在工作中做项目的时候，遇到视频自动播放问题，在 video 标签中设置了 autoplay 为 true，但是有的浏览器能够自动播放，有的浏览器就不能，这时候同事说是浏览器内核不同，这就是原因吧
（2）浏览器渲染引擎
一个渲染引擎主要包括：HTML解析器、CSS解析器、javascript 引擎、布局 Layout 模块、绘图模块
还有其他的，这几个是主要的，每个模块的工作内容如下：
HTML解析器：解释 HTML 文档的解析器，主要作用是将 HTML 文本解释成 DOM 树 （HTML ---> DOM 树）
CSS 解析器：将DOM中各个元素计算出样式信息，为布局提供基础设施
Javascript 引擎：使用 Javascript 代码可以修改网页的内容，也可以修改css信息，javascript 引擎能够解释javascript 代码，并通过 DOM 接口来修改网页的内容和样式
Layout布局：在DOM创建后，浏览器需要将内容和样式结合起来，计算每个元素的大小以及位置信息，形成一个能表达所有信息的内部模型
绘图模块（Paint）：使用图形库将布局计算后的各个网页的结点绘制成图像
（3）浏览器的大致渲染流程
浏览器会从上到下解析文档：
1. 遇见 HTML 标记：调用HTML解析器，构建DOM树 （形成DOM树）
2. 遇见 style/link 标记：调用相应解析器处理css标记，并构建css样式树 （形成CSS样式树）
3. 遇见 script 标记：调用 javascript 引擎，处理 script 标记、绑定事件、修改 DOM 树/CSS样式树等
4. 将 DOM树、CSS树结合，生成渲染树 （Render树）
5. 根据渲染树来渲染
6. 最终 将各个节点绘制到屏幕上
（4）举例子
<div class="wrapper">
<span>会员级别</span>
<span class='level-num'>初级</span>
</div> 
两者结合生成渲染树
（5）看浏览器渲染日志：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./1.png" alt="">
</body>
</html>
1. Send Resquest：向浏览器发起请求
2. Receive Response：收到页面的先头部队，响应头，比如类型 text/type
3. Receive Data：接受到完整的数据
4. Finish Loading：加载完成 (拿到完整的HTML页面)
5. Parse HTML：解析 HTML
遇到图片：发送图片请求 （Send Request）
Recalculate Style：重新计算属性
图片回来了 分了两次接受
860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
