基于TOP-K的面试题解总结（3）

11.简述常见异步编程方案 (promise, generator, async) 的原理

• 异步操作执行顺序： 在Javascript引擎线程中，存在着一个主线程和一个任务队列，同步任务会在其主线程中执行，而一些异步操作如setTimeout,ajax异步请求等，JS引擎会将这些操作放入任务队列中执行，等到异步操作完成后，会调用回调函数来执行。即同步任务先执行，任务队列里的异步操作后执行（异步任务队列按照队列方式执行，先进先执行）。
• Promise：
• 原理：当代码运行到new promise时，会将里面的异步任务放到异步队列中不会立即执行，待代码运行到then()方法时，会把形参函数存储起来。当主程序执行完毕后，开始执行异步队列
• 支持链式调用，解决回调地狱问题（多层回调函数嵌套）
• 指定回调方式更加灵活，不需要提前指定

 

• Generator函数：
• 使用yield表达式，定义不同的内部状态，从而实现对函数方法的分割切块执行
• 调用generator函数，函数并不会执行，返回的是一个Iterator对象，可以通过对这个对象的 .next() 方法进行遍历，达到一步步执行的效果
• 每调用一次next方法，就会在generator函数体内执行从当前所在yield到下一个yield之间的所有操作

 

• aswit,async
• 原理：是Generator的语法糖，将Generator中的（*）替换成async，将函数体内的yield改为await。语义更清楚了.
• await后面可以直接跟promise对象，也可以在async函数体内先声明函数，再通过await+函数名的方式进行异步操作。
• 当执行到async函数（起个函数名：fn1）的await时，会跳出当前fn1函数，执行其他代码，在数据请求成功时，又会将执行权交还给fn1，并继续在fn1函数体内继续从当前await往下执行。

 

12.简述浏览器的缓存机制

• 定义：浏览器的缓存机制就是把一个请求过的web资源（例如：html页面、图片、js、数据等）拷贝一份副本储存在浏览器中；缓存会根据进来的请求保存输出内容的副本，当下一个请求到来的时候，如果是相同的URL，缓存会根据缓存机制决定是否直接使用副本响应访问请求，还是向源服务器再次发送请求。比较常见的就是浏览器会缓存访问过的页面，当再次访问这个URL地址的时候，如果网页没有更新就不会再次下载网页，而是直接使用本地缓存的网页；只有当网站明确标识已更新，浏览器才会再次下载网页；
• 类别：根据是否需要向服务器重新发起 HTTP 请求，将缓存过程分为两个部分：强制缓存和协商缓存
• 强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互
• 协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存
• 缓存过程：
• 浏览器第一次加载资源，服务器返回200，浏览器将资源文件从服务器上请求下载下来，并把response header及该请求的返回时间一并缓存
• 下一次加载资源时，先比较当前时间和上一次返回200时的时间差，如果没有超过cache-control设置的max-age，则没有过期，命中强缓存，不发请求直接从本地缓存读取该文件（如果浏览器不支持HTTP1.1，则用expires判断是否过期）；如果时间过期，则向服务器发送header带有If-None-Match和If-Modified-Since的请求
• 服务器收到请求后，优先根据Etag的值判断被请求的文件有没有做修改，Etag值一致则没有修改，命中协商缓存，返回304；如果不一致则有改动，直接返回新的资源文件带上新的Etag值并返回200
• 如果服务器收到的请求没有Etag值，则将If-Modified-Since和被请求文件的最后修改时间做比对，一致则命中协商缓存，返回304；不一致则返回新的last-modified和文件并返回200
• 存储位置：
• Service Worker：属于浏览器背后的独立线程，使用Service Worker，传输协议必须为HTTPS，且该缓存是持续性的
• Memory Cache：属于内存中的缓存，读取高效但持续时间短，一旦关闭Tab页面就会被释放
• Disk Cache：属于硬盘中的缓存，读取速度相对慢，但存储容量大、存储时效长。
• Push Cache：是HTTP/2中的内容，前三种缓存都没命中的情况下才会被使用，只在会话中（Session）存在，一旦会话结束便被释放，缓存时间只有5分钟左右

 

13.简述强缓存与协商缓存的区别和使用场景

• 强缓存：浏览器请求资源时会先从本地缓存中获取资源header，不与服务器直接进行交互，通过Cache-control中的max-age来判断资源是否过期
• 协商缓存：浏览器发送请求到服务器，服务器判定是否可使用本地缓存
• 区别：强缓存在缓存有效时间内是直接使用缓存数据，不会发送请求，协商缓存在每次请求数据时都会向服务端发送请求来判断是否需要更新缓存，然后再决定是否使用缓存。强缓存是浏览器决定是否使用缓存，协商缓存是服务器决定缓存是否可用。
• 使用场景：希望服务器上的资源更新了浏览器就请求新的资源，没有更新就使用本地的缓存， 以最大程度的减少因网络请求而产生的资源浪费

 

 

14.简述 Vue 的生命周期

• beforeCreat(创建前)：实例完全被创建出来之前，挂载对象和数据对象data都为undefined
• created(创建后)：数据对象data已经存在，可以调用method中的方法操作data数据，但DOM未生成
• beforeMount(挂载前)：data和实例方法已经初始化，虚拟DOM已经在内存中编辑完成，但未渲染到页面中
• mounted(挂载后)：渲染完成，用户已经可以看到渲染好的页面，实例已经挂载完成
• beforeUpdate(更新前)：当data发生变化时会触发beforeUpdate方法。此时data数据尚未和最新的数据保持同步
• updated(更新后)：当data变化时会触发updated方法。此时页面和data数据已经保持同步了
• beforDestroy(销毁前)：在组件销毁之前调用，实例仍然可以使用，页面正常可使用
• destroyed(销毁后)：组件销毁之后调用，对data的改变不会触发周期函数，实例已经解除事件监听和dom绑定，但dom结构仍然存在

 

15.简述 ES6 的新特性

• 变量声明：
• let：声明局部变量，为块级作用域
• const：声明局部常量，也为块级作用域，但该值被声明后不能再进行修改
• 老版本的var：声明全局变量，可以在变量使用后再声明。
• 箭头函数：
• 特点：简洁，this指向上级函数作用域，return不用必须存在
• ...arrays ：
• 可以泛指可迭代的对象
• for ... of：
• 可以遍历一个迭代器，如数组
• 类：
• 用于继承的一个语法糖