Animations功能与Transitions功能相同，都是通过改变元素的属性值来实现动画效果的。

它们的区别在于：使用Transitions功能是只能通过指定属性的开始值与结束值。然后在这两个属性值之间进行平滑过渡的方式来实现动画效果，因此不能实现复杂的动画效果；而Animations则通过定义多个关键帧以及定义每个关键帧中元素的属性值来实现更为复杂的动画效果。

**语法：**animations: name duration timing-function iteration-count;

name: 关键帧集合名（通过此名创建关键帧的集合）

duration: 表示在多长时间内完成属性值的平滑过渡

timing-function: 表示通过什么方法来进行平滑过渡

iteration-count: 迭代循环次数，可设置为具体数值，或者设置为infinite进行无限循环，默认为1.

用法：@-webkit-keyframes 关键帧的集合名 {创建关键帧的代码}

如下面的代码：

@-webkit-keyframes mycolor {

0% { background-color:red;}

40% { background-color:darkblue;}

70% { background-color: yellow;}

100% { background-color:red;}}

.animate:hover {

-webkit-animation-name: mycolor;

-webkit-animation-duration: 5s;

-webkit-animation-timing-function:

5. Flex布局

设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。

采用 Flex 布局的元素，称为 Flex 容器（flex container）

flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content

5.1 flex-direction属性

flex-direction 属性决定主轴的方向（即项目的排列方向）。

.box {

flex-direction: row | row-reverse | column | column-reverse;

}

它可能有4个值。

5.2 flex-wrap属性

默认情况下，项目都排在一条线（又称"轴线"）上。 flex-wrap 属性定义，如果一条轴线排不下，如何

换行。

它可能取三个值。

（1） nowrap （默认）：不换行。

（2） wrap ：换行，第一行在上方。

（3） wrap-reverse ：换行，第一行在下方。

5.3 flex-flow

涉及面试题：如何正确判断 this？箭头函数的 this 是什么

this 的指向，是在调用函数时根据执行上下文所动态确定的。

函数在浏览器全局环境中被简单调用（非显式/隐式绑定下）

严格模式下 this 绑定到 undefined，

否则绑定到全局对象 window／global；在执行函数时，如果函数中的this是被上一级的对象所调用，那么this指向就是上一级的对象； 否则指 向全局环境。回调函数(除事件函数)：

数组的所有遍历方法forEach,map,filter,reduce,every,some,flatMap,sort；这些方法均使用了回调

函数,因此在所有使用回调函数的方法中,所有回调函数中this都被指window,

'a' + + 'b' // -> "aNaN"

4 * '3' // 12

4 * [] // 0

4 * [1, 2] // NaN

let a = {

valueOf() {

return 0

},

toString() {

return '1'

}

}

a > -1 // true

setInterval,setTimeOut 函数中的回调函数的因为作用域不明(不知道在哪里调用)就会指向

window：

事件函数中的this：指向侦听的对象

这里的特殊情况（事件函数）是因为：在函数执行时底层函数调用了call和apply，因此此时的回调函数中的this就会被指向绑定的侦听对象上；在定义对象属性时，obj对象还没有创建完成；this仍旧指向window一般构造函数 new 调用，绑定到新创建的对象上；一般由 call/apply/bind 方法显式调用，绑定到指定参数的对象上；

面试技巧：如果把这项放到最后说下个问题多半就是三者区别一般由上下文对象调用，绑定在该对象上；箭头函数中，根据外层上下文绑定的 this 决定 this 指向

1、全局环境下的 this

函数在浏览器全局环境中被简单调用，ES5非严格模式下指向 window，ES6严格模式下指向

undefined。

function fn1( ) {

console.log(this) }

fn1( ) // window

function fn2( ) { 'use strict'

console.log(this)}

fn2( ) // undefined

在执行函数时，如果函数中的this是被上一级的对象所调用，那么this指向就是上一级的对象； 否则指

向全局环境。

Var foo = {

bar：10，

fn：function( ) {

console.log(this)

console.log(this.bar)}

}

***\*var fn1 = foo.fn\****

fn1( ) // ***\*直接调用\****，this ***\*指向 window\****，window.bar => undefined

foo.fn( ) // 通过 foo 调用，this 指向 foo，foo.bar => 10

this.a=3；//this--->window

var b=5；

function fn(){

var b=10；

console.log(b+this.b)；//this--->window

// 这种方法仅限于ES5,在ES6严格模式中this将会变成undefined

}

fn()

2、回调函数中的this

数组的所有遍历方法forEach,map,filter,reduce,every,some,flatMap,sort；这些方法均使用了回调函

数,因此在所有使用回调函数的方法中,除了特殊的情况外(事件函数),其他所有回调函数中this都被指向

window,setInterval,setTimeOut 函数中的回调函数的因为作用域不明(不知道在哪里调用)就会指向

window：

var obj = {

fn： function ( ) {

// console.log(this)；

***\*return\**** function ( ) {

console.log(this)；//this--->window

}

}

}

var fn=obj.fn( )；

fn( )；//因为是在另外的作用域调用

//return中回调函数因为相当于var fn=obj.fn( )( )；是在外部执行所以会指向window

这里的特殊情况（事件函数）是因为：在函数执行时底层函数调用了call和apply，因此此时的回调函数中的this就会被指向document；

3、对象中的this

在定义属性时，obj对象还没有创建完成；this仍旧指向window

箭头函数指向当前域外的内容

var c=100；

var obj={

c：10,

b：this.c,//this--->window 定义属性时,obj对象还没有创建完成,this仍旧指向window

a：function(){

// this；//this--->obj

// console.log(obj.c)；

console.log(this.c)；

},

d：()=>{

//this--->window

console.log(this)；

}

}

// console.log(obj)；

// obj.d()；

var obj1=obj；

obj=null；

obj1.a()；

这里a：function( )This.c}中为什么不用obj而用this呢：因为obj的地址值可能改变；就会找不到这个引

