输入url后按回车，到页面加载都发生了什么？

前言

这是一个常见的前端笔试或面试题，虽然我还没遇到过，可是也来一个全面总结。

1.DNS解析IP地址

DNS解析ip地址的过程是：首先检查浏览器缓存中以及操做系统缓存中有没有对应的已解析过的结果（hosts文件），若没有则请求本地域名服务器（LDNS）来解析这个域名，若未成功解析，则跳转到根域名服务器，根域名服务器给予一个主域名服务器地址，而后本地域名服务器再去请求主域名服务器地址，接着主域名服务器会返回网站注册域名的服务器Name server的地址，本地服务器又去访问Name server，最终找到ip地址并返回给本地域名服务器，而后缓存该ip地址，解析结束。

2.TCP三次握手创建链接

客户端向服务端发送一个SYN报文，请求创建链接。
服务端收到报文确认后，发送一个SYN-ACK报文，表示确认收到请求。
客户端收到服务器的报文后，返回一个ACK报文，链接创建。

3.发送http请求

客户端向服务器发起一个HTTP-GET方法报文请求。请求中包含访问的URL，KeepAlive，长链接，还有User-Agent用户浏览器操做系统信息，编码等。

4.部分服务器会进行重定向

在数据进入服务端以前，可能还会先通过负载均衡服务器，它会将请求合理分发到多台服务器上，这是假设服务器端响应一个HTML文件。那么客户端浏览器就会判断状态码是什么，若是是200就会继续解析，若是是400或500就会报错，若是是300就会进行重定向。
例如，对于大型网站存在多个主机站点，为了负载均衡或者导入流量，提升SEO排名，每每不会直接返回请求页面，而是重定向。当浏览器知道了重定向后最终的访问地址以后，会从新发送一个http请求，发送内容同上。

5.服务器处理，返回http响应

服务器接收到客户端的获取请求，而后处理并返回一个响应。

6.浏览器解析响应

浏览器解析来自服务器的报文响应，因为在报头中Content-type为“text/html”，浏览器会以HTML形式呈现，而不是下载文件。若是是gzip格式的话，浏览器会先解压一下，而后经过文件的编码格式知道该如何去解码文件。

7.构建DOM、CSSOM树

浏览器会根据HTML构建DOM树和CSSOM树。若是遇到script标签的话，会判断是否存在async或者defer，前者会并行进行下载并执行js；后者会先下载文件；而后等待html解析完成后顺序执行，若是以上都没有，就会阻塞住渲染流程直至js文件执行完毕。

8.生成render树并绘制

CSSOM树和DOM树构建完成后会开始生成render树，这一步就是肯定页面元素的布局、样式等等诸多方面的东西。同时在生成render树的过程当中，浏览器就开始调用GPU绘制，合成图层，将内容显示在屏幕上了。