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

大家好，我是讯享网，很高兴认识大家。

讯享网

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
为了构建渲染树，浏览器主要完成了以下工作：

从DOM树的根节点开始遍历每个可见节点。
对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们。
根据每个可见节点以及其对应的样式，组合生成渲染树。

第一步中，既然说到了要遍历可见的节点，那么我们得先知道，什么节点是不可见的。不可见的节点包括：

一些不会渲染输出的节点，比如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 之间。

所以：
parseInt('1', 0);//'1'
parseInt('2', 1);//NaN
parseInt('3', 2);//NaN，由于2进制中没有3

讯享网

复盘如下：

将题目改成如下：

讯享网

此时打印结果如下：

讯享网

indexOf

两个for循环

讯享网

ES6 set方法

filter方法

讯享网

讯享网

原生ajax的请求步骤

讯享网

讯享网

一个简易的双向绑定

讯享网

前端工程化

前端模块化

讯享网

es6带来了语言原生的模块化方案：

讯享网

前端组件化

讯享网

讯享网

解释如下：

讯享网

解释如下：

讯享网

解释如下：

讯享网

mvc

interview-init
所有通信都是单向的

讯享网

mvp

interview-init

mvvm

讯享网

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

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

BFC 特性

注意：渲染树只包含可见的节点

注意：回流一定会触发重绘，而重绘不一定会回流

前端工程化

前端模块化

前端组件化

mvc

mvp

mvvm

jq

vue

react

angular

XSS攻击的防范

CSRF攻击的防范

相关推荐