性能优化篇

性能优化：

1.首先说出性能优化的点

2.在说到ssr的时候以及节流防抖的时候

   SSR为什么能减少白屏事件

   目前前后端的分离的前端项目需要先加载静态资源，再异步获取数据，最后渲染页面，在这个过程中的前两部页面都是没有数据的，影响了首屏的渲染速度，也就影响了用户的体验

    nuxt.js的概念

节流防抖的区别以及手写代码

防抖是任务频繁触发的情况下，只有任务触发的间隔超过指定间隔的时候，任务才会执行，一般用于输入框实时搜索；节流是规定函数在指定的时间间隔内只执行一次，一般用于scroll事件。

面试中经常会问这么一个问题：

从输入url到页面加载完成发生了什么？

性能优化也就是上面的步骤加在一起时间尽可能的短。所以可以有两大方向：

1.少加载文件

2.少执行代码

-------------------

根据上图来看性能优化需要：

1.减少重定向

2.使用缓存，app cache应该指的是Application Cache （应用缓存），指的是离线缓存，Application Cache是最好是做静态的公共资源的缓存，尽量不去缓存业务资源（可参考该链接https://www.jianshu.com/p/189ae5bf02ef）

3.dns prefetch预获取（dns预解析，是提升网站的一个办法）

4.（tcp/ip和http的区别，tcp的三次握手）tcp是会保持数据的完整和有序，udp就是只发数据不管别的，所以tcp在数据包过大的时候会分片发送，这个过程的优化就在于     

         1.文件的体积，各个文件的压缩 图片格式（svg，webp，png，jpg）

          2.减少文件的请求次数

               文件打包，http缓存和数据缓存（按照上面的图这个不应该在dns前面吗，dns前面指的是离线缓存），懒加载（指的是？）

          3.减小用户和服务器的距离

             使用cdn

5.关于http缓存

   为文件指定expires或者cache-control，使内容具有缓存性，配置etag？session local之类的缓存占的是浏览器内存吗

  1.html用不缓存

  2.js长期缓存，前端通过文件名来控制缓存（加时间戳或者版本号或者文件的哈希值（webpack打包工具））

6.首屏ssr渲染（减少白屏事件）

7.少执行代码(节流防抖的代码实现)

  节流 ：固定时间做一次操作（apply，call第一个参数都是绑定this指向，区别在于apply传参数是一个数组，而call是参数列表）

  防抖：比如用户输入校验，停止输入固定一段时间发一次请求（一般350毫秒）

懒加载？

虚拟列表virtual-dom和dom diff了解一下