用变量obj对象；

4、ES6class中的this

class Box{

a=3；

static abc(){

console.log(this)；//Box 静态方法调用就是通过类名.方法

// Box.abc()；

// 尽量不要在静态方法中使用this

}

constructor(_a){

this.a=_a }

play(){

// this就是实例化的对象

console.log(this.a)；

// 这个方法是被谁执行的,this就是谁

}

let b=new Box(10);

b.play();

let c=new Box(5);

c.play();

//使用静态方法：就指向box：相当于box.abc( )调用该方法；所以指向box

class Box{

a=3;

static abc(){

console.log(this)；//Box 静态方法调用就是通过类名.方法

// Box.abc()；

// 尽量不要在静态方法中使用this

}

5、ES5中的this

function Box(_a){

this.a=_a;

}

Box.prototype.play=function(){

console.log(this.a);//this就是实例化的对象

}

Box.prototype.a=5;

Box.abc=function(){

//this

// 这样的方法,等同于静态方法

}

var a=new Box(10);

a.play();

Box.abc();

6、事件函数中的this：指向侦听的对象

document.addEventListener("click",clickHandler)；

function clickHandler(e){

console.log(this)；//this--->e.currentTarget

}

7、Call apply bind中的this：指向绑定的对象

function fn(a,b){

this.a=a;//this如果使用了call,apply,bind,this将会被指向被绑定的对象

this.b=b;

return this;

}

var obj=fn.call({ },3,5)

var obj=fn.apply({ },[3,5])

var obj=fn.bind({ })(3,5)；

*8、箭头函数中的this：指向当前函数外的函数或内容与自带bind(this)的作用

var obj={

a：function(){

document.addEventListener("click",e=>{

console.log(this)；//指向事件侦听外函数中的this/obj

})；

var arr=[1,2,3]；

arr.forEach(item=>{

console.log(this)；//this-->obj

})；

// 相当于自带bind(this)的作用

arr.forEach((function(item){

}).bind(this))；

}

}

4. == vs ===

涉及面试题：== 和 === 有什么区别？

对于 == 来说，如果对比双方的类型不一样的话，就会进行类型转换

假如我们需要对比 x 和 y 是否相同，就会进行如下判断流程：

首先会判断两者类型是否相同。相同的话就是比大小了类型不相同的话，那么就会进行类型转换会先判断是否在对比 null 和 undefined ，是的话就会返回 true判断两者类型是否为 string 和 number ，是的话就会将字符串转换为 number

1 == '1'

↓

1 == 1

判断其中一方是否为 boolean ，是的话就会把 boolean 转为 number 再进行判断

'1' == true

↓

'1' == 1

↓

1 == 1

判断其中一方是否为 object 且另一方为 string 、 number 或者 symbol ，是的话就会把object 转为原始类型再进行判断

'1' == { name: 'yck' }

↓

'1' == '[object Object]'

5. 闭包

什么是闭包？

要理解闭包，首先必须理解Javascript特殊的变量作用域。

变量的作用域无非就是两种：全局变量和局部变量。

Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。

而闭包却是能够读取其他函数内部变量的函数。所以，在本质上，闭包就是将函数内部和函数外

部连接起来的一座桥梁。

闭包的特点

1.函数嵌套函数

2.函数内部可以引用外部的参数和变量

3.参数和变量不会被垃圾回收机制回收

因此闭包常会被用于

1可以储存一个可以长期驻扎在内存中的变量

2.避免全局变量的污染

3.保证私有成员的存在

那闭包又因为什么原因不被回收呢

简单来说，js引擎的工作分两个阶段，

一个是语法检查阶段，

一个是运行阶段。而运行阶段又分预解析和执行两个阶段。

在预解析阶段，先会创建执行上下文，执行上下文又包括变量对象、变量对象的作用域链和this指向的创建 。

创建执行上下文后，会对变量对象的属性进行填充。

进入执行代码阶段，此时执行上下文有个Scope属性该属性作为一个作用域链包含有该函数被定义时所有外层的变量对象的引用js解析器逐行读取并执行代码时当我们需要查询外部作用域的变量时，其实就是沿着作用域链，依次在这些变量对象里遍历标志符，直到最后的全局变量对象。

基于js的垃圾回收机制:在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，所以定义了闭包的函数虽然销毁了，但是其变量对象依然被绑定在函数上，只有仍被引用，变量会继续保存在内存中，这就是为什么函数a执行后不会被回收的原因。

变量对象VO：var声明的变量、function声明的函数，及当前函数的形参

作用域链：当前变量对象+所有父级作用域 [[scope]]

this值：在进入执行上下文后不再改变

PS：作用域链其实就是一个变量对象的链，函数的变量对象称之为active object，简称AO。函数创建后就静态的[[scope]]属性，直到函数销毁）

创建执行上下文后，会对变量对象的属性进行填充。所谓属性，就是var、function声明的标志符及函数形参名，至于属性对应的值：变量值为undefined，函数值为函数定义，形参值为实参，没有传入实参则为undefined。

闭包的应用场景

数据封装：闭包可以帮助我们创建具有私有变量的函数，这些变量不会被外部直接访问，从而实现封装。模块化：在JavaScript等语言中，闭包常用于模块化开发，通过闭包可以创建独立的功能模块，避免全局变量的污染。函数柯里化：闭包允许我们将一个多参数的函数转换成一系列单参数的函数，这在函数式编程中非常有用。延迟计算：闭包可以用于实现延迟执行的逻辑，例如，在用户实际需要数据时才进行计算。状态保持：在异步操作中，闭包可以保持异步操作的状态，确保回调函数能够访问到正确的上下文。事件处理：在JavaScript中，闭包常用于事件监听器，确保回调函数能够访问到绑定时的作用域。迭代器和生成器：闭包在迭代器和生成器模式中用于保存迭代状态，使得迭代可以跨多个函数调用持续进行。高阶函数：闭包使得函数可以作为参数传递给其他函数，或者作为其他函数的返回值，这是高阶函数的基础。函数工厂：闭包可以创建函数工厂，即返回一个函数的函数，这些返回的函数可以访问闭包中定义的变量。记忆化：闭包可以用于实现记忆化技术，存储函数的计算结果，避免重复计算，提高性能。定时器和动画：在JavaScript中，闭包可以用于定时器和动画的实现，确保回调函数能够访问到正确的状态。AJAX请求：在进行AJAX请求时，闭包可以确保请求完成时能够访问到请求发起时的上下文。

6. 原型

涉及面试题：如何理解原型？如何理解原型链？

1.每个对象都有 __proto__属性 ，该属性指向其构造函数的原型对象， proto 将对象和其原型对

象连接起来组成原型链

2.在调用实例的方法和属性时，如果在实例对象上找不到，就会往原型对象上找

3.构造函数的 prototype属性 也指向实例的原型对象

4.原型对象的 constructor属性 指向构造函数。

7. 继承

说到继承，最容易想到的是ES6的 extends ，当然如果只回答这个肯定不合格，我们要从函数和原型链的角度上实现继承，下面我们一步步地、递进地实现一个合格的继承实现一个方法可以从而实现对父类的属性和方法的继承，解决代码冗余重复的问题

7.1 原型链继承

原型链继承的原理很简单，

直接让子类的原型对象指向父类实例，

Child.prototype=new Parent()

当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，

从而实现对父类的属性和方法的继承

原型继承的缺点:

1.由于所有Child实例原型都指向同一个Parent实例, 因此对某个Child实例的父类引用类型变量修改会影 响所有的Child实例

2.在创建子类实例时无法向父类构造传参, 即没有实现super()的功能

7.2 构造函数继承

构造函数继承，即在子类的构造函数中执行父类的构造函数，并为其绑定子类的this，

让父类的构造函数把成员属性和方法都挂到子类的this上去；

//在Child的构造函数中执行

Parent.apply(this, arguments);

这样既能避免实例之间共享一个原型实例，又能向父类构造方法传参;

js继承的方式继承不到父类原型上的属性和方法

构造函数继承的缺点

1.继承不到父类原型上的属性和方法

7.3 组合式继承

既然原型链继承和构造函数继承各有互补的优缺点, 那么我们为什么不组合起来使用呢, 所以就有了综合二者的组合式继承

Child.prototype=new Parent()

Child.prototype.constructor=Child //相当于在Child的构造函数中给Parent绑定this

组合式继承的缺点:

1.每次创建子类实例都执行了两次构造函数(Parent.call()和new Parent())，虽然这并不影响对父类的继承，但子类创建实例时，原型中会存在两份相同的属性和方法，这并不优雅

7.4 寄生式组合继承

为了解决组合式继承中构造函数被执行两次的问题,

我们将指向父类实例改为指向父类原型, 减去一次构造函数的执行

到这里我们就完成了ES5环境下的继承的实现，这种继承方式称为寄生组合式继承。

Function.prototype.extend = function (supClass) {

// 创建一个中间替代类,防止多次执行父类(超类)的构造函数

function F() { }

// 将父类的原型赋值给这个中间替代类

F.prototype = supClass.prototype；

// 将原子类的原型保存

var proto = subClass.prototype；

// 将子类的原型设置为中间替代类的实例对象

subClass.prototype = new F()；

// 将原子类的原型复制到子类原型上,合并超类原型和子类原型的属性方法

// Object.assign(subClass.prototype,proto)；

var names = Object.getOwnPropertyNames(proto)；

for (var i = 0； i < names.length； i++) {

var desc = Object.getOwnPropertyDescriptor(proto, names[i])；

Object.defineProperty(subClass.prototype, names[i], desc)；

}

// 设置子类的构造函数时自身的构造函数,以防止因为设置原型而覆盖构造函数

subClass.prototype.constructor = subClass；

// 给子类的原型中添加一个属性,可以快捷的调用到父类的原型方法

subClass.prototype.superClass = supClass.prototype；

// 如果父类的原型构造函数指向的不是父类构造函数,重新指向

if (supClass.prototype.constructor !== supClass) {

supClass.prototype.constructor = supClass；

}

}

function Ball(_a) {

this.superClass.constructor.call(this, _a)；

}

Ball.prototype.play = function () {

this.superClass.play.call(this)；//执行超类的play方法

console.log("end")；

}

Object.defineProperty(Ball.prototype, "d", {

value： 20

})

Ball.extend(Box)；

var b=new Ball(10)；

console.log(b)；

是目前最成熟的继承方式，babel对ES6继承的转化也是使用了寄生组合式继承

8. 深浅拷贝

涉及面试题：什么是浅拷贝？如何实现浅拷贝？什么是深拷贝？如何实现深拷贝？

浅拷贝实现

展开运算符 …Object.assign({}, a)

通常浅拷贝就能解决大部分问题了，但是当我们遇到如下情况就可能需要使用到深拷贝了

let a = {

age: 1,

jobs: {

first: 'FE'

}

}

let b = { ...a }

a.jobs.first = 'native'

console.log(b.jobs.first) // native

浅拷贝只解决了第一层的问题，如果接下去的值中还有对象的话，那么就又回到最开始的话题了，两者享有相同的地址。要解决这个问题，我们就得使用深拷贝了。

深拷贝实现

JSON.parse(JSON.stringify(object))

但是该方法也是有局限性的：

会忽略 undefined会忽略 symbol不能序列化函数不能解决循环引用的对象在遇到函数、 undefined 或者 symbol 的时候，该对象也不能正常的序列化 原型链如何处理DOM 如何处理DateRegES6类nullboolenarraystringnumber

实现一个深拷贝是很困难的，需要我们考虑好多种边界情况，比如原型链如何处理、DOM 如何处理等等，所以这里我们实现的深拷贝只是简易版，并且我其实更推荐使用 lodash 的深拷贝函数。

lodash

function deepClone(obj) {

function isObject(o) {

return (typeof o === 'object' || typeof o === 'function') && o !== null

}

if (!isObject(obj)) {

throw new Error('非对象')

}

let isArray = Array.isArray(obj)

let newObj = isArray ? [...obj] : { ...obj }

Reflect.ownKeys(newObj).forEach(key => {

newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]

})

return newObj

}

let obj = {

a: [1, 2, 3],

b: {

c: 2,

d: 3

}

}

let newObj = deepClone(obj)

newObj.b.c = 1

console.log(obj.b.c) // 2

8. new 操作符调用构造函数具体做了什么？

创建一个新的对象；将构造函数的 this 指向这个新对象；为这个对象添加属性、方法等；最终返回新对象；

9. 冒泡排序如何实现，时间复杂度是多少， 还可以如何改进？

冒泡算法的原理：

升序冒泡： 两次循环，相邻元素两两比较，如果前面的大于后面的就交换位置

降序冒泡： 两次循环，相邻元素两两比较，如果前面的小于后面的就交换位置

js 实现：

// 升序冒泡 function maopao(arr){

const array = [...arr] for(let i = 0, len = array.length; i < len -

1; i++){

for(let j = i + 1; j < len; j++) {

if (array[i] > array[j]) {

let temp = array[i]

array[i] = array[j]

array[j] = temp

}

}

}

return array

}

