# 1-10

# 1、从输入URL地址到浏览器完成渲染的整个过程

验证URL合法性
DNS解析
TCP连接
SSL/TLS连接
服务端响应
浏览器渲染
断开连接

# 2、什么是事件代理（事件委托）有什么好事？

事件代理：不给子节点单独设置事件监听器，而是设置在其父节点上，然后利用冒泡原理设置每个子节点。

优点：

减少内存消耗和dom操作，在javascript中提高性能，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断操作dom，那么引起浏览器重绘和回流的可能也就越多，页面交互的事件也就变地越长，这也就是为什么要减少dom操作的原因。每一个事件处理函数，都是一个对象，多一个事件处理函数，内存中就会被多占用一部分空间。如果要用事件委托，就会将所有的操作放到js程序里面，只对他的父级进行操作，与dom的操作就只需要交互一次，这样就大大的减少与dom的交互次数，提高性能；
动态绑定事件，因为事件绑定在父级元素，所以新增的元素也能触发同样的事件。

# 3、addEventListener默认是冒泡还是捕获。

默认是冒泡。 addEventListener的第三个参数默认是false代表事件冒泡行为。当为true是执行事件捕获行为。

# 4、css的渲染层合成是什么，浏览器如何创建新的渲染层。

对布局树进行分层，并生成分层树。
为每个图层生成绘制列表，并将其提交到合成线程。

渲染引擎还需要为特点的节点生成专用的图层，并生成一颗对应的图层树（layerTree）。这些图层叠加在一起构成了最终的页面图像。浏览器的页面实际被分成了很多图层，这些图层叠加后合成了最终的页面。

并不是布局树中每个节点都包含一个图层，如果一个节点没有对应的层，那么这个节点就属于父节点的图层。

# 满足什么条件，渲染引擎才会为特定的节点创建新的图层呢？

拥有层叠上下文属性的元素会被提升为单独的一层。

明确定位的元素、定义透明属性的元素、使用css滤镜的元素等

position: fixed; 、z-index：2;、filter：blue(5px); 、opacity：0。5；
需要剪裁（clip）的地方也会被创建为图层。（overflow: auto）。

# 5、webpack Plugin和loader的区别

loader

用于对模块的源代码的转换，loader描述了webpack将其他类型的文件转换为webpack所识别的模块。
plugin

用于解决loader无法实现的事，它直接作用于webpack，扩展了他的功能。在webpack运行的生命中期中会广播出许多事件，plugin 可以监听这些事件，在合适的时机通过webpack提供的API改变输出结果。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能及其强大，可以用来处理各种各样的任务。

# 6、apply、call、bind

相同点: 都可以改变this的指向。不同点: apply、call会立即执行，bind返回绑定this之后的函数，会在调用时才执行。

bind()会返回一个新的函数，如果这个返回的新的函数作为构造函数创建一个新的对象，那么此时this不再指向传入给bind的第一个参数，而是执行用new创建的实例（也就是bind无效）。

apply/call对比: apply传参接受数组形式，call是传参列表。

# 7、举出闭包场景运用的例子。

防抖/创建私有变量

function debounce(fn, delay) {
    let timer = null;
    return function () {
        if(timer) clearTimeout(timer);
        timer = setTimeout(() => {
            fn.apply(this, arguments);
        }, delay);
    }
}

# 8、css优先级

!important;
内连
ID
类、伪类、属性选择器
标签、伪元素选择器
通配符、子类选择器、兄弟选择器

# 9、事件循环

setTimeout(function () {
  console.log("1");
}, 0);
async function async1() {
  console.log("2");
  const data = await async2();
  console.log("3");
  return data;
}
async function async2() {
  return new Promise((resolve) => {
    console.log("4");
    resolve("async2的结果");
  }).then((data) => {
    console.log("5");
    return data;
  });
}
async1().then((data) => {
  console.log("6");
  console.log(data);
});
new Promise(function (resolve) {
  console.log("7");
  //   resolve()
}).then(function () {
  console.log("8");
});

输出结果：247536 async2 的结果 1

注意！我在最后一个 Promise 埋了个坑我没有调用 resolve 方法这个是在面试美团的时候遇到了当时自己没看清楚以为都是一样的套路最后面试官说不对找了半天才发现是这个坑哈哈

# 10、http状态码

# 1.xx

101: 协议切换状态码表示服务器应客户端升级协议的请求对协议进行切换。

# 2.xx

200: 成功
204: 无内容，服务器成功处理了请求，但没有返回任何内容。响应头后没有body数据。

# 3.xx

301: 永久重定向
302: 临时重定向
304: 使用协商缓存

# 4.xx

400: 错误，但是并不知道哪里出错了。
403: 服务器禁止访问。例如法律禁止、信息敏感。
404: 资源未找到，表示没在服务器上找到对应的资源。

# 5.xx

500: 服务端出错，哪里出错，不知道。
503：服务器很忙，暂时无法响应。

11-20 →