关于前端:滴滴前端面试题边面边更

ES6模块与 CommonJS 模块有什么异同？

ES6 Module 和 CommonJS 模块的区别：

• CommonJS 是对模块的浅拷⻉，ES6 Module 是对模块的引⽤，即 ES6 Module 只存只读，不能扭转其值，也就是指针指向不能变，相似 const；
• import 的接⼝是 read-only（只读状态），不能批改其变量值。即不能批改其变量的指针指向，但能够扭转变量外部指针指向，能够对 commonJS 对从新赋值（扭转指针指向），然而对 ES6 Module 赋值会编译报错。

ES6 Module 和 CommonJS 模块的共同点：

• CommonJS 和 ES6 Module 都能够对引⼊的对象进⾏赋值，即对对象外部属性的值进⾏扭转。

函数柯里化

柯里化（currying） 指的是将一个多参数的函数拆分成一系列函数，每个拆分后的函数都只承受一个参数。

对于曾经柯里化后的函数来说，当接管的参数数量与原函数的形参数量雷同时，执行原函数；当接管的参数数量小于原函数的形参数量时，返回一个函数用于接管残余的参数，直至接管的参数数量与形参数量统一，执行原函数。

CDN 的原理

CDN 和 DNS 有着密不可分的分割，先来看一下 DNS 的解析域名过程，在浏览器输出的解析过程如下：
（1）查看浏览器缓存
（2）查看操作系统缓存，常见的如 hosts 文件
（3）查看路由器缓存
（4）如果前几步都没没找到，会向 ISP(网络服务提供商) 的 LDNS 服务器查问
（5）如果 LDNS 服务器没找到，会向根域名服务器(Root Server) 申请解析，分为以下几步：

• 根服务器返回顶级域名 (TLD) 服务器如 .com，.cn，.org 等的地址，该例子中会返回 .com 的地址
• 接着向顶级域名服务器发送申请，而后会返回次级域名 (SLD) 服务器的地址，本例子会返回 .test 的地址
• 接着向次级域名服务器发送申请，而后会返回通过域名查问到的指标 IP，本例子会返回 www.test.com 的地址
• Local DNS Server 会缓存后果，并返回给用户，缓存在零碎中

CDN 的工作原理：（1）用户未应用 CDN 缓存资源的过程：

1. 浏览器通过 DNS 对域名进行解析（就是下面的 DNS 解析过程），顺次失去此域名对应的 IP 地址
2. 浏览器依据失去的 IP 地址，向域名的服务主机发送数据申请
3. 服务器向浏览器返回响应数据

（2）用户应用 CDN 缓存资源的过程：

1. 对于点击的数据的 URL，通过本地 DNS 零碎的解析，发现该 URL 对应的是一个 CDN 专用的 DNS 服务器，DNS 零碎就会将域名解析权交给 CNAME 指向的 CDN 专用的 DNS 服务器。
2. CND 专用 DNS 服务器将 CND 的全局负载平衡设施 IP 地址返回给用户
3. 用户向 CDN 的全局负载平衡设施发动数据申请
4. CDN 的全局负载平衡设施依据用户的 IP 地址，以及用户申请的内容 URL，抉择一台用户所属区域的区域负载平衡设施，通知用户向这台设施发动申请
5. 区域负载平衡设施抉择一台适合的缓存服务器来提供服务，将该缓存服务器的 IP 地址返回给全局负载平衡设施
6. 全局负载平衡设施把服务器的 IP 地址返回给用户
7. 用户向该缓存服务器发动申请，缓存服务器响应用户的申请，将用户所需内容发送至用户终端。

如果缓存服务器没有用户想要的内容，那么缓存服务器就会向它的上一级缓存服务器申请内容，以此类推，直到获取到须要的资源。最初如果还是没有，就会回到本人的服务器去获取资源。

CNAME（意为：别名）：在域名解析中，实际上解析进去的指定域名对应的 IP 地址，或者该域名的一个 CNAME，而后再依据这个 CNAME 来查找对应的 IP 地址。

快排 – 工夫复杂度 nlogn~ n^2 之间

题目形容: 实现一个快排

实现代码如下:

function quickSort(arr) {if (arr.length < 2) {return arr;}
  const cur = arr[arr.length - 1];
  const left = arr.filter((v, i) => v <= cur && i !== arr.length - 1);
  const right = arr.filter((v) => v > cur);
  return [...quickSort(left), cur, ...quickSort(right)];
}
// console.log(quickSort([3, 6, 2, 4, 1]));

