美文网首页
前端优化方案--缓存

前端优化方案--缓存

作者: Sharise_Mo佩珊 | 来源:发表于2020-09-16 18:31 被阅读0次

    一个页面的速度由什么来决定?

    • 资源传输时间(TCP连接时间 + 响应时间)
    • DOM渲染时间
    • 查看方法: window.performance 可以查看所有的时间,内存使用情况
    可以从以下三个方面优化速度:
    1. 优化服务器连接时间,响应时间
      • 查看服务器连接时间,可以使用window.performance 来查看
    2. 减少传输的内容体积和切片
      • 传输内容压缩,使用分页 / 懒加载
    3. 缓存: 将内容缓存在起来,减少请求
      • cookie
      • 全局变量存储
      • sessionStorage, localStorage

    几种缓存的比较

    特性 cookie sessionStorage localStorage
    数据生命周期 一般由服务器生成,可以设置失效时间。若在浏览器端生成cookie,默认是关闭浏览器就失效 仅在当前会话中有效,关闭页面/关闭浏览器后被清除 除非手动清除浏览器缓存,否则永久保存
    存放数据大小 很小,只有4K左右,一般用作存储登录状态 一般为5M 一般为5M
    与服务器端通信 每次都会携带在HTTP请求头中,如果使用cookie保存过多数据会带来性能问题 仅在客户端(浏览器)中保存,不参与和服务器的通信 仅在客户端(浏览器)中保存,不参与和服务器的通信

    https://juejin.im/post/6844904112450994189

    image.png

    阶段性指标

    字段 描述 计算方式 备注
    unload 前一个页面卸载耗时 unloadEventEnd - unloadEventStart 前一个页面卸载时可能监听了 unload 做些数据收集,会影响页面跳转
    redirect 重定向耗时 redirectEnd - redirectStart 过多重定向影响性能
    appCache 缓存耗时 domainLookupStart - fetchStart
    dns DNS 解析耗时 domainLookupEnd - domainLookupStart
    tcp TCP 连接耗时 connectEnd - connectStart
    ssl SSL 安全连接耗时 connectEnd - secureConnectionStart 只在 HTTPS 下有效
    ttfb Time to First Byte(TTFB),网络请求耗时 responseStart - requestStart
    response 数据传输耗时 responseEnd - responseStart
    dom 可交互 DOM 解析耗时 domInteractive - responseEnd Interactive content
    dom2 剩余 DOM 解析耗时 domContentLoadedEventStart - domInteractive DOMContentLoaded 所有DOM元素都加载完毕(除了 async script)
    DCL DOMContentLoaded 事件耗时 domContentLoadedEventEnd - domContentLoadedEventStart document.addEventListener('DOMContentLoaded', cb)
    resources 资源加载耗时 loadEventStart - domContentLoadedEventEnd 完整DOM(DOMContentLoaded)到资源加载完毕(window.onLoad)时间
    onLoad onLoad事件耗时 loadEventEnd - loadEventStart

    相关文章

      网友评论

          本文标题:前端优化方案--缓存

          本文链接:https://www.haomeiwen.com/subject/zqlcyktx.html