前端高频面试题 (二)（附答案）

什么是 DOM 和 BOM？

• DOM 指的是文档对象模型，它指的是把文档当做一个对象，这个对象主要定义了处理网页内容的方法和接口。

• BOM 指的是浏览器对象模型，它指的是把浏览器当做一个对象来对待，这个对象主要定义了与浏览器进行交互的法和接口。BOM 的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。window 对象含有 location 对象、navigator 对象、screen 对象等子对象，并且 DOM 的最根本的对象 document 对象也是 BOM 的 window 对象的子对象。

协商缓存和强缓存的区别

（1）强缓存

使用强缓存策略时，如果缓存资源有效，则直接使用缓存资源，不必再向服务器发起请求。

强缓存策略可以通过两种方式来设置，分别是 http 头信息中的 Expires 属性和 Cache-Control 属性。

（1）服务器通过在响应头中添加 Expires 属性，来指定资源的过期时间。在过期时间以内，该资源可以被缓存使用，不必再向服务器发送请求。这个时间是一个绝对时间，它是服务器的时间，因此可能存在这样的问题，就是客户端的时间和服务器端的时间不一致，或者用户可以对客户端时间进行修改的情况，这样就可能会影响缓存命中的结果。

（2）Expires 是 http1.0 中的方式，因为它的一些缺点，在 HTTP 1.1 中提出了一个新的头部属性就是 Cache-Control 属性，它提供了对资源的缓存的更精确的控制。它有很多不同的值，

Cache-Control可设置的字段：

• public：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用 max-age=来精确控制；

• private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的 HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存；

• no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；

• no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；

• max-age=：设置缓存的最大有效期，单位为秒；

• s-maxage=：优先级高于 max-age=，仅适用于共享缓存(CDN)，优先级高于 max-age 或者 Expires 头；

• max-stale[=]：设置了该字段表明客户端愿意接收已经过期的资源，但是不能超过给定的时间限制。

一般来说只需要设置其中一种方式就可以实现强缓存策略，当两种方式一起使用时，Cache-Control 的优先级要高于 Expires。

no-cache 和 no-store 很容易混淆：

• no-cache 是指先要和服务器确认是否有资源更新，在进行判断。也就是说没有强缓存，但是会有协商缓存；

• no-store 是指不使用任何缓存，每次请求都直接从服务器获取资源。

（2）协商缓存

如果命中强制缓存，我们无需发起新的请求，直接使用缓存内容，如果没有命中强制缓存，如果设置了协商缓存，这个时候协商缓存就会发挥作用了。

上面已经说到了，命中协商缓存的条件有两个：

• max-age=xxx 过期了

• 值为no-store
  

使用协商缓存策略时，会先向服务器发送一个请求，如果资源没有发生修改，则返回一个 304 状态，让浏览器使用本地的缓存副本。如果资源发生了修改，则返回修改后的资源。

协商缓存也可以通过两种方式来设置，分别是 http 头信息中的 Etag 和 Last-Modified 属性。

（1）服务器通过在响应头中添加 Last-Modified 属性来指出资源最后一次修改的时间，当浏览器下一次发起请求时，会在请求头中添加一个 If-Modified-Since 的属性，属性值为上一次资源返回时的 Last-Modified 的值。当请求发送到服务器后服务器会通过这个属性来和资源的最后一次的修改时间来进行比较，以此来判断资源是否做了修改。如果资源没有修改，那么返回 304 状态，让客户端使用本地的缓存。如果资源已经被修改了，则返回修改后的资源。使用这种方法有一个缺点，就是 Last-Modified 标注的最后修改时间只能精确到秒级，如果某些文件在 1 秒钟以内，被修改多次的话，那么文件已将改变了但是 Last-Modified 却没有改变，这样会造成缓存命中的不准确。