documentFragment 是什么？用它跟间接操作 DOM 的区别是什么？

MDN 中对 documentFragment 的解释：

DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 应用，就像规范的 document 一样，存储由节点（nodes）组成的文档构造。与 document 相比，最大的区别是 DocumentFragment 不是实在 DOM 树的一部分，它的变动不会触发 DOM 树的从新渲染，且不会导致性能等问题。

当咱们把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 本身，而是它的所有子孙节点。在频繁的 DOM 操作时，咱们就能够将 DOM 元素插入 DocumentFragment，之后一次性的将所有的子孙节点插入文档中。和间接操作 DOM 相比，将 DocumentFragment 节点插入 DOM 树时，不会触发页面的重绘，这样就大大提高了页面的性能。

如何对我的项目中的图片进行优化？

1. 不必图片。很多时候会应用到很多润饰类图片，其实这类润饰图片齐全能够用 CSS 去代替。
2. 对于挪动端来说，屏幕宽度就那么点，齐全没有必要去加载原图节约带宽。个别图片都用 CDN 加载，能够计算出适配屏幕的宽度，而后去申请相应裁剪好的图片。
3. 小图应用 base64 格局
4. 将多个图标文件整合到一张图片中（雪碧图）

5. 抉择正确的图片格式：

   • 对于可能显示 WebP 格局的浏览器尽量应用 WebP 格局。因为 WebP 格局具备更好的图像数据压缩算法，能带来更小的图片体积，而且领有肉眼辨认无差别的图像品质，毛病就是兼容性并不好
   • 小图应用 PNG，其实对于大部分图标这类图片，齐全能够应用 SVG 代替
   • 照片应用 JPEG

深拷贝

实现一：不思考 Symbol

function deepClone(obj) {if(!isObject(obj)) return obj;
    let newObj = Array.isArray(obj) ? [] : {};
    // for...in 只会遍历对象本身的和继承的可枚举的属性（不含 Symbol 属性）for(let key in obj) {// obj.hasOwnProperty() 办法只思考对象本身的属性
        if(obj.hasOwnProperty(key)) {newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key];
        }
    }
    return newObj;
}

实现二：思考 Symbol

// hash 作为一个查看器，防止对象深拷贝中呈现环援用，导致爆栈
function deepClone(obj, hash = new WeakMap()) {if(!isObject(obj)) return obj;
    // 查看是有存在雷同的对象在之前拷贝过，有则返回之前拷贝后存于 hash 中的对象
    if(hash.has(obj)) return hash.get(obj);
    let newObj = Array.isArray(obj) ? [] : {};
    // 备份存在 hash 中，newObj 目前是空对象、数组。前面会对属性进行追加，这里存的值是对象的栈
    hash.set(obj, newObj);
    // Reflect.ownKeys 返回一个数组，蕴含对象本身的（不含继承的）所有键名，不论键名是 Symbol 或字符串，也不论是否可枚举。Reflect.ownKeys(obj).forEach(key => {
        // 属性值如果是对象，则进行递归深拷贝，否则间接拷贝
        newObj[key] = isObject(obj[key]) ? deepClone(obj[key], hash) : obj[key];
    });
    return newObj;
}

代码输入后果

function Person(name) {this.name = name}
var p2 = new Person('king');
console.log(p2.__proto__) //Person.prototype
console.log(p2.__proto__.__proto__) //Object.prototype
console.log(p2.__proto__.__proto__.__proto__) // null
console.log(p2.__proto__.__proto__.__proto__.__proto__)//null 前面没有了，报错
console.log(p2.__proto__.__proto__.__proto__.__proto__.__proto__)//null 前面没有了，报错
console.log(p2.constructor)//Person
console.log(p2.prototype)//undefined p2 是实例，没有 prototype 属性
console.log(Person.constructor)//Function 一个空函数
console.log(Person.prototype)// 打印出 Person.prototype 这个对象里所有的办法和属性
console.log(Person.prototype.constructor)//Person
console.log(Person.prototype.__proto__)// Object.prototype
console.log(Person.__proto__) //Function.prototype
console.log(Function.prototype.__proto__)//Object.prototype
console.log(Function.__proto__)//Function.prototype
console.log(Object.__proto__)//Function.prototype
console.log(Object.prototype.__proto__)//null

这道义题目考查原型、原型链的根底，记住就能够了。