看起来没问题，不过一般生产环境都不用这个，原因是效率低下，冒泡排序在平均和最坏情况下的时间复杂度都是 O(n^2)，最好情况下都是 O(n)，空间复杂度是 O(1)。因为就算你给一个已经排好序的数组，如[1,2,3,4,5,6] 它也会走一遍流程，白白浪费资源。所以有没有什么好的解决方法呢？

答案是肯定有的：加个标识，如果已经排好序了就直接跳出循环。

优化版：

function maopao(arr){

const array = [...arr]

let isOk = true for(let i = 0, len = array.length;

i < len - 1; i++){

for(let j = i + 1; j < len; j++) {

if (array[i] > array[j]) {

let temp = array[i]

array[i] = array[j]

array[j] = temp

isOk = false

}

}

if(isOk){

Break

}

}

return array}

10. 防抖、节流

10.1 防抖

即短时间内大量触发同一事件，只会执行一次函数，防抖常用于搜索框/滚动条的监听事件处理，如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费;实现原理为设置一个定时器，约定在xx毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到xx毫秒内无第二次操作。

// func是用户传入需要防抖的函数

// wait是等待时间

const debounce = (func, wait = 50) => {

// 缓存一个定时器id

let timer = 0

// 这里返回的函数是每次用户实际调用的防抖函数

// 如果已经设定过定时器了就清空上一次的定时器

// 开始一个新的定时器，延迟执行用户传入的方法

return function(...args) {

if (timer) clearTimeout(timer)

timer = setTimeout(() => {

func.apply(this, args)

}, wait)

}

}

