从地址栏输入网址到页面出现在浏览器窗口中，发生了哪些事情？

[hrpc]

比如https://www.baidu.com

1. 浏览器通过URL解析出主机名
2. 浏览器根据主机名解析出主机IP地址（DNS解析）
3. 浏览器解析出端口号
4. 浏览器与指定服务器（第2，3步中产生的结果）建立TCP连接
5. 浏览器向指定服务器发起HTTP请求
6. 浏览器处理HTTP响应
7. 关闭TCP连接

其中2步，DNS解析，如果浏览器最近没有对URI中的主机名进行访问，通过URI中的主机名转换为IP地址通常需要数十秒的时间。---来自《HTTP权威指南》第四章第4.2.1节

此处又有一个性能优化的点是DNS预缓存（DNS prefetch），指的是浏览器主动去执行域名解析的功能，其范围包含文档内的所有链接，无论是图片、css、还是JavaScript等其他用户能够点击的URL。预解析在后台执行，与页面渲染并行执行，所以并不会阻塞页面渲染，所以DNS很可能在链接对应的东西出现之前就已经解析完毕，能够减少用户点击的时延。

开启方式：可以通过服务端发送X-DNS-Prefetch-Control 报头，值为on/off来开启或者关闭预解析。也可以通过在文档中使用http-equiv的meta标签。

<meta http-equiv="x-dns-prefetch-control" content="off">

也可以强制查询指定主机名，来达到预解析的目的。

<link ref="dns-prefetch" href="http://www.baidu.com/">

但幸运的是大多数HTTP客户端都有一个小的DNS缓存，用来保存近期所访问站点的IP地址。如果是已经缓存到本地的IP地址，查询就可以立即完成。因为大多数web浏览器浏览的都是少数常用站点，所以通常可以很快的将主机名解析出来。

其中第6步，浏览器处理HTTP响应，又可以细分为如下几个过程将页面渲染到页面上。如图所示

大致分为以下5步:

1. 根据HTML代码生成DOM树 (document object model)

2. 根据CSS代码生成CSSOM (css object model),即css的对象表示

3. 结合DOM树和CSSOM生成Render Tree (渲染树),包含了每个节点的视觉表现信息

4. 生成布局(layout),将渲染树的所有节点进行平面合成

5. 将布局绘制(paint)到浏览器窗口中 

其中耗时最长的是第四步和第五步,生成布局(layout)和绘制(paint)的过程叫做渲染(render)

2:重绘(repaint)和重排(reflow)
页面生成的时候至少会渲染一次,用户在访问的过程中还会不断重新渲染.
以下情况会导致浏览器重新渲染

- 修改DOM

- 修改样式

- 浏览器事件(比如页面滚动,窗口大小调整,input输入事件)

重新渲染就需要重新生成布局和重新绘制,前者叫重排,后者叫重绘
tips:重绘不一定要重排,比如只改变网页的背景色就只会重绘不会重排,因为DOM结构和布局没有变化;但是重排一定会重绘,比如改变了元素的位置或大小,因为页面结构变化了

3:对性能的影响
浏览器的重绘和重排是不可避免的,非常耗费资源,是导致页面性能低下的根本原因.

提升网页的性能,就是要减少重绘 和重排的成本和频率

4如何提高性能

1:DOM的多个读操作(或者写操作)应该放一起,避免两个读操作之间插入写操作
2:如果某个样式是通过重排得到的,那么可以缓存结果,避免多次重排
3:不要一条一条的改变样式,可以考虑class一次改变
4:如果某个dom节点需要不可避免的产生多次重排或者重绘操作,可以考虑先将它的display设置为none然后进行dom操作,完成后再设置回去,这样就只需要两次重绘和重排操作
5:absolute和fixed的元素重排的开销小,因为不需要考虑别的元素
6:只在必要的时候才将display设置为可见,因为不可见的元素不影响重绘和重排,visibility:hidden只会重绘,不发生重排
7:虚拟dom操作
8:requestAnimationFrame调节重新渲染

5:window.requestAnimationFrame方法提高网页性能
其基本实现是基于事件循环,与setTimeout有异曲同工之妙
它可以将某些代码放到下一次重新渲染时