开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情

START

1. 解释是什么的问题。
2. 解释这个技术的应用点、应用场景在哪里。
3. 整理一下这个问题的优缺点是什么。

前言

见上篇：review1[1-11]

12、客户端渲染和服务端渲染有什么区别呢？在之前的工作中有做过服务端渲染吗？

• （解释是什么的问题。）
  • 客户端渲染：前端去后端获取数据生成DOM树。
  • 服务端渲染：DOM树在服务端生成，然后返回给前端。
• （解释这个技术的应用点、应用场景在哪里。）
  • 两者区别在于谁去拼接html
  • 服务端渲染速度更快，更有利于seo捕获。【在源码中可以找到页面上的内容，基本上就是服务端渲染】
  • 场景：
    • 一般没有过多地交互的系统，需要有利于seo的，可以使用服务端渲染
    • 若像后台管理操作系统，交互性较强的，可以使用客户端系统
    • 现在市面上大多采用的是两者结合:首屏使用服务端渲染，其他使用客户端渲染
• （整理一下这个问题的优缺点是什么。）
  • 服务端渲染
    • 优点
      • 1、尽量不占用前端的资源，前端这块耗时少，速度快。
      • 2、有利于SEO优化，因为在后端有完整的html页面，所以爬虫更容易爬取信息。
    • 缺点
      • 1、不利于前后端分离,开发的效率降低了。
      • 2、对html的解析，对前端来说加快了速度，但是加大了服务器的压力。
  • 客户端渲染
    • 优点
      • 前后端分离，开发效率高。
      • 用户体验更好，我们将网站做成SPA（单页面应用）或者部分内容做成SPA，当用户点击时，不会形成频繁的跳转。
    • 缺点
      • 1、前端响应速度慢，特别是首屏，这样用户是受不了的。
      • 2、不利于SEO优化，因为爬虫不认识SPA，所以它只是记录了一个页面。
• 在工作中是用到过的，之前在一家公司是负责C端项目的，其官网部分页面主要就是为了捕获seo,查看访问数量，及数据埋点等页面加载速度更快。

13、Vue长列表的优化方式怎么做？

• 分页加载：设置数据数量，超过之后请求接口加载下一页
• 按需加载：vue-virtual-scroll-list，滚动加载，当dom出现在可视区域进行加载
• Object.freeze() 一些仅展示类的内容，可以冻结数据
• 为什么做长列表
  • dom的修改会引起页面的重绘重排，数据量大的话页面就会崩溃。用户体验不好

14、Vue3相比Vue2有哪些优化？

• 打包采用vite,打包速度更快
• patch算法增加了patchFlag标记，可以省很多dom的比较
• 双向绑定采用proxy，比Object.definePrototype效率更好，功能性更完善。可以对数组，深层次对象进行修改
• 可以使用多根节点（Fragement）
• 使用组件化API，可以把一块功能的代码放在一块，容易提取代码，可以更方便的写一个hook
• TS支持
• 按需编译
• 静态提升（只要没有改动，直接复用）
• 提交更小

15、为什么在模板中绑定事件的时候要加.native?

• （解释是什么问题）
  • .native： 给自定义组件绑定原生事件，但是对原生组件无效
• （解释这个技术的应用点、应用场景在哪里。）
  • 比如在vue里，在自定义组件中使用@click的时候需要加上.naive.<myComponent @click.naive='handleclick' />这个时候click才会生效。（可以理解为把自定义标签转化成了一个普通标签）

16、能说一下响应式原理的过程吗？

• 通过Object.defineproperty或者proxy中的get、set方法
  • vue中是通过Observe方法中调用defineReactive,这里面进行响应式

17、数组的响应式怎么实现的？

• 在vue中，Object.defineProperty中是没法直接对数组进行响应式的。所以在源码中重写了数组的一些方法
• 在Observer的构建方法里面就进行了判断，如果是数组的话且没有proto属性的话，进入到copyAument,将从重写的方法添加给他，之后再进入到defineReactive中，get方法里面给个dependArray，数组会进入这个方法，会将数组depend进去，从而形成响应式
  • 但是根据索引修改或者长度修改是无法检测到的

18、Vue是数据改变后页面也会重新改变?this.a = 1; this.a = 2; 他是怎么实现异步更新优化整个渲染过程的？

• 首先vue是异步渲染执行，会等所有的要改的dom全部进入到队列中才会进行渲染。
  • 为什么要采用异步方式？
    • 1. 如果是频繁修改每次都渲染，则会导致页面重复闪烁多次，不友好
    • 2. 多次渲染，中间多次都是无效的渲染，造成性能浪费
    • 3. 浏览器上，会造成多次的重绘重排，多次会导致页面卡顿直至卡死
