浏览器加载、解析、渲染的过程是怎么样的？
Why
为什么要了解浏览器加载、解析、渲染这个过程？
1.了解浏览器如何进行加载，我们可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕
2.了解浏览器如何进行解析，我们可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。
3.了解浏览器如何进行渲染，明白渲染的过程，我们在设置元素属性，编写js文件时，可以减少”重绘“”重新布局“的消耗。
这三个过程在实际进行的时候又不是完全独立，而是会有交叉。会造成一边加载，一边解析，一边渲染的工作现象。
How
浏览器是如何进行加载、解析、渲染的呢？
域名->DNS服务器->查询ip地址对应的网络服务器并发送http请求->网络服务器解析请求并发送给数据库服务器->数据库服务器将请求资源发送给网络服务器->网络服务器解析数据并生成html文件，放入http response中，返回浏览器->浏览器解析http response->下载html及包含的外部文件(文件包含图片及多媒体)
1.用户访问网页，DNS服务器（域名解析系统）会根据用户提供的域名查找对应的IP地址，找到后，系统会向对应IP地址的网络服务器发送一个http请求。
2.网络服务器解析请求，并发送请求给数据库服务器。
3.数据库服务器将请求的资源返回给网络服务器，网络服务器解析数据，并生成html文件，放入http response中，返回给浏览器。
4.浏览器解析 http response。
5.浏览器解析 http response后，需要下载html文件，以及html文件内包含的外部引用文件，及文件内涉及的图片或者多媒体文件。
加载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
<script src="test.js"></script>
</head>
<body>
<p>阻塞</p>
<img src="test.jpg" alt="">
</body>
</html>
加载过程中遇到css或者图片，不影响html的加载，因为是异步请求。但是文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。
原因：JS有可能会修改DOM，最为经典的document.write，这意味着，在JS执行完成前，后续所有资源的下载可能是没有必要的，这是js阻塞后续资源下载的根本原因。
办法：可以将外部引用的js文件放在</body>前。
虽然css文件的加载不影响js文件的加载，但是却影响js文件的执行，即使js文件内只有一行代码，也会造成阻塞。
原因：可能会有 var width = $('#id').width()，这意味着，js代码执行前，浏览器必须保证css文件已下载和解析完成。这也是css阻塞后续js的根本原因。
现代浏览器存在 prefetch 优化，浏览器会另外开启线程，提前下载js、css文件，需要注意的是，预加载js并不会改变dom结构，他将这个工作留给主加载
解析
1、浏览器通过请求的 URL 进行域名解析，向服务器发起请求，接收文件（HTML、CSS、JS、Images等等）。
2、HTML 文件加载后，开始构建 DOM Tree
3、CSS 样式文件加载后，开始解析和构建 CSS Rule Tree
4、Javascript 脚本文件加载后， 通过 DOM API 和 CSSDOM API 来操作 DOM Tree 和 CSS Rule Tree
渲染
即为构建渲染树的过程，他是原来DOM树的可视化表示，构建这棵树是为了以正确的顺序绘制文档内容。
渲染树和DOM树的关系，不可见的dom元素（<head>…</head> display=none）不会被插入渲染树中。还有像一些节点的位置为绝对或浮动定位（需要css知识理解），这些节点会在文本流之外，因此会在两棵树上的不同位置，渲染树标识出真实的位置，并用一个占位结构标识出他们原来的位置。
1、浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
2、Rendering Tree 并不与 DOM Tree 对应，比如像 <head> 标签内容或带有 display: none; 的元素节点并不包括在 Rendering Tree 中 。
3、通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小，是否换行，以及 position、overflow、z-index 等等属性，这个过程称为 Flow 或 Layout 。
4、最终通过调用Native GUI 的 API 绘制网页画面的过程称为 Paint
当用户在浏览网页时进行交互或通过 js 脚本改变页面结构时，以上的部分操作有可能重复运行，此过程称为 Repaint 或 Reflow。
Repaint
当元素改变的时候，将不会影响元素在页面当中的位置（比如 background-color, border-color, visibility），浏览器仅仅会应用新的样式重绘此元素，此过程称为 Repaint。
Reflow
当元素改变的时候，将会影响文档内容或结构，或元素位置，此过程称为 Reflow。（ HTML 使用的是 flow based layout ，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫 Reflow。）
注意：回流必将引起重绘，而重绘不一定会引起回流。
Reflow 的成本比 Repaint 的成本高得多的多。一个结点的 Reflow 很有可能导致子结点，甚至父点以及同级结点的 Reflow 。在一些高性能的电脑上也许还没什么，但是如果 Reflow 发生在手机上，那么这个过程是延慢加载和耗电的。----浏览器的渲染原理简介
回流何时发生：
当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流：
1.添加或者删除可见的DOM元素；
2.元素位置改变；
3.元素尺寸改变——边距、填充、边框、宽度和高度
4.内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5.页面渲染初始化；
6.浏览器窗口尺寸改变——resize事件发生时；
当然，我们的浏览器是聪明的，它不会像上面那样，你每改一次样式，它就 Reflow 或 Repaint 一次。一般来说，浏览器会把这样的操作积攒一批，然后做一次 Reflow ，这又叫异步 reflow 或增量异步 Reflow 。但是有些情况浏览器是不会这么做的，比如：Resize 窗口，改变了页面默认的字体，等。对于这些操作，浏览器会马上进行 Reflow 。----浏览器的渲染原理简介
网友评论