Analyze the home page loading of www.sjtu.edu.cn
- 输入的网址在通过DNS解析后得到服务器地址
- 浏览器向服务器发起https请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回浏览器。
- 浏览器接收到html代码后经历以下三个步骤完成网页的加载。
- 浏览器将接收到的html文件解析成一颗树：DOM树
- 然后将接收到的css代码分别放到对应的DOM树节点上，得到一棵带有样式属性的的DOM树：CSSOM树
- 浏览器按从上到下，从左到右的顺序遍历CSSOM树的文档节点
- 计算节点的大小和坐标等属性
- 直接在浏览器中输入服务器地址。
- 将服务器架设在与终端更近的地方。
- 将资源文件与HTML文件放在一起或将资源文件放在访问速度更快、与终端距离更短的服务器上，并将其链接到HTML中。
首先，开源浏览器一般以8k每块下载html页面。 然后解析页面生成DOM树，遇到css标签或JS脚本标签就新起线程去下载他们，并继续构建DOM。 下载完后解析CSS为CSS规则树，浏览器结合CSS规则树和DOM树生成Render Tree。 注意：构建CSS Object Model（CSSOM)会阻塞JavaScript的执行。JavaScript的执行也会阻塞DOM的构建。 JavaScript下载后可以通过DOM API修改DOM，通过CSSOM API修改样式作用域Render Tree。 每次修改会造成Render Tree的重新布局和重绘。只要修改DOM或修改了元素的形状或大小，就会触发Reflow，单纯修改元素的颜色只需Repaint一下（调用操作系统Native GUI的API绘制）。
(自知乎引用： 作者：陈金 原文：https://www.zhihu.com/question/30218438/answer/84704484)
