页面加载-时间都去哪儿了?

来说一说在浏览器地址栏里输入url按回车后,到页面呈现在面前,浏览器背后发生了什么。

先做从最基本的流程说起。

1、输入url ,按回车。

2、DNS解析,找出该域名对应的ip地址(一般20-120ms,有缓存,基本可以忽略不计)。

3、发送HTTP请求

       |--1.     建立TCP连接
       |--2.     Web浏览器向Web服务器发送请求命令
       |--3.     Web浏览器发送请求头信息
4、服务器处理请求

       |--1.     Web服务器处理请求(浏览器端体现在watting)
       |--2.     Web服务器发送应答头信息
       |--3.     Web服务器向浏览器发送数据(浏览器端体现在download)
       |--4.     Web服务器关闭TCP连接

5、浏览器接受到服务器返回的http response。

6、浏览器渲染页面(以css在头部,js在底部为例)

       |--1.     浏览器解析返回的html
       |--2.     构建dom树(此时,会去异步下载图片,css等资源)
       |--3.     构建渲染树(如果css文件放在头部,2,3步是同时进行的)
       |--4.     将构建好的dom树和渲染树结合,显示出来。

       |--5.     当页面上遇到<script>标签时,下载执行js文件,此时页面是单进程,什么也做不了。
       |--6.     页面重新绘制,最终显示。

以上,每个步骤都需要耗费一定的时间,所以在可以控制的步骤减少时间,在不能减少时间的情况下,通过其他手段改善用户体验。

原文地址:https://www.cnblogs.com/smjia/p/4843341.html