从输入一个url到显示页面的全过程

最新推荐文章于 2023-12-04 20:12:48 发布

陈坚强

最新推荐文章于 2023-12-04 20:12:48 发布

阅读量459

点赞数

文章标签：网络服务器

本文链接：https://blog.csdn.net/weixin_43611411/article/details/127830795

版权

打开一个浏览器，即创建一个Browser主进程，打开一个Tag页，随之创建一个Render渲染进程（浏览器内核）。

输入url，应用层进行DNS解析

一、DNS解析域名

当输入某个web服务器域名时，用户主机首先在自己的DNS高速缓存中查找该域名对应的IP地址。

若没有找到，主机会向离自己最近的本地域名服务器发起请求，此过程为递归查询。若本地域名服务器不指定被查询域名的IP地址，那么本地域名服务器以DNS客户的身份向根域名服务器进行下一步查询。

主机向本地域名服务器的查询是递归查询，其他的查询方式一般都有线为迭代查询。具体以DNS查询报文指定方式。

当根域名服务器中没有域名对应的IP地址，则根域名服务器将自己知道的顶级域名服务器的IP地址告诉本地域名服务器，本地域名服务器再迭代向顶级域名服务器查询。

顶级域名服务器在收到本地域名服务器查询请求之后，若没有域名对应的IP地址信息，则将自己知道的权限域名服务器的IP地址告诉本地域名服务器，本地域名服务器再迭代向权限域名服务器查询。

最后，获得域名对应的IP地址，随即返回给查询的主机。

主机获取Web服务器真正的IP地址后，便向Web服务器发起TCP连接。

二、TCP连接

TCP连接需要三次握手。总流程如下：

客户端先向服务器发送一个SYN包，进入SYN-SENT状态，服务器接收到SYN包后，给客户端返回一个ACK+SYN包，表示已收到SYN包，并进入SYN-RECEIVE状态，最后客户端再向服务端发送一个ACK包表示确认，双方进入establish状态。

三、HTTP连接

HTTP请求报文需要使用运输层的TCP协议封装成TCP报文段

四、处理请求

HTTP服务器解析HTTP请求报文的内容，按照其要求查找首页内容，之后给用户PC发送HTTP响应报文，其内容是HTTP客户端所请求的首页内容。

五、HTML的加载

浏览器先下载HTML文档，将渲染任务通过RenderHost端口传给Render进程，Render进程提供Render端口接收。

六、其他静态资源的下载

在Browser进程实现网络资源的下载工作。HTML文档解析过程中，若有一些外部的资源链接，如CSS、JS和图片等资源，会立即启动别的线程下载这些静态资源。遇到非异步执行的JS文件，HTML文档解析过程会停下来，等待JS文件下载结束并执行完再继续解析HTML。

（

JS文件放在head标签中属于同步加载，会阻塞DOM树的构建，进而影响页面的加载，JS代码会在Render进程中的JS引擎线程执行。

对于document.createElement创建的<script>，默认为异步脚本，不会影响DOM树的构建。

）

解决JS阻塞DOM树构建的方案如下：

1. script代码放在body中，一般是放在body上。

dom的构建是自上而下，script放在head中时，会在页面加载之前加载到浏览器中，放在body中，会在页面加载完成之后读取。

2. 增加defer属性

会重新创建一个线程，下载js脚本资源，等到整个html解析完毕后，但在DOMContentLoaded事件触发之前执行。

3. 增加async属性

异步开一个线程，下载js脚本资源，资源加载完毕后立即执行

由于脚本的网络请求优先级降低，响应时间大大延长，一般dom的构建已经完毕。

4. 动态创建脚本

<script>
 var _hmt = _hmt || [];
(function () {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

七、解析HTML文档构建DOM树

DOM树的构建是一个循序渐进的过程。

在Render进程中的GUI线程构建DOM树、CSSOM规则树和Render树，实现reflow（回流）和repain（重绘），实现渲染页面。

浏览器解析到<link>，<img>等标签时，会立刻发出HTTP请求（异步），解析继续执行，解析完成会触发readystatechange事件和DOMContentLoaded事件。

在整个DOM树的构建过程中分为：标签解析（标记化算法）和DOM树构建（DOM树构建器）。

标记化算法：

根据<>进入标签打开状态、标记名称状态、数据状态、关闭标签打开状态。

当浏览器载入HTML文档时，它就会成为document对象，属于window的一部分，可以通过window.document属性对其进行访问。

DOM树构建：

标签解析器解析出标签发送给DOM树构建器，每个标签都会被浏览器解析成一个对象，我们成为文档对象（DOM）。DOM树构建器其实是一个栈结构，当接受到关闭标签打开状态时，依次在栈中查找对应的开始标签，弹出栈，生成对应的DOM。因为有一个document的顶级对象，其他的对象都会依次挂载在其下，整个是一个树的状态。

八、构建CSSOM规则树

js引擎线程和构建DOM树和CSSOM树的GUI线程是相互排斥的，当没有js脚本或者只有异步js脚本时，DOM树和CSSOM树的创建互不影响。因为当有非异步的js脚本时，同时CSSOM还没构建完毕，js脚本会等CSSOM（只针对在<head>中的<style>和<link>）执行完再执行。DOM树的构建会等待非js执行完再继续。