在线客服
扫描二维码
下载博学谷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。
以上就是三个主要的前端页面性能指标，对于前端人员以及测试人员都要非常关注的内容。现在互联网信息越来越多，相似的竞品也琳琅满目，如何在同样或者相似的产品中脱颖而出，就是前端工程师重点考量的内容了。所以在开发工作中尽量提升这些性能，为用户提供更好的体验才是最核心的。
— 申请免费试学名额 —
在职想转行提升，担心学不会？根据个人情况规划学习路线，闯关式自适应学习模式保证学习效果
讲师一对一辅导，在线答疑解惑，指导就业！
上一篇：
你了解大前端吗？大前端的发展趋势如何？
下一篇：
前端工程师必须了解的大前端跨平台解决方案
相关推荐 更多
JavaScript常用内置对象有哪些？
JavaScript常用内置对象有哪些？一般来说，大家最常用的有浏览器对象模型、文档对象模型和全局JavaScript对象三类。下面小编就来分析一下这三类具体的内置对象及其作用。
8092
2019-08-21 18:31:00
前端学习中的重点难点总结
在互联网技术岗位中，前端一直被定义为入门简单，发展潜力巨大的技术方向。尤其对于新接触编程的同学们而言，非常容易理解并掌握HTML和CSS的基本知识，但是作为一门技术岗位，前端开发依旧具有一定的挑战性。因此我们一定要注意前端学习中的重点难点知识，在学习的过程中尽量掌握其要点，保障在实际工作中减少踩雷的风险。
6894
2020-08-07 10:27:04
Web前端和后端的区别是什么？如何区分？
Web前端和后端的区别：从前端和后端两者工作内容和负责项目是完全不同。后端：入门难深入更难，枯燥乏味，看业务逻辑代码；前端：入门简单先易后难，能看到自己做出来的展示界面，有成就感。
5563
2020-09-17 16:47:02
前端开发语言有哪些？需要掌握什么？
通常前端开发在基础阶段掌握html+css+js+jq；框架语言阶段掌握vue+react+小程序；后端掌握nodejs+mongdb+云开发；UI框架阶段熟悉常见的有elementui+ang系列。
5294
2020-12-28 10:15:32
高效的前端开发工具有哪些？
在互联网中许多开发工具可以让前端开发人员的工作生活变得更加轻松。应用程序的功能越来越丰富，也导致了前端开发的复杂度大幅增加，急需好的开发工具。今天和大家分享一些前端开发常用工具，这些工具真的对于提高工作效率有很大的帮助。
3996
2020-12-31 15:32:33
