浏览器渲染网页的过程

Karuru 发布于2019-08-23 16:49 / 2622人阅读

摘要：异步请求线程在在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到引擎的处理队列中等待处理。

浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。

浏览器的线程

浏览器是多线程的，它们在内核制控下相互配合以保持同步。一个浏览器至少实现三个常驻线程：JavaScript 引擎线程，GUI 渲染线程，浏览器事件触发线程。

GUI 渲染线程：负责渲染浏览器界面 HTML 元素，当界面需要重绘（Repaint）或由于某种操作引发回流（reflow）时，该线程就会执行。在 Javascript 引擎运行脚本期间，GUI 渲染线程都是处于挂起状态的，也就是说被”冻结”了。

JavaScript 引擎线程：主要负责处理 Javascript 脚本程序

定时器触发线程：浏览器定时计数器并不是由 JavaScript 引擎计数的， JavaScript 引擎是单线程的，如果处于阻塞线程状态就会影响记计时的准确，因此浏览器通过多带带线程来计时并触发定时。

事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待 JS 引擎的处理。这些事件包括当前执行的代码块如定时任务、浏览器内核的其他线程如鼠标点击、AJAX 异步请求等。由于 JS 的单线程关系所有这些事件都得排队等待 JS 引擎处理。定时块任何和 ajax 请求等这些异步任务，事件触发线程只是在到达定时时间或者是 ajax 请求成功后，把回调函数放到事件队列当中。

异步 HTTP 请求线程：在 XMLHttpRequest 在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript 引擎的处理队列中等待处理。在发起了一个异步请求时，http 请求线程则负责去请求服务器，有了响应以后，事件触发线程再把回到函数放到事件队列当中。

浏览器渲染流程 1.解析 html，构建 dom 树；解析 CSS 会产生 CSS 规则树

浏览器解析 HTML 文档的源码，然后构造出一个 DOM 树，DOM 树的构建过程是一个深度遍历的过程，当前节点的所有子节点都构建好以后才会去构建当前节点的下一个兄弟节点。

浏览器对 CSS 文件内容进行解析，一般来说，浏览器会先查找内联样式，然后是 CSS 文件中定义的样式，最后再是浏览器默认的样式，构建 CSS Rule Tree。

2.构建（construct） render 树

根据 DOM 树和 CSSOM 树来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像 Header 或 display:none 的东西就没必要放在渲染树中了。

3.布局（layout） render 树

有了 Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的 CSS 定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。

4.绘制（painting） render 树

按照算出来的规则，通过显卡，把内容画到屏幕上。

5.回流（reflow）

当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从这个 root frame 开始递归往下，依次计算所有的结点几何尺寸和位置。

6.重绘（repaint）

改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

浏览器对 CSS 和 JS 的解析规则

CSS：

CSS 放在 head 中会阻塞页面的渲染（页面的渲染会等到 css 加载完成）

CSS 阻塞 JS 的执行（因为 GUI 线程和 JS 线程是互斥的，因为有可能 JS 会操作 CSS）

CSS 不阻塞外部脚本的加载（不阻塞 JS 的加载，但阻塞 JS 的执行，因为浏览器都会有预先扫描器）

JS：

直接引入的 JS 会阻塞页面的渲染（GUI 线程和 JS 线程互斥）

异步加载的 JS（script 标签中添加 defer 属性）不阻塞页面的渲染

异步加载的 JS（script 标签中添加 async属性），下载过程不阻塞页面渲染，当下载完成后立即执行，阻塞页面渲染

JS 不阻塞资源的加载

JS 顺序执行，阻塞后续 JS 逻辑的执行

HTML 页面加载和解析流程

用户输入网址（假设是个 html 页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回 html 文件；

浏览器开始载入 html 代码，发现＜ head ＞标签内有一个＜ link ＞标签引用外部 CSS 文件；

浏览器发出 CSS 文件的请求，服务器返回这个 CSS 文件；（同时 GUI 渲染线程继续执行，互不影响）

浏览器继续载入 html 中＜ body ＞部分的代码，并且 CSS 文件已经拿到手了，开始渲染页面；

浏览器在代码中发现一个＜ img ＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

浏览器发现了一个包含一行 Javascript 代码的＜ script ＞标签，直接运行；

Javascript 脚本操作某个元素，它命令浏览器隐藏掉代码中的某个标签（style.display=”none”）。浏览器会重新渲染这部分代码；

遇到＜/html ＞，流程结束；

当用户操作，页面产生交互，浏览器发现某个部分发生了点变化影响了布局，浏览器回流（reflow）；改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，浏览器重绘（repaint）。

HTML 页面加载优化

