全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

web前端技巧|一文讲解回流和重绘

发布时间:2021-04-01 09:21:00
发布人:小千

      今天我们为大家介绍一下web前端中涉及到的回流和重绘的概念,先来看一下官方给出的定义:

      回流(reflow):对于DOM结构中的各个元素都有自己的盒子模型,这些都需要浏览器根据各种样式(浏览器的、开发人员定义的等)来计算并根据计算结果将元素放到它该出现的位置,这个过程称之为reflow ;

      重绘(repaint):当各种盒子的位置、大小以及其他属性,例如颜色、字体大小等都确定下来后,浏览器于是便把这些元素都按照各自的特性绘制了一遍,于是页面的内容出现了,这个过程称之为repaint。

1

      其实简单的说:

      回流(reflow)就是元素的位置发生了改变(不管是添加、删除元素,还是元素尺寸改变),会触发回流。比如,这里有2个p标签,我们想在两个p标签之间插入另外一个p标签

2

      这个时候老大还是老大,插入一个新老二之后,原来的老二变成了老三,位置发生了改变会触发回流。

      那么重绘(repaint)简单的说,元素位置不会发生改变,视觉效果会有所改变。

4

      元素的位置没有发生改变,只有文字颜色做了修改,这个时候就发生了重绘。知道了回流和重绘,我们在做项目的过程中,要尽量避免,这样可以使我们写出高性能的DOM。例如:我们在给元素添加样式修饰时,避免一条条更改

5

      可以将修饰放入一个class名中,做一次class名插入

6

      还有我们要循环插入很多DOM元素时,可以使用documentFragment

7

      最后想学习web前端的同学,可以参考千锋web前端培训班提供的web前端学习路线,该学习路线对从零基础小白到web前端初级开发工程师,web前端高级开发工程师,后面的web前端大神级开发工程师都有一个明确清晰的指导,根据千锋web前端培训机构提供的web前端学习路线图可以让你对学习web前端开发需要掌握的知识有个清晰的了解,并快速入门web前端开发。想要获取前端完整学习路线和免费的学习资料可以添加我们的web前端技术分享交流qq群:857920838  加群找群管理领取即可,等你来哦~~

相关文章

为什么微服务一定要上Docker?

为什么微服务一定要上Docker?

2023-10-14
实现atoi函数时需要注意什么?

实现atoi函数时需要注意什么?

2023-10-14
Spring为什么不使用二级缓存?

Spring为什么不使用二级缓存?

2023-10-14
JAVA为什么要用多态,什么是多态?

JAVA为什么要用多态,什么是多态?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取