当前位置：网站首页 > 编程语言 > 正文

重绘和回流和重排（重绘一定会触发回流）

编程语言 来源： 网络 编辑：小编 更新时间：2025-07-07 07:45:09 浏览量：11



 
  
 
  
BFC 特性
 
  
1）同一个 BFC 下外边距会发生折叠。
 
  
如下例子两个盒子之间距离只有100px，这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中。
 
  
 
  
即可改成这样
 
  
 
  
2）BFC 可以包含浮动的元素（清除浮动）
 
  
 
  
3）BFC 可以阻止元素被浮动元素覆盖
 
  
下面是一个文字环绕效果
 
  
 
  
interview-init
 
  
给p元素添加overflow: hidden
 
  
 
  
interview-init
 
  
这个方法可以用来实现两列自适应布局,左边宽度固定，右边自适应宽度
 
  
 
  
1）Object.prototype.toString.call()
 
  
每一个继承 Object 的对象都有 toString 方法，如果 toString 方法没有重写的话，会返回 [object type]，其中 type 为对象的类型。但当除了 Object 类型的对象外，其他类型直接使用 toString 方法时，会直接返回都是内容的字符串，所以我们需要使用call或者apply方法来改变toString方法的执行上下文。
 
  
 
  
 
  
Object.prototype.toString.call() 常用于判断浏览器内置对象。
 
  
2）instanceof
 
  
instanceof 的内部机制是通过判断对象的原型链中是不是能找到类型的 prototype。
 
  
使用 instanceof判断一个对象是否为数组，instanceof 会判断这个对象的原型链上是否会找到对应的 Array 的原型，找到返回 true，否则返回 false。
 
  
但 instanceof 只能用来判断对象类型，原始类型不可以。并且所有对象类型 instanceof Object 都是 true。
 
  
 
  
3）Array.isArray()
 
  
     
   
  • 功能：用来判断对象是否为数组
    •  
   
  • instanceof 与 isArray
    •  
  
 
  
当检测Array实例时，Array.isArray 优于 instanceof ，因为 Array.isArray 可以检测出 iframes
 
  
 
  
     
   
  • Array.isArray() 与 Object.prototype.toString.call()
     

    •  
  
 
  
Array.isArray()是ES5新增的方法，当不存在 Array.isArray() ，可以用 Object.prototype.toString.call() 实现。
 
  
 
  
4）typeof
 
  
 
  
 
  
1）使用position + transform，不定宽高时
 
  
 
  
2）使用position + transform，有宽高时
 
  
 
  
3）使用flex
 
  
 
  
或者
 
  
 
  
或者
 
  
 
  
4）使用position
 
  
 
  
5）使用grid
 
  
 
  
6）使用table
 
  
 
  
或者
 
  
 
  
7）使用伪类
 
  
 
  
 
  
正常模式下：
 
  
 
  
严格模式下会报错：
 
  
 
  
有window：
 
  
 
  
有var：
 
  
 
  
 
  
先说结果
 
  
依次为：undefined，10，20
 
  
 
  
换成这样：
 
  
 
  
换成这样：
 
  
 
  
interview-init
 
  
从上面这个图上，我们可以看到，浏览器渲染过程如下：
 
  
 
  
渲染过程看起来很简单，让我们来具体了解下每一步具体做了什么。
 
  
interview-init
为了构建渲染树，浏览器主要完成了以下工作：

 
  
     
   
  1. 从DOM树的根节点开始遍历每个可见节点。
    2.  
   
  2. 对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
    3.  
   
  3. 根据每个可见节点以及其对应的样式，组合生成渲染树。
    4.  
  
 
  
第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括：
 
  
     
   
  • 一些不会渲染输出的节点，比如script、meta、link等。
    •  
   
  • 一些通过css进行隐藏的节点。比如display:none。注意，利用visibility和opacity隐藏的节点，还是会显示在渲染树上的。只有display:none的节点才不会显示在渲染树上。
    •  
  
 
  
