自然堂,阴阳路,波士顿大学-塔娜奶油-全新配方,蛋糕、烘焙制作技艺分享

频道:趣闻中心 日期: 浏览:189

前端开发完之后,事务说太卡,你优化吧。我翻开一个离任的搭档的代码,复用到是用的挺好的,不过把一个城市级联里边下载数据的环节封装到组件中,页面中有8个当地都用到了,翻开网络恳求,真的就下载了8次2M的城市数据。幸亏咱们网络状况还不错,也就每次页面翻开前卡半分钟罢了,呵呵了。

在前后端别离的大环境下,前端优化也越来越重要。不管从视觉、功能、页面逻辑上进行优化,都能够比较直观的提高用户体会。当然,优化的条件是知道我哪里慢了,performance API便是进行这样的监控的。

功能监控

直接在操控打印performance就能够得到一切功能监测的信息了,里边包括几个部分。

  • memory(Chrome中内存)
jsHeapSizeLimit: 内存巨细约束
totalJSHeapSize: 可运用内存
usedJSHeapSize: 已运用内存
  • navigation(上下文网页导航)
  • onresourcetimingbufferfull(资源时刻功能缓冲区事情钩子)
  • timeOrigin(基准时刻)
  • timing(节点时刻)


经过拆解核算各个节点时刻的距离便是每个环节的运用状况了。

下面放一个页面函数显现当时页面的各阶段加载的时刻显现。

function performanceTest() {
let timing = performance.timing,
readyStart = timing.fetchStart - timing.navigationStart,
redirectTime = timing.redirectEnd - timing.redirectStart,
appcacheTime = timing.domainLookupStart - timing.fetchStart,
unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart,
lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart,
connectTime = timing.connectEnd - timing.connectStart,
whiteScreenTime = timing.responseStart - timing.navigationStart,
requestTime = timing.responseEnd - timing.requestStart,
initDomTreeTime = timing.domInteractive - timing.responseEnd,
domReadyTime = timing.domComplete - timing.domInteractive,
loadEventTime = timing.loadEventEnd - timing.loadEventStart,
loadTime = timing.loadEventEnd - timing.navigationStart;
console.log('预备新页面时刻耗时: ' + readyStart);
console.log('redirect 重定向耗时: ' + redirectTime);
console.log('Appcache 耗时: ' + appcacheTime);
console.log('unload 前文档耗时: ' + unloadEventTime);
console.log('DNS 查询耗时: ' + lookupDomainTime);
console.log('TCP衔接耗时: ' + connectTime);
console.log('白屏时刻: ' + whiteScreenTime);
console.log('request恳求耗时: ' + requestTime);
console.log('恳求完毕至DOM加载: ' + initDomTreeTime);
console.log('解析DOM树耗时: ' + domReadyTime);
console.log('load事情耗时: ' + loadEventTime);
console.log('加载时刻耗时: ' + loadTime);
}


performance 办法

  1. clearMarks() 整理打点符号
  2. clearMeasures() 整理连线符号
  3. clearResourceTimings() 重置缓冲区域巨细
  4. getEntries() 获取一切资源分节点加载时刻
  5. getEntriesByName() 经过Name获取一切资源分节点加载时刻
  6. getEntriesByType() 经过Type获取一切资源分节点加载时刻
  7. mark() 添加打点符号
  8. measure() 添加打点连线符号
  9. now() 从获取基准时刻到当时时刻的距离,准确到微秒百万分之一秒,呃
  10. setResourceTimingBufferSize() 设置缓冲区域巨细


数据埋点

埋点中除了事务相关之外的功能埋点,能够自行修改,也能够经过上面的相关API进行愈加准确的时刻核算。


chrome开发这东西的Performance面板

本地开发调试的话,chrome中供给了关于Performance状况愈加具体的报表数据,准确到每个资源,每个时刻点页面的烘托作用,后续就能够针对环节进行专项优化(像我这种密布惊骇的人,看的还有点慌呢)


运用上的功能面板的时分,假如你的chrome上安装了许多插件的话,主张翻开无痕形式进行调试。


文末

关于performanceAPI是建立在chrome浏览器的基础上运用的,其他浏览器兼容状况暂时没有去深究。

前端优化,从网络开端恳求,到最后烘托完毕,中间方方面面的环节,都能够进行许多优化,前端优化yahoo军规依然是优化方向,每一个环节都能够写出来许多文章。


热门
最新
推荐
标签