javascript / 前端 / 后端 / 缓存 · 2020-11-13 0

首屏加载优化-缓存,协议,资源,代码优化

浏览器 cache-control的各种属性的关系:

  • expires为http1.0协议定义,cache-Control为http1.1协议所以cacheControl的优先级高于expires
  • no-cache:并不是不需要缓存而是关闭强缓存使用协议(对比)缓存
  • no-store:不需要缓存
  • 浏览器缓存地址是dishCache memory-cache
  • 各缓存配置的之间的关系请参考

http2的协议

  • 多路复用:与http1相比较tcp握手数据传输后即终端,而同服务器的http2协议并不会立即中断而会给其他请求延用tcp的链接
  • 在五层协议中添加的请求头,相对于http1中,请求头大多数数据(cookie,浏览器信息..)基本是相同的
    • http1中所有的请求都夹带相同的请求头
    • http2中因为请求头基本相同,为了避免每次请求重复提交相同请求头内容,建立了id为key的映射表(客户端与服务器各一张相同的)此后只需要夹带ID即可

http2在nginx中开启

{
   listen 443 ssl http2;//所以必须是https的协议才能开启
}

资源:静态资源

  • 静态资源cdn
  • 雪碧图
  • 使用其他域名
    • 对于浏览器来说,不同域名分配更多不同异步请求(一般一个域名4-5个异步请求)
  • 按需加载
  • 图片懒加载
  • gzip压缩

代码优化

渲染相关:

  • 首屏不一定全部渲染
  • js的defer与async使用

js操作相关

  • 使用闭包来缓存一些值
    • 可能引起内存泄露,请注意xxx=null来触发回收(回收机制,引用标记&计数清除(Com对象))
  • 使用事件委托
  • 擦入dom时使用documentFragment
    • 原理:先在内存中操作在渲染擦入
  • 事件监听程序不一定在页面卸载时清空,请在unload时remove

如果你需要ssr–恭喜你你开启了服务器缓存的大门

  • lru缓存
    • api
    • 客户端返回页面
    • 期待后续详解