注意：渲染树只包含可见的节点
 
  
前面我们通过构造渲染树，我们将可见DOM节点以及它对应的样式结合起来，可是我们还需要计算它们在设备视口(viewport)内的确切位置和大小，这个计算的阶段就是回流。
 
  
为了弄清每个对象在网站上的确切大小和位置，浏览器从渲染树的根节点开始遍历，我们可以以下面这个实例来表示：
 
  
 
  
我们可以看到，第一个div将节点的显示尺寸设置为视口宽度的50%，第二个div将其尺寸设置为父节点的50%。而在回流这个阶段，我们就需要根据视口具体的宽度，将其转为实际的像素值。
 
  
最终，我们通过构造渲染树和回流阶段，我们知道了哪些节点是可见的，以及可见节点的样式和具体的几何信息(位置、大小)，那么我们就可以将渲染树的每个节点都转换为屏幕上的实际像素，这个阶段就叫做重绘节点。
 
  
既然知道了浏览器的渲染过程后，我们就来探讨下，何时会发生回流重绘。
 
  
我们前面知道了，回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：
 
  
     
   
  • 添加或删除可见的DOM元素
    •  
   
  • 元素的位置发生变化
    •  
   
  • 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
    •  
   
  • 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
    •  
   
  • 页面一开始渲染的时候（这肯定避免不了）
    •  
   
  • 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）
    •  
  
 
  
注意：回流一定会触发重绘，而重绘不一定会回流
 
  
根据改变的范围和程度，渲染树中或大或小的部分需要重新计算，有些改变会触发整个页面的重排，比如，滚动条出现的时候或者修改了根节点。
 
  
现代的浏览器都是很聪明的，由于每次重绘都会造成额外的计算消耗，因此大多数浏览器都会通过队列化修改并批量执行来优化重绘过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是！当你获取布局信息的操作的时候，会强制队列刷新，比如当你访问以下属性或者使用以下方法：
 
  
     
   
  • offsetTop、offsetLeft、offsetWidth、offsetHeight
    •  
   
  • scrollTop、scrollLeft、scrollWidth、scrollHeight
    •  
   
  • clientTop、clientLeft、clientWidth、clientHeight
    •  
   
  • getComputedStyle()
    •  
   
  • getBoundingClientRect
    •  
   
  • 具体可以访问这个网站：https://gist.github.com/pauli... 
    •  
  
 
  
以上属性和方法都需要返回最新的布局信息，因此浏览器不得不清空队列，触发回流重绘来返回正确的值。因此，我们在修改样式的时候，最好避免使用上面列出的属性，他们都会刷新渲染队列。如果要使用它们，最好将值缓存起来。
 
  
好了，到了我们今天的重头戏，前面说了这么多背景和理论知识，接下来让我们谈谈如何减少回流和重绘。
 
  
由于重绘和重排可能代价比较昂贵，因此最好就是可以减少它的发生次数。为了减少发生次数，我们可以合并多次对DOM和样式的修改，然后一次处理掉。考虑这个例子
 
  
 
  
例子中，有三个样式属性被修改了，每一个都会影响元素的几何结构，引起回流。当然，大部分现代浏览器都对其做了优化，因此，只会触发一次重排。但是如果在旧版的浏览器或者在上面代码执行的时候，有其他代码访问了布局信息(上文中的会触发回流的布局信息)，那么就会导致三次重排。
 
  
因此，我们可以合并所有的改变然后依次处理，比如我们可以采取以下的方式：
 
  
     
   
  • 使用cssText 
     
    •  
   
  • 修改CSS的class 
     
    •  
  
 
  
具体参考：https://muyiy.cn/question/bro...
 
  
 
  
 
  
interview-init
 
  
 
  
     
   
  • map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
    •  
   
  • map() 方法按照原始数组元素顺序依次处理元素。
    •  
  
 
  
map(parseInt)其实是：
 
  
 
  
即依次运行的是：
 
  
 
  
     
   
  • parseInt(string, radix) 函数可解析一个字符串，并返回一个整数。
    •  
   
  • 当参数 radix 的值为 0，或没有设置该参数时，parseInt() 会根据 string 来判断数字的基数。
    •  
   
  • radix 可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。
    •  
  
 
  
 
  
 
  
