2020前端面试问题及答案整理

 

css的重绘与回流

重绘：当节点需要更改外观而不会影响布局。

回流：DOM结构的修改引发DOM几何尺寸变化的时候，发生回流。
常见的几何属性有width、height、padding、margin、left、top、border 或者是DOM节点发生增减移动。

减少重绘和回流的办法。
使用css3新增属性：translate替代top等方向值。
避免频繁使用style，而是采用class。

箭头函数和普通函数的区别是什么？

普通函数this：

1. this总是代表它的直接调用者。
2. 在默认情况下，没找到直接调用者，this指的是window。
3. 在严格模式下，没有直接调用者的函数中的this是undefined。
4. 使用call,apply,bind绑定，this指的是绑定的对象。

箭头函数this：

1. 在使用=>定义函数的时候，this的指向是 定义时所在的对象，而不是使用时所在的对象；
2. 不能够用作构造函数，这就是说，不能够使用new命令，否则就会抛出一个错误；
3. 不能够使用 arguments 对象；
4. 不能使用 yield 命令；

讲一下let、var、const的区别

• var 没有块级作用域，支持变量提升。
• let 有块级作用域，不支持变量提升。不允许重复声明，暂存性死区。不能通过window.变量名进行访问.
• const 有块级作用域，不支持变量提升，不允许重复声明，暂存性死区。声明一个变量一旦声明就不能改变，改变报错。

实现一个new的伪代码

• 创建一个对象
• 连接原型
• 绑定this
• 返回该对象

function _new(){
  let obj = new Object();
  let Con = [].shift.call(arguments);
  obj.__proto__ = Con.prototype;
  let result = Con.apply(obj,arguments);
  return typeof result === 'object' ? result : obj
}

原型、原型链

原型链：每个被实例对象都有__proto__对象，它指向了构造该对象的构造函数的prototype属性。同时该对象可以通过__proto__对象来寻找不属于自身的属性，
原型：就是实现继承过程中产生的一个概念。

继承

原理是：复制父类的属性和方法来重写子类的原型对象

• 原型继承
• 构造函数继承
• 组合继承
• 寄生继承
• 寄生组合继承
• class
• 等等

// 寄生组合继承方法
function Father(...arr) {
    this.some = '父类属性';
    this.params = arr;
}
Father.prototype.someFn = function() {
    console.log(1);
}
Father.prototype.someValue = '2';
function Son() {
    Father.call(this, 'xxxx');
    this.text = '2222';
}
Son.protptype = Object.create(Father.prototype);
Son.prototype.constructor = Son;

Object,create做了什么

Object._create = function(obj){
  function F(){}; // 创建了一个新的构造函数F
  F.prototype = obj; // 然后将构造函数F的原型指向了参数对象obj
  return new F(); // 返回构造函数F的实例对象，从而实现了该实例继承obj的属性。
}

闭包

闭包就是有权访问一个函数内部变量的函数，也就是常说的函数内部嵌套函数，内部函数访问外部函数变量，从而导致垃圾回收机制没有将当前变量回收掉。这样的操作，有可能会带来内存泄漏。好处就是可以设计私有的方法和变量。

垃圾回收机制（闭包的延伸）

js拥有特殊的垃圾回收机制，当一个变量在内存中失去引用，js会通过特殊的算法将其回收，并释放内存。
分为以下两个阶段：

1. 标记阶段：垃圾回收器，从根对象开始遍历，访问到的每一个对象都会被标示为可到达对象。
2. 清除阶段：垃圾回收器在对内存当中进行线性遍历，如果发现该对象没有被标记为可到达对象，那么就会被垃圾回收机制回收。
   这里面牵扯到了引用计数法，每次引用都被会‘➕1’ 如果标记清零，那么就会被回收掉。

简述深浅拷贝

浅拷贝
通常需要拷贝的对象内部只有一层的这种对象。
常用的方法

1. Object.assign方法来实现
2. 扩展运算符 ...obj