10.2 节流

防抖是 延迟执行 ，而节流是 间隔执行 ，和防抖的区别在于，防抖每次触发事件都重置定时器，而节流在定时器到时间后再清空定时器,函数节流即 每隔一段时间就执行一次 ，实现原理为 设置一个定时器，约定xx毫秒后执行事件，如果时间到了，那么执行函数并重置定时器 ，

// func是用户传入需要防抖的函数

// wait是等待时间

const throttle = (func, wait = 50) => {

// 上一次执行该函数的时间

let lastTime = 0

return function(...args) {

// 当前时间

let now = +new Date()

// 将当前时间和上一次执行函数时间对比

// 如果差值大于设置的等待时间就执行函数

if (now - lastTime > wait) {

lastTime = now

func.apply(this, args)

}

}

}

setInterval(

throttle(() => {

console.log(1)

}, 500),

1

)

11. TCP 三次握手和四次挥手的理解

TCP的三次握手和四次挥手是TCP协议中用于建立连接和断开连接的重要过程。以下是对这两个过程的理解：

1. TCP三次握手：

TCP的三次握手是用于建立可靠的连接的过程，确保双方都能确认对方的可达性和能够接收数据。

具体过程如下：

第一次握手：客户端向服务器发送一个连接请求报文段，其中包含SYN标志位设置为1，序号为A，然后进入SYN_SENT状态等待服务器的确认。客户端首先选择一个初始的序列号A，并随机生成一个初始的ISN（Initial Sequence Number）作为初始序列号。第二次握手：服务器接收到客户端的连接请求报文段后，如果同意建立连接，则向客户端发送一个确认报文段，其中包含SYN和ACK标志位都设置为1，确认号为A+1，序号为B。服务器也会为该连接选择一个自己的初始序列号B，随机生成一个ISN。第三次握手：客户端接收到服务器的确认报文段后，向服务器发送一个确认报文段，其中ACK标志位设置为1，确认号为B+1，序号为A+1。服务器接收到客户端的确认报文段后，连接建立成功，双方可以开始进行数据传输。

