在单页应用时代重新定义“页面加载”

网站不再是网站。更准确地说，一个网站不再是一个“网站”，一个静态的位置。相反，建立更多沉浸式数字体验的种族正在制作更多动态和交互的网站，内容和逻辑实时更新。网站现在经常被称为“Web应用程序”，无论它们是包括电子商务购物车，媒体/内容库，软件门户或其他功能。

这种发展让开发者能够为用户创造更吸引人的体验，但是一些关于我们如何衡量网站性能的基本思考却没有跟上这些变化。例如，虽然页面加载时间仍然是衡量web应用的关键指标，但这个术语的定义不再完全符合web应用的设计和使用方式。在向“单页应用程序”转变时尤其如此，比如with反应或角．结果可以显着过度或减轻您的页面加载时间，或者完全错过某些页面加载。这可以歪斜开发，商业，营销和IT利益相关者所有主要的指标都符合对其网站的重要决策。

查看页面加载的定义

所以,如何应该我们认为这个页面加载的新世界?

2010年，当Chrome、Firefox和Internet Explorer开始实施W3C时，web性能社区向前迈进了一大步规范这将成为导航计时API标准。增加页面加载计时的可见性是一个公认的需求，虽然可以手动构建到一个网站的计时工具，这个新的浏览器API提供了一种较少干扰的标准方式来从web浏览器本身捕获这些信息。导航定时规范继续被积极地使用更新，扩大支持和改进时间粒度。

该API描述了在页面加载期间发生的一系列里程碑，最终以window.load事件。当。。。的时候window.load事件触发，当文档中的所有对象都在DOM中，并在DOM中的所有对象以及所有图像，脚本，样式表和子帧都有完成了Loadi.ng．对于静态网站，当触发窗口载荷事件时，该页面完全加载到浏览器窗口中，完全呈现并准备使用。

传统网站的页面加载过程

一个动态内容的新世界

然而，现代web应用程序的设计和架构非常不同。为了创建丰富的用户体验，它们大量利用AJAX调用和JavaScript执行来操作页面，并更改内容、视图和用户体验window.load事件。

我们可以在用例中看到这一点：

• 动态内容加载:根据用户消费动态地提取定制内容

例子:基于用户浏览模式定制新闻/视频内容，针对购物车定制产品推荐，定制用户帐户信息

• 懒惰的装载：只有在用户将内容滚动到窗口视图后才下载内容，以通过减少所涉及的内容数量来加快初始页面加载

例子:浏览照片专辑Carousel，仪表板或内容小部件

• 第三方小部件:从外部服务中拉动组件和内容

例子:来自Twitter或Facebook的社交媒体小工具，反馈小工具，讨论小工具，显示广告

• 实时的内容:连续轮询后端系统以获取刷新的数据

例子:实时追踪游戏，选举结果，实时博客，事件直播

• 预装的内容:在幕后不可见地加载内容，以获得更无缝的用户体验

例子:无限滚动的新闻网站会在用户滚动第一个视频内容时自动加载下一篇文章，自动播放视频内容

这些更复杂的体验增加了web应用程序的架构复杂性window.load事件不再捕获用户体验的完整表示。

用于现代Web应用程序的页面加载过程

单页应用程序的动态视图

单页应用(spa)——通常使用React、Angular、Ember、Backbone等框架或库构建——将这些围绕动态用户体验的理念带到下一个层次。不仅仅是动态内容或小部件，spa还作为路由更改的一部分为用户呈现全新的视图。在点击一个链接之后，用户可能会认为他们已经导航到另一个页面，但他们实际上可能只是动态地将内容重新呈现在客户端，而没有进行完整的页面刷新。

追踪这些路线更改的可见性变得重要，因为用户将其担任为新的“软”页面负载。然而window.loadEvent无法跟踪这些路由更改，并且将看到这些后续的用户交互和路由更改活动仍然是原始页面加载的一部分。

值得注意的是，虽然许多开发人员正在使用这些JavaScript框架来实现SPA，但是其他开发人员将SPA更像是设计哲学，以便在没有新页面加载的情况下动态生成新视图的方法。他们可能会选择避免依赖框架 - 以及框架预制脚手架的学习曲线/锁定 - 并基于SPA原则构建定制的东西。然而，最重要的是能够描绘启动并停止到这些路线的变化，以便您可以衡量用户实际遇到的内容。

理解页面加载的“真正”客户体验

动态内容与spa之间的差距window.load事件和用户何时可以实际使用页面变得越来越重要。一个页面触发onload事件可能只需要200毫秒，但是当所有AJAX调用都完成并且DOM已经确定时，在页面完全呈现和可用之前可能需要1000毫秒(甚至两倍于此)。这个稍后的时间更准确地表示了客户体验。

这只是一个简化的例子。许多现代Web体验立即使用这些设计用例中的几个，这可以进一步缓慢页面的“真实”客户体验。对于关心他们的数字客户体验的公司来说，真实的观点对页面负载的客户体验可能是一种启发体验，揭示用户开始与Web内容开始与Web内容真正需要的时间，更不用说这个影响可以在折扣，参与和数字收入等关键指标。

在动态网页的新世界中测量页面负载

这window.load事件仍然是一个重要的公制，但它越来越多地讲述了客户的页面负载体验的部分故事。让我们来看看新的遗物浏览器的SPA监控，看看Angular应用程序的初始页面加载事件后会发生什么：

对于应用程序中的给定页面加载，我们可以看到后端时间，前端时间以及发生窗口时的故障。这更完整的信息比window.load事件本身，就会错过之后发生的所有AJAX调用和JavaScript执行，并且会大大低估用户等待使用页面的时间。在上面的例子中，一些实例似乎花了3秒来加载基于window.load事件，当它在前端时间近10秒时，将页面待完成的前端时间。

这种对页面加载的更深入的可见性是有价值的，尽管在单页应用程序中，路由更改可能比页面加载更占用户体验的一部分。在这个相同的Angular应用中，我们可以看到路由变化带来的吞吐量实际上比页面加载带来的流量要大。

我们可以查看页面加载时间的方式，我们还可以使用新的遗物浏览器的框架 - 不可止液SPA仪器进入路由更改定时。无论使用哪种框架，甚至基于SPA原则定制的东西，我们也可以在这个前端性能中获得这种深度的可见性。

一旦您了解了客户在页面加载和路由更改过程中实际经历的情况，下一个问题就是如何改进它。

看看克莱·史密斯的帖子构建网络友好的单页应用程序对于一些最佳实践;他的建议适用于任何现代动态前端应用程序，特别是单页应用程序。在接下来的几周，我们将深入研究如何度量页面加载和路由更改，以更准确地反映您的客户体验，包括AJAX调用的框架无关捕获和给定用户交互的JavaScript执行时间。请继续关注!

资源：

• 新的Relic浏览器文档-不同于传统的页面加载时间