（2）因为 Last-Modified 的这种可能发生的不准确性，http 中提供了另外一种方式，那就是 Etag 属性。服务器在返回资源的时候，在头信息中添加了 Etag 属性，这个属性是资源生成的唯一标识符，当资源发生改变的时候，这个值也会发生改变。在下一次资源请求时，浏览器会在请求头中添加一个 If-None-Match 属性，这个属性的值就是上次返回的资源的 Etag 的值。服务接收到请求后会根据这个值来和资源当前的 Etag 的值来进行比较，以此来判断资源是否发生改变，是否需要返回资源。通过这种方式，比 Last-Modified 的方式更加精确。

当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag 属性。

总结：

强缓存策略和协商缓存策略在缓存命中时都会直接使用本地的缓存副本，区别只在于协商缓存会向服务器发送一次请求。它们缓存不命中时，都会向服务器发送请求来获取资源。在实际的缓存机制中，强缓存策略和协商缓存策略是一起合作使用的。浏览器首先会根据请求的信息判断，强缓存是否命中，如果命中则直接使用资源。如果不命中则根据头信息向服务器发起请求，使用协商缓存，如果协商缓存命中的话，则服务器不返回资源，浏览器直接使用本地资源的副本，如果协商缓存不命中，则浏览器返回最新的资源给浏览器。

display:inline-block 什么时候会显示间隙？

• 有空格时会有间隙，可以删除空格解决；

• margin正值时，可以让margin使用负值解决；

• 使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

说一下怎么取出数组最多的一项？

// 我这里只是一个示例const d = {};let ary = ['赵', '钱', '孙', '孙', '李', '周', '李', '周', '周', '李'];ary.forEach(k => !d[k] ? d[k] = 1 : d[k]++);const result = Object.keys(d).sort((a, b) => d[b] - d[a]).filter((k, i, l) => d[k] === d[l[0]]);console.log(result)复制代码

代码输出结果

Promise.resolve('1')  .then(res => {    console.log(res)  })  .finally(() => {    console.log('finally')  })Promise.resolve('2')  .finally(() => {    console.log('finally2')      return '我是finally2返回的值'  })  .then(res => {    console.log('finally2后面的then函数', res)  })复制代码

输出结果如下：

1finally2finallyfinally2后面的then函数 2复制代码

.finally()一般用的很少，只要记住以下几点就可以了：

• .finally()方法不管 Promise 对象最后的状态如何都会执行

• .finally()方法的回调函数不接受任何的参数，也就是说你在.finally()函数中是无法知道 Promise 最终的状态是resolved还是rejected的

• 它最终返回的默认会是一个上一次的 Promise 对象值，不过如果抛出的是一个异常则返回异常的 Promise 对象。

• finally 本质上是 then 方法的特例

.finally()的错误捕获：

Promise.resolve('1')  .finally(() => {    console.log('finally1')    throw new Error('我是finally中抛出的异常')  })  .then(res => {    console.log('finally后面的then函数', res)  })  .catch(err => {    console.log('捕获错误', err)  })复制代码

输出结果为：

'finally1''捕获错误' Error: 我是finally中抛出的异常复制代码

什么是 CSRF 攻击？

（1）概念

CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录状态，那么攻击者就可以利用这个登录状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。

CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，以此来实现用户的冒充。

（2）攻击类型

常见的 CSRF 攻击有三种：

• GET 类型的 CSRF 攻击，比如在网站中的一个 img 标签里构建一个请求，当用户打开这个网站的时候就会自动发起提交。

• POST 类型的 CSRF 攻击，比如构建一个表单，然后隐藏它，当用户进入页面时，自动提交这个表单。

• 链接类型的 CSRF 攻击，比如在 a 标签的 href 属性里构建一个请求，然后诱导用户去点击。

分片思想解决大数据量渲染问题

题目描述:渲染百万条结构简单的大数据时 怎么使用分片思想优化渲染

实现代码如下:

