地址：https://juejin.cn/post/7004638318843412493
我看面试题的准则
- 语言简洁，清楚
- 用自己的话描述
- 我们要有纠错能力
- 分清楚哪些指重点
1.输入一个 URL地址到浏览器完成渲染的整个过程发生了什么？
1.输入一个 URL到浏览器整个过程发生了什么？
1.浏览器查找当前 URL是否存有缓存，并检查这个缓存是否过期
2.DNS 解析 URL 对应的 IP
3.根据 IP 建立 TCP 连接（三次握手）
4.发送 http 请求
5.服务器处理请求，浏览器接受 HTTP 响应
6.浏览器解析并渲染页面
7.关闭 TCP 连接（四次握手）
[https://juejin.cn/post/6844903832435032072]
2 什么是事件代理（事件委托）?
事件委托的原理：不给每个子节点单独设置事件监听器，
而是设置在其父节点上，然后利用冒泡原理设置每个子节点
3 事件委托的优点有哪些 ?
1. 减少内存消耗和 dom 操作
2. 动态绑定事件，因为事件绑定在父级元素 所以新增的元素也能触发同样的事件
4 addEventListener 默认是捕获还是冒泡
默认是冒泡
addEventListener第三个参数默认为 false 代表执行事件冒泡行为。
当为 true 时执行事件捕获行为。
5. css的渲染层合成是什么？
在 DOM 树中每个节点都会对应一个渲染对象（RenderObject），
当它们的渲染对象处于相同的坐标空间（z 轴空间）时，
就会形成一个 RenderLayers也就是渲染层。
渲染层将保证页面元素以正确的顺序堆叠，这时候就会出现层合成（composite）。
【层合成】:从而正确处理透明元素和重叠元素的显示。
对于有位置重叠的元素的页面，这个过程尤其重要，
因为一旦图层的合并顺序出错，将会导致元素显示异常。
7 webpack Plugin 和 Loader 的区别
1. Loader==>
loader 扩展了 webpack 如何处理非 javascript 模块，
并且在 buld 中引入这些依赖。
loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，
如 css-loader 和 style-loader 模块，是为了打包css的
如 url-loader 和 file-loader，是为了把图片进行打包,转化为 data URL。
plugin:从打包优化到压缩，到重新定义环境变量，webpack提供了很多开箱即用的插件：
如 CommonChunkPlugin 主要用于提取第三方库和公共模块，
避免首屏加载的bundle文件体积过大，导致加载时间过长,是优化的利器。
如 html-webpack-plugin 用于html文件的拷贝，打包。
还给html中自动增加了引入打包后的js文件
从运行时机的角度区分
1. loader运行在打包文件之前
2. plugin在整个编译周期都起作用
https://juejin.cn/post/6844904150988226574
https://www.cnblogs.com/yuantai/p/14082487.html
7.1 webpack的缺点
由于webpack本身只能打包commonjs规范的js文件,
所以针对css，图片等格式的文件没法打包，
就需要引入第三方的模块进行打包。
如css-loader 和 style-loader 模块 处理css的
7.2 babel-loader 和 babel-core 模块是用来干嘛的？
是为了把es6的代码 转成 es5
8. css 优先级是怎么计算的
第一优先级：!important 会覆盖页面内任何位置的元素样式
1.内联样式，如 style="color: green"，权值为 1000
2.ID 选择器，如#app，权值为 0100
3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为 0010
4.标签、伪元素选择器，如 div::first-line，权值为 0001
5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为 0000
6.继承的样式没有权值
9. http 状态码 含义
http 状态码 204 （无内容） 服务器成功处理了请求，但没有返回任何内容
http 状态码 301 （永久移动） 请求的网页已永久移动到新位置。
服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。
http 状态码 302 （临时移动） 但请求者继续使用原有位置来进行以后的请求。
http 状态码 400 （错误请求） 服务器不理解请求的语法（一般为参数错误）。
http 状态码 401 （未授权） 要求身份验证,或者身份过期,对于需要登录的网页，服务器可能返回此响应。
http 状态码 403 服务器已经理解请求，但是拒绝执行它。（一般为客户端的用户权限不够）
http 状态码 404 （未找到） 服务器找不到请求的网页。
500 服务器遇到了一个未曾预料的状况，无法完成对请求的处理，会在程序码出错时出现。
501 服务器不支持当前请求所需要的某个功能。无法识别请求的方法。
502 作为网关或者代理工作的服务器尝试执行请求时，从上游服务器接收到无效的响应。
503 由于临时的服务器维护或者过载，服务器当前无法处理请求。
10. http2.0 特性如下
二进制分帧传输
多路复用
头部压缩
服务器推送
11. Http3.0 相对于 Http2.0 是一种脱胎换骨的改变！
http 协议是应用层协议，都是建立在传输层之上的。
我们也都知道传输层上面不只有 TCP 协议，
还有另外一个强大的协议 UDP 协议，
2.0 和 1.0 都是基于 TCP 的。
因此都会有 TCP 带来的硬伤以及局限性。
Http3.0 则是建立在 UDP 的基础上。所以其与 Http2.0 之间有质的不同。
http3.0 特性如下
1.连接迁移
2.无队头阻塞
3.自定义的拥塞控制
4.前向安全和前向纠错
12 Vue 响应式原理
整体思路是数据劫持+观察者模式
数据劫持核心是 defineReactive 函数,
主要使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），
数组则是通过重写数组方法来实现。
当页面使用对应属性时，每个属性都拥有自己的 dep 属性，
它[dep]存放所依赖的 watcher（依赖收集），
当属性变化后会通知自己对应的 watcher 去更新(派发更新)
监听的大致过程是: ==>
observe 函数会判断传递过来的值是对象还是数组。
分别通过
Object.prototype.toString.call(value) === "[object Object]"
|| Array.isArray(value)
如果是，调用 Observer类,(主要做了观测) 【new Observer(value)】
在 constructor 中调用 walk 函数,
walk函数做了:对象上的所有属性依次进行观测,并调用defineReactive函数，defineReactive(data, key, value);
如果value还是一个对象会继续走一遍odefineReactive 层层遍历一直到value不是对象才停止
Object.defineProperty 中get做依赖收集的过程。set是 设置新值，做派发更新过程
这样就可以做到据变动了会自动更新视图
我们可以在 set 里面去通知视图更新
题外话 1==>如果监听的是对象，对象上的所有属性依次进行观测。
使用了 let keys = Object.keys(data);返回了所有对象的key值。
题外话 2==> 如果value还是一个对象会继续走一遍 odefineReactive,
层层遍历一直到value不是对象才停止
题外话 3 ==> Object.defineProperty中中get做依赖收集的过程。
set是 设置新值，做派发更新过程
这样的劫持方式对数组有什么影响
这样递归的方式其实无论是对象还是数组都进行了观测,
但是我们想一下此时如果 data 包含数组比如 a:[1,2,3,4,5]
那么我们根据下标可以直接修改数据也能触发 set
但是如果一个数组里面有上千上万个元素
每一个元素下标都添加 get 和 set 方法
这样对于性能来说是承担不起的,所以此方法只用来劫持对象
则是对数组的方法进行了重写
13 vue对数组观察的过程
Observer 类中判断是否是数组。通过 Array.isArray(value)
重写数组原型方法来，对数组的七种方法进行拦截。
如果数组里面还包含数组需要递归判断。递归则是通过了observeArray来处理
每个响应式数据增加了一个不可枚举的__ob__属性，
并且指向了 Observer 实例，
那么我们首先可以根据这个属性来防止已经被响应式观察的数据反复被观测，
其次,响应式数据可以使用__ob__来获取 Observer 实例的相关方法 这对数组很关键
题外话1：
因为对数组下标的拦截太浪费性能 ，对Observer构造函数传入的数据参数增加了数组的判断
14. Object.defineProperty 缺点？
对象新增或者删除的属性无法被 set 监听到
只有对象[本身存在]的属性修改才会被劫持
15. Vue nextTick 原理
Vue 在更新 DOM 是异步的，当监听数据变化后，vue会开启一个队列。
并缓冲同一个事件在循环中发生【所有数据变化后】,
如果同一个 watcher 被多次触发，只会被推入到队列中一次。
这种缓冲的意义在于,去除重复的数据，可以避免不必要计算和DOM操作。
Vue内部对异步队列尝试使用 Promise.then、
然后时是 MutationObserver 和 setImmediate
如果前两者都不支持使用 setTimeout(fn, 0) 代替。
对当前环境进行不断的降级处理
【mjuːˈteɪ ʃn]】 Mutation 突变;变异;基因突变
【ɪn mi di ət 】
也就是说我们在设置数据的时候，( this.msg = 'some thing' )
Vue并没有马上去更新DOM数据,而是将这个操作放进一个队列中
如果我们重复执行的话，队列还会进行去重操作。
等待同一事件【循环中】的所有数据变化完成之后。
会将事件从队列拿出来。
这样做主要是为了提升性能，
如果循环100次就要更新100次DOM，是非常消耗性能的。
但是如果等【事件循环完成】之后更新DOM，只需要更新1次。
题外话1：如果多次调用nextTick，只会执行一次异步 ，
等异步队列清空之后再把标志变为false
16.路由原理 history 和 hash 两种路由方式的特点
1.==>hash 模式
location.hash 的值实际就是 URL 中#后面的东西,
它的特点在于：hash 虽然出现 URL 中，
但不会被包含在 HTTP 请求中，
对后端完全没有影响，因此改变 hash 不会重新加载页面。
可以为 hash 的改变添加监听事件
window.addEventListener("hashchange", funcRef, false);
每一次改变 hash（window.location.hash），
都会在浏览器的访问历史中增加一个记录,
利用 hash 的以上特点，
就可以来实现前端路由“更新视图但不重新请求页面”的功能了
特点：兼容性好但是不美观
17.npm与yarn的区别
1.npm是按照队列执行每个package，也就是说必须要等到当前 package 安装完成之后，才能继续后面的安装。
而 Yarn 是同步执行所有任务，提高了性能。
2.如果之前已经安装过一个软件包，用Yarn再次安装时之间从缓存中获取，就不用像npm那样再从网络下载了。
2.==> history 模式
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。
这两个方法应用于浏览器的历史记录站，
在当前已有的 back、forward、go 的基础之上，
它们提供了对历史记录进行修改的功能。
这两个方法有个共同的特点：
当调用他们修改浏览器历史记录栈后，
虽然当前 URL 改变了，
但浏览器不会刷新页面，
这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。
特点：虽然美观，但是刷新会出现 404 需要后端进行配置
12 position 有哪些值，作用分别是什么
13 垂直水平居中实现方式
14 vue 组件通讯方式有哪些方法
15 Vue 响应式原理 整体思路是数据劫持+观察者模式
事件循环相关题目--必考（一般是代码输出顺序判断）
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");
});
