Web性能优化系列：把性能看作设计的一部分

Posted 2021-04-30 前端大全

一直以来，当我们每次提到网站性能时总是想到各种技术术语。例如 DNS 查找、Gzipping、minifying、far future expires headers、缓存、ETags 等等专业词汇被抛出后，结果很多非技术的人很难对这个产生兴趣。

现在是时候让我们不仅把性能仅作为技术的最佳实践，同时还应该作为设计的一方面。

我们都能感受到

经常有人问我是以什么为生的。每次当我提到我是做移动开发时，他们会立即跟我反映“Facebook 太烂了！”

为什么会有这么直接的发自内心的抱怨呢？他们不是对 Facebook 导航条的直观感觉，也并不执意时间轴设计的优雅性。由于 Facebook 的整个 Clusterfudge 系统所做的一切，导致其手机应用程序慢得跟坨屎一样。

（伯乐在线注：本文是一篇 2012 年左右的旧文）

现在的网页变得越来越臃肿。做网页的“玩具”也越来越多了，这同时也意味着存在着更多潜在的危害。Phil Hawksworth 曾指出了一些荒诞的网站：

如果你的网页超过 15MB，且不是由Bhtml5 编写的，那这是个愚蠢的网页。 —— Christian Heilmann

虽然这些网站有可能会被人注意到（尽管有很多网站存在一些争议），但是大部分访客永远都不可能访问这些网站。如果一个网页加载超过 5 秒，那么74%的手机端用户会选择关闭这个网页。这意味着你有5秒钟的时间让他们获得他们想要的东西，不然他们就会选择离开。

好的性能就是好的设计

好的性能之路，并不是从技术人员或者技术堆栈开始的（尽管我并不是说这些东西不重要）。好的性能是从大家一起参与并使产品快速开发出来开始的。以下这几点是需要考虑的：

• 项目书中应包括性能设计——工作陈述、项目建议及设计简介中应该多次明确的提出将性能作为首要目标。“这个项目的目标是开发一个惊艳的、灵活的、闪电般体验的…”

• 尽快将设计稿放到浏览器中体验效果——把网站设计排版挂在墙上看起来也许还可以(?)，但是以这种方式来衡量在最终实际运行环境中的效果，太不靠谱了。当我们打开 The Post-PSD Era 这个页面时，我们可以看出页面性能以设计为导向远远比传统瀑布流过程要快得多。

• 在实际设备中做测试——Stephanie Rieger 说过，通过缩小的窗口或者模拟器中来衡量设计效果是不太实际的。在开发阶段的早期，就要通过实际设备进行测试，因为你可以在实际设备中看到在你的设计中接入的每个元素所产生的真正的效果。

• 团队协作——开发人员应该在早期项目设计的过程中就参与进来，同时应该指出对于设计模型和排版中潜在的性能问题。重要的是，这个过程不是为了达成一个非对即错的一致意见，而是为了能够真正的科学协作。

• 培训——在设计过程中，许多人并不知道他们的设计决策对性能所产生的后果。要让他们知道，如果页面中包含5种字体，对性能是有很大的伤害的。当他们想要在页面中加入大量大图时，需要让他们三思。需要验证想法的时候，可以在 Codepen上制作一个快速原型，然后坐下来用一个用3G连接的真实设备做体验。

终极性能就是尊重。尊重用户的时间，他们将更有可能带着良好的体验离开。良好的性能就是好的设计。是时候这样做了。

---

前端大全

--------------------------------------

商务合作QQ：2302462408

投稿网址：top.jobbole.com