从页面输入URL到展现,到底经历了什么?

这是一道常见的面试题,这次,我们就来彻底搞懂他。

首先,总的来说,分为以下几个过程

  1. DNS解析
  2. TCP连接
  3. 客户端发起HTTP请求
  4. 服务端接收请求,并返回对应的HTTP报文
  5. 浏览器解析报文、渲染页面
  6. 连接结束

具体过程

dns解析

DNS解析的过程就是寻找哪台机器上有你需要的资源的过程。当你输入网址的时候,其实访问的是他的唯一IP地址,但是IP地址不方便记忆,因此才有了网址。DNS解析就是将网址对应到IP地址的过程。

解析过程

https://segmentfault.com/img/bVDM45?w=1928&h=1248

DNS优化

  1. DNS缓存
  2. DNS负载均衡(也称DNS重定向)

TCP连接、HTTP请求

这里包含了TCP的握手和挥手、HTTPS以及浏览器缓存
有关TCP、HTTP和HTTPS的知识请看我另一篇关于这部分知识的记录:http://blog.leeing.site/2018/08/07/HTTP/
有关浏览器缓存的知识也可以看我另一篇关于这部分知识的记录:http://blog.leeing.site/2018/08/19/%E6%B5%8F%E8%A7%88%E5%99%A8%E7%9A%84%E7%BC%93%E5%AD%98%E7%AD%96%E7%95%A5/
这边就不详细介绍了。

浏览器解析渲染页面

浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建CSSOM树,然后将两棵树合并为一棵render树,等到render树构建完成后,浏览器开始布局渲染并将其绘制到屏幕上。
在这个过程中,涉及到两个概念,重绘和回流。DOM中各个元素都需要浏览器去计算其位置和大小,这个过程称为回流。当这些属性都确定下来之后,浏览器便开始绘制内容,这个过程称为重绘。页面在首次加载的时候必然会经历重绘和回流。且回流必定重绘,重绘不一定回流。
重绘和回流是非常消耗性能的,尤其是在移动设备上,它会破坏用户体验,有时会造成页面卡顿。所以我们应该尽可能减少重绘和回流。

JS的解析是由浏览器中的JS解析引擎完成的。JS是单线程运行,但是存在一些任务特别耗时,如IO操作。因此,需要一种机制可以先执行排在后面的任务,这就是同步任务和异步任务(宏任务和微任务)。JS的执行机制就可以看做是一个主线程加一个任务队列。同步任务就是放在主线程上执行的任务,异步任务就是放在任务队列中的任务。所有的同步任务在主线程上执行,形成一个执行栈;异步任务有了运行结果就会在任务队列中添加一个事件;脚本执行时先依次运行执行栈,然后会从任务队列中提取事件,运行任务队列中的任务。这个过程不断重复,故而又称为事件循环(event loop)。

浏览器在解析的过程中,如果遇到请求外部资源时,如图片时,请求过程是异步的,并不会影响HTML文档进行加载。但是如果遇到JS文件,HTML会挂起渲染过程,不仅要等到其下载完成还要等其解析执行完毕,才会继续HTML的渲染过程。原因是JS有可能修改DOM结构。CSS的加载不影响JS文件的加载,但是影响JS文件的执行。因此JS代码执行前,浏览器必须保证CSS文件已经下载并加载完毕。这也是为什么建议CSS文件放在HEAD里,script标签包裹的JS文件放在body底部的原因。

坚持原创技术分享,您的支持将鼓励我继续创作!