深拷贝
通常是嵌套二层或以上的复杂对象
常用方法

1. JSON.parse(JSON.stringfy(object)); 该方法忽略掉undefined、忽略Symbol、忽略function。只适合简单深拷贝
2. 手写递归方法去实现。
3. 通过第三方库提供的深拷贝实现。

函数的节流和防抖

防抖函数：将多次触发变成最后一次触发；

function debounce(fn,wait){
  let timer = null;
  return function (){
    let arg = arguments;
    if(timer){
      clearTimeout(timer);
      timer = null;
    }
    timer = setTimeout(()=>{
       fn.apply(this,arg)
    },wait)
  }
}
function clg(){
  console.log('clg')
}
window.addEventListener('resize',debounce(clg,1000))

节流函数：将多次执行变成每隔一个时间节点去执行的函数

function throttle(fn,time){
  let lastTime = null;
  return function(){
    let nowTime = Date.now();
    if(nowTime - lastTime > time || !lastTime){
      fn();
      last = nowTime
    }
  }
}
function sayHi(){
  console.log('hi')
}
setInterval(throttle(sayHi,1000),500)

call、apply区别

相同点：都是重定向this指针的方法。
不同点：call和apply的第二个参数不相同，call是若干个参数的列表。apply是一个数组

手写一个call方法

// 在这之前需要重新认识一下call方法的执行操作
let mock = { value : 1 };
function mockNum(){
 console.log('value',this.value)
}
mockNum.call(mock) // 改变了函数中this的指向，当前this指向了mock对象

转换一下实现方法就是

let mock = {
  value:1;
  mockNum:function(){
     console.log('value',this.value)
  }
}
mock.mockNum();
所以经过上面这个操作的演化而来的结果就是如下步骤：
1. 将函数设为一个对象的属性
2. 并将这个函数的属性调用
3. 删除该函数

Function.prototype.Mycall = function(context){
  let obj = context || window;
  obj.fn = this; //   这一步可以看做是this其实就指的当前函数。
  let args = [...arguments].slice(1); // 返回删除第一个元素的数组；
  let result = obj.fn(...args); // 调用函数
  delete obj.fn;
  return result;
}

// 操作一下
let mock = { value : 1 };
function mockNum(){
  console.log('value',this.value);
}
mockNum.Mycall(mock) // value 1

然后根据上面的方法再手写一个apply方法

Function.prototype.Myapply = function (context){
    let obj = context || window;
    obj.fn = this;
    let result = arguments[1] ? obj.fn(arguments[1]) : obj.fn([]);
    delete obj.fn;
    return result;
}
let mock3 = {
  arr: [1, 2, 3, 4, 5],
};
function arrx2(arr) {
  return this.arr.concat(arr).map((x) => x * 2);
}
console.log("arrx2", arrx2.myApply(mock3));

bind

bind方法是直接返回一个新的函数，需要手动去调用才能执行。

1. 创建一个新函数，当这个新函数被调用时，bind()方法的第一个参数将作为运行他的this，之后的一系列参数将会在传递的实参传入作为他的参数；
   特点：1. 返回一个函数。 2. 可以传入参数；
   手写一个bind方法

例如：
let foo = { value : 1 };
function bar() {
  console.log('bindFoo',this.value);
  // return this.value // 考虑到函数可能有返回值
}
let bindFoo = bar.bind(foo);
bindFoo() // 1  // 如果有返回值的情况下 bindFoo() === 1;

Function.prototype.Mybind = function(obj){
  if(typeof this !== 'function') throw new Error('not a function');
  let self = this;
  let args = [...arguments].clice(1);
  return function F(){
    if(this instanceof F){
      return new self(...args,...arguments);
    }
    return self.apply(obj,args.concat([...arguments]));
  }
}

关于函数的调用

1. 作为一个正常的函数调用
2. 函数作为方法调用
3. 使用构造函数调用函数
4. 作为函数方法调用函数

