微派三轮面试总结

class Publisher {
  constructor() {
    this.subscribers = [];
  }
  subscribers(subscriber) {
    this.subscribers.push(subscriber);
  }
  unsubscribers(subscriber) {
    const index = this.subscribers.indexOf(subscriber);
    if (index == -1) {
      this.subscribers.splice(index, 1);
    }
  }
  notify(message) {
    this.subscribers.forEach(subscriber => {
      subscriber.update(message)
    })
  }
}

二面：

1. 插槽的类型有哪些，有什么区别

插槽是一种组件间通信的机制，主要的作用是向子组件的指定位置插入一段内容，插槽的常见类型有：默认插槽、具名插槽、作用域插槽。

具名插槽和作用域插槽的区别：

具名插槽适合用于需要在组件内部插入不同内容的场景，例如一个容器组件需要显示不同的标题、内容、按钮等；作用域插槽适合用于需要在组件内部根据父组件的数据进行动态渲染的场景。

注意：遇到动态渲染组件时，虽然可以不使用作用域插槽，直接在组件中增加一些逻辑，但那样我们封装组件的意义就不是很大了，显然使用作用域插槽是比较好的办法。

2. keep-alive有了解过吗

是一个内置组件，用于缓存一些组件实例，以便在切换时能够记住状态，可以用于优化组件的性能，避免不必要的组件重新渲染。

3. 如果一个页面中使用了keep-alive，那么再次访问这个页面的时候会执行生命周期吗

不会，vue 会将缓存的组件实例直接激活，并执行 activated 生命周期钩子函数。需要注意的是，如果一个组件被缓存，那么它的状态和数据会被保留在内存中，并且不会被重置，如果需要在组件被重新激活时进行一些特殊处理，可以在 activated 钩子函数中进行相应的操作，例如重新加载数据、重置组件状态等。

4. nextTick有了解过吗，属于异步任务吗

是异步任务。这个方法的作用是在下次DOM更新循环结束之后执行延迟回调（在 vue 中修改数据之后，DOM不会立即更新，而是会等待一段时间之后才会更新，此方法就是用来在这个更新周期结束之后才会执行的回调）。

5. PC端浏览器中在页面渲染的过程中都有什么缓存

1）浏览器缓存：会将页面中的静态资源（图片、css、js文件等）存到本地，以减少重复下载的次数，提高页面的加载速度，包括强缓存和协商缓存。

2）DNS缓存：当一个浏览器请求一个URL时，会先在本地DNS缓存中查找对应的IP地址，如果找到了就直接访问，否则会向DNS服务器发送请求获取IP地址。

3）TCP缓存：TCP协议会在传输数据时对数据进行分段和重组，这些分段和重组的数据会在客户端和服务器端进行缓存，以减少网络请求次数。

4）操作系统缓存：操作系统会将常用的文件和数据缓存到内存中，以加快访问速度，例如操作系统会将常用的文件和目录缓存到内存中，以减少磁盘读取的次数。

6. 输入URL后到页面加载的过程是怎么样的

从输入URL到浏览器显示页面的过程中都发生了什么？_从输入url到浏览器显示页面发生了什么_Baobao小包的博客-CSDN博客

7. 浏览器渲染过程是怎么样的

解析HTML：解析成DOM树
解析CSS：解析成CSSOM，构成样式规则的树形结构
布局：生成渲染树Render Tree
绘制：遍历渲染树，绘制成屏幕上的像素
合成：将屏幕上不同的层合成为同一张完整的页面

8. script标签中defer和async是什么意思，它们有什么区别

浏览器在解析HTML时，如果遇到一个没有任何属性的 script 标签，就会暂停解析，先发送网络请求获取该JS脚本的代码内容，然后让JS引擎执行该代码，当代码执行完毕后HTML继续解析。所以，script 阻塞了浏览器对HTML的解析，如果获取JS脚本的网络请求迟迟得不到响应，或者JS脚本执行时间过长，都会导致白屏，用户看不到页面内容。

async script

async 表示异步，当浏览器遇到带有 async 属性的 script 时，请求该脚本的网络请求是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器会暂停解析，先让JS引擎执行代码，执行完毕之后再解析HTML。所以，async 是不可控的，因为执行的时间是不确定的，可能在获取某个DOM元素时获取不到。而且如果存在多个 async script 时，它们之间的执行顺序也不确定，完全依赖于网络的传输快慢。

defer script

defer 表示延迟，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析HTML，一旦网络请求回来之后，如果此时HTML还没有解析完，浏览器会等待HTML解析完毕之后再执行JS代码。所以，不会存在带有 async 属性的那种获取不到DOM元素的情况，并且如果存在多个 defer script 标签，浏览器会保证它们按照在HTML中出现的顺序执行。

9. 304代表什么意思，命中的是哪个缓存

代表数据没有发生变化，继续访问缓存。命中的是协商缓存。

10. 浏览器渲染页面时出现卡顿可能的原因有哪些

请求数据大、重绘和回流多、js执行时间过长、大量的DOM操作、大量的网络请求、CSS样式过于复杂、图片过大或过多。

11. 手写题：Promise.all

function isPromise(obj) {
  return !!obj && (typeof obj === 'function' || typeof obj === 'object') && typeof obj.then === 'function';
}

function promiseAll(arr) {
  let res = [];
  return new Promise((resolve, reject) => {
    for (let i = 0; i < arr.length; i++) {
      if (isPromise(arr[i])) {
        arr[i].then(data => {
          res[i] = data;
          if (res.length === arr.length) {
            resolve(res)
          }
        }).catch(error => {
          reject(error)
        })
      } else {
        res[i] = arr[i]
      }
    }
  })
}