likes
comments
collection
share

精通http请求开始到页面渲染的全过程

作者站长头像
站长
· 阅读数 62

前言

http是如何请求，请求之前需要有什么基础条件，请求之后又是如何渲染页面

浏览器从客户端输入url地址到浏览器渲染页面的这个中间过程有哪些重要的行为。

那么我们接下来就以用户从输入网址到网页显示出来的过程，到底发生了什么。我们通过步骤来说明，可以更清晰。

思维导图

第一步：用户通过客户端输入url地址

当用户通过客户端输入网址时，首先是要通过dns解析把域名解析成ip，然后通过ip才能找到对应的服务器

dns解析过程：

首先dns是从浏览器缓存中去找url对应的ip。如果浏览器没有缓存，那么就会到dns服务器上寻找域名对应的ip，这个查找过程就不详细介绍了。

dns提前解析

有一个问题是：是不是页面中每一个域名都需要进行域名解析呢？

如果是已经解析过的域名，那么浏览器会进行缓存。

如果没有解析过的域名，那么我们可以设置在页面刚加载时，可以先对这些域名进行解析，然后保存在浏览器缓存中，那么当页面读取到这个域名时，可以直接从缓存中读取这个ip。

设置方法：

//会先对//static.360buyimg.com这个域名解析dns解析，解析结果保存到浏览器缓存中
<link  rel="dns-prefetch"  href="//static.360buyimg.com" >

性能的提升:

提前将dns的解析的结果保存在浏览器的缓存中是可以提高网页加载的性能。页面读取到需要这个域名时，无需再进行dns解析从而可以加快网页访问的速度。

第二步 ip协议和tcp协议

网络协议中ip协议几乎是最底层的协议。在ip协议的基础上有tcp协议。通过第一步dns找到ip后，才可以发送tcp协议，tcp协议是确保网络链接正常的一个协议。

我们通过tcp协议能够确保网络是互联的。

tcp协议涉及到的性能问题：

  • 三次握手：第一次客户端找到通过ip找到服务器，第二次服务器回复客户端，第三次客户端携带数据再访问服务端。

我们平时之所以要建议请求链接的个数少是因为每一次的链接都要有3次握手。

  • 四次挥手:

    第一次： 客户端向服务端发送请求告诉服务端我要断开了。

    第二次：服务端接收到后信息后，回复客户端我知道了。

    第三次：等服务端处理完数据后，告诉客户端。

    第四次：客户端收到服务端发过来消息后，向服务端表示ok，断开。

  • 滑动窗口：服务端和客户端的缓冲区。

  • 慢启动:CP 传输数据的性能还取决于 TCP 连接的使用期（age）。TCP 连接会随着时间的推移自我调节，起初会限制连接的最大速度，如果数据传输成功，会随着时间的推移提高传输速度。这种调节称之为 TCP 的慢启动（slow start），用于防治因特网的突然过载或者拥塞。

第三步 http链接服务器并且返回响应

如果是页面的话，一般就是返回html文件。

例如以京东网站为例，则京东网站首先返回的是html文件，浏览器其实都是这样的，如下截图：

精通http请求开始到页面渲染的全过程

第四步 解析dom

解析dom对于前端的同学来说是比较熟悉的

浏览器解析html,从上往下读取

在解析的过程中会遇到css、img、js文件。

浏览器调试模式下文件的顺序

我的代码如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./demo.js"></script>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>

    <img src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/218254/25/20462/39444/62f23e45E874620e0/c36bdc23540755f5.jpg.avif" alt="">

    <script>
        
    </script>
</body>
</html>

<link rel="stylesheet" href="./demo.css">

浏览器调试模式下的顺序是：

精通http请求开始到页面渲染的全过程

总结：从上可以看出来，浏览器调试模式下的顺序是文件加载成功后的顺序

解析时，会去加载哪些文件，但是不会去执行那些文件，会把文件保存在浏览器缓存中。

但是浏览器并不会等待文件加载完再执行，而是一直从上往下解析，例如js、img、css是否加载完毕，是不会去理会的。

dom-tree 树

浏览器会把html解析成dom-tree

css-tree 树

css样式表一般是放在页面顶部，之所以放在顶部是因为页面加载到css后需要形成css-tree，只有css-tree和dom-tree都形成render-tree,页面才会被渲染。

render-tree 渲染树

上边的dom-tree和css-tree 形成渲染树，渲染树开始渲染页面。

如果css没有被加载完成，那么其实渲染树是不会被渲染的，因为渲染树本身是由css-tree 和 dom-tree 结合成的。

所以css需要放到页面的顶部，这样更早形成css-tree;

**如下图，css文件一直没有被加载完成，因为有15M,目前是加载到2.5M，其他都加载完毕了，因为有css文件没有加载完毕，所以页面一直没有被渲染。

精通http请求开始到页面渲染的全过程

第五步：js的执行

如果js执行js，会阻塞后边dom的解析，在解析html文件的过程中，只有js会阻塞浏览器的解析，其他内容都不会阻塞。

所以js一般是放在后边，js是由js引擎控制的。

当然js是可以异步的。

总结：html文件被浏览器解析

总结1：浏览器在解析html时，遇到css文件、html结构都会正常解析，css外部链接、图片链接也都会正常发送请求，至于这些请求什么时候被请求到，那么浏览器是不管，浏览器只是在解析这些代码做相应的操作。

总结2：在解析的过程中遇到js文件会对执行js文件，这个时候浏览器是停止解析的

总结3：当dom-tree和css-tree都完成并且形成render-tree后，浏览器开始渲染页面，否则浏览器是不会渲染页面的，页面会是白屏状态

转载自:https://juejin.cn/post/7138811198966857741
评论
请登录