动静布局求解硬币找零问题

题目形容: 给定不同面额的硬币 coins 和一个总金额 amount。编写一个函数来计算能够凑成总金额所需的起码的硬币个数。如果没有任何一种硬币组合能组成总金额，返回 -1

示例 1：输出: coins = [1, 2, 5], amount = 11
输入: 3
解释: 11 = 5 + 5 + 1

示例 2：输出: coins = [2], amount = 3
输入: -1

实现代码如下:

const coinChange = function (coins, amount) {
  // 用于保留每个指标总额对应的最小硬币个数
  const f = [];
  // 提前定义已知状况
  f[0] = 0;
  // 遍历 [1, amount] 这个区间的硬币总额
  for (let i = 1; i <= amount; i++) {
    // 求的是最小值，因而咱们预设为无穷大，确保它肯定会被更小的数更新
    f[i] = Infinity;
    // 循环遍历每个可用硬币的面额
    for (let j = 0; j < coins.length; j++) {
      // 若硬币面额小于指标总额，则问题成立
      if (i - coins[j] >= 0) {
        // 状态转移方程
        f[i] = Math.min(f[i], f[i - coins[j]] + 1);
      }
    }
  }
  // 若指标总额对应的解为无穷大，则意味着没有一个符合条件的硬币总数来更新它，本题无解，返回 -1
  if (f[amount] === Infinity) {return -1;}
  // 若有解，间接返回解的内容
  return f[amount];
};

如何提⾼ webpack 的打包速度?

（1）优化 Loader

对于 Loader 来说，影响打包效率首当其冲必属 Babel 了。因为 Babel 会将代码转为字符串生成 AST，而后对 AST 持续进行转变最初再生成新的代码，我的项目越大，转换代码越多，效率就越低。当然了，这是能够优化的。

首先咱们 优化 Loader 的文件搜寻范畴

module.exports = {
  module: {
    rules: [
      {
        // js 文件才应用 babel
        test: /\.js$/,
        loader: 'babel-loader',
        // 只在 src 文件夹下查找
        include: [resolve('src')],
        // 不会去查找的门路
        exclude: /node_modules/
      }
    ]
  }
}

对于 Babel 来说，心愿只作用在 JS 代码上的，而后 node_modules 中应用的代码都是编译过的，所以齐全没有必要再去解决一遍。

当然这样做还不够，还能够将 Babel 编译过的文件 缓存 起来，下次只须要编译更改过的代码文件即可，这样能够大幅度放慢打包工夫

loader: 'babel-loader?cacheDirectory=true'

（2）HappyPack

受限于 Node 是单线程运行的，所以 Webpack 在打包的过程中也是单线程的，特地是在执行 Loader 的时候，长时间编译的工作很多，这样就会导致期待的状况。

HappyPack 能够将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来放慢打包效率了

module: {
  loaders: [
    {
      test: /\.js$/,
      include: [resolve('src')],
      exclude: /node_modules/,
      // id 前面的内容对应上面
      loader: 'happypack/loader?id=happybabel'
    }
  ]
},
plugins: [
  new HappyPack({
    id: 'happybabel',
    loaders: ['babel-loader?cacheDirectory'],
    // 开启 4 个线程
    threads: 4
  })
]

（3）DllPlugin

DllPlugin 能够将特定的类库提前打包而后引入。这种形式能够极大的缩小打包类库的次数，只有当类库更新版本才有须要从新打包，并且也实现了将公共代码抽离成独自文件的优化计划。DllPlugin 的应用办法如下：

// 独自配置在一个文件中
// webpack.dll.conf.js
const path = require('path')
const webpack = require('webpack')
module.exports = {
  entry: {
    // 想对立打包的类库
    vendor: ['react']
  },
  output: {path: path.join(__dirname, 'dist'),
    filename: '[name].dll.js',
    library: '[name]-[hash]'
  },
  plugins: [
    new webpack.DllPlugin({
      // name 必须和 output.library 统一
      name: '[name]-[hash]',
      // 该属性须要与 DllReferencePlugin 中统一
      context: __dirname,
      path: path.join(__dirname, 'dist', '[name]-manifest.json')
    })
  ]
}

而后须要执行这个配置文件生成依赖文件，接下来须要应用 DllReferencePlugin 将依赖文件引入我的项目中

// webpack.conf.js
module.exports = {
  // ... 省略其余配置
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      // manifest 就是之前打包进去的 json 文件
      manifest: require('./dist/vendor-manifest.json'),
    })
  ]
}

