从输入URL到页面加载完成都发生了什么

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

在浏览器还没接收到完整的 HTML 文件时，它就开始渲染页面了，
在遇到外部链入的脚本标签或样式标签或图片时，会再次发送 HTTP 请求重复上述的步骤。
在收到 CSS 文件后会对已经渲染的页面重新渲染，
加入它们应有的样式，图片文件加载完立刻显示在相应位置。
在这一过程中可能会触发页面的重绘或重排。这里就涉及了两个重要概念：Reflow和Repaint。

　　Reflow，也称作Layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，
需要重新计算样式和渲染树，这个过程称为Reflow。

　　Repaint，中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候
（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就OK了，这个过程称为Repaint。

　　所以说Reflow的成本比Repaint的成本高得多的多。DOM树里的每个结点都会有reflow方法，一个结点的reflow很有可能导致子结点，甚至父点以及同级结点的reflow。

　　下面这些动作有很大可能会是成本比较高的：

增加、删除、修改DOM结点时，会导致Reflow或Repaint

移动DOM的位置，或是搞个动画的时候

内容发生变化

修改CSS样式的时候

Resize窗口的时候（移动端没有这个问题），或是滚动的时候

修改网页的默认字体时

　　基本上来说，reflow有如下的几个原因：

Initial，网页初始化的时候

Incremental，一些js在操作DOM树时

Resize，其些元件的尺寸变了

StyleChange，如果CSS的属性发生变化了

Dirty，几个Incremental的reflow发生在同一个frame的子树上

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