从输入URL到页面加载完成

从输入URL到页面加载完成

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

http://www.baidu.com:80/index.html

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

如果不存在则直接访问DNS服务器 并更新缓存信息

123.12.13.24

3、DNS解析URL对应的IP。

DNS。域名系统服务器

www.baidu.com

IPS(网络服务提供商)负责运营和维护DNS服务器

www.baidu.com –> 从顶级域名开始一步一步的查找对应的IP地址表 找到之后进行转发和返回 --> 123.12.13.24

IP地址

4组从0-255数组组成的网络地址

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

ISO 国际标准化组织

OSI 开放式系统互联通信参考模型（英语：Open System Interconnection Reference Model，缩写为 OSI）

TCP/IP 协议簇

TCP 面向链接的协议

UDP

5、HTTP发起请求。

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

7、渲染页面，构建DOM树。

https://zhuanlan.zhihu.com/p/74792085

官方给的一种解释：

未构建完的CSSOMTree是不准确的，浏览器必须等到CSSOMTree构建完毕后才能进入下一阶段。

所以，CSS的加载速度与构建CSSOMTree的速度将直接影响首屏渲染速度，因此在默认情况下CSS被视为阻塞渲染的资源，需要将它尽早、尽快地下载到客户端，以便缩短首次渲染的时间。

那么回到上面生成DOM时提到的JS问题：在标签没有设置async/defer属性时，js会阻塞DOM的生成。原因是js会改变DOMTree的内容，如果不阻塞，会出现一边生成DOM内容，一边修改DOM内容的情况，无法确保最终生成的DOMTree是确定唯一的。

同理，JS也会可以修改CSS样式，影响CSSOMTree最终的结果。而我们前面提到，不完整的CSSOMTree是不可以被使用的，如果JS试图在浏览器还未完成CSSOMTree的下载和构建时去操作CSS样式，浏览器会暂停脚本的运行和DOM的构建，直至浏览器完成了CSSOM的下载和构建。也就是说，JS脚本的出现会让CSSOM的构建阻塞DOM的构建。

8、关闭TCP连接（四次挥手）。

 

1 link是否会阻塞DOM树渲染 (不会)

1.1 css文件中的import是如何渲染的

当DOM树构建完成后并且等到CSSOM也构建完成之后(在构建cssom的时候如果遇见了import会直接的去下载这个css,但是不会去执行它), 浏览器会把这两个树进行合并,并且真实的打印到页面上

然后再回读取通过import下载出来的css文件 接着把这个文件中的样式渲染到页面

这样会导致页面闪烁 (尤其是网速慢的时候 更明显)

2 img图片加载是否会阻塞DOM树渲染 (不会)

3 script src是否会阻塞DOM树渲染

 (下载(停止DOM渲染),下载完成,JS(DOM停止) 下载完成,执行完成后DOM才会继续渲染)

 

重绘和回流

DOM性能 浏览器的性能大部分都是被这两个问题所消耗

重绘

 DOM树没有元素增加或删除,只是样式的改变,会导致浏览器对某一个元素进行单独的渲染,这个过程就叫做重绘

回流

DOM树中的元素被增加或者删除,导致浏览器需要重新的去渲染整个DOM树

回流比重绘更消耗性能 发生回流必定会重绘 重绘不一定导致回流

因为重绘和回流的存在导致真实DOM性能不佳,所以VUE和recat还有angular等框架增加了虚拟DOM技术,就是为了减少DOM的重绘和回流从而减少浏览器性能消耗, 这就是虚拟DOM的好处