（4）代码压缩

在 Webpack3 中，个别应用 UglifyJS 来压缩代码，然而这个是单线程运行的，为了放慢效率，能够应用 webpack-parallel-uglify-plugin 来并行运行 UglifyJS，从而提高效率。

在 Webpack4 中，不须要以上这些操作了，只须要将 mode 设置为 production 就能够默认开启以上性能。代码压缩也是咱们必做的性能优化计划，当然咱们不止能够压缩 JS 代码，还能够压缩 HTML、CSS 代码，并且在压缩 JS 代码的过程中，咱们还能够通过配置实现比方删除 console.log 这类代码的性能。

（5）其余

能够通过一些小的优化点来放慢打包速度

• resolve.extensions：用来表明文件后缀列表，默认查找程序是 ['.js', '.json']，如果你的导入文件没有增加后缀就会依照这个程序查找文件。咱们应该尽可能减少后缀列表长度，而后将呈现频率高的后缀排在后面
• resolve.alias：能够通过别名的形式来映射一个门路，能让 Webpack 更快找到门路
• module.noParse：如果你确定一个文件下没有其余依赖，就能够应用该属性让 Webpack 不扫描该文件，这种形式对于大型的类库很有帮忙

代码输入后果

Promise.resolve(1)
  .then(2)
  .then(Promise.resolve(3))
  .then(console.log)

输入后果如下：

1

看到这个题目，好多的 then，实际上只须要记住一个准则：.then 或 .catch 的参数冀望是函数，传入非函数则会产生 值透传。

第一个 then 和第二个 then 中传入的都不是函数，一个是数字，一个是对象，因而产生了透传，将resolve(1) 的值间接传到最初一个 then 里，间接打印出 1。

实现节流函数和防抖函数

函数防抖的实现：

function debounce(fn, wait) {
  var timer = null;

  return function() {
    var context = this,
      args = [...arguments];

    // 如果此时存在定时器的话，则勾销之前的定时器从新记时
    if (timer) {clearTimeout(timer);
      timer = null;
    }

    // 设置定时器，使事件间隔指定事件后执行
    timer = setTimeout(() => {fn.apply(context, args);
    }, wait);
  };
}

函数节流的实现：

// 工夫戳版
function throttle(fn, delay) {var preTime = Date.now();

  return function() {
    var context = this,
      args = [...arguments],
      nowTime = Date.now();

    // 如果两次工夫距离超过了指定工夫，则执行函数。if (nowTime - preTime >= delay) {preTime = Date.now();
      return fn.apply(context, args);
    }
  };
}

// 定时器版
function throttle (fun, wait){
  let timeout = null
  return function(){
    let context = this
    let args = [...arguments]
    if(!timeout){timeout = setTimeout(() => {fun.apply(context, args)
        timeout = null 
      }, wait)
    }
  }
}

对事件循环的了解

因为 js 是单线程运行的，在代码执行时，通过将不同函数的执行上下文压入执行栈中来保障代码的有序执行。在执行同步代码时，如果遇到异步事件，js 引擎并不会始终期待其返回后果，而是会将这个事件挂起，继续执行执行栈中的其余工作。当异步事件执行结束后，再将异步事件对应的回调退出到一个工作队列中期待执行。工作队列能够分为宏工作队列和微工作队列，当以后执行栈中的事件执行结束后，js 引擎首先会判断微工作队列中是否有工作能够执行，如果有就将微工作队首的事件压入栈中执行。当微工作队列中的工作都执行实现后再去执行宏工作队列中的工作。

Event Loop 执行程序如下所示：

• 首先执行同步代码，这属于宏工作
• 当执行完所有同步代码后，执行栈为空，查问是否有异步代码须要执行
• 执行所有微工作
• 当执行完所有微工作后，如有必要会渲染页面
• 而后开始下一轮 Event Loop，执行宏工作中的异步代码

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

题目形容: 渲染百万条构造简略的大数据时 怎么应用分片思维优化渲染

实现代码如下:

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 构造渲染如何解决？

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

代码输入后果

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)
  })

输入后果如下：

1
finally2
finally
finally2 前面的 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 中抛出的异样

插入排序 – 工夫复杂度 n^2

题目形容: 实现一个插入排序

实现代码如下:

