介绍在AboutPerformance最后提供了一些关注点，但感觉比较散。有没有理论体系作为依据？通过查找资料，找到了两种引导方式：RAILModel和PRPLPattern，以下是个人理解的部分翻译。翻译时，RAILModel原文Lastupdated2019-02-12，PRPLPattern原文Lastupdated:Nov5,2018。来源我的GitHubRAILModelRAIL是一个以用户为中心的性能模型，将用户体验分解为关键操作。RAIL的目标和指南旨在帮助开发人员和设计人员确保每一个动作都有良好的用户体验。通过在设计结构时考虑到性能，RAIL使设计人员和开发人员能够有效地专注于对用户体验影响最大的工作。每个Web应用程序的生命周期都有四个不同的方面，性能以不同的方式适合它们：目标和指南在RAIL的上下文中，目标和指南具有特殊的含义：目标：与用户体验相关的关键性能指标。由于人类的感知相对稳定，这些目标不太可能很快改变。指南：帮助您实现目标的建议。这些可能特定于当前的硬件和网络连接条件，因此可能会随着时间的推移而改变。以用户为中心让用户成为您绩效工作的重点。下表描述了用户如何看待性能延迟的关键指标：延迟用户响应0-16毫秒人们非常擅长跟踪运动，如果动画不稳定，则会对运动感到厌恶。用户感知以每秒60帧呈现的平滑动画过渡。这是每帧16毫秒（包括浏览器将新帧绘制到屏幕上所花费的时间），使应用程序有大约10毫秒的时间来生成一个帧。0-100ms在这个时间窗口内响应用户的动作，他们会觉得得到的结果是立竿见影的。再长一点，行动和反应之间的联系就被打破了。100-300毫秒用户会体验到轻微的可感知延迟。300-1000毫秒在此窗口内，延迟感觉像是连续任务自然进展的一部分。对于网络上的大多数用户来说，加载页面或更改视图代表一项任务。1s超过1000+ms，用户失去了对正在执行的任务的关注。10,000+ms用户感到失望，可能会放弃任务，之后他们可能不会回来。用户对性能延迟的看法不同，具体取决于网络条件和硬件。例如，在高速Wi-Fi连接的功能强大的台式机上，1000毫秒的加载时间是合理的，因此用户习惯于1000毫秒的加载时间。但对于3G连接速度较慢的移动设备来说，5000ms以内的加载体验是一个更现实的目标，因此移动用户通常更有耐心。响应：在50毫秒内处理事件目标在100毫秒内完成由用户输入启动的转换。用户大部分时间都在等待网站响应他们的输入，而不是等待网站加载。50ms以内处理用户输入事件的策略是保证100ms内有可见的响应，否则动作和响应之间的联系就会断开。这适用于大多数输入，例如单击按钮、切换表单控件或启动动画。这不适用于触摸拖动或滚动。虽然这听起来可能违反直觉，但立即响应用户输入并不总是正确的。您可以将这100毫秒窗口用于其他昂贵的工作。但要注意不要阻止用户，并尽可能在后台工作。始终为完成时间超过50毫秒的操作提供反馈。50毫秒还是100毫秒？目标是在100毫秒内响应输入，那么为什么我们只预算50毫秒？这是因为除了输入处理之外，通常还有其他工作在做，而这部分工作占用了一部分时间用于可接受的输入响应。如果应用程序在空闲时间内以建议的50毫秒执行工作，这意味着如果在工作块之一期间发生输入，则排队等待输入的时间可能长达50毫秒。基于此，可以安全地假设实际输入处理只剩下50毫秒。此效果在下图中可见，显示了如何在空闲任务队列中接受输入，从而减少可用处理时间：动画：在10毫秒内生成帧目标在10毫秒或更短的时间内生成动画中的每一帧。从技术上讲，每帧的最大预算是16毫秒（1000毫秒/60帧/秒≈16毫秒），但浏览器需要大约6毫秒来渲染每一帧，因此每帧的指导方针是10毫秒。以视觉流畅为目标。当帧速率发生变化时，用户会注意到。政策在动画这样的高压点，关键是什么都不做，做最少的工作，能不能做。如果可能，使用100毫秒响应预先计算昂贵的工作，这样您就可以最大限度地提高实现60fps的可能性。请参阅渲染性能中的动画优化策略。识别所有类型的动画。动画不仅仅是花哨的UI效果。这些交互都被视为动画：视觉动画，例如进入、退出、补间和加载提示。滚动，包括抛出，就是当用户开始滚动，然后放手，页面继续滚动。通过拖动，动画通常会跟随用户交互，例如平移地图或双指缩放。空闲：最大化空闲时间目标是最大化空闲时间，以增加页面在50毫秒内响应用户输入的可能性。该策略使用空闲时间来完成延迟的工作。例如，对于初始页面加载，加载尽可能少的数据，然后使用空闲时间加载其余部分。在50毫秒或更短的空闲时间内执行工作。时间再长，您就有可能干扰应用程序在50毫秒内响应用户输入的能力。如果用户在空闲时间工作期间与页面交互，则用户交互应始终具有最高优先级并中断空闲时间工作。加载：在5秒内交付内容并进行交互。当页面加载缓慢时，用户的注意力会被转移，用户会认为任务被打断了。加载速度快的网站具有更长的平均会话时间、更低的跳出率和更高的广告可见度。针对目标快速加载性能进行优化与用户用于访问站点的设备和网络功能有关。目前，一个好的目标是在3G连接速度较慢的中端移动设备上，第一个页面加载在5秒或更短时间内交互。请参阅您负担得起吗？：真实世界的Web性能预算。但请注意，这些目标可能会随着时间而改变。对于后续加载，一个好的目标是在2秒内加载页面。但这个目标也可能随着时间而改变。准则测试用户之间常见移动设备和网络连接的加载性能。如果您的企业拥有有关用户使用的设备和网络连接的信息，您可以使用此组合并设置您自己的加载性能目标。否则，使用移动经济的年度数据来选择合适的目标。请记住，虽然您的典型移动用户可能声称其设备处于2G、3G或4G连接，但实际上，由于数据包丢失和网络变化，有效连接速度通常要慢得多。专注于优化关键渲染路径。没有必要在5秒内加载所有内容来营造一种满载的感觉。启用渐进式渲染并在后台执行某些操作。将非必要的加载推迟到空闲时间段。确定影响页面加载性能的因素：网络速度和延迟硬件（例如慢速CPU）缓存回收L2/L3缓存差异JavaScript解析PRPL模式PRPL描述了一种用于使网页加载更快并变得可交互的模式：推送（或预加载）最重要资源。尽快渲染初始路径。预缓存剩余资源。延迟加载其他路由和非关键资源。ApplyinstantloadingwiththePRPLpattern主要是结合一个工具进行讲解，侧重于实际操作，这里就不介绍了。参考资料MeasurePerformancewiththeRAILModelApplyinstantloadingwiththePRPLpattern