复盘如下：
 
  
 
  
将题目改成如下：
 
  
 
  
此时打印结果如下：
 
  
 
  
 
  
     
   
  • indexOf
    •  
  
 
  
 
  
     
   
  • 两个for循环
    •  
  
 
  
 
  
     
   
  • ES6 set方法
    •  
  
 
  
 
  
     
   
  • filter方法
    •  
  
 
  
 
  
 
  
 
  
原生ajax的请求步骤
 
  
 
  
 
  
 
  
 
  
一个简易的双向绑定
 
  
 
  
 
  
前端工程化
 
  
 
  
前端模块化
 
  
 
  
es6带来了语言原生的模块化方案：
 
  
 
  
 
  
前端组件化
 
  
 
  
 
  
 
  
 
  
解释如下：
 
  
 
  
 
  
解释如下：
 
  
 
  
 
  
解释如下：
 
  
 
  
 
  
mvc
 
  
 
  
interview-init
所有通信都是单向的

 
  
 
  
mvp
 
  
 
  
interview-init
 
  
mvvm
 
  
 
  
bg2015020110.png
 
  
jq
 
  
 
  
vue
 
  
 
  
react
 
  
 
  
angular
 
  
 
  
 
  
优势：
 
  
 
  
 
  
 
  
XSS攻击的防范
 
  
 
  
CSRF攻击的防范
 
  
 
  
 
  
a、直接使用sort()方法，默认的排序方法会将数组元素转换为字符串，然后比较字符串中字符的UTF-16编码顺序来进行排序。
 
  
 
  
b、sort，可以接收一个函数，返回值是比较两个数的相对顺序的值
 
  
 
  
     
   
  • 返回值大于0 即a-b > 0 ， a 和 b 交换位置
    •  
   
  • 返回值大于0 即a-b < 0 ， a 和 b 位置不变
    •  
   
  • 返回值等于0 即a-b = 0 ， a 和 b 位置不变
    •  
  
 
  
 
  
a、箭头函数是匿名函数，不能作为构造函数，不能使用new
 
  
 
  
b、箭头函数不绑定arguments，取而代之用rest参数...解决
 
  
 
  
c、箭头函数不绑定this，会捕获其所在的上下文的this值，作为自己的this值
 
  
 
  
d、箭头函数通过call()或apply()方法调用一个函数时，只传入了一个参数，对 this 并没有影响。
 
  
 
  
e、箭头函数没有原型属性
 
  
 
  
原文地址：https://github.com/liujianxi/share/tree/master/interview-question
到此这篇重绘和回流和重排（重绘一定会触发回流）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！ 
  

                            


                            

                                
  • 
                                    
                                    上一篇：
                                    
                                    动态库存表自动进销存什么意思（动态库存是什么意思）
                                    
                                    
                                
    • 
                                
  • 
                                    
                                    下一篇：
                                    
                                    eww 什么意思（eww啥意思）
                                    
                                    
                                
    • 
                            
    

                            
                            
    
                                
    
                                    版权声明：
                                    
    
                                        
                                        本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
                                        
                                        
    
                                         
                                        如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
                                        
                                    

    
                                    
    转载请注明出处，原文链接：https://www.xkablog.com/bcyy/22471.html
    
                                
    
                            
    
                            
                        
    
                        
    
                            
    
                                
                                
                                
                            
    
                        
    

                        
                        
                        
    
                            
    相关文章：
    
                        
                        
  • 
                                动态库存表自动进销存什么意思（动态库存是什么意思）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                卡巴斯基手机版（卡巴斯基手机版好用吗）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                多级列表有什么用途？（多级列表的作用是什么）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                xp虚拟机怎么用（win xp虚拟机）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                2258xt主控和2258的区别（2258xt主控怎么样）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                eww 什么意思（eww啥意思）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                linux 命令安装（Linux命令安装Windows10）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                polovillae是什么品牌（polovillae是什么品牌的衣服）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                list转字符串用逗号隔开（list变为字符串）2025-07-07 07:45:09
                        
    • 
                        
                        
  • 
                                autolisp全局变量（auto可以说明全局变量吗）2025-07-07 07:45:09
                        
    • 
                        
                        
    
                        
                    
    
                
    
            
    
        
    
        
    
    

    


    
    ❮
    全屏图片
    ❯