今天看啥  ›  专栏  ›  滑稽zlx

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

滑稽zlx  · 掘金  ·  · 2019-09-08 16:32
阅读 14

输入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绘制,合成图层,将内容显示在屏幕上了。




原文地址:访问原文地址
快照地址: 访问文章快照