在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
前端页面与用户直接面对面沟通,为了提升用户对前端页面的使用体验,前端工程师往往要对页面的性能进行优化。那一般前端工程师都需要优化哪些页面的性能指标呢?
一、Apdex指数
作为与用户直接沟通的入口,我们在考虑前端页面性能指标的时候首先要考虑用户体验。而Apdex是对用户体验满意度的量化值。
在完成一个任务之前,用户需要等待它完成才能进行下一个任务,而这个等待时间的长短直接用户的满意程度,我们成这个时间长短为应用的“响应性”再次Apdex定义了三个满意度区间:
满意: 这样的响应时间让用户感到很愉快,例如少于3秒钟。
容忍: 慢了一点,但还可以接受,继续这一应用过程,例如3~12秒。
失望: 太慢了,受不了了,用户决定放弃这个应用,例如超过12秒。
然后通过甲酸公司得到一个评分,从而为管理、研发、运维人员提供一种应用性能量化值来评估用户满意度的方法。可行工具:New Relic、OneAPM Browser Insight。
二、页面响应时间
对于用户而言,最关心的就是页面相应时间,打开一个页面所用的时间。很多前端性能工具对页面响应时间这个指数只是简单的在本地模拟下,也就是所谓的「拨测」;或者只是简单的通过 window.performance。
从技术的角度讲,一个页面的打开时间也是要划分为各个部分的,例如:首屏打开时间、白屏时间、dom文档打开时间、资源加载完成时间等;也要重视资源加载耗时详情,是哪些脚本或者 css 拖慢了页面的加载这些都要一目了然。只有这样,一旦页面响应时间过长,相关人员才能有针对性的去进行维护。可行工具:New Relic 、OneAPM Browser Insight 、AppDynamics 、Ruxit 。
三、DNS、TCP耗时
浏览器和 WEB 服务器连接 TCP/IP 的消耗时间以及域名解析时间也是网站优化需要关注指标。国内的网络环境极其复杂,所以导致经常有 DNS,CDN 不给力的情况,TCP 的连接也经常会不稳定。之前国内外有些工具可以通过模拟拨测的方式来计算 DNS 耗时等数据,从用户真实体验的角度来收集这类耗时则显得尤为必要,而现在能做好这一点的工具确实不多,给大家推荐几个。可行工具:OneAPM Browser Insight 、AppDynamics、Ruxit。
以上就是三个主要的前端页面性能指标,对于前端人员以及测试人员都要非常关注的内容。现在互联网信息越来越多,相似的竞品也琳琅满目,如何在同样或者相似的产品中脱颖而出,就是前端工程师重点考量的内容了。所以在开发工作中尽量提升这些性能,为用户提供更好的体验才是最核心的。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
web前端网页开发离不开的三要素
Web前端是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位。现在web前端开发一定会用到的三门技术:HTML、CSS、JavaScript。无论是多么炫酷的页面都是这三门技术的组合而形成的。
6997
2019-06-24 18:07:06
Web前端开发在线培训班靠不靠谱?学了能就业吗?
目前,前端开发工程师在人才市场上可谓是格外的紧缺,不少小伙伴也看到了其中的就业机遇。想要学习前端开发,自学太慢效率太低,那么Web前端开发在线培训班靠不靠谱?学了能就业吗?针对大家的担忧,小编就来仔细分析一下博学谷培训班的课程。
6999
2019-12-16 19:11:32
微信小程序前端怎么做?新手开发入门教程
在大家的实际生活中,微信小程序随处可见。想必大家都多多少少学习过微信小程序,或者尝试开发微信小程序,那么微信小程序前端怎么做呢?本文是一个新手开发入门教程,希望给前端的小伙伴开发小程序,提供一点帮助。
8396
2019-09-05 17:48:42
JavaScript主要作用是什么?
学习编程的同学对JavaScript并不陌生,JavaScript是前端技术中非常重要的内容。例如页面的效果切换、动画效果、页面游戏等等。其实我们功通过HTML和CSS技术已经可以搭建各种样式的页面,但是向你要实现页面真正的动态效果,还需要使用JavaScript技术。下面小编就为大家详细介绍一下JavaScript主要作用是什么。
12551
2019-10-28 18:46:37
JavaScript基础入门学什么?JS基础知识
JavaScript基础入门学什么?课程主要学计算机基础、浏览器执行JS过程、JS变量、数据类型、运算符、流程控制语句(if else 、三元表达式、switch)、循环(for、while、do while)、数组、冒泡排序、函数、作用域、预解析、对象、内置对象、简单类型和复杂类型等。同时还包含了大量的案例,课程采用案例驱动式教学,讲解清晰、透彻,适合从零开始学习JS的人群。
3816
2020-07-15 15:42:39