捕获和冒泡

捕获：就是从根元素开始向目标元素递进的一个关系；从上而下
冒泡：是从目标元素开始向根元素冒泡的过程；想象一下水里的泡泡从下而上。

⚠️stopPropagation 通常理解它是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。

简单介绍一下event loop

js作为单线程语言。在执行过程中，会产生执行环境。这些执行环境中的代码被顺序的加入到执行栈中，如果遇到异步代码，会被挂起并加入到任务队列当中，等到主线程任务执行完毕，event loop就会从任务队列取出需要执行的代码放入到执行栈中执行。所以本质上来讲，js中的异步还是同步的行为。

任务队列有分为宏任务和微任务队列。
一次正确的event loop执行顺序如下：

1. 执行所有同步代码
2. 执行栈为空，查询是否有需要执行的微任务。
3. 微任务（有：则执行，无：则跳出）
4. 必要的话开始渲染UI
5. 开始下一轮的任务队列执行宏任务中的异步代码。

 

event loop

instanceof原理

instanceOf用来判断右边的prototype是否在左边的原型链上，告诉我们左边是否是右边的实例。

function instanceof(left, right) {
    // 获得类型的原型
    let prototype = right.prototype
    // 获得对象的原型
    left = left.__proto__
    // 判断对象的类型是否等于类型的原型
    while (true) {
        if (left === null){
            return false  
        }
        if (prototype === left){
            return true
        }
        left = left.__proto__
    }
}

typeof

typeof 检测对象，除开函数是function类型之外。像常见的数组，对象或者是正则,日期等等都是object；
需要注意一下：

typeof Symbol() // 'symbol'
typeof null // object
typeof undefined // undefined

typeof null检测输出object因为js最初版本，使用的是32位系统，类型的标签存储在每个单元的低位中000是object类型。null全是0，所以当我们使用typeof进行检测的时候js错误的判断位object

简述cookie、localstorage、seesionstorage

名称	大小	网络请求	生命周期
cookie	4kb左右	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	默认是关闭浏览器后失效, 但是也可以设置过期时间
localstorage	5M	仅在浏览器中保存，不参与和服务器的通信	除非手动被清除，否则永久保存
SessionStorage	5M	仅在浏览器中保存，不参与和服务器的通信	仅在当前会话(窗口)下有效，关闭窗口或浏览器后被清除, 不能设置过期时间

js跨域如何解决

目前暂时已知的跨域方法是：

1. jsonp跨域，原理：script标签没有跨域限制的漏洞实现的一种跨域方法，只支持get请求。安全问题会受到威胁。
2. cors跨域，通过后端服务器实现，Access-Control-Allow-Origin。
3. postMessage window的一个属性方法。
4. websocket
5. nginx反向代理
6. iframe跨域

webpack proxy跨域

首先需要明白webpack proxy跨域只能用作与开发阶段，临时解决本地请求服务器产生的跨域问题。并不适合线上环境。配置在webpack的devServer属性中。webpack中的devsever配置后，打包阶段在本地临时生成了一个node服务器，浏览器请求服务器相当于请求本地服务。

深度优先和广度优先

广度优先：尝试访问尽可能靠近它的目标节点，然后逐层向下遍历，直至最远的节点层级。
深度优先：从起始节点开始，一直向下找到最后一个节点，然后返回，又继续下一条路径。知道找遍所有的节点。

浏览器禁用cookie该如何处理

一般会用到url重写的技术来进行会话跟踪，每一次的交互，都会在url后面加上sid=xxx类似的参数。服务端根据这种方式来识别用户。

commonjs与es6的modules的区别

commonjs	modules
运行时加载	编译时输出接口
输出的是值拷贝	值的引用
倒入模块的路径可以是表达式	字符串
this指向当前模块	undefined

Common、AMD、CMD区别

common	AMD	CMD
同步	异步	异步
	依赖前置	就近依赖

