Web品质优化连串
分类:计算机知识

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。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

威尼斯手机娱乐官网 1

在这篇文章里,我展示如何使用Chrome Canary的开发者工具去定位你的CSS中的一部分,这部分CSS可能会导致页面滚动缓慢和影响页面的绘制时间。当浏览器加载和绘制页面时,为了“绘制”并让内容显示在屏幕上,需要遍历所有可见元素。由于这依赖于布局和复杂的CSS,你可能会发现绘制时间会很长。这会导致网页看起来忽动忽停和响应较慢。这种缓慢滚动也称为jank(jank是Android系统的一个专业术语,指的是屏幕上流畅动态画面中断的卡顿现象)。在移动设备上滚动页面时,浏览器会使劲地绘制复杂的CSS,这时这种情况更加明显。

即使页面的加载时间十分快,也仍然值得去研究页面的绘制时间。不同设备对CSS属性有着不一样的反应,但无论如何,能提高性能总是一件很好的事。为了进行测试,首先得去Google Chrome网站下载Chrome Canary。一旦安装完成,就可以打开你想测试的网页。HTML5 Rocks网站里有一个很好的案例网站,我们使用它来证明高耗能CSS属性的操作,会增加页面的绘制时间。

威尼斯手机娱乐官网 2

一旦你打开到这个网页,按下F12,会弹出Chrome的开发者工具。然后在开发者工具的底部右侧点击设置按钮,开启测试页面渲染性能的设置。

威尼斯手机娱乐官网 3

点击后会显示一个允许你更改设置的控制板。

威尼斯手机娱乐官网 4

因为我们要测试页面的渲染性能,所以选择“Enable continuous page repainting(页面持续重新绘制)“和 “Show FPS meter(显示FPS仪表)”**。如果你关闭设置面板,查看你的网页,你应该会看到下面的图片在页面右上角。

威尼斯手机娱乐官网 5

该表显示以毫秒为单位的当前页面绘制所需时间,而右侧显示了当前图表的最小与最大值。另外,也显示了最近80帧的树状图。这个图表的强大之处是它不断试图重新绘制页面,使得页面好像是第一次加载。这允许你精确定位因CSS影响的绘制问题,而不用每次重新加载页面。无论你的改变是否产生影响,树状图都会持续监测。

如果我们详细查看这个页面的HTML和CSS,你会看到其中一个div添加了一些CSS效果。

威尼斯手机娱乐官网 6

这个div有border-radius(圆角)和投影属性。当移除box-shadow属性,再观察FPS meter在绘制时间的变化。

威尼斯手机娱乐官网 7

哇!正如你从图表可看出,页面绘制时间有一个令人关注的变化。通过简单地将border-radius属性移除,就可以证明这个改变能让页面的绘制时间显著减少。当你更新或改变CSS属性时,这个图表就立即下降。在同一个元素上同时使用box-shadowborder-radius,会导致非常重的绘制负担,这是因为浏览器不能为之做出优化。如果有一个元素需要频繁的重复绘制,你应该在建立网页时时刻记住这点。

这是一个很好的,在Google IO 网站上的视频,它更深入地阐述绘制时间,并介绍一些减少网页“jank(卡顿)”的技巧。

想更进一步学习绘制时间的优化,看看这些链接。

祝测试愉快!

打赏支持我翻译更多好文章,谢谢!

打赏译者

威尼斯手机娱乐官网 ,我们都能感受到

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

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

(伯乐在线注:本文是一篇 2012 年左右的旧文)

威尼斯手机娱乐官网 8

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

威尼斯手机娱乐官网 9

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

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

打赏支持我翻译更多好文章,谢谢!

任选一种支付方式

威尼斯手机娱乐官网 10 威尼斯手机娱乐官网 11

赞 2 收藏 评论

本文由威尼斯手机娱乐官网发布于计算机知识,转载请注明出处:Web品质优化连串

上一篇:没有了 下一篇:没有了
猜你喜欢
热门排行
精彩图文