(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:重新计算属性
图片回来了 分了两次接受