setTimeout与setInterval的区别

setTimeout表示间隔一段时间之后执行一次调用，而setInterval是每隔一段时间循环调用，直至清除。

内存方面，setTimeout只需要进入一次宏队列，setInterval不计算代码执行时间，有可能多次执行多次代码

解释一下requestAnimationFrame

1. 浏览器专门为DOM动画，canvas动画，SVG动画等等有一个统一的刷新机制。
2. 按帧对网页进行重绘。该方法告诉浏览器希望执行动画并请求浏览器在下一次重绘之前调用回调函数来更新动画，
3. 由系统来决定回调函数的执行时机，在运行时浏览器会自动优化方法的调用。

script标签如何实现异步加载

1. defer：等到整个页面在内存中华正常渲染结束（DOM结构完全生成，以及其他脚本执行完成），才会执行；
2. async是一旦下载完成，渲染就会中断，执行这个脚本之后，再继续渲染。

总结就是：defer是渲染完在执行。async是下载完就执行。
另外值得注意的就是：deger脚本会按照在页面出现的顺序加载，而async是不能保证加载顺序的。

proxy和defineProperty区别

Object.defineProperty缺点：

1. 无法监控数组下标的变化，导致直接通过数组的下标给数组设置值。不能事实响应。vue内部通过数组的一些方法来监听。
2. 只能劫持对象的属性，因此要对每个对象的属性进行遍历。 vue2.x版本之后是通过递归和遍历实现对data对象的数据监控。

proxy：

1. 可以劫持整个对象，并返回一个新的对象
2. 有多种劫持操作

MVC、MVVM区别

react与vue的区别

1. vue使用的是template模版编写。react使用的是jsx语法。
2. 状态管理：react中的状态全部存入state中，通常修改的时候需要用到setState方法来更新状态。 vue中的state对象不是必须，vue是通过data属性在vue对象中进行管理
3. 监听数据的变化，vue劫持一些函数，能精确的知道数据变化。react中默认是通过比较引用的方式去进行，如果不优化使用shouldComponentUpdate/PureComponent方法优化，那会导致大量的虚拟dom重新渲染
4. 数据流不同：vue可以进行组件与dom之间v-modle双向绑定。react从始至终都只有单向数据流
5. vue中使用的是mixins。react使用的是Hoc高阶组件

DNS是如何解析的？如何优化

浏览器缓存 -> 本地缓存-> hosts文件 -> 路由器缓存 -> ISP DNS缓存 -> DNS递归查询

强缓存和协商缓存

强缓存和协商缓存。强缓存通过响应头实现：expires和cache-control。它表示在缓存期间不需要在发起请求。协商缓存：如果缓存过期，可以使用协商缓存解决问题。

协商缓存是需要发起请求。协商缓存需要客户端和服务端共同实现。

html5的离线存储技术

html5的离线存储技术，是基于一个新建的.appcache文件的缓存机制（并不是存储技术）。通过这个文件上的解析清单离线存储资源，这些资源就会想cookie一样被存下来。之后网络处于离线状态时，浏览器会通过被离线存储的数据进行页面展示。

link和import区别

link	import
页面被加载，link会同时被加载	@import引用的css会等到页面被加载完成之后再加载。
只适用与2.1之后的版本	link是没有任何兼容问题的。
支持使用js去控制dom改变样式	不支持
	只能加载css

get和post请求的区别

get	post
参数长度有限制	参数长度无限制
get会把请求的数据附加在url上	post请求会把数据附加在请求体中
get是明文传输	post不是明文传输
请求能缓存	不能缓存

http和https区别

http	https
80端口	443端口
无需申请证书	需要申请证书
超文本传输协议	ssl加密协议
快	慢（因为会有一个ssl包需要传输）

ssl加密

分为对称和非对称加密