通过三次握手，可以确保双方都能确认对方的可达性和能够接收数据，建立了可靠的连接。若其中任何一次握手失败或超时，连接建立就会失败，双方不会建立连接。

TCP四次挥手：

TCP的四次挥手是用于断开连接的过程，由于TCP连接是全双工的，因此每个方向都必须单独进行关闭。具体过程如下：

第一次挥手：客户端发送一个FIN报文段给服务器，关闭客户端到服务器的数据传送，客户端进入FIN_WAIT_1状态。第二次挥手：服务器收到FIN报文段后，发送一个ACK报文段给客户端，确认序号为收到序号+1，服务器进入CLOSE_WAIT状态。第三次挥手：服务器发送一个FIN报文段给客户端，关闭服务器到客户端的数据传送，服务器进入LAST_ACK状态。第四次挥手：客户端收到FIN报文段后，客户端进入TIME_WAIT状态，接着发送一个ACK报文段给服务器，确认序号为收到序号+1，服务器进入CLOSED状态。

完成四次挥手后，连接被完全释放。第二次挥手和第三次挥手都是为了确认双方都已经完成数据的发送和接收。在第二次挥手后，客户端可以继续向服务器发送数据，直到收到服务器的FIN报文段；同样地，在第三次挥手后，服务器也可以继续向客户端发送数据，直到收到客户端的ACK报文段。

