一个页面从输入URL到页面加载发生什么？

布满荆棘的人生 2023-01-01 03:44 212阅读 0赞

> **一般会经历以下几个过程：**
> 
> 1、首先，在浏览器地址栏中输入url
> 
> 2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
> 
> 3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
> 
> 4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
> 
> 5、握手成功后，浏览器向服务器发送http请求，请求数据包。
> 
> 6、服务器处理收到的请求，将数据返回至浏览器
> 
> 7、浏览器收到HTTP响应
> 
> 8、读取页面内容，浏览器渲染，解析html源码
> 
> 9、生成Dom树、解析css样式、js交互
> 
> 10、客户端和服务器交互
> 
> 11、ajax查询
> 
>  
> 
> **其中，步骤2的具体过程是：**
> 
>  *  浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
>  *  操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
>  *  路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
>  *  ISP缓存：若上述均失败，继续向ISP搜索。
> 
>

## 1、浏览器的地址栏输入URL并按下回车。 ##

###      1.）名词解释 ###

举个栗子：https://www.baidu.com/send

这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏，后边还可以加一些参数或者路径也可以不加，

协议分https,http,FTP协议、FILe协议,http默认端口号80，https默认端口是443，默认端口都会自动隐藏了，所以才会不显示；

## 2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。 ##

看看有没有不去请求也能显示网页的可能，没可能就继续。

## 3、DNS解析URL对应的IP。 ##

如果你输入的url是ip地址形式的，就不用这一步了，如果是域名就要走这一步。DNS中文名字叫做域名系统，相当于一个简写好记的一个字典，不用直接输ip,记住一个单词就能访问这个ip.比如，baidu.com最后访问的还是ip.

首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。

如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。

如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。

再查就找外国去了。。。

反正他们数据库里只要有，一定能查到

再深入就不是前端够的着的了，我就不会了。。。

## 4、根据IP建立TCP连接（三次握手）。 ##

浏览器：二货，我要连接你，我是a

服务器：行啊，但是你得读一下这段话，我们是好朋友

浏览器：我们是好朋友

## 5、HTTP发起请求。 ##

然后服务器就给浏览器发东西了。。如果按照域名访问某网址，第一次嘛，服务器会默认甩回点东西，一个页面或者一个页面。。

下次请求就不定是啥了，可能是js,可能是css,可能是图片，没准要下载啥文件。

## 6、服务器处理请求，浏览器接收HTTP响应。 ##

服务器这边呢已经开了服务端口了，也设置路由了，你不是请求80嘛。我就给你/index.html,

浏览器收到html文件开始分析开始，解析到link了。这得向服务器去取啊。。。又遇到引入js了，又得去服务器去取，这边渲染页面，渲染一会多了个css,重新渲染一下，一会js代码又不要了，又要删掉。最后不断的从服务器取不断解析不断渲染，最后页面出现了。然后你又是点点这点点那里，又和服务器发生关系了，重新请求上文件啊，，等等了，，前端有前端的请求，后端有后端对请求的处理。

上边是前后端都正常了。。如果谁写错了呢。。就有下边这个了

状态码主要包括以下部分

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

然后看到这些错误的时候不要慌，好好调试一下，是自己的问题赶紧解决，不是自己的赶紧通知对方。如果你的代码够严谨，够厉害也别太骄傲。

# #

## 7、 4次挥手关闭TCP连接 ##

浏览器：二货，我没啥要取的了

服务器：知道了

服务器：我也没啥要发的了

浏览器：知道了

### 8、页面渲染的时候的知识///so...尽量别操作dom ###

1.  `在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，`
2.  `在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。`
3.  `在收到 CSS 文件后会对已经渲染的页面重新渲染，`
4.  `加入它们应有的样式，图片文件加载完立刻显示在相应位置。`
5.  `在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。`
6.   
7.  `　　Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，`
8.  `需要重新计算样式和渲染树，这个过程称为Reflow。`
9.   
10. `　　Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候`
11. `（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。`
12.  
13. `　　所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。`
14.  
15. `　　下面这些动作有很大可能会是成本比较高的：`
16.  
17. `增加、删除、修改DOM结点时，会导致Reflow或Repaint`
18.  
19. `移动DOM的位置，或是搞个动画的时候`
20.  
21. `内容发生变化`
22.  
23. `修改CSS样式的时候`
24.  
25. `Resize窗口的时候（移动端没有这个问题），或是滚动的时候`
26.  
27. `修改网页的默认字体时`
28.  
29. `　　基本上来说，reflow有如下的几个原因：`
30.  
31. `Initial，网页初始化的时候`
32.  
33. `Incremental，一些js在操作DOM树时`
34.  
35. `Resize，其些元件的尺寸变了`
36.  
37. `StyleChange，如果CSS的属性发生变化了`
38.  
39. `Dirty，几个Incremental的reflow发生在同一个frame的子树上`
40.

前端的角度看这个问题，非常片面，通过不断学习不断补充吧