1. 对称加密。 客户端和服务端公用一个密钥对消息加解密。（客户端和服务端约定好一个加密钥匙。客户端在发消息浅用该密匙对消息加密，发送给服务器，服务器在用该密匙进行解密拿到消息）
2. 非对称加密。客户端和服务端都有公钥和私钥。公钥加密的内容只有对应的私钥解密。私钥自己留着，公钥发给对方。这样发送消息之前，对方的公钥对消息进行加密，受到后在用自己的私钥进行解密。

setState同步和异步

1. setState只是在合成事件和生命周期函数中是异步更新
2. 在settimeout、原生事件、async函数中是同步更新。

react请求与生命周期

reac的异步请求，放入componentDidMount中才是正确操作。
因为WillMount中请求发送，react的执行机制是不会等到数据返回之后才继续往下执行，而是继续向下执行并render。不会‘暂停’以等待数据到达。

问题：服务器渲染时，如果在WillMount中请求数据，fetch data会执行两次，一次在服务端一次在客户端。造成了多余的请求，而且在16版本之后，WillMount可能在一次渲染中多次调用。

通信

1. 父传子：父组件通过props的方式传递。
2. 子传父：props+回调函数方式。
3. 兄弟组件：找到这两个共同的父节点，结合props和回调函数进行通信
4. 跨层级通信：context通信
5. store

React的渲染原理

1. 单项数据流，只能通过数据层的变化去影响视图层变化。
2. 数据驱动视图。无需关注dom，只用关注数据即可
3. 渲染过程，生命周期函数
4. diff算法。对照两次dom不同的部分渲染

useEffect和useLayoutEffect区别

useEffect是异步的，useLayoutEffect是同步的

react中的key的作用

key是给每一个虚拟节点的唯一id,可以依靠key,更准确, 更快的拿到oldVnode中对应的vnode节点，利用key的唯一性生成map对象来获取对应节点，比遍历方式更快。

react有哪些组件

1. 无状态组件

• 函数或无状态组件是一个纯函数，它可接受接受参数，并返回react元素。这些都是没有任何副作用的纯函数。这些组件没有状态或生命周期方法。

2. 有状态组件

• 类或有状态组件具有状态和生命周期方可能通过setState()方法更改组件的状态。类组件是通过扩展React创建的。它在构造函数中初始化，也可能有子组件。

3. 受控组件

• 受控组件是在 React 中处理输入表单的一种技术。表单元素通常维护它们自己的状态，而react则在组件的状态属性中维护状态。我们可以将两者结合起来控制输入表单。这称为受控组件。因此，在受控组件表单中，数据由React组件处理。
  4 非受控组件
• 大多数情况下，建议使用受控组件。有一种称为非受控组件的方法可以通过使用Ref来处理表单数据。在非受控组件中，Ref用于直接从DOM访问表单值，而不是事件处理程序。
  5 容器组件
• 容器组件是处理获取数据、订阅 redux 存储等的组件。它们包含展示组件和其他容器组件，但是里面从来没有html。
  6 高阶组件
• 高阶组件是将组件作为参数并生成另一个组件的组件。 Redux connect是高阶组件的示例。 这是一种用于生成可重用组件的强大技术。

Fiber 是什么？

解决同步阻塞方法，异步和任务分割。
任务分割调度算法，主要是将原先同步更新渲染的任务分割成一个个独立的小人物，根据优先级。将小任务分散到浏览器的空间时间执行，充分利用主进程的时间循环机制。

性能优化方法

1. dns预解析
2. 浏览器缓存，强缓存和协商缓存
3. 预加载 将一些不影响首屏但重要的文件延后加载 preload
4. 预渲染 prerender
5. 懒加载
6. 文件优化
7. webpack优化 使用到tree shaking。各种loader等等

webpack热更新原理

核心就是客户端从服务端拉取更新后的文件，进行一个替换；
实际上 WDS 与浏览器之间维护了一个 Websocket，当本地资源发生变化时，WDS 会向浏览器推送更新，并带上构建时的 hash，让客户端与上一次资源进行对比。客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表、hash)，这样客户端就可以再借助这些信息继续向 WDS 发起 jsonp 请求获取该chunk的增量更新。