let ul = document.getElementById("container");// 插入十万条数据let total = 100000;// 一次插入 20 条let once = 20;//总页数let page = total / once;//每条记录的索引let index = 0;//循环加载数据function loop(curTotal, curIndex) {  if (curTotal <= 0) {    return false;  }  //每页多少条  let pageCount = Math.min(curTotal, once);  window.requestAnimationFrame(function () {    for (let i = 0; i < pageCount; i++) {      let li = document.createElement("li");      li.innerText = curIndex + i + " : " + ~~(Math.random() * total);      ul.appendChild(li);    }    loop(curTotal - pageCount, curIndex + pageCount);  });}loop(total, index);复制代码

扩展思考：对于大数据量的简单 dom 结构渲染可以用分片思想解决 如果是复杂的 dom 结构渲染如何处理？

这时候就需要使用虚拟列表了 大家自行百度哈 虚拟列表和虚拟表格在日常项目使用还是很频繁的

防抖

防抖(debounce)：触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会重新计时。类似王者荣耀的回城功能，你反复触发回城功能，那么只认最后一次，从最后一次触发开始计时。

核心思想：每次事件触发就清除原来的定时器，建立新的定时器。使用 apply 或 call 调用传入的函数。函数内部支持使用 this 和 event 对象；

应用：防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。

实现：