12. 介绍下重绘和回流（Repaint & Reflow），以及如何进行优化

12.1 浏览器渲染机制

浏览器采用流式布局模型（Flow Based Layout） 浏览器会把 HTML 解析成 DOM，把 CSS 解析成 CSSOM，DOM

和 CSSOM 合并就产生了渲染树（Render Tree）。 有了

RenderTree，我们就知道了所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上。 由于浏览器使用流式布局，对

Render Tree 的计算通常只需要遍历一次就可以完成，但 table 及其内部元素除外，他们可能需要多次计算，通常要花 3

倍于同等元素的时间，这也是为什么要避免使用 table 布局的原因之一。

12.2 重绘

由于节点的几何属性发生改变或者由于样式发生改变而不会影响布局的，称为重绘，例如 outline, visibility,

color、background-color 等，重绘的代价是高昂的，因为浏览器必须验证 DOM 树上其他节点元素的可见性。

12.3 回流

回流是布局或者几何属性需要改变就称为回流。回流是影响浏览器性能的关键 因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及 DOM 中紧随其后的节点、祖先节点元素 的随后的回流。

减少重绘与回流

CSS

1、使用 transform 替代 top

2、使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局)

3、避免使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局。

4、尽可能在 DOM 树的最末端改变 class，回流是不可避免的，但可以减少其影响。尽可能在 DOM 树的最末端改变 class，可以限制了回流的范围，使其影响尽可能少的节点。

5、避免设置多层内联样式，CSS 选择符从右往左匹配查找，避免节点层级过多。

JavaScript

1、避免频繁操作样式，最好一次性重写 style 属性，或者将样式列表定义为 class

并一次性更改 class 属性。

2、避免频繁操作 DOM，创建一个 documentFragment，在它上面应用所有 DOM

操作，最后再把它添加到文档中。

3、避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个

变量缓存起来。

4、对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素

及后续元素频繁回流。

13. call 和 apply 的区别是什么，哪个性能更好一些

Function.prototype.apply 和 Function.prototype.call 的作用是一样的，区别在于传入参数的不同；第一个参数都是，指定函数体内 this 的指向；3 第二个参数开始不同，apply 是传入带下标的集合，数组或者类数组，apply 把它传给函数作为参数，call 从第二个开始传入的参数是不固定的，都会传给函数作为参数。call 比 apply 的性能要好，平常可以多用 call, call 传入参数的格式正是内部所需要的格式

ES6篇

1. 介绍下 Set、Map、WeakSet 和 WeakMap 的区别？

