千锋教育-做有情怀、有良心、有品质的职业教育机构

手机站
千锋教育

千锋学习站 | 随时随地免费学

千锋教育

扫一扫进入千锋手机站

领取全套视频
千锋教育

关注千锋学习站小程序
随时随地免费学习课程

当前位置:首页  >  技术干货  > 什么是回流和重绘

什么是回流和重绘

来源:千锋教育
发布人:syq
时间: 2022-07-28 16:11:24 1658995884

  今天我们来了解一下什么是回流和重绘,先来看一下官方定义:

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

回流和重绘

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

  其实简单的说:

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

1

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

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

2

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

3

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

4

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

5

  回流和重绘这都是我们经常做的一些操作,快快动手试起来吧!更多关于前端培训的问题,欢迎咨询千锋教育在线名师。千锋教育拥有多年IT培训服务经验,采用全程面授高品质、高体验培养模式,拥有国内一体化教学管理及学员服务,助力更多学员实现高薪梦想。

  注:本文部分文字和图片来源于网络,如有侵权,请联系删除。版权归原作者所有!

 

tags:
声明:本站稿件版权均属千锋教育所有,未经许可不得擅自转载。
10年以上业内强师集结,手把手带你蜕变精英
请您保持通讯畅通,专属学习老师24小时内将与您1V1沟通
免费领取
今日已有369人领取成功
刘同学 138****2860 刚刚成功领取
王同学 131****2015 刚刚成功领取
张同学 133****4652 刚刚成功领取
李同学 135****8607 刚刚成功领取
杨同学 132****5667 刚刚成功领取
岳同学 134****6652 刚刚成功领取
梁同学 157****2950 刚刚成功领取
刘同学 189****1015 刚刚成功领取
张同学 155****4678 刚刚成功领取
邹同学 139****2907 刚刚成功领取
董同学 138****2867 刚刚成功领取
周同学 136****3602 刚刚成功领取
相关推荐HOT