浏览器如何渲染HTML

来源：互联网发布：郭正亮知乎编辑：程序博客网时间：2024/05/01 04:40

浏览器如何渲染HTML这个问题我之前是没想过的，机缘巧合今天了解起这方面的知识。希望能对小伙伴们有所帮助。

渲染，也就是把请求的内容显示到浏览器屏幕上。
渲染引擎会在Webkit中这些对象被称为渲染器或渲染对象，而在Gecko中称之为“frame”。）
为了更好的用户体验，渲染引擎会尝试尽快的把内容显示出来。它不会等到所有HTML都被解析完才创建并布局渲染树。它会处理后续内容的同时把处理过的局部内容先展示出来。

渲染html的顺序
1. 下载的顺序是从上到下，渲染的顺序也是从上到下，下载和渲染是同时进行的。
2. 在渲染到页面的某一部分时，其上面的所有部分都已经下载完成（并不是说所有相关联的元素都已经下载完）。
3. 如果遇到语义解释性的标签嵌入文件（JS脚本，CSS样式），那么此时下载过程会启用单独连接进行下载。
4. 样式表在下载完成后，将和以前下载的所有样式表一起进行解析，解析完成后，将对此前所有元素（含以前已经渲染的）重新进行渲染。
5. JS、CSS中如有重定义，后定义函数将覆盖前定义函数。

接下来我们举个例子来说明一下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>标题</title>    <link  type="text/css" rel="stylesheet" href="../css/reset.css"></head><body>    <div>        <p>这是段落</p>        <img src="../images/arrow.jpg" alt="这是一张图片"/>    </div></body><script type="text/javascript" src="../js/myjs.js"></script></html>

如上图代码所示：
1.浏览器开始载入 HTML 代码，发现 <head> 标签内有一个 <link> 标签引用外部 CSS 文件；

<link  type="text/css" rel="stylesheet" href="../css/reset.css">

2.浏览器发出 CSS 文件的请求，服务器返回这个 CSS 文件；
3.浏览器继续载入 HTML 中 <body> 部分的代码，并且 CSS 文件已经拿到手了，可以开始渲染页面了；
4. 客户端浏览器在<body>里的标签中发现一个<img>标签并且引用了服务器进而的一张名为arrow.jpg的图片。浏览器又向服务器发出一次请求。而浏览器不会因为此时正在加载<img>标签里的图片而停止等待图片加载完，浏览器继续渲染还未完成的部分。

        <img src="../images/arrow.jpg" alt="这是一张图片"/>

5. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；
6. 把body里的标签加载及渲染完后，浏览器又发现了JavaScript 代码的 <script> 标签，赶快运行它。

<script type="text/javascript" src="../js/myjs.js"></script>

7. 浏览器又立刻向服务器发出请求加载myjs.js文件，服务器响应。
8. 浏览器在myjs.js文件中发现了一段代码是让<div>标签隐藏的代码（style.display=”none”），此时浏览器又要重新去重新渲染这部分被隐藏代码。
9. 最后到浏览器发现了</html>为止。
到这里浏览器的渲染任务就算完成了。接下来我们来讲讲两个词“回流”和“重绘”。
reflow（回流）
浏览器要花时间、花精力去渲染页面，当它发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。
reflow 几乎是无法避免的。只要引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。当然，reflow 问题是可以优化的，我们可以尽量减少不必要的 reflow。比如例子中的 <img> 图片载入问题 —— 给图片设置宽度和高度就可以避免的 reflow。这样浏览器就知道了图片的占位面积，在载入图片前就预留好了位置。
repaint（重绘）
repaint，中文叫重绘。如果只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint。

0 1