web性能

Web 性能就是让网站变得更快，包括让缓慢的过程看起来更快。网站是否加载迅速，允许用户快速开始与其交互，并且如果某些东西需要花时间加载(例如加载微调器) ，是否能提供令人放心的反馈？滚动和动画是否流畅？这篇文章提供了一个客观的，可测量的网络性能的简要介绍 * ，看看什么技术，技术和工具涉及到网络优化。

* 相对于主观的，感知的表现，将在下一篇文章中讨论。

什么是网络性能？

Web 性能是对网站或应用程序的客观测量和感知用户体验。这包括以下主要领域:

减少整体负载时间：呈现网站所需的文件需要多长时间才能下载到用户的计算机上？这往往会受到延迟，文件有多大，文件数量以及其他因素的影响。一般的策略是使文件尽可能小，尽可能减少HTTP请求的数量，并采用巧妙的加载技术（如预加载）来使文件更快地可用。
使网站尽快可用：这基本上意味着以合理的顺序加载您的网站资源，以便用户可以非常快速地开始实际使用它。当用户继续执行主要任务时，任何其他资产都可以继续在后台加载，有时我们只在实际需要时才加载资产（这称为延迟加载）。测量网站在开始加载后需要多长时间才能达到可用开始的时间称为交互时间。
流畅性和互动性：应用程序使用起来是否可靠和愉快？滚动是否流畅？按钮是可点击的吗？弹出窗口是否快速打开，它们是否在打开时会顺利地制作动画？在使应用程序感觉流畅时，需要考虑许多最佳实践，例如使用CSS动画而不是JavaScript进行动画，并最大限度地减少由于DOM中的更改而导致的UI所需的重绘次数。
感知性能：一个网站在用户看来有多快，对用户体验的影响比网站实际上有多快更大。用户如何看待您的性能与任何客观统计数据一样重要，甚至可能更重要，但这是主观的，不容易衡量。感知性能是用户视角，而不是度量标准。即使一个操作需要很长时间(因为延迟或其他原因) ，在用户等待的时候，通过显示一个加载旋转器，或者一系列有用的提示和技巧(或者笑话，或者其他你认为合适的东西) ，也可以让用户保持忙碌。这种方法比什么都不显示要好得多，因为这会让用户感觉花费的时间长得多，并可能导致用户认为它已经坏了并放弃使用。
性能测量：Web 性能涉及测量应用程序的实际速度和感知速度，在可能的情况下进行优化，然后监视性能，以确保优化的内容保持优化。这涉及许多指标（可以指示成功或失败的可衡量指标）和用于衡量这些指标的工具，我们将在本模块中讨论这些指标。

总之，许多特性会影响性能，包括延迟、应用程序大小、 DOM 节点的数量、发出的资源请求的数量、 JavaScript 性能、 CPU 负载等等。重要的是尽量减少加载和响应时间，并添加额外的功能来隐藏延迟，使体验尽可能可用和交互，尽快，同时异步加载在较长的尾部部分的体验。

注意

Web 性能既包括加载时间、每秒帧数和交互时间等客观度量，也包括加载内容所花费多长时间的主观体验。

内容的呈现方式

为了有效地理解Web性能，其背后的问题以及我们上面提到的主要主题领域，您确实应该了解有关浏览器如何工作的一些细节。这包括：

浏览器的工作原理。当您请求URL并点击/时，浏览器会找出保存该网站文件的服务器的位置，建立与该网站的连接并请求文件。有关详细概述，请参阅填充页面：浏览器的工作原理。
源顺序。HTML 索引文件的源顺序会显著影响性能。从索引文件链接到的其他资源的下载通常是顺序的，基于源顺序，但这可以纵并且绝对应该优化，意识到某些资源会阻止其他下载，直到其内容被解析和执行。
关键路径。这是浏览器在从服务器下载文件后用来构造 Web 文档的过程。浏览器遵循一组明确定义的步骤，优化关键呈现路径以优先显示与当前用户操作相关的内容，将显著缩短内容呈现时间。有关详细信息，请参阅关键渲染路径。
文档对象模型。文档对象模型（DOM）是一种树结构，它将 HTML 的内容和元素表示为节点树。这包括所有 HTML 属性和节点之间的关系。加载页面后进行广泛的 DOM 操作（例如，添加、删除或移动节点）可能会影响性能，因此有必要了解如何使用 DOM，以及如何缓解此类问题。有关详细信息，请参阅文档对象模型。
延迟。我们之前简要提到了这一点，但简而言之，延迟是您的网站资源从服务器传输到用户计算机所需的时间。建立TCP和HTTP连接涉及开销，并且在网络上来回推送请求和响应字节时存在一些不可避免的延迟，但是有一些方法可以减少延迟（例如，通过下载更少的文件来减少HTTP请求的数量，使用CDN使您的网站在全球范围内更加普遍地执行，并使用 HTTP/2 从服务器更有效地提供文件）。您可以在了解延迟中阅读有关此主题的所有信息。