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

一般会经历以下几个过程：

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.  

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