• vue 会将多次修改的值暂存在一个队列[Watcher构造函数里面调用一个queueWatcher，会将所有监听到的东西全部放在队列里]中，之后会调用nextTick方法，这个方法就是我们平时在开发中可以使用的那个方法，用于异步调用。
  • nextTick调用原理：进入该方法后会去执行一个回调(flushSchedulerQueue),然后根据各种环境去进行执行异步任务。Promise存在取由Promise.then，不存在Promise则取MutationObserver，MutationObserver不存在setImmediate，setImmediate不存在最后取setTimeout来实现

19、render函数封装有什么特别的，或者用到比较巧妙的东西吗？

• （解释是什么问题？）
  • render作用：它会return一个虚拟dom，return什么就渲染相应的实体Dom
    • render: (h,context)=>{return h(‘el’,{‘css’},vnodeArr)}
    • h是一个createElement函数，用于创建节点信息，其内有三个参数 h(‘el’,‘css’,vnodeArr)
      • el表示当前节点的标签，比如可以是div、span等；
      • css是当前节点标签的css样式；
      • vodeArr是当前节点标签中的子标签
    • render函数需要返回一个h函数创建的Node节点，接收到这个返回信息的函数是vue实例生命周期钩子函数中的beforeMount函数，在接收到信息之后将其渲染

20、浏览器缓存的方式有哪些？

-（解释是什么问题？）

• 强缓存：存在计算机本身的。不会向服务器发送请求,直接从缓存中读取资源

强缓存---cache-Control

  

• 协商缓存：由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；生效则返回304，继续使用缓存

  • 强缓存优先于协商缓存，强缓存生效则使用强缓存，若强缓存失败，则进行协商缓存

  • Last-Modified 和If-Modified-Since

    • 浏览器在第一次访问资源时，服务器返回资源的同时，在response header中添加 Last-Modified的header，值是这个资源在服务器上的最后修改时间，

  • ETag 和 If-None-Modified

    • Etag是服务器响应请求时，返回当前资源文件的一个唯一标识(由服务器生成)，只要资源有变化，Etag就会重新生成**。


• 缓存机制：强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)，协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，返回200，重新返回资源和缓存标识，再存入浏览器缓存中；生效则返回304，继续使用缓存。

• 两种强缓存机制对比 Expires VS Cache-Control

  • 差别不大，区别就是 Expires 是 HTTP1.0 的产物，而 Cache-Control 是 HTTP1.1 的产物
  • 优先级上，两者同时存在的话，Cache-Control 优先级高于 Expires ,Expires 更像是一种备选方案，在某些不支持 Cache-Control 的环境中发挥作用
  • 二者共同的弊端 就是这种强缓存的机制仅仅关心缓存是否超出或者超过某个过期时间，并不关心服务器端的资源是否已经更新，所以单纯使用这两种缓存策略会导致客户端拿到的资源不是最新的

• 两种协商缓存机制对比 Last-Modified/If-Modified-Since VS ETag/If-None-Match

  • 精度上，ETag 要明显优于前者，Last-Modified/If-Modified-Since 策略的时间单位为秒，这就意味着在秒级的请求上，做不到真正的及时更新，但是 ETag 每次请求都会对其进行改变从而确保精度，并且在使用负载均衡的服务器上，各个服务器生成的 Last-Modified 也有可能不相同
  • 性能上，ETag 要逊于 Last-Modified/If-Modified-Since 策略，毕竟 Last-Modified/If-Modified-Since 策略只是记录时间，而 ETag 需要进行一步hash运算
  • 优先级上，服务器会优先考虑 ETag

• 用户行为对缓存策略的影响

  并不是所有的操作都会启用正常的缓存机制，在某些用户行为下，缓存机制是可以正常跳过的

  1. 地址栏访问，链接跳转是正常用户行为，将会触发浏览器缓存机制
  2. F5刷新，浏览器会设置max-age=0，跳过强缓存判断，会进行协商缓存判断
  3. ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源

• (解释这个技术的应用点、应用场景在哪里。）

  • 缓存的意义在于：减少http请求，更多的利用好本地的资源，给用户更好的体验，减少服务器压力
  • 主要作用：性能优化
    • 方法： hash:
      • Html: 使用协商缓存
      • css js 图片 使用强缓存 + 文件名加上hash

END

见下一篇：review3