浏览器输入url到页面展示出来的全过程

基本流程：

1、用户在浏览器中输入url地址

2、浏览器解析域名得到服务器ip地址

浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。

3、TCP三次握手建立客户端和服务器的连接

因为HTTP是基于TCP的可靠传输，所以在发送http数据报之前，需要先进行TCP的三次握手建立连接。三次握手过程如下：

第一次握手：客户端--->服务端 ack=1,seq=x（x随机生成）

第二次握手：服务端--->客户端 ACK=1,ack=x+1,seq=y（y随机生成）

第三次握手：客户端--->服务端 ACK=1,ack=y+1,seq=x+1

完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。

4、客户端发送HTTP请求获取服务器端的静态资源

5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源

6、TCP四次挥手关闭客户端和服务器的连接

数据传输完毕后，TCP会进行四次挥手断开连接，释放资源。四次挥手过程如下：

第一次挥手：客户端--->服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1

第二次挥手：服务器--->客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT，TCP进入半关闭状态

第三次挥手：服务器--->客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK

第四次挥手：客户端--->服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT，此时TCP未释放，需要等待计时器计时完成后，客户端状态变为CLOSED

7、浏览器解析文档资源并渲染页面

浏览器解析文档资源并渲染页面流程：

（1）解析html资源，构建DOM Tree

（2）解析css资源，构建CSS Rule Tree

（3）JS通过DOM API和CSS OM API来 *** 作DOM Tree和CSS Tree

（4）解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流（layout or reflow）

（5）调用 *** 作系统Native GUI的绘制

（6）页面绘制完成

涉及到的其他知识点：

1、Render Tree的生成

DOM Tree和CSS Tree结合会生成Render Tree，是由可视化元素按照其顺序生成的树形结构，非可视化元素是不会出现到渲染树中的。

非可视化元素：head、display：none；（注意：visibility：hidden的元素会出现在渲染树中）

2、回流和重绘

回流（reflow，也叫重排、布局）：某部分的变化影响了布局，浏览器需要重新渲染。（如元素大小、位置的改变）

重绘（repaint）：元素的某一部分发生改变，尺寸、位置没有改变。（字体颜色、背景颜色的改变）

引起回流的几个主要原因：

（1）网页初始化

（2）JS *** 作DOM树（增加、删除元素等）

（3）某些元素的尺寸改变

（4）CSS属性的改变

浏览器的“dirty”系统：

为了避免页面细小的改变就引起回流和重绘，“dirty”系统会将这些改变 *** 作积攒一批再进行 *** 作，这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做：resize窗口、改变了页面默认的字体等，这些 *** 作会直接触发回流。

编写代码时如何减少回流和重绘：

（1）修改样式不要逐条修改，定义CSS样式的class，直接修改元素的className

（2）不要将DOM节点的属性值放在循环中当成循环的变量

（3）为动画的HTML元素使用fixed或absolute的position属性，修改它们的CSS就不会触发reflow

（4）把DOM离线后修改，设置display：none或者clone元素到内存中，修改完成再显示回页面

（5）不要使用table布局，一个微小的改变就可能引起整个table的重新布局

3、性能优化

（1）提升HTML的加载速度

- 页面精简，删除不必要的内容，将内嵌的JS和CSS移至外部文件，使用压缩工具等

- 减少文件数量，合并文件，减少请求次数

- 减少域名查询，外部引入的资源尽量少使用不同的域名

- 使用缓存，重用数据

- 优化页面元素的加载顺序

- 使用合法的标签

- 根据浏览器类型选择合适的策略

（2）编写合理的CSS

- DOM的深度尽量浅

- 使用合法的CSS属性

- 不要为ID选择器指定类名或标签名

- 避免使用后代选择器，尽量使用子选择器

- 避免使用通配符

（3）关于JS标签

js标签的加载和执行特点：载入后立即执行，执行时会阻塞页面后续内容

- 将所有的js标签放在页面底部，保证脚本执行前已完成DOM渲染

- 尽可能合并脚本

- 减少内联js的使用

- 注意多个js标签的引入顺序

- 使用defer属性，该属性可以使脚本在文档完全呈现以后再执行

- 使用async属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现