页面减肥。页面的肥瘦是影响加载速度最重要的因素删除不必要的空格、注释。将 inline 的 script 和 css 移到外部文件，可以使用 HTML Tidy 来给 HTML 减肥，还可以使用一些压缩工具来给 JavaScript 减肥；

减少文件数量。减少页面上引用的文件数量可以减少 HTTP 连接数。许多 JavaScript、CSS 文件可以合并最好合并；

减少域名查询。DNS 查询和解析域名也是消耗时间的，所以要减少对外部 JavaScript、CSS、图片等资源的引用，不同域名的使用越少越好；

缓存重用数据；

优化页面元素加载顺序。首先加载页面最初显示的内容和与之相关的 JavaScript 和 CSS，然后加载 DHTML 相关的东西，像什么不是最初显示相关的图片、flash、视频等很肥的资源就最后加载；

减少 inline JavaScript 的数量。浏览器 parser 会假设 inline JavaScript 会改变页面结构，所以使用 inline JavaScript 开销较大，不要使用 document.write()这种输出内容的方法，使用现代 W3C DOM 方法来为现代浏览器处理页面内容；

使用现代 CSS 和合法的标签。使用现代 CSS 来减少标签和图像，例如使用现代 CSS+文字完全可以替代一些只有文字的图片，使用合法的标签避免浏览器解析 HTML 时做“error correction”等操作，还可以被 HTML Tidy 来给 HTML 减肥；

不要使用嵌套 tables；

指定图像和 tables 的大小。如果浏览器可以立即决定图像或 tables 的大小，那么它就可以马上显示页面而不要重新做一些布局安排的工作，这不仅加快了页面的显示，也预防了页面完成加载后布局的一些不当的改变。

参考文章

网页在浏览器上的渲染过程

性能优化——CSS和JS的加载和执行

浏览器渲染原理及流程

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103337.html

影响网页渲染的关键

摘要：最优化渲染路径，实际上只要聚焦三件事情最小化关键资源的数量最小化关键字节数最小化关键路径的长度理解页面加载速度的测量办法当百度谈论页面加载速度时，他们并不是指加载一个网页的总时间。张超 — MAY 21, 2015 经常有站长、开发者、运维疑惑：为什么我们的后台服务器很快，但是用户要看网页里面的内容却需要很长时间？我们在上一篇文章《怪兽大作战: 解析网站打开慢的原因》中简单介绍了影...

weknow619 2019-05-28 16:53 评论0 收藏0
webkit渲染机制浅析

摘要：模块和将下面的渲染机制，安全机制，插件机制等等隐藏起来，提供一个接口层。进行网页的渲染进程，可能有多个。最后进程将结果由线程传递给进程最后，进程接收到结果并将结果绘制出来。这是之前在简书上面的处女作，也搬过来了，以后就一直在 segmentfault 上面写文章了，webkit技术内幕-朱永盛是我大四买的书，很旧的一本书了，当时只看了一点点，一直没继续看完它，现在才看完，，，说来惭愧...

Cobub 2019-08-02 11:03 评论0 收藏0
面试题之从敲入 URL 到浏览器渲染完成

摘要：响应由三个部分组成，分别是状态行消息报头响应正文。详情参考小汪之前写的文章浏览器内核之解释器和模型解释解释过程是指从字符串经过解释器处理后变成渲染引擎内部规则的表示过程。 showImg(https://segmentfault.com/img/remote/1460000016404846); 前言小汪最近在看【WebKit 技术内幕】一书，说实话，这本书写的太官方了，不通俗易懂。...

MAX_zuo 2019-08-23 11:59 评论0 收藏0
Webkit 渲染基础与硬件加速

摘要：网页的渲染方式主要有两种软件渲染和硬件加速渲染。而使用合成化的渲染技术，以使用软件绘图的合成化渲染为例，对于使用绘制的层，其结果保存在内存中，之后传输到中进行合成。 Webkit 渲染基础与硬件加速当浏览器加载一个 html 文件并对它进行解析完毕后，内核就会生成一个极为重要的数据结构即 DOM 树，树上每一个节点都对应着网页里面的某一个元素，并且开发人员也可以通过 JavaScri...

ivan_qhz 2019-08-22 15:14 评论0 收藏0
浏览器渲染网页的过程

摘要：异步请求线程在在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到引擎的处理队列中等待处理。浏览器的主要功能是将用户选择的 web 资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是 HTML，也包括 PDF、image 及其他格式。浏览器的线程浏览器是多线程的，它们在内核制控下相互配合以保持同...

thekingisalwaysluc 2019-08-02 16:12 评论0 收藏0