页面优化介绍

最新推荐文章于 2022-05-02 21:57:29 发布

前端老五

最新推荐文章于 2022-05-02 21:57:29 发布

阅读量593

点赞数 1

本文链接：https://blog.csdn.net/m0_46512929/article/details/117446836

版权

一、浏览器的组成：js引擎+渲染引擎

二、渲染引擎的工作步骤

三、页面优化的相关的概念：

如果想实现页面的优化，尽量的减少重流和重绘发生的次数。

4：发生重流的情形：

5：发生重绘的情形：

6：进行页面性能的优化，从减少发生重流和重绘的次数着手。

四、防抖节流

五、防抖和节流的区别：

一、浏览器的组成：js引擎+渲染引擎

二、渲染引擎的工作步骤

1：解析代码：代码到DOM树 + CSSOM。
2：对象合成：DOM+CSSOM--渲染树。render tree
3：布局：渲染树计算布局。（布局流）
4：绘制：渲染树显示到屏幕上。

三、页面优化的相关的概念：

1：重流：也称为回流、重排
页面中的节点结构发生了变化，页面需要重新布局。这个过程称为重流。
2：重绘：
页面中的节点的样式（外观）发生了变化，页面需要重新绘制（重新渲染），这个过程称为重绘。
发生重流的时候一定会发生重绘。发生重绘的时候不一定会发生重流。

3：上述的两个概念是页面优化的两个主要部分。

如果想实现页面的优化，尽量的减少重流和重绘发生的次数。

重绘：dom节点的css样式颜色的变化过程叫做重绘改变的是cssTree 一部分变化，对randerTree影响相对较小。所以相对与重排而言对浏览器性能影响较小
重排：js动态的修改dom 即更改了DOM树了更改dom树之后 renderTree就变了，renderTree变了也就是要重新建立一个renderTree了，这个过程叫做重排。

4：发生重流的情形：

（1）页面首次渲染；

（2）浏览器窗口大小发生改变；

（3）元素尺寸或位置发生改变；

（4）元素内容变化（文字数量或图片大小等等）；

（5）元素字体大小变化；

（6）添加或者删除可见的DOM元素；

（7）触发display

5：发生重绘的情形：

重绘触发条件：当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它。

6：进行页面性能的优化，从减少发生重流和重绘的次数着手。

浏览器自身有些优化的方案，如果多次对同一个元素进行样式的修改，那么会对这些修改进行优化，尽量一次重排实现。
（1）读写分开进行
每次读取元素的样式，那么该元素的所有的样式都是重绘之后的结果。
（2）使用cssText
div.style.cssText
批量对样式进行修改。
（3）使用 documentFragment
使用文档片段来实现对多个元素的同时操作。
（4）absolute 和 fixed 定位
（5）必要时才显示隐藏元素