阅读 1703

前端性能优化指南[2]--什么是Web性能?

一个大型网站架构模型如下图所示,对一个网站的性能进行优化,可以分为 Web 前端性能优化、应用服务器端性能优化、存储服务器端性能优化三层。网站的整体性能,需要所有开发者一同来维护。



大型网站架构模型

作为 Web 前端开发者,对于应用服务器和存储服务器端的性能优化也应当有所了解,比如你不应当只了解 HTTP 缓存,网站的缓存策略还包括以下这些。当然,我们重点关注 Web 性能优化

image.png

网站的缓存策略

我们说要优化 Web 性能,那什么是 Web 性能呢? Web 性能其实关注的是页面性能,我们说一个页面的性能如何,是在说页面是否可以快速加载,是否允许用户快速开始与之交互,滚动和动画是否流畅,这些都是我们关心的性能问题。

Web 性能包括站在开发者视角可客观度量的性能和站在用户视角主观的可感知的性能


🎯 客观性能

对于开发者来说,我们更加关注加载时间、可交互时间和每秒帧数(FPS)等等(更多的衡量指标在后面专门介绍),这些都是可以客观度量的,我们可以通过一些手段来优化 Web 性能,使这些度量指标达到开发者设定的标准。例如:

  • 减少加载时间:页面正常加载过程中所需的文件需要多长时间才能下载到用户的计算机上,这往往会受到网络、文件大小、文件数量以及其他因素的影响。一般策略是使文件尽可能小,尽可能减少HTTP请求的数量,或采用预加载策略提前加载使文件更快地可用。
  • 使网站尽快可用:我们可以以合理的顺序加载网站资源,以便用户能够真正快速地开始使用。当用户执行主要任务时,任何其他资源都可以放在后台继续加载,或者只在实际需要时加载资源,即延迟加载。例如当访问页面时可以优先加载首屏需要的资源,其他资源可以延迟加载。
  • 平滑性和交互性:在让应用程序感觉流畅方面有很多最佳实践,例如使用 CSS 动画而不是 JavaScript 来制作动画,以及最小化由于 DOM 的更改而导致UI需要的重绘次数。

客观性能是从发出请求开始,到下载、解析和执行所有资源以及最终绘制的整个过程的时间度量。

🍭 感知性能

而对于用户来说,用户的感知性能才是最重要的。感知性能是基于加载时间和页面响应性的一个主观指标,衡量一个网站在用户看来有多快,即当网站加载到足以让用户相信它已经加载完毕并且可交互的时候。

感知性能是用户的视角,而不是衡量标准。有一些前端优化技术可以提高可感知的性能,让文档内容能更快的呈现。例如:

  • 向脚本添加 defer 或 async 属性,或者将脚本放在文档的末尾;
  • 将 CSS 放在文档的头部和提前加载字体文件,可以防止页面闪动;
  • 只加载首屏需要的资源,延迟加载首屏不需要的资源;

即使一个页面加载或一个操作响应需要很长时间,也可以通过一些方式让用户觉得没有那么慢。例如:

  • 在页面加载过程中展示打底图,从打底图到内容渲染完成的过程是相对连贯的过程,用户不会因为等待而焦躁;
  • 在页面加载或数据请求过程中展示加载信息或加载动画
  • 在上传文件、解析数据等交互场景时展示进度条;


显示内容,或者至少显示页面的某个部分,并指示内容正在尽快加载,对于提高感知性能至关重要。当页面客观性能难以优化时,这些方式可以让用户感知的性能比页面的实际性能更好,这也是优化 Web 性能的一种方式。通俗点说,你的页面可能不能做得更快,但你可以让用户感觉更快。


📝 小结

这里主要介绍了什么是 Web 性能,我将它分为开发者视角的可度量的客观性能和用户视角的可感知的主观性能。


我们后面更多的是介绍可度量的客观性能,这里主要是想让大家知道感知性能这个概念,在难以优化客观性能时,可以通过一些方式提升用户的感知性能,这是提升用户体验的一种方式, Web 性能是属于用户体验的一部分。另外,用户体验除了良好的网站性能,还包括友好的异常处理、容错降级策略、无障碍能力、视觉体验、交互体验等等。

作为 Web 开发者,我们可以优化客观性能,也可以在客观性能不够好时,提升用户的感知性能。从下一节开始,我们主要关注可度量的性能。


💫 思考

你认为什么是 Web 性能?有什么不一样的看法吗?欢迎大家在评论区讨论。

😇 系列篇