浏览器解析URL过程、防抖、节流、回流、重绘解读

1、浏览器解析URL过程

【浏览器地址栏输入url地址到出现视图中间经历了哪些过程呢？下面我们一起来了解一下】

1. 地址栏中输⼊URL;

2. 浏览器会先查看缓存（浏览器缓存、系统缓存、路由缓存）如果缓存中有会直接渲染页面;

3. 浏览器检测没有缓存就会发送http请求，发送http请求前，需要域名解析(DNS域名解析)，解析获取相应的IP地址;

4. 浏览器会向服务器发起tcp连接（tcp连接会经过三次握⼿阶段，而终止一个连接要经过四次挥手）;

5. tcp连接成功，客户端和服务器端成功地建立连接，浏览器会向服务器发送http请求，请求服务器的数据;

6. 服务器接收到请求就会处理接收到的请求，将请求所需的数据返给浏览器（接收请求处理请求返回数据给浏览器这个阶段叫：报文），数据返回给浏览器请求断开（为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求）;

7. 浏览器接收到http请求的响应数据，读取页面数据解析html源码数据，浏览器渲染;

8. 解析css样式、js交互，生成dom树，页面渲染完成;

总结：

浏览器的内核分为两个核心部分：渲染引擎与js引擎。【比如谷歌浏览器（Chrome）】渲染引擎：webkit渲染引擎，js引擎：v8渲染引擎。渲染引擎用来渲染窗口，可以显示html,xml,xhtml,图片等，也可以通过插件渲染其他的文件；例如PDF。

2、回流与重绘 / 防抖与节流

【浏览器渲染页面有回流与重绘的过程，下面我们一起来了解一下】

1. 回流：回流又叫重排，当元素的尺寸、结构或者触发某些属性时，浏览器会重新渲染页面，我们称为回流；且回流是较重的操作，浏览器需要重新经过计算，计算后还需要重新页面布局。

常见的回流：

<1>. 页面初次渲染

<2>. 浏览器窗口大小改变

<3>. 元素尺寸/位置/内容发生改变

<4>. 元素字体大小变化

<5>. 添加或者删除可见的 DOM 元素

<6>. 激活 CSS 伪类（:hover…）

2. 重绘：当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需要浏览器
根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘；损耗比较少，因为此时由于只需要 UI 层面的重新像素绘制。

常见的重绘：

<1>. 改变元素颜色

<2>. 改变背景颜色

3. 防抖：在一个事件被多次触发时，只会执行最后一次。

常见的防抖：

<1>. 在表单登录的时候

4. 节流：在规定的时间只会触发一次。

常见的节流：

<1>. 轮播图

总结：

为什么需要 节流，因为有些事情会造成浏览器的 回流，不节流就会造成浏览器频繁回流；而 回流 会使浏览器开销增大，所以我们通过 节流 来防止这种增大浏览器开销的事情。

重绘与回流的关系：重绘不一定会回流，回流一定会重绘

工作中我们要避免大量使用重绘与回流：

1. 避免频繁操作样式，可汇总后统一一次修改

2. 尽量使用 class 进行样式修改，而不是直接操作样式

3. 减少 DOM 的插入操作，可使用字符串一次性插入

4. 尽量避免用 table 布局（table 元素一旦触发回流就会导致 table 里所有的其它元素回流）