前端学习之浏览器从输入URL到页面加载的全过程

浏览器从输入URL到页面加载的全过程

从输入URL到页面加载的主干流程如下：

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

2、浏览器查找当前URL的DNS缓存记录。

3、DNS解析URL对应的IP。

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

5、HTTP发起请求。

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

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

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

1.首先在浏览器中输入URL

• 我们常见的RUL是这样的:http://www.baidu.com,这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询和其他片段，例如：http://www.tuicool.com/search?kw=%E4%。我们最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议、FILe协议等等。URL的中间部分为域名或者是IP，之后就是端口号了。通常端口号不常见是因为大部分的都是使用默认端口，如HTTP默认端口80，HTTPS默认端口443。

• 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。

• 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；

• 操作系统缓存:如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统， 获取操作系统的记录(保存最近的DNS查询缓存)；

• 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；

• ISP缓存：若上述均失败，继续向ISP搜索。

2.DNS域名解析

我们知道在地址栏输入的域名并不是最后资源所在的真实位置，域名只是与IP地址的一个映射。网络服务器的IP地址那么多，我们不可能去记一串串的数字，因此域名就产生了，域名解析的过程实际是将域名还原为IP地址的过程。

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

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

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

最后迭代查询，按根域服务器 ->顶级域,.cn->第二层域，hb.cn ->子域，www.hb.cn的顺序找到IP地址。

• DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议。

3.建立TCP连接： 解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接

发起HTTP请求： 浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器

服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器

关闭TCP连接 ： 通过四次挥手释放TCP连接

浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来，浏览器接收到数据包后的解析

**构建DOM树：**词法分析然后解析成DOM树（dom tree），是由dom元素及属性节点组成，树的根是document对象

• 构建CSS规则树：生成CSS规则树（CSS Rule Tree）
• 构建render树：Web浏览器将DOM和CSSOM结合，并构建出渲染树（render tree）
• 布局（Layout）：计算出每个节点在屏幕中的位置
• 绘制（Painting）：即遍历render树，并使用UI后端层绘制每个节点。

JS引擎解析过程：
调用JS引擎执行JS代码（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）

• 创建window对象：window对象也叫全局执行环境，当页面产生时就被创建，所有的全局变量和函数都属于window的属性和方法，而DOM Tree也会映射在window的doucment对象上。当关闭网页或者关闭浏览器时，全局执行环境会被销毁。
• 加载文件：完成js引擎分析它的语法与词法是否合法，如果合法进入预编译
• 预编译：在预编译的过程中，浏览器会寻找全局变量声明，把它作为window的属性加入到window对象中，并给变量赋值为’undefined’；寻找全局函数声明，把它作为window的方法加入到window对象中，并将函数体赋值给他（匿名函数是不参与预编译的，因为它是变量）。而变量提升作为不合理的地方在ES6中已经解决了，函数提升还存在。
• 解释执行：执行到变量就赋值，如果变量没有被定义，也就没有被预编译直接赋值，在ES5非严格模式下这个变量会成为window的一个属性，也就是成为全局变量。string、int这样的值就是直接把值放在变量的存储空间里，object对象就是把指针指向变量的存储空间。函数执行，就将函数的环境推入一个环境的栈中，执行完成后再弹出，控制权交还给之前的环境。JS作用域其实就是这样的执行流机制实现的。

浏览器重绘与重排的区别？

• 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。
• 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变
• 单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
• 重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。
• 『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新DOM节点
• 通过display: none隐藏一个DOM节点-触发重排和重绘
• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

如何避免重绘或者重排？

• 集中改变样式，不要一条一条地修改 DOM 的样式。

• 不要把 DOM 结点的属性值放在循环里当成循环里的变量。

• 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

• 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

• 尽量只修改position：absolute或fixed元素，对其他元素影响不大

• 动画开始GPU加速，translate使用3D变化

• 提升为合成层

将元素提升为合成层有以下优点：

• 合成层的位图，会交由 GPU 合成，比 CPU 处理要快
• 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
• 对于 transform 和 opacity 效果，不会触发 layout 和 paint
  提升合成层的最好方式是使用 CSS 的 will-change 属性：
  #target {
  will-change: transform;
  }