页面响应时间的2-5-8原则及关键性能指标与优化思路

hwyzw

    关于页面加载速度，业界普遍遵循一条广为人知的“2-5-8秒规则”。用户在浏览一个网页时，其加载时间若超过2秒，可能会感到不耐烦；若在5秒内完成，用户体验尚可；而若加载时间达到8秒，则很可能会引起用户的极大不满。

    在2秒内得到响应时，会感觉系统响应很快；

    在2-5秒之间得到响应时，会感觉系统的响应速度还可以；

    在5至8秒的响应时间内，人们可能会觉得系统运行速度较为迟缓，然而这样的速度尚在可接受范围内。

    一旦超过8秒钟系统无任何反馈，用户便会觉得这个系统极其糟糕，随后可能会选择离开该网站，亦或是尝试进行第二次操作。

    若想吸引并留住用户，一个网站的速度和稳定性显得尤为关键。

    在各种类型的前端监控工具中，用户能够获取到页面众多性能数据。本文将详细阐述几个至关重要的性能指标，并针对这些指标提供相应的优化策略。

    开始渲染时间

    该时刻标志着浏览器着手进行页面渲染，在此之前，整个页面一直保持空白状态，因此这一阶段亦被称作白屏阶段。

    该时间点可以通过以下公式进行计算：起始时间 = 首字节到达时间（TTFB）加上文档加载时间（TTDD）以及头部信息传输时间（TTHE）。TTFB指的是浏览器从发送请求到服务器开始返回第一个字节所经历的时间，TTDD则是指服务器加载HTML文档所需的时间，而TTHE则是指文档头部解析完成所需的时间。在功能更为强大的浏览器中，我们可以通过特定的属性来获取这些时间点。用户可以通过相应的方式获取，对于IE9及更高版本的浏览器，可以直接通过特定途径获取；而在不支持这些浏览器的环境中，则可以依据上述公式，在头部资源加载完毕的时刻，通过模拟获取一个近似的值。一般来说，页面开始渲染的速度越快，用户就能更迅速地看到内容。

    对于该时间点的优化有：

    1)优化服务器响应时间，服务器端尽早输出

    2)减少html文件大小

    3)减少头部资源,脚本尽量放在body中

    DOM Ready

    该时刻标志着DOM解析作业的完成，而资源加载尚未全部就绪；此时，用户与网页的互动功能已开放。这一现象可通过以下公式来表述：Dom Ready 等于 TTSR（启动时间）加上 TTDC（DOM完成时间）再加上 TTST（特定时间）。TTSR之前已有阐述，TTDC指的是构建DOM树所需的时间长度。TTST则代表在BODY标签内，所有静态脚本的加载与执行所占用的时间。在功能更为强大的浏览器中，这一过程通常会有相应的事件与之对应。

    您可以查阅W3C的HTML5规范以获取详细信息。通过MDN文档，我们可以了解到，这一事件主要涉及DOM文档的加载与解析过程，表面上看似乎并不复杂。然而，该事件的触发与CSS和紧密相连，为此，人们提出了“关键呈现路径”这一术语来进行描述。

    在不兼容事件处理的浏览器中，我们可以通过模仿操作来获得接近的数值，其中主要的模仿手段包括：

    1）低版本内核浏览器可以通过轮询.来实现

    2）ie中可通过不断调用的方法，直到其可用来实现

   

    实现细节可借鉴业界主流框架的做法。当DOM完全加载完毕，用户便能够与网页展开互动，故此阶段越早达到越好。针对这一时间节点的优化措施包括：

    1）减少dom结构的复杂度，节点尽可能少，嵌套不要太深

    2）优化关键呈现路径

    首屏时间

    该时刻记录了用户浏览首屏页面的具体时间，这一时刻至关重要，却往往难以准确捕捉，通常我们只能通过模拟手段来获得一个相对接近的时间。常见的模拟方法包括：

    持续抓取屏幕画面，一旦画面内容不再发生变动，即可认定达到首屏加载时间。可借鉴Speed Index算法进行评估。

    首屏加载速度通常受图片加载影响显著，一旦页面完全加载，需检查图片是否位于首屏范围内，并识别出加载最慢的那张图片，以此作为首屏加载时间的参考。同时，还需关注其他相关细节，具体内容可参考《7天打造前端性能监控系统》。

    针对该时间点的优化有：

    首屏内容展示应减少对代码的依赖，而应将代码尽量放置于页面加载后期执行或加载。

    2）首屏外的图片延迟加载

    3）首屏结构尽量简单，首屏外的css可延迟加载

    该时刻是事件引发的节点，意味着原始文档及所有引用资料均已成功加载完毕，此时用户最直观的体验便是浏览器标签页上的状态标志随之消失。

    该时间点的优化方式有：

    1）减少资源的请求数和文件大小

    2）将非初始化脚本放到之后执行

    3）无需同步的脚本异步加载

    为了提升整个网站的运行效率，在制作页面时，我们可以考虑实施预加载策略，将其他页面所需使用的资源提前加载至内存中。

    阅读完这篇文章，你可能已经掌握了前端页面性能指标分析的能力。在深入前端领域的学习过程中，除了自学相关书籍，还可以通过和经验丰富的前端工程师进行交流，借鉴他们的经验，来获取更高效的学习途径和快速提升自己的方法。

    10月30日夜晚，我们有幸邀请到了网易的高级前端技术专家蔡剑飞，他将为各位带来一场关于《前端分层之数据管理》的精彩直播讲座。对于有志于成为前端开发工程师的朋友们，或者那些正在前端领域不断进步、挑战自我的你，这无疑是一次难得的学习良机。

   

    关于这场直播，你需要了解…

    | 分享人是谁？

    本次直播的主讲嘉宾为网易公司的高级前端技术专家蔡剑飞。蔡剑飞先生在网易从事前端开发工作已满十年，目前担任网易杭州研究院前端框架工具及流程规范工程化方向的技术负责人。

    | 我能学到什么？

    这场分享主要分为两个部分。

    第一部分为技术专题，主要对前端分层的数据管理进行一些讲解；

    第二部分将着重探讨个人在学习过程中的成长，并教授如何通过解决遇到的具体问题来增强个人的综合能力。

    | 收费吗？

    不收费：） 本次直播为免费分享

    | 如何参与直播？

    扫描这个QQ群二维码，赶快加入我们的直播交流群吧！直播开始前，我们的助教MM会发布直播链接，还会用小皮鞭来催促大家准时听课哦~

    如果扫描跳转失败，可以直接添加群号：~

    以下是一条诚意满满的硬广

    网易云课堂的《前端开发工程师》微专业，由网易资深前端开发工程师团队精心打造。仅需3个月，学员即可全面掌握前端开发工程师所需的核心知识体系。课程内容涵盖网易真实产品案例，旨在系统提升学员的底层知识、技术能力以及专业素养，并亲自指导学员，助力他们顺利成为合格的前端开发工程师。

    10月25日至11月3日期间，《前端开发工程师》微专业推出了课程团购优惠。只需预付1元，在尾款支付时即可抵扣200元。对此次活动感兴趣的同学，请点击“阅读原文”获取更多活动信息。