function insertSort(arr) {for (let i = 1; i < arr.length; i++) {
    let j = i;
    let target = arr[j];
    while (j > 0 && arr[j - 1] > target) {arr[j] = arr[j - 1];
      j--;
    }
    arr[j] = target;
  }
  return arr;
}
// console.log(insertSort([3, 6, 2, 4, 1]));

公布订阅模式(事件总线)

形容：实现一个公布订阅模式，领有 on, emit, once, off 办法

class EventEmitter {constructor() {
        // 蕴含所有监听器函数的容器对象
        // 内部结构: {msg1: [listener1, listener2], msg2: [listener3]}
        this.cache = {};}
    // 实现订阅
    on(name, callback) {if(this.cache[name]) {this.cache[name].push(callback);
        }
        else {this.cache[name] = [callback];
        }
    }
    // 删除订阅
    off(name, callback) {if(this.cache[name]) {this.cache[name] = this.cache[name].filter(item => item !== callback);
        }
        if(this.cache[name].length === 0) delete this.cache[name];
    }
    // 只执行一次订阅事件
    once(name, callback) {callback();
        this.off(name, callback);
    }
    // 触发事件
    emit(name, ...data) {if(this.cache[name]) {
            // 创立正本，如果回调函数内持续注册雷同事件，会造成死循环
            let tasks = this.cache[name].slice();
            for(let fn of tasks) {fn(...data);
            }
        }
    }
}

哪些操作会造成内存透露？

• 第一种状况是因为应用未声明的变量，而意外的创立了一个全局变量，而使这个变量始终留在内存中无奈被回收。
• 第二种状况是设置了 setInterval 定时器，而遗记勾销它，如果循环函数有对外部变量的援用的话，那么这个变量会被始终留在内存中，而无奈被回收。
• 第三种状况是获取一个 DOM 元素的援用，而前面这个元素被删除，因为咱们始终保留了对这个元素的援用，所以它也无奈被回收。
• 第四种状况是不合理的应用闭包，从而导致某些变量始终被留在内存当中。

代码输入后果

// a
function Foo () {getName = function () {console.log(1);
 }
 return this;
}
// b
Foo.getName = function () {console.log(2);
}
// c
Foo.prototype.getName = function () {console.log(3);
}
// d
var getName = function () {console.log(4);
}
// e
function getName () {console.log(5);
}

Foo.getName();           // 2
getName();               // 4
Foo().getName();         // 1
getName();               // 1 
new Foo.getName();       // 2
new Foo().getName();     // 3
new new Foo().getName(); // 3

输入后果：2 4 1 1 2 3 3

解析：

1. Foo.getName()， Foo 为一个函数对象，对象都能够有属性，b 处定义 Foo 的 getName 属性为函数，输入 2；
2. getName()， 这里看 d、e 处，d 为函数表达式，e 为函数申明，两者区别在于变量晋升，函数申明的 5 会被后边函数表达式的 4 笼罩；
3. Foo().getName()， 这里要看 a 处，在 Foo 外部将全局的 getName 从新赋值为 console.log(1) 的函数，执行 Foo()返回 this，这个 this 指向 window，Foo().getName() 即为 window.getName()，输入 1；
4. getName()， 下面 3 中，全局的 getName 曾经被从新赋值，所以这里仍然输入 1；
5. new Foo.getName()， 这里等价于 new (Foo.getName())，先执行 Foo.getName()，输入 2，而后 new 一个实例；
6. new Foo().getName()， 这 里等价于 (new Foo()).getName(), 先 new 一个 Foo 的实例，再执行这个实例的 getName 办法，然而这个实例自身没有这个办法，所以去原型链__protot__上边找，实例.protot === Foo.prototype，所以输入 3；
7. new new Foo().getName()， 这里等价于 new (new Foo().getName())，如上述 6，先输入 3，而后 new 一个 new Foo().getName() 的实例。

什么是执行栈

能够把执行栈认为是一个存储函数调用的 栈构造，遵循先进后出的准则。当开始执行 JS 代码时，依据先进后出的准则，后执行的函数会先弹出栈，能够看到，foo 函数后执行，当执行结束后就从栈中弹出了。

平时在开发中，能够在报错中找到执行栈的痕迹：

function foo() {throw new Error('error')
}
function bar() {foo()
}
bar()

能够看到报错在 foo 函数，foo 函数又是在 bar 函数中调用的。当应用递归时，因为栈可寄存的函数是有 限度 的，一旦寄存了过多的函数且没有失去开释的话，就会呈现爆栈的问题

function bar() {  bar()}bar()