前端的优化操作

1、浏览器的一个请求从发送到返回都经历了什么？

1.发送URL请求到DNS服务器，获取域名对应的 web服务器的ip地址

2.与web服务器建立TCP/IP协议

3.浏览器向web服务器发送HTTP GET请求

4.web服务器响应请求，并返回指定url的数据

5.浏览器下载web服务器返回的数据并解析html源文件

6.生成Dom树，解析js和css，渲染页面

image.png

image.png

01.请求过程中一些潜在的性能优化点

image.png

2、资源的合并与压缩

目标：

* 减少http请求数量

* 减少请求资源的大小

操作方式：

* html压缩

image.png

* css压缩

image.png

* js压缩与混乱

image.png

image.png

* 文件合并

image.png

image.png

3、图片相关的优化操作

01.不同格式图片常用的业务场景

* jpg有损压缩，压缩率高，不支持透明 —— 大部分不需要透明图片的业务场景

* png支持透明，浏览器兼容好 —— 大部分需要透明图片的业务场景

* webp压缩程度更好，在ios webview有兼容性问题 —— 安卓全部

* svg矢量图，代码内嵌，相对较小，图片样式相对简单的场景 —— 图片样式相对简单的业务场景

---

02.CSS雪碧图

image.png

---

03.Image inline

image.png

---

04.使用矢量图

image.png

---

05.在安卓下使用webp

image.png

---

4、懒加载与预加载

* 懒加载：一张图片就是一个标签，浏览器是否发起请求图片是根据的src属性，所以实现懒加载的关键就是，在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值

* 懒加载作用：减少无效资源的加载，提高用户体验，减轻服务器的压力，优先加载可视区域的内容。

---

* 预加载：就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就可以直接从缓存中获取资源

* 预加载作用：在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间

* 实现预加载的几种方法：

* 使用HTML标签

* 使用image对象

* 使用XMLHttpRequest对象，虽然存在跨域问题，但会精细控制预加载过程

* 使用PreloadJS库

image.png

---

5、css、js 的加载与执行 ———— html页面加载渲染的过程

在页面加载时，浏览器把获取到的HTML代码解析成一个DOM树，DOM树里包含了所有HTML标签，包括display：none隐藏，还有用JS动态添加的元素等。

render tree（渲染树）类似于DOM tree（DOM树），但区别很大，因为render tree能识别样式，同时render tree中每个NODE都有自己的style，而且render tree不包含隐藏的节点（比如display：none的节点，还有head节点），因为这些节点不会用于呈现，而且不会影响呈现，所以就不会包含到render tree中。

image.png

实质：DOM tree（DOM树）结合CSS，就渲染除了render tree（渲染树）

image.png

渲染步骤：

* 第一步，用HTML分析器，分析HTML元素，构建一颗DOM树(标记化和树构建)。

* 第二步，用CSS分析器，分析CSS文件和元素上的inline样式，生成页面的样式表。

* 第三步，将DOM树和样式表，关联起来，构建一颗Render树(这一过程又称为Attachment)。每个DOM节点都有attach方法，接受样式信息，返回一个render对象(又名renderer)。这些render对象最终会被构建成一颗Render树。

* 第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。

* 第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。

image.png

---

6、回流（layout）与重绘（paint）

image.png

回流：当render tree中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。这就称为回流(reflow)

何时需要回流：当页面布局和几何属性改变时就需要回流

image.png

---

重绘：当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，比如background-color。则就叫称为重绘

image.png

---

回流与重绘的区别：

image.png

---

新建DOM的过程：

image.png

---

Chrome创建图层的条件：

image.png

实际项目中应对回流 & 重绘的优化操作：

image.png