Set——对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用

WeakSet——成员都是对象；成员都是弱引用，可以被垃圾回收机制回收，可以

用来保存 DOM 节点，不容易造成内存泄漏；

Map——本质上是键值对的集合，类似集合；可以遍历，方法很多，可以跟各

种数据格式转换。

WeakMap——只接受对象最为键名（null 除外），不接受其他类型的值作为键

名；键名是弱引用，键值可以是任意的，键名所指向的对象可以被垃圾回收，

此时键名是无效的；不能遍历，方法有 get、set、has、delete。

2. var、let 及 const 区别

涉及面试题：什么是提升？什么是暂时性死区？var、let 及 const 区别？

函数提升优先于变量提升，函数提升会把整个函数挪到作用域顶部，变量提升只会把声明挪

到作用域顶部

var 存在提升，我们能在声明之前使用。 let 、 const 因为暂时性死区的原因，不能在声明前使用

var 在全局作用域下声明变量会导致变量挂载在 window 上，其他两者不会

let 和 const 作用基本一致，但是后者声明的变量不能再次赋值

3. es6新增了什么?

类(Class)：可以通过class关键字定义一个类，内部使用constructor定义构造方法，使用new关键字创建实例

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

}

greet() {

console.log(`Hello, my name is ${ this.name}`);

}

}

const person = new Person('Alice', 25);

person.greet(); // Hello, my name is Alice

模板字符串(Template Literals)：用反引号包围的字符串，可以内嵌表达式和行终止字符

const name = 'Alice';

const age = 25;

console.log(`Hello, my name is ${ name} and I am ${ age} years old.`);

箭头函数(Arrow Functions)：简化了函数的定义。

const add = (a, b) => a + b;

console.log(add(5, 3)); // 8

let和const声明：提供块级作用域，let用于变量声明，const用于常量声明。

let x = 10;

x = 20; // OK

const y = 30;

// y = 40; // Error: Assignment to constant variable.

Iterator和Generator：提供了一种新的迭代方式，可以自定义迭代器。

function* fibonacci() {

let a = 0;

let b = 1;

while (true) {

yield a;

[a, b] = [b, a + b];

}

}

const fib = fibonacci();

console.log(fib.next().value); // 0

console.log(fib.next().value); // 1

console.log(fib.next().value); // 1

// ...

Promise：用于处理异步操作，可以避免回调地狱。

const fetchData = new Promise((resolve, reject) => {

// 模拟异步操作

setTimeout(() => {

const data = 'Some data';

if (data) {

resolve(data);

} else {

reject('Error: Data not found');

}

}, 1000);

});

fetchData.then(data => console.log(data))

.catch(error => console.error(error));

4. async/await、promise和setTimeout

async/await、Promise 和 setTimeout 都是JavaScript中处理异步操作的重要概念，但它们各自有不同的用途和特性。

4.1 Promise

Promise 是代表异步操作最终完成或失败的对象。它有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。

Promise 构造函数接受一个执行器函数，该函数有两个参数：resolve 和 reject，分别用于将 Promise 标记为已完成（并传递一个值）或已失败（并传递一个原因）。

const promise = new Promise((resolve, reject) => {

setTimeout(() => {

resolve('操作成功完成');

}, 1000);

});

promise.then(result => {

console.log(result); // "操作成功完成"

}).catch(error => {

console.error(error);

});

4.2 async/await

async/await 是建立在 Promise 之上的语法糖，它使得异步代码看起来更像同步代码。

async 函数总是返回一个 Promise。如果在 async 函数中返回一个值，那么这个值会被 Promise.resolve() 包裹并返回。如果 async 函数中抛出一个错误，那么这个错误会被 Promise.reject() 包裹并返回。

await 只能在 async 函数内部使用，它会暂停 async 函数的执行并等待 Promise 完成，然后恢复 async 函数的执行并返回解析后的值（或抛出异常）。

4.3 3. setTimeout

setTimeout 是一个浏览器提供的全局函数，用于在指定的毫秒数后执行函数或指定的代码。它返回一个表示定时器的ID，可以使用 clearTimeout 函数来取消它。

setTimeout 的回调函数是在异步上下文中执行的，因此它不会阻塞其他代码的执行。

setTimeout(() => {

console.log('这是通过setTimeout在1秒后执行的');

}, 1000);

console.log('这是立即执行的');

总结：

Promise 是处理异步操作的对象，它表示一个最终可能完成（也可能失败）的异步操作及其结果值。

