Web性能优化系列：把性能看作设计的一部分
2015/09/10 · CSS,
HTML5,
JavaScript ·
性能优化
本文由 伯乐在线 –
淘小米
翻译，黄利民
校稿。未经许可，禁止转载！
英文出处：brad
frost。欢迎加入翻译组。
一直以来，当我们每次提到网站性能时总是想到各种技术术语。例如 DNS
查找、Gzipping、minifying、far future expires headers、缓存、ETags
等等专业词汇被抛出后，结果很多非技术的人很难对这个产生兴趣。
现在是时候让我们不仅把性能仅作为技术的最佳实践，同时还应该作为设计的一方面。
Web性能优化系列（2）：剖析页面绘制时间
2015/04/15 · CSS,
HTML5,
JavaScript ·
性能优化
本文由 伯乐在线 –
刘健超-J.c
翻译，sunbiaobiao
校稿。未经许可，禁止转载！
英文出处：www.deanhume.com。欢迎加入翻译组。
最近，我参加了在伦敦举办的Facebook移动开发者大会。在那天期间，有很多的交谈，但真正让我关注的是一场关于性能的，名为“让m.facebook.com更快”的交流会，它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。
Facebook开发团队是使用Chrome
Cannry来测试网页CSS性能的。Google Chrome
Canary拥有Chrome的最新特性，并允许试用一些即将成为Chrome标准版本的，可行的最新特性。考虑到Chrome
Canary作为一个为开发者和尝鲜者专门设计的“预览版”，所以有时候会因Chrome开发团队的快速迭代而导致一些B
UG。尽管如此，它仍然有一些很棒的开发者工具帮助你测试网页性能。
在这篇文章里，我展示如何使用Chrome
Canary的开发者工具去定位你的CSS中的一部分，这部分CSS可能会导致页面滚动缓慢和影响页面的绘制时间。当浏览器加载和绘制页面时，为了“绘制”并让内容显示在屏幕上，需要遍历所有可见元素。由于这依赖于布局和复杂的CSS，你可能会发现绘制时间会很长。这会导致网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的一个专业术语，指的是屏幕上流畅动态画面中断的卡顿现象)。在移动设备上滚动页面时，浏览器会使劲地绘制复杂的CSS，这时这种情况更加明显。
即使页面的加载时间十分快，也仍然值得去研究页面的绘制时间。不同设备对CSS属性有着不一样的反应，但无论如何，能提高性能总是一件很好的事。为了进行测试，首先得去Google
Chrome网站下载Chrome
Canary。一旦安装完成，就可以打开你想测试的网页。HTML5
Rocks网站里有一个很好的案例网站，我们使用它来证明高耗能CSS属性的操作，会增加页面的绘制时间。
一旦你打开到这个网页，按下F12，会弹出Chrome的开发者工具。然后在开发者工具的底部右侧点击设置按钮，开启测试页面渲染性能的设置。
点击后会显示一个允许你更改设置的控制板。
因为我们要测试页面的渲染性能，所以选择“Enable continuous page
repainting（页面持续重新绘制）“和 “Show FPS
meter（显示FPS仪表）”**。如果你关闭设置面板，查看你的网页，你应该会看到下面的图片在页面右上角。
该表显示以毫秒为单位的当前页面绘制所需时间，而右侧显示了当前图表的最小与最大值。另外，也显示了最近80帧的树状图。这个图表的强大之处是它不断试图重新绘制页面，使得页面好像是第一次加载。这允许你精确定位因CSS影响的绘制问题，而不用每次重新加载页面。无论你的改变是否产生影响，树状图都会持续监测。
如果我们详细查看这个页面的HTML和CSS，你会看到其中一个div添加了一些CSS效果。
这个div有border-radius(圆角)和投影属性。当移除box-shadow属性，再观察FPS
meter在绘制时间的变化。
哇！正如你从图表可看出，页面绘制时间有一个令人关注的变化。通过简单地将border-radius属性移除，就可以证明这个改变能让页面的绘制时间显著减少。当你更新或改变CSS属性时，这个图表就立即下降。在同一个元素上同时使用box-shadow和border-radius，会导致非常重的绘制负担，这是因为浏览器不能为之做出优化。如果有一个元素需要频繁的重复绘制，你应该在建立网页时时刻记住这点。
这是一个很好的，在Google IO
网站上的视频，它更深入地阐述绘制时间，并介绍一些减少网页“jank(卡顿)”的技巧。
想更进一步学习绘制时间的优化，看看这些链接。
祝测试愉快！
打赏支持我翻译更多好文章，谢谢！
打赏译者
我们都能感受到
经常有人问我是以什么为生的。每次当我提到我是做移动开发时，他们会立即跟我反映“Facebook
太烂了！”
为什么会有这么直接的发自内心的抱怨呢？他们不是对 Facebook
导航条的直观感觉，也并不执意时间轴设计的优雅性。由于 Facebook 的整个
Clusterfudge 系统所做的一切，导致其手机应用程序慢得跟坨屎一样。
（伯乐在线注：本文是一篇 2012
年左右的旧文）
现在的网页变得越来越臃肿。做网页的“玩具”也越来越多了，这同时也意味着存在着更多潜在的危害。Phil
Hawksworth 曾指出了一些荒诞的网站：
如果你的网页超过 15MB，且不是由BHTML5 编写的，那这是个愚蠢的网页。 ——
Christian Heilmann
虽然这些网站有可能会被人注意到（尽管有很多网站存在一些争议），但是大部分访客永远都不可能访问这些网站。如果一个网页加载超过
5
秒，那么74%的手机端用户会选择关闭这个网页。这意味着你有5秒钟的时间让他们获得他们想要的东西，不然他们就会选择离开。
打赏支持我翻译更多好文章，谢谢！
任选一种支付方式
赞 2 收藏
评论
好的性能就是好的设计
好的性能之路，并不是从技术人员或者技术堆栈开始的（尽管我并不是说这些东西不重要）。好的性能是从大家一起参与并使产品快速开发出来开始的。以下这几点是需要考虑的：
- 项目书中应包括性能设计——工作陈述、项目建议及设计简介中应该多次明确的提出将性能作为首要目标。“这个项目的目标是开发一个惊艳的、灵活的、闪电般体验的…”
- 尽快将设计稿放到浏览器中体验效果——把网站设计排版挂在墙上看起来也许还可以(?)，但是以这种方式来衡量在最终实际运行环境中的效果，太不靠谱了。当我们打开
The Post-PSD
Era 这个页面时，我们可以看出页面性能以设计为导向远远比传统瀑布流过程要快得多。 - 在实际设备中做测试——Stephanie
Rieger 说过，通过缩小的窗口或者模拟器中来衡量设计效果是不太实际的。在开发阶段的早期，就要通过实际设备进行测试，因为你可以在实际设备中看到在你的设计中接入的每个元素所产生的真正的效果。 - 团队协作——开发人员应该在早期项目设计的过程中就参与进来，同时应该指出对于设计模型和排版中潜在的性能问题。重要的是，这个过程不是为了达成一个非对即错的一致意见，而是为了能够真正的科学协作。
- 培训——在设计过程中，许多人并不知道他们的设计决策对性能所产生的后果。要让他们知道，如果页面中包含5种字体，对性能是有很大的伤害的。当他们想要在页面中加入大量大图时，需要让他们三思。需要验证想法的时候，可以在
Codepen上制作一个快速原型，然后坐下来用一个用3G连接的真实设备做体验。
终极性能就是尊重。尊重用户的时间，他们将更有可能带着良好的体验离开。良好的性能就是好的设计。是时候这样做了。
1 赞 收藏
评论
关于作者：刘健超-J.c
前端，在路上…
个人主页 ·
我的文章 ·
19 ·
关于作者：淘小米
计算机科班，热爱编程，苹果低烧友，Android,Linux,Python菜鸟与入门之间徘徊，微博：@淘小米Micky
个人主页 ·
我的文章 ·
13