2021-02-17 分类: 网站建设
前端开发完之后,业务说太卡,你优化吧。我打开一个离职的同事的代码,复用到是用的挺好的,不过把一个城市级联里面下载数据的环节封装到组件中,页面中有8个地方都用到了,打开网络请求,真的就下载了8次2M的城市数据。幸好我们网络情况还不错,也就每次页面打开前卡半分钟而已,呵呵了。
在前后端分离的大环境下,前端优化也越来越重要。无论从视觉、性能、页面逻辑上进行优化,都可以比较直观的提升用户体验。当然,优化的前提是知道我哪里慢了,performance API就是进行这样的监控的。
jsHeapSizeLimit: 内存大小限制 totalJSHeapSize: 可使用内存 usedJSHeapSize: 已使用内存
通过拆解计算各个节点时间的间隔就是每个环节的使用情况了。
下面放一个页面函数显示当前页面的各阶段加载的时间显示。
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); }
本地开发调试的话,chrome中提供了关于Performance情况更加详细的报表数据,精确到每个资源,每个时间点页面的渲染效果,后续就可以针对环节进行专项优化(像我这种密集恐惧的人,看的还有点慌呢)
使用上的性能面板的时候,如果你的chrome上安装了很多插件的话,建议打开无痕模式进行调试。
关于performanceAPI是建立在chrome浏览器的基础上使用的,其他浏览器兼容情况暂时没有去深究。
前端优化,从网络开始请求,到最后渲染结束,中间方方面面的环节,都可以进行很多优化,前端优化雅虎军规依然是优化方向,每一个环节都可以写出来很多文章。
分享题目:前端性能优化监控之performance API
文章转载:/news8/101458.html
成都网站建设公司_创新互联,为您提供品牌网站设计、品牌网站建设、响应式网站、面包屑导航、网站设计公司、域名注册
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联
猜你还喜欢下面的内容