面试题整理

20210601 性能优化之CDN

Q1：
CDN的工作原理
A1：
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. 用户向该缓存服务器发起请求，缓存服务器响应用户的请求，将用户所需内容发送至用户终端。

20210513 离线存储

Q1:
HTML5的离线储存怎么使用，它的工作原理是什么
A1:
离线存储指的是：在用户没有与因特网连接时，可以正常访问站点或应用，在用户与因特网连接时，更新用户机器上的缓存文件。

原理：HTML5的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示.

• CACHE: 表示需要离线存储的资源列表，由于包含 manifest 文件的页面将被自动离线存储，所以不需要把页面自身也列出来。
• NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问，他们不会被离线存储，所以在离线情况下无法使用这些资源。不过，如果在
  CACHE 和 NETWORK 中有一个相同的资源，那么这个资源还是会被离线存储，也就是说 CACHE 的优先级更高。
• FALLBACK: 表示如果访问第一个资源失败，那么就使用第二个资源来替换他，比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了，那么就去访问 offline.html 。

（3）在离线状态时，操作 window.applicationCache 进行离线缓存的操作。

如何更新缓存：

1. 更新 manifest 文件
2. 通过 javascript 操作
3. 清除浏览器缓存

注意事项：

1. 浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

2. 如果 manifest 文件，或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存。

3. 引用 manifest 的 html 必须与 manifest 文件同源，在同一个域下。

4. FALLBACK 中的资源必须和 manifest 文件同源。

5. 当一个资源被缓存后，该浏览器直接请求这个绝对路径也会访问缓存中的资源。

6. 站点中的其他页面即使没有设置 manifest 属性，请求的资源如果在缓存中也从缓存中访问。

7. 当 manifest 文件发生改变时，资源请求本身也会触发更新。

Q2:
浏览器是如何对 HTML5 的离线储存资源进行管理和加载？
A2:

• 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面，那么浏览器就会根据 manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的manifest 文件与旧的 manifest文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
• 离线的情况下，浏览器会直接使用离线存储的资源。

20210512 虚拟DOM

Q1：
vue中，什么是虚拟DOM？
A1:
Virtual DOM 是什么？
Virtual DOM 其实就是一棵以 JavaScript 对象( VNode 节点)作为基础的树，用对象属性来描述节点，实际上它只是一层对真实 DOM 的抽象。最终可以通过一系列操作使这棵树映射到真实环境上。

简单来说，可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。

对于虚拟DOM，咱们来看一个简单的实例，就是下图所示的这个，详细的阐述了模板 → 渲染函数 → 虚拟DOM树 → 真实DOM的一个过程

20210511 闭包

Q1:
简单叙述一下什么是闭包？
当什么业务场景下可以使用到闭包？
A1:
闭包就是能够读取其他函数内部变量的函数。例如在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁。
一文说透 JS 中的闭包
理解JavaScript闭包9大使用场景

20210508 v-model

Q1：
v-model的底层原理是什么？当你封装一个组件想要使用v-model的时候，组件内应该做怎样的操作？
A1：
1.v-model只能使用在表单组件上 了解这个先
2.v-model的底层原理就是：通过表单组件的input事件，来给vue实例上的data做赋值操作
3.组件内想实现v-model的话 要用this.$emit(‘input’,value) 这样去操作

Q2：
关于$emit

A2：
在组件内使用this.$emit（‘input’,value）的时候 父组件调用子组件的时候 就可以@input=‘handle’ 参数默认就是value。