当前位置： 首页>编程语言>正文

前端性能优化思路

编程语言2024-10-15 19:17:21

资源加载方面

  • 资源缓存
  • CDN
  • 图片懒加载、雪碧图
  • svg、字体图标
  • GZIP
  • 去除注释、调试代码
  • 减小文件体积：DLL Plugin、externals、tree-shaking等

解析渲染方面

  • CSS加载位置(头部)
  • JS加载位置(尾部)
  • script的defer、async、预加载
  • CSS选择器层级
  • CSS动画、GPU加速
  • 减少重排重绘

事件交互方面

  • 事件委托：target、currentTarget
  • 防抖
  • 节流

基于框架优化(Vue)

  • 运行时优化
    • 引入生产环境的Vue文件
    • 使用单文件组件(预编译)
    • 用Object.freeze()冻结不需要响应式的数据
    • 扁平化 Store 数据结构
    • 路由懒加载
    • 虚拟滚动列表：vue-virtual-scroll-list 和 vue-virtual-scroller、DOM 回收、墓碑元素和滚动锚定
  • 加载时优化
    • 服务端渲染（SSR）
    • 预渲染（Prerender）
    • 组件懒加载：性能优化之组件懒加载: Vue Lazy Component 介绍
    • UI库按需加载：babel-plugin-component(ElementUI)、babel-plugin-import(AntDesignVue)

前端性能监控

  • Performance
    • 属性 timing 
   {
       // 同一个浏览器上一个页面卸载(unload)结束时的时间戳。如果没有上一个页面，这个值会和fetchStart相同。
   navigationStart: 1543806782096,

   // 上一个页面unload事件抛出时的时间戳。如果没有上一个页面，这个值会返回0。
   unloadEventStart: 1543806782523,

   // 和 unloadEventStart 相对应，unload事件处理完成时的时间戳。如果没有上一个页面,这个值会返回0。
   unloadEventEnd: 1543806782523,

   // 第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。
   redirectStart: 0,

   // 最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。
   // 如果没有重定向，或者重定向中的一个不同源，这个值会返回0. 
   redirectEnd: 0,

   // 浏览器准备好使用HTTP请求来获取(fetch)文档的时间戳。这个时间点会在检查任何应用缓存之前。
   fetchStart: 1543806782096,

   // DNS 域名查询开始的UNIX时间戳。
       //如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和fetchStart一致。
   domainLookupStart: 1543806782096,

   // DNS 域名查询完成的时间.
   //如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
   domainLookupEnd: 1543806782096,

   // HTTP（TCP） 域名查询结束的时间戳。
       //如果使用了持续连接(persistent connection)，或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致。
   connectStart: 1543806782099,

   // HTTP（TCP） 返回浏览器与服务器之间的连接建立时的时间戳。
       // 如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
   connectEnd: 1543806782227,

   // HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网页不要求安全连接，则返回0。
   secureConnectionStart: 1543806782162,

   // 返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳。
   requestStart: 1543806782241,

   // 返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。
       //如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。
   responseStart: 1543806782516,

   // 返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时
       //（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳。
   responseEnd: 1543806782537,

   // 当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的 readystatechange事件触发时）的时间戳。
   domLoading: 1543806782573,

   // 当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的时间戳。
   domInteractive: 1543806783203,

   // 当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的时间戳。
   domContentLoadedEventStart: 1543806783203,

   // 当所有需要立即执行的脚本已经被执行（不论执行顺序）时的时间戳。
   domContentLoadedEventEnd: 1543806783216,

   // 当前文档解析完成，即Document.readyState 变为 'complete'且相对应的readystatechange 被触发时的时间戳
   domComplete: 1543806783796,

   // load事件被发送时的时间戳。如果这个事件还未被发送，它的值将会是0。
   loadEventStart: 1543806783796,

   // 当load事件结束，即加载事件完成时的时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0.
   loadEventEnd: 1543806783802
 }

通过以上数据，我们可以得到几个有用的时间：

{
// 重定向耗时
redirect: timing.redirectEnd - timing.redirectStart,
// DOM 渲染耗时
dom: timing.domComplete - timing.domLoading,
// 页面加载耗时
load: timing.loadEventEnd - timing.navigationStart,
// 页面卸载耗时
unload: timing.unloadEventEnd - timing.unloadEventStart,
// 请求耗时
request: timing.responseEnd - timing.requestStart,
// 获取性能信息时当前时间
time: new Date().getTime()
}
//白屏时间
let whiteScreen = new Date() - performance.timing.navigationStart
  • 方法 getEntriesByType('resource')：获取相关资源（js、css、img...）的加载时间，返回页面当前所加载的所有资源
const getResources = () => {
    if (!window.performance) return
    const data = window.performance.getEntriesByType('resource')
    const resource = {
        xmlhttprequest: [],
        css: [],
        other: [],
        script: [],
        img: [],
        link: [],
        fetch: [],
        // 获取资源信息时当前时间
        time: new Date().getTime(),
    }

    data.forEach(item => {
        const arry = resource[item.initiatorType]
        arry && arry.push({
            // 资源的名称
            name: item.name,
            // 资源加载耗时
            duration: item.duration.toFixed(2),
            // 资源大小
            size: item.transferSize,
            // 资源所用协议
            protocol: item.nextHopProtocol,
        })
    })

    return resource
}
  • Vue SPA性能监控
router.beforeEach((to, from, next) => {
    store.commit('setPageLoadedStartTime', new Date())
})
mounted() {
    this.$nextTick(() => {
        this.$store.commit('setPageLoadedTime', new Date() - this.$store.state.pageLoadedStartTime)
    })
}
  • 前端监控工具：Sentry

https://www.xamrdz.com/lan/5tf1993897.html

相关文章：