function debounce(fn, delay) {    // 利用闭包的原理    let timer = null;    return function(...args){        if(timer) clearTimeout(timer);        timer = setTimeout(() => {            // 改变 this 指向为调用 debounce 所指的对象            fn.call(this, ...args);            // fn.apply(this, args);        }, delay);    }}复制代码

Loader 和 Plugin 有什么区别

Loader：直译为"加载器"。Webpack 将一切文件视为模块，但是 webpack 原生是只能解析 js 文件，如果想将其他文件也打包的话，就会用到loader。 所以 Loader 的作用是让 webpack 拥有了加载和解析非 JavaScript 文件的能力。 Plugin：直译为"插件"。Plugin 可以扩展 webpack 的功能，让 webpack 具有更多的灵活性。 在 Webpack 运行的生命周期中会广播出许多事件，Plugin 可以监听这些事件，在合适的时机通过 Webpack 提供的 API 改变输出结果。

事件传播机制（事件流）

冒泡和捕获

事件是什么？事件模型？

事件是用户操作网页时发生的交互动作，比如 click/move， 事件除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。事件被封装成一个 event 对象，包含了该事件发生时的所有相关信息（ event 的属性）以及可以对事件进行的操作（ event 的方法）。

事件是用户操作网页时发生的交互动作或者网页本身的一些操作，现代浏览器一共有三种事件模型：

• DOM0 级事件模型，这种模型不会传播，所以没有事件流的概念，但是现在有的浏览器支持以冒泡的方式实现，它可以在网页中直接定义监听函数，也可以通过 js 属性来指定监听函数。所有浏览器都兼容这种方式。直接在 dom 对象上注册事件名称，就是 DOM0 写法。

• IE 事件模型，在该事件模型中，一次事件共有两个过程，事件处理阶段和事件冒泡阶段。事件处理阶段会首先执行目标元素绑定的监听事件。然后是事件冒泡阶段，冒泡指的是事件从目标元素冒泡到 document，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。这种模型通过 attachEvent 来添加监听函数，可以添加多个监听函数，会按顺序依次执行。

• DOM2 级事件模型，在该事件模型中，一次事件共有三个过程，第一个过程是事件捕获阶段。捕获指的是事件从 document 一直向下传播到目标元素，依次检查经过的节点是否绑定了事件监听函数，如果有则执行。后面两个阶段和 IE 事件模型的两个阶段相同。这种事件模型，事件绑定的函数是 addEventListener，其中第三个参数可以指定事件是否在捕获阶段执行。

代码输出结果

const p1 = new Promise((resolve) => {  setTimeout(() => {    resolve('resolve3');    console.log('timer1')  }, 0)  resolve('resovle1');  resolve('resolve2');}).then(res => {  console.log(res)  // resolve1  setTimeout(() => {    console.log(p1)  }, 1000)}).finally(res => {  console.log('finally', res)})复制代码

执行结果为如下：

resolve1finally  undefinedtimer1Promise{<resolved>: undefined}复制代码

需要注意的是最后一个定时器打印出的 p1 其实是.finally的返回值，我们知道.finally的返回值如果在没有抛出错误的情况下默认会是上一个 Promise 的返回值，而这道题中.finally上一个 Promise 是.then()，但是这个.then()并没有返回值，所以 p1 打印出来的 Promise 的值会是undefined，如果在定时器的下面加上一个return 1，则值就会变成 1。

代码输出结果

var obj = {   name : 'cuggz',   fun : function(){     console.log(this.name);   } } obj.fun()     // cuggznew obj.fun() // undefined复制代码

使用 new 构造函数时，其 this 指向的是全局环境 window。

网络劫持有哪几种，如何防范？

⽹络劫持分为两种:

（1）DNS 劫持: (输⼊京东被强制跳转到淘宝这就属于 dns 劫持)

• DNS 强制解析: 通过修改运营商的本地 DNS 记录，来引导⽤户流量到缓存服务器

• 302 跳转的⽅式: 通过监控⽹络出⼝的流量，分析判断哪些内容是可以进⾏劫持处理的,再对劫持的内存发起 302 跳转的回复，引导⽤户获取内容

（2）HTTP 劫持: (访问⾕歌但是⼀直有贪玩蓝⽉的⼴告),由于 http 明⽂传输,运营商会修改你的 http 响应内容(即加⼴告)

DNS 劫持由于涉嫌违法，已经被监管起来，现在很少会有 DNS 劫持，⽽http 劫持依然⾮常盛⾏，最有效的办法就是全站 HTTPS，将 HTTP 加密，这使得运营商⽆法获取明⽂，就⽆法劫持你的响应内容。

call apply bind

题目描述:手写 call apply bind 实现

实现代码如下:

Function.prototype.myCall = function (context, ...args) {  if (!context || context === null) {    context = window;  }  // 创造唯一的key值  作为我们构造的context内部方法名  let fn = Symbol();  context[fn] = this; //this指向调用call的函数  // 执行函数并返回结果 相当于把自身作为传入的context的方法进行调用了  return context[fn](...args);};
// apply原理一致  只是第二个参数是传入的数组Function.prototype.myApply = function (context, args) {  if (!context || context === null) {    context = window;  }  // 创造唯一的key值  作为我们构造的context内部方法名  let fn = Symbol();  context[fn] = this;  // 执行函数并返回结果  return context[fn](...args);};
//bind实现要复杂一点  因为他考虑的情况比较多 还要涉及到参数合并(类似函数柯里化)
Function.prototype.myBind = function (context, ...args) {  if (!context || context === null) {    context = window;  }  // 创造唯一的key值  作为我们构造的context内部方法名  let fn = Symbol();  context[fn] = this;  let _this = this;  //  bind情况要复杂一点  const result = function (...innerArgs) {    // 第一种情况 :若是将 bind 绑定之后的函数当作构造函数，通过 new 操作符使用，则不绑定传入的 this，而是将 this 指向实例化出来的对象    // 此时由于new操作符作用  this指向result实例对象  而result又继承自传入的_this 根据原型链知识可得出以下结论    // this.__proto__ === result.prototype   //this instanceof result =>true    // this.__proto__.__proto__ === result.prototype.__proto__ === _this.prototype; //this instanceof _this =>true    if (this instanceof _this === true) {      // 此时this指向指向result的实例  这时候不需要改变this指向      this[fn] = _this;      this[fn](...[...args, ...innerArgs]); //这里使用es6的方法让bind支持参数合并    } else {      // 如果只是作为普通函数调用  那就很简单了 直接改变this指向为传入的context      context[fn](...[...args, ...innerArgs]);    }  };  // 如果绑定的是构造函数 那么需要继承构造函数原型属性和方法  // 实现继承的方式: 使用Object.create  result.prototype = Object.create(this.prototype);  return result;};
//用法如下
// function Person(name, age) {//   console.log(name); //'我是参数传进来的name'//   console.log(age); //'我是参数传进来的age'//   console.log(this); //构造函数this指向实例对象// }// // 构造函数原型的方法// Person.prototype.say = function() {//   console.log(123);// }// let obj = {//   objName: '我是obj传进来的name',//   objAge: '我是obj传进来的age'// }// // 普通函数// function normalFun(name, age) {//   console.log(name);   //'我是参数传进来的name'//   console.log(age);   //'我是参数传进来的age'//   console.log(this); //普通函数this指向绑定bind的第一个参数 也就是例子中的obj//   console.log(this.objName); //'我是obj传进来的name'//   console.log(this.objAge); //'我是obj传进来的age'// }
// 先测试作为构造函数调用// let bindFun = Person.myBind(obj, '我是参数传进来的name')// let a = new bindFun('我是参数传进来的age')// a.say() //123
// 再测试作为普通函数调用// let bindFun = normalFun.myBind(obj, '我是参数传进来的name')//  bindFun('我是参数传进来的age')复制代码

异步编程的实现方式？

JavaScript 中的异步机制可以分为以下几种：

• 回调函数 的方式，使用回调函数的方式有一个缺点是，多个回调函数嵌套的时候会造成回调函数地狱，上下两层的回调函数间的代码耦合度太高，不利于代码的可维护。

• Promise 的方式，使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法，有时会造成多个 then 的链式调用，可能会造成代码的语义不够明确。

• generator 的方式，它可以在函数的执行过程中，将函数的执行权转移出去，在函数外部还可以将执行权转移回来。当遇到异步函数执行的时候，将函数执行权转移出去，当异步函数执行完毕时再将执行权给转移回来。因此在 generator 内部对于异步操作的方式，可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来，因此需要有一个自动执行 generator 的机制，比如说 co 模块等方式来实现 generator 的自动执行。

• async 函数 的方式，async 函数是 generator 和 promise 实现的一个自动执行的语法糖，它内部自带执行器，当函数内部执行到一个 await 语句的时候，如果语句返回一个 promise 对象，那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑，转化为同步的顺序来书写，并且这个函数可以自动执行。

判断数组的方式有哪些

• 通过 Object.prototype.toString.call()做判断

Object.prototype.toString.call(obj).slice(8,-1) === 'Array';复制代码

• 通过原型链做判断

obj.__proto__ === Array.prototype;复制代码

• 通过 ES6 的 Array.isArray()做判断

Array.isArrray(obj);复制代码

• 通过 instanceof 做判断

obj instanceof Array复制代码

• 通过 Array.prototype.isPrototypeOf

Array.prototype.isPrototypeOf(obj)复制代码

instanceof

作用：判断对象的具体类型。可以区别 array 和 object， null 和 object 等。

语法：A instanceof B

如何判断的？: 如果 B 函数的显式原型对象在 A 对象的原型链上，返回true，否则返回false。

注意：如果检测原始值，则始终返回 false。

实现:

function myinstanceof(left, right) {    // 基本数据类型都返回 false，注意 typeof 函数 返回"function"    if((typeof left !== "object" && typeof left !== "function") || left === null) return false;    let leftPro = left.__proto__;  // 取左边的（隐式）原型 __proto__    // left.__proto__ 等价于 Object.getPrototypeOf(left)    while(true) {        // 判断是否到原型链顶端        if(leftPro === null) return false;        // 判断右边的显式原型 prototype 对象是否在左边的原型链上        if(leftPro === right.prototype) return true;        // 原型链查找        leftPro = leftPro.__proto__;    }}复制代码

map 和 foreach 有什么区别

foreach()方法会针对每一个元素执行提供得函数,该方法没有返回值,是否会改变原数组取决与数组元素的类型是基本类型还是引用类型map()方法不会改变原数组的值,返回一个新数组,新数组中的值为原数组调用函数处理之后的值：复制代码