资料来源：网络整理
时间：2023/3/21 5:57:02 共计：3608 浏览
平衡酷炫视觉效果与流畅体验是设计师和开发人员一直以来所面临的挑战。那么专家对此有什么建议呢？
要搞明白Web性能可不是件简单的事情。通常情况下，设计师希望网站能够包括最新的技巧和最好看的外观，而开发人员则专注于保持网站运行流畅。要在两者之中寻找一个完美的折中方案是很难的。
我们邀请了几位专家来分享一下他们在优化Web性能方面有哪些实用建议。
01. 打造一种性能文化
Brad Frost：我会帮助个人和机构理解这个观点：性能不仅仅是技术上的最佳，还是一个基本的设计原则。工作流程中每个人都应该优先考虑心梗，包括企业主、经理人、设计师和开发等等。当然，建立一种性能文化远比应用开发技巧困难，但长远来看这种付出是值得的。
02.设置一个性能基准
Guy Podjarny：无法衡量的内容是无法优化的。在你的关键页面上做一个WebPagetest测试，记录下你最喜欢的速度和权值作为基准。然后在构建系统中重复测试，如果偏离基准太多，那么就打破构建。有了这几个基准线，你就可以逐步地优化系统，更上一层楼。
03. 建立性能预算
来自Vox Product的Katie Kovalcin：Web性能是所有团队成员从最初的与客户对话阶段就应该重视的内容。作为设计师，我喜欢在设计工作开始之前就与开发人员一起做一个性能预算，先熟悉一下自己在设计中会受到哪些限制。
我们会先设置一个数字，然后在设计时经常进行内部检查，确保我做出的选择都符合项目的整体目标。如果有某个样式损害了这些目标，我们会集体讨论并提出其他解决方案，能够做到反应更快而且仍然能够实现之前的美观要求。
04. 内嵌关键CSS
Fastly的Web性能工程师Patrick Hamann：我们在项目开始时为核心性能指标比如Start Render和Speed Index设置了预算，并使用诸如speedcurve.com、WebPagetest等这样的工具来保证我们每次部署的时候都不会违反他们。我们做过的最大的改进是将我们的关键CSS嵌入到我们网页的<head>中，从而将开始渲染时间缩短了两秒钟。
05. 平衡美学与速度
Etsy团队把Web性能看做是整体用户体验的重要部分。高级工程经理Lara Hogan：我们认为平衡美学和速度非常重要，为了尽可能地了解两者的影响，我们会进行A / B测试来衡量设计更改和性能变化，来确保我们能够提供最优秀的用户体验。我们在整个设计过程中始终谨记性能要求，测试和测量会变得容易一些。
06. 锁定帧速率
Chrome开发人员关系倡导者Paul Lewis：大多数人只重视加载性能，但你还需要测量网站对用户输入的相应速度，以及它是否达到了稳定的60fps满足滚动和其他动画的需求。
了解每秒钟的帧数以及在JavaScript、样式、布局、画笔、组件所花费的时间是非常重要的，因为用户会在帧数下降或者事件被锁时注意到这些问题。熟悉开发工具，并在开发期间定期对项目进行存档。
07. 让每个人都参与进来
前端开发人员Harry Roberts：我认为Web性能是一项团队任务。性能是每个人的责任，而不应该是某一个小组的责任。我通常会尽量早地介入关键产品和设计决策，以确保每件事情都是为了项目的最佳利益，确保设计处理、功能要求和代码本身都有助于产品的性能。这是基本原则。
版权说明：
本网站凡注明“广州京杭 原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。
免费热线：400-683-0016
扫二维码关注公众号
当前位置：