每日面经总结（一日5题系列）
1.说一下浏览器的缓存机制
浏览器缓存机制分为两种，一种是强缓存，另一种是协商缓存，这两种缓存方式一般由服务器指定。
①强缓存指直接使用本地缓存资源不必再像服务器发起请求，在http1.0中使用expires方式指定资源的过期时间（绝对时间），http1.1中使用cache-control（值包含:max-age=时间戳【指定资源能够被缓存的时间大小，相对时间】，no-store-禁止缓存，no-cache-可以缓存但每次要像服务器发起请求，private-私有缓存，public-公共缓存）更灵活
②协商缓存，会先像服务器发送一个请求，如果资源没有被修改则返回304使用本地缓存，若修改了，则返回修改后的资源，也有两种方式来设置，分别是last-modified和etag
--服务器通过last-modified指出资源最后一次修改时间，当浏览器下一次发起请求时，会在请求头中添加if-modified-since值为上一次资源请求时返回的last-modified的值（会有秒级不准确的问题）
--etag属性拥有更高优先级，服务器在返回资源时会在头部添加etag属性（资源的唯一标识符），下次请求时，浏览器端会在请求头添加if-none-match属性值为etag的值
【扩展：实际开发中如何设置缓存】尽可能的命中强缓存，同时在更新版本时让客户端的缓存失效，故使用文件名加hash的方式做版本更新，较为合理的方案是：HTML使用协商缓存，css/js/图片使用强缓存，文件名后面加上hash值
2.HTTP1.x和HTTP2.x的区别
①多路复用：一个http链接可以处理多个http消息
②二进制分帧：1.x解析基于文本协议（不断读入字节，直到遇到分隔符），2.x基于二进制帧，对消息进行了封装
③首部压缩：使用encoder（huffman）减少需要传输的头部大小，且通信双方都cache了一份header头部表，避免重复传输
④服务器推送：服务器可以主动把客户端请求的相关资源主动推送给客户端
【多路复用实现的原理】http2是分帧的，每帧的前9个字节，封装了一些元信息（长度、类型、帧标识，流的唯一ID等），解析这些字节就能知道每个帧期望用多少字节来处理，因此请求和响应可以交错甚至复用
3.HTTPS如何保证可靠传输
https采用http+ssl/tls即在http和tcp之间加入安全层，用于加密和解密
加密和解密的方式是（非对称加密和对称加密相结合的方式）
非对称加密指：服务器端拥有公钥和私钥
对称加密指：浏览器端用公钥加密一个随机数后传给服务器端，服务器端用私有解密后，浏览器和服务器拥有了同一个加密解密密钥
存在问题，黑客可能通过dns劫持服务器IP换成自己的IP，在自己的服务器上实现公钥和私钥与浏览器进行通信，所以服务器要添加数字证书证明，“我就是我”，所以可以用权威机构ca去申请数字证书证明自己
4.vue router的原理
vue路由插件，通过Vue.mixin全局混入生命周期函数，确保子组件或者当前路由对象和vuerouter实例
定义全局组件,router-link和router-view，router-link基于a标签封装，router-view作为视图分发的出口
根据传入的配置对象，确定路由机制，hash路由还是history路由
监听hashchange或者popstate事件，监听路由变化，根据路由加载配置对象中的视图组件，并渲染
5.vue和react的区别
1.模板语法不同：react使用jsx（语法糖，原生js语法）
vue使用template，封装了多个内置指令，灵活性不同
2.封装程度，vue封装程度更高，比如实现数据的双向绑定，使用v-model 就可以实现，但react，要用onChange/setState来实现
3.diff算法不同，react的diff两个指针，从左到右比较，vue是（4个指针）的双端比较
【明日预告】
1.作用域链和闭包
2.v8的垃圾回收机制
3.cookie、localStorage、sessionStorage、session的区别
4.vue router中hash模式和history模式的实现原理
5.vue2diff算法与vue3diff算法的区别
投递中国电信等公司7个岗位 >
字节跳动一面244人在聊
查看12道真题和解析