async/await 是建立在 Promise 之上的语法糖，它使得异步代码更易于阅读和理解。

setTimeout 是一个用于在指定时间后执行代码的浏览器API，它的回调函数是在异步上下文中执行的。

5. forEach Map的区别

在JavaScript中，forEach 和 map 都是数组（Array）对象上的方法，用于遍历数组的元素。但是，它们之间存在一些重要的差异。

forEach

forEach 方法用于遍历数组的每个元素，并对每个元素执行提供的函数。但是，forEach 不会返回一个新数组，而是直接在原始数组上进行操作（尽管它实际上并不修改数组中的元素值，除非你在回调函数中显式地这样做）。

示例：

const numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(number, index, array) {

console.log(number); // 依次输出 1, 2, 3, 4, 5

// 注意：forEach 不会返回一个新数组

});

map

map 方法也用于遍历数组的每个元素，但是它会将回调函数的结果组成一个新数组返回。原始数组不会被改变。

示例：

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(function(number) {

return number * 2;

});

console.log(doubled); // 输出 [2, 4, 6, 8, 10]

// 注意：numbers 数组没有被改变

总结：

forEach：遍历数组，对每个元素执行操作，但不返回新数组。

map：遍历数组，对每个元素执行操作，并返回一个新数组，其中包含了操作的结果。

选择使用哪个方法取决于你的具体需求：如果你只是想遍历数组而不关心返回值，那么使用 forEach；如果你需要基于原始数组创建一个新数组，那么使用 map。

6. 箭头函数与普通函数（function）的区别是什么？构造函数（function）可以使用 new 生成实例，那么箭头函数可以吗？为什么？

箭头函数是普通函数的简写，可以更优雅的定义一个函数，和普通函数相比，

有以下几点差异：

函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对 象。不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可 以用 rest 参数代替。不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。不可以使用 new 命令，因为：

1.没有自己的 this，无法调用 call，apply。

2.没有 prototype 属性 ，而 new 命令在执行时需要将构造函数的 prototype 赋值给新的对象的 proto

//new 过程大致是这样的

function newFunc(father, ...rest) {

var result = { };

result.__proto__ = father.prototype;

var result2 = father.apply(result, rest);

if (

(typeof result2 === 'object' || typeof result2 === 'function') &&

result2 !== null

) {

return result2;

}

return result;

}

VUE篇

1. MVC和MVVM 、MVP

MVC,MVP,MVVM是三种常见的前端架构模式，通过分离关注点来改进代码组织方式。MVC模式是

MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view都是相同的，不同的是MV之间的桥梁连接部分。

一、MVC

视图（View）：用户界面，只负责渲染 HTML

控制器（Controller）：业务逻辑，负责调度 model 和 view

模型（Model）：数据保存，只负责存储数据、请求数据、更新数据

MVC允许在不改变视图情况下改变视图对用户输入的响应方式，用户对View操作交给Controller处理在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图View进行更新。

接受用户指令时，MVC 可以分成两种方式。一种是通过 View 接受输入，传递给 Controller。另一种是直接通过controller接受指令。此处只画了第一种情况。

但是 MVC 有一个巨大的缺陷就是控制器承担的责任太大了，随着项目愈加复杂，控制器中的代码会越来越臃肿，导致出现不利于维护的情况。

二、MVP

MVP 模式将 Controller 改名为 Presenter，同时改变了通信方向。

与MVC最大的区别就是View和Model层完全解耦，不在有依赖关系，而是通过Presenter做桥梁，用于

操作view层发出的事件传递到presenter层中，presenter层去操作model层，并且将数据返回给view

层，整个过程中view层和model层完全没有联系。

三、MVVM

MVVM 模式将 Presenter 改名为 ViewModel，基本上与 MVP 模式完全一致。唯一的区别是，它采用双

向绑定（data-binding），View的变动，自动反映在 ViewModel，反之亦然。

这里我们拿典型的MVVM模式的代表，Vue，来举例：

<code><div id="app-5">code>

<p>{ -- -->{ message }}</p>

<button v-on:click="reverseMessage">逆转消息</button>code>

</div>

var app5 = new Vue({ -- -->

el: '#app-5',

data: {

message: 'Hello Vue.js!'

},

methods: {

reverseMessage: function () {

this.message = this.message.split('').reverse().join('')

}

}

})

这里的html部分相当于View层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM

元素，当ViewModel对Model进行更新时，通过数据绑定更新到View。

2. Virtual DOM 虚拟DOM