webpack的构建过程

1. 初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
2. 开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
3. 确定入口：根据配置中的 entry 找出所有的入口文件；
4. 编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
5. 完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
6. 输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
7. 输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

提升webpack打包速度

1. happypack
2. dll 采用webpack的 DllPlugin 和 DllReferencePlugin 引入dll，让一些基本不会改动的代码先打包成静态资源,避免反复编译浪费时间

数组拍平

function flat(arr) {
  return arr.reduce((prev, cur) => {
    return prev.concat(cur instanceof Array ? flat(cur) : cur)
  }, [])
}

如何实现图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），只有当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。
通常可以借助IntersectionObserver API。

了解Service Worker吗

Service Worker 是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。使用 Service Worker的话，传输协议必须为 HTTPS。因为 Service Worker 中涉及到请求拦截，所以必须使用 HTTPS 协议来保障安全。

常见的网站漏洞有哪些？

1. 有跨站脚本攻击（XSS）
2. 跨站请求伪造（CSRF）
3. 点击劫持
4. SQL注入
5. DDOS攻击
6. DNS劫持

xss攻击

代码注入攻击，通常是在目标网站上注入恶意脚本，在用户浏览器上运行。利用这些脚本攻击者获取敏感信息

防御措施：

1. 验证码机制
2. 转义字符
3. 内容输入长度控制
4. CSP，禁止加载外域代码

CSRF攻击

攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

1. 同源检测
2. 在请求地址中添加 token 并验证

SQL注入

所谓SQL注入，就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令.

输入URL发生了什么

1. 在浏览器地址栏输入URL
2. 浏览器查看缓存，请求资源在缓存中并且未过期，跳转到转码步骤 如果浏览器未缓存，发起新的请求已缓存，检验是否过期，未过期直接提供给客户端，否则进行验证检验是否过期 通常有两个http头进行控制，expires和cache-control。
3. 浏览器解析URL获取协议，主机，端口，path
4. 浏览器组装一个http请求 请求报文
5. 浏览器获取主机ip地址：(dns解析过程)过程：浏览器缓存 -> 本地缓存-> hosts文件 -> 路由器缓存 -> ISP DNS缓存 -> DNS递归查询
6. 打开一个socket与目标地址建立TCP连接，进行三次握手i. 客户端发送一个TCP的SYN=1，Sep=X的包到服务器端口ii. 服务器返回SYN=1，ACK=X+1，Sep=Y的响应包iii. 客户端发送ACK=Y+1，Sep=Z
7. TCP连接建立发送http请求。
8. 服务器接收请求并解析，将请求转发到服务程序
9. 服务器检查http请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态码
10. 处理程序读取完整请求并准备http响应，可能需要查询数据库等操作
11. 服务器将响应报文通过TCP连接发送回浏览器
12. 浏览器接收到http响应，然后根据情况选择关闭TCP连接或者保留重用。（关闭操作进行第四次挥手）主动方发送Fin=1，Ack=Z，Sep=X的报文被动方发送ACK=X+1，Sep=Z报文被动方发送Fin=1，ACK=X，Sep=Y报文主动方发送ACK=Y，Sep=X报文
13. 浏览器检查响应状态码。状态吗不同 解决的方法不同 1XX 3XX 4XX 5XX区别对待2XX是正常返回
14. 如果资源可缓存，进行缓存
15. 对响应解码 例如gzip压缩
16. 根据资源类型决定如何处理
17. 假设资源为html文档
18. 解析html文档 构建dom树 下载资源，构建css树，执行js脚本
19. 构建dom树
20. 解析过程遇到图片、样式表、js文件、启动下载
21. 构建css树
22. 根据dom树和css树整合构建渲染树
23. js解析

24. 显示页面

    
    
     

    

    参考如图