输入url过程、html页面渲染过程
- DNS 解析
- TCP 连接
- 发送 HTTP 请求
- 服务器响应
- 浏览器解析渲染页面
渲染引擎解析css生成CSS Rule Tree(css规则树)
通过js引擎来解析Javascript脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
DOM Tree 与CSS Rule Tree结合生成Render Tree（渲染树），这时display:none的元素已不存在与render tree中
然后计算每个DOM节点的位置大小等，根据渲染树来布局，这一过程叫reflow(回流)
- 浏览器向 DNS 服务器请求解析该 URL 中的域名所对应的 IP 地址;
- 解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
- 浏览器发出读取文件(URL 中域名后面部分对应的文件)的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
- 服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
- 释放 TCP连接;
- 浏览器将该 html 文本并显示内容;
1.解析html文件，创建DOM树
自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞
1）css加载不会阻塞html文件的解析，但会阻塞dom的渲染
2）css加载会阻塞后面js语句的执行
3）js会阻塞html的解析和渲染
4）没有defer和async标签的script会立即加载并执行
5）有async标签的js，js的加载执行和html的解析和渲染并行
6）有defer标签的js，js的加载和html的解析和渲染并行，但会在html解析完成后执行,在触发DOMContentLoaded事件前执行
7）DOMContentLoaded和onload的区别：DOMContentLoaded在html解析完毕后执行，loload在页面完全加载完成后执行（包括样式和图片）
2.解析css，生成CSSOM，css对象模型
3.dom和css合并，构建渲染树（Render Tree）
4.布局（Layout）和绘制（Paint），重绘（repaint）和重排（reflow/回流）
1）重绘：根据元素的新属性重新绘制，使元素呈现新的外观
2）重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建
3）重排必定会引发重绘，但重绘不一定会引发重排
补充：
监听资源加载完成有四种方式
1. window.onload = function(){....}
2. window.addEventListener("load",function(){....});
3. document.body.onload = function(){....}
4. <body onload = "load()">
window.onload是Javascript中得函数，意思是：等待网页中所有内容加载完毕之后（包括图片）；
而$(documetn).ready()是在网页中的所有DOM结构绘制完毕之后就可以执行了，可能有与DOM关联的元素还没有加载完，所以相比之下更快一些；
三次握手
第一次：建立连接，客户端发送连接请求报文段 SYN
第二次：服务器收到客户端的SYN报文段，需要对这个SYN报文段进行确认，服务器将SYN+ACK报文段一并发送给客户端
第三次：客户端收到服务器的SYN+ACK报文段
完成TCP三次握手，之后可以开始传数据。
参考：
1.http://www.cnblogs.com/bibiafa/p/9364986.html
2.https://blog.csdn.net/yuhk231/article/details/53581212
浙公网安备 33010602011771号