十大前端开发框架,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。欢迎加入翻译组。

最近,我参加了在伦敦举办的星彩彩票app下载,Facebook移动开发者大会。在那天期间,有很多的交谈,但真正让我关注的是一场关于性能的,名为“让m.facebook.com更快”的交流会,它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。

Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome Canary拥有Chrome的最新特性,并允许试用一些即将成为Chrome标准版本的,可行的最新特性。考虑到Chrome Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时候会因Chrome开发团队的快速迭代而导致一些B UG。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

星彩彩票app下载 1

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

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

星彩彩票app下载 2

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

星彩彩票app下载 3

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

星彩彩票app下载 4

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

星彩彩票app下载 5

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

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

星彩彩票app下载 6

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

星彩彩票app下载 7

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

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

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

祝测试愉快!

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

打赏译者

本文由 伯乐在线 - J.c 翻译,sunbiaobiao 校稿。未经许可,禁止转载!
英文出处:www.deanhume.com。欢迎加入翻译小组。

本文由 伯乐在线 - 厉瑶 翻译。未经许可,禁止转载!
英文出处:site point。欢迎加入翻译组。

我们都能感受到

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

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

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

星彩彩票app下载 8

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

星彩彩票app下载 9

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

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

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

任选一种支付方式

星彩彩票app下载 10 星彩彩票app下载 11

赞 2 收藏 评论

最近,我参加了在伦敦举办的Facebook移动开发者大会。在那天期间,有很多的交谈,但真正让我关注的是一场关于性能的,名为“让m.facebook.com更快”的交流会,它的主题是关于Facebook如何不断努力改善网页性能和从中汲取的经验。

编者按:考虑到英文原文的长度以及可读性,十大前端开发框架将分成上下两部分呈现给大家。上半部分着重讲的是Bootstrap家族框架,第二节将会跟大家分享更多其他的框架。

好的性能就是好的设计

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

  • 项目书中应包括性能设计——工作陈述、项目建议及设计简介中应该多次明确的提出将性能作为首要目标。“这个项目的目标是开发一个惊艳的、灵活的、闪电般体验的…”
  • 尽快将设计稿放到浏览器中体验效果——把网站设计排版挂在墙上看起来也许还可以(?),但是以这种方式来衡量在最终实际运行环境中的效果,太不靠谱了。当我们打开 The Post-PSD Era 这个页面时,我们可以看出页面性能以设计为导向远远比传统瀑布流过程要快得多。
  • 在实际设备中做测试——Stephanie Rieger 说过,通过缩小的窗口或者模拟器中来衡量设计效果是不太实际的。在开发阶段的早期,就要通过实际设备进行测试,因为你可以在实际设备中看到在你的设计中接入的每个元素所产生的真正的效果。
  • 团队协作——开发人员应该在早期项目设计的过程中就参与进来,同时应该指出对于设计模型和排版中潜在的性能问题。重要的是,这个过程不是为了达成一个非对即错的一致意见,而是为了能够真正的科学协作。
  • 培训——在设计过程中,许多人并不知道他们的设计决策对性能所产生的后果。要让他们知道,如果页面中包含5种字体,对性能是有很大的伤害的。当他们想要在页面中加入大量大图时,需要让他们三思。需要验证想法的时候,可以在 Codepen上制作一个快速原型,然后坐下来用一个用3G连接的真实设备做体验。

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

1 赞 收藏 评论

关于作者:刘健超-J.c

星彩彩票app下载 12

前端,在路上... 个人主页 · 我的文章 · 19 ·     

星彩彩票app下载 13

Facebook开发团队是使用Chrome Cannry来测试网页CSS性能的。Google Chrome Canary拥有Chrome的最新特性,并允许试用一些即将成为Chrome标准版本的,可行的最新特性。考虑到Chrome Canary作为一个为开发者和尝鲜者专门设计的“预览版”,所以有时候会因Chrome开发团队的快速迭代而导致一些B UG。尽管如此,它仍然有一些很棒的开发者工具帮助你测试网页性能

随着互联网的不断成熟以及我们越来越多的用各种移动端的设备访问互联网,Web设计师和Web开发者的工作也变得越来越复杂。

关于作者:淘小米

星彩彩票app下载 14

计算机科班,热爱编程,苹果低烧友,Android,Linux,Python菜鸟与入门之间徘徊,微博:@淘小米Micky 个人主页 · 我的文章 · 13

星彩彩票app下载 15

星彩彩票app下载 16

十年前,一切都还简单得多。那个时候,大部分用户都是坐在桌子前通过一个大大的显示器来浏览我们的网页。960像素是当时比较合理的网页宽度。那些年我们的开发工作主要就是跟十几个桌面浏览器打交道,并通过添加几个浏览器的hack,来兼容诡异的旧版本 IE 浏览器。时至今日,随着过去五六年间手持电子设备的突飞猛进,一切都变了样。我们看到各种尺寸的智能手机和平板层出不穷,电子阅读器,以及电视设备上的浏览器等也不断涌现。这种设备的多样性正在与日俱增。

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

可以预见,在不远的将来,相对于使用台式机,越来越多的人会使用移动设备来访问互联网。事实上,已经有相当数量的一部分人只通过智能手机上网。这意味着,我们这些Web设计师和开发者需要知道如何在庞大的移动端王国里呈现以及适配我们的产品,这至关重要。在撰写本文的时候,尽管我们还没彻底搞明白如何将桌面端呈现的全部内容在手持设备中呈现同样的效果,但是用于实现这一目标的技术以及工具正在变得越来越好。

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

在不知道浏览设备屏幕大小的时候,最主要的策略就是使用响应式网页设计。它是一种根据设备浏览窗口的尺寸大小来输出相应页面布局的方法。小型移动设备(如智能手机以及平板电脑)上的大多数浏览器会默认将一个网页缩小到适应自己的屏幕尺寸,然后用户可以通过缩放以及滚动等方法浏览整个网页。这种方法在技术上是可行的,但是从用户体验的角度上讲却比较糟糕。小屏幕上文字太小阅读不方便,链接太小难以点击,缩放以及滚动的操作多多少少会让人在阅读的时候分心。

星彩彩票app下载 17

响应式网页设计利用同样的HTML文档来适配所有的终端设备,响应式网页设计会根据设备屏幕的大小加载不同的样式,从而在不同的终端设备上呈现最优的网页布局。举个例子,当你在大屏幕桌面浏览器中查看一个网页的时候,网页的内容可能是分为很多列的,并且有常见的导航条。如果你在小屏幕的智能手机上查看同样的页面,你会发现页面的内容呈现在同一列中,并且导航按钮足够大,点击起来很方便。你可以在Media Queries这个网站上看到很多响应式网页设计的案例。在你的浏览器中随便点开一个设计案例,然后改变浏览器窗口的大小,你会看到网页的布局会根据窗口大小相应变化。

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

到目前为止,我们可以看出,响应式网页设计可以有效地帮助我们应对日益增长的终端设备多样性。那么在我们设计网页的时候有哪些实际可用的工具以及技术可以用来实现响应式网页设计呢?我们每个人都需要成为web大师才能驾驭这门技术么?或者是利用我们已经掌握的web基本知识就已经足够了?目前有什么工具可以帮到我们么?

星彩彩票app下载 18

这时候前端开发框架华丽登场。响应式网页设计实现起来并不困难,但是要让它在所有的目标设备上都正常运作会有一点小棘手。框架可以让这一工作变得简单。利用框架,你可以花最少的力气创建响应式且符合标准的网站,一切都很简单并且具有一致性。使用框架有很多好处,比如说简单快速,以及在不同的设备之间的一致性等等。框架最大的优势就是简单易用,即使只掌握少量的web知识,你也可以毫无障碍的使用它们。

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

简而言之,如果你认真对待目前的web开发工作,那么使用框架进行开发就不是可选项而是必须要做的事情。你的站点必须高度灵活以适应不同的浏览器,平板,智能手机以及其他各种各样的手持设备。

星彩彩票app下载 19

一个前端开发框架其实就是一系列产品化的HTML/CSS/JavaScript组件的集合,我们可以在设计中使用它们。前端开发框架有很多,其中有一些写得很棒。为了大家的使用便利,下文列举了目前最强大应用最广泛的几款前端开发框架。记住,这些框架并不仅仅是CSS 栅格之类的一些东西,它们包括的是整套的前端开发框架。

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

 

星彩彩票app下载 20

1. Bootstrap

Boostrap绝对是目前最流行用得最广泛的一款框架。它是一套优美,直观并且给力的web设计工具包,可以用来开发跨浏览器兼容并且美观大气的页面。它提供了很多流行的样式简洁的UI组件,栅格系统以及一些常用的JavaScript插件。

Bootstrap是用动态语言LESS写的,主要包括四部分的内容:

  • 脚手架——全局样式,响应式的12列栅格布局系统。记住Bootstrap在默认情况下并不包括响应式布局的功能。因此,如果你的设计需要实现响应式布局,那么你需要手动开启这项功能。
  • 基础CSS——包括基础的HTML页面要素,比如表格(table),表单(form),按钮(button),以及图片(image),基础CSS为这些要素提供了优雅,一致的多种样式。
  • 组件——收集了大量可以重用的组件,如下拉菜单(dropdowns),按钮组(button groups),导航面板(navigation control)——包括:tabs,pills,lists标签,面包屑导航(breadcrumbs)以及页码(pagination),缩略图(thumbnails),进度条(progress bars),媒体对象(media objects)等等。
  • JavaScript——包括一系列jQuery的插件,这些插件可以实现组件的动态页面效果。插件主要包括模态窗口(modals),提示效果(tool tips),“泡芙”效果(popovers),滚动监控(scrollspy),旋转木马(carousel),输入提示(typeahead),等等。

Bootstrap已经足够强大,能够实现各种形式的 Web 界面。为了更加方便地利用Bootstrap进行开发,很多工具和资源可以用来配合使用,下面列举了其中的一部分工具和资源。

  • jQuery UI Bootstrap —— 对于jQuery和Bootstrap爱好者来说这是个非常好的资源,能够把 Bootstrap的清爽界面组件引入到jQuery UI中。
  • jQuery Mobile Bootstrap Theme —— 和上面提到的jQuery UI主题类似,这是一个为jQuery mobile建立的主题。如果你想让用Bootstrap开发的网站在手机端也可以优雅访问,那么这个资源对你来说很方便易用。
  • Fuel UX —— 它为Bootstrap添加了一些轻量的JavaScript控件。Fuel UI 安装,修改,更新以及优化都很简单方便。
  • StyleBootstrap.info —— Bootstrap提供了自己的几种界面风格,StyleBootstrap提供了更多的配色选项,并且你可以给每个组件都应用不同的配色。
  • BootSwatchr —— 利用这个工具你可以立刻查看主题修改后的效果。对于每一次变动的效果,这个应用都会生成一个唯一的URL方便你与他人分享,你也可以在任意时刻修改你的主题。
  • Bootswatch —— 提供大量免费的Bootstrap主题。
  • Bootsnipp —— 在线前端框架交互组件制作工具,是一个供给设计师和开发者的基于Bootstrap HTML/CSS/JavaScript 架构的免费元素。
  • LayoutIt —— 通过界面拖放生成器简便快捷地创建基于Bootstrap的前端代码。通过拖放动作将Bootstrap风格的组件加入到你的个人设计里并且可以方便地修改他们的属性,简单便捷。

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

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

2. Fbootstrapp

Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML,包括排版、表单、按钮、表格、栅格、导航等等,风格与Facebook类似。

 

星彩彩票app下载 21

3. BootMetro

BootMetro框架的灵感来自于Metro UI CSS,基于Bootstrap 框架构建,用于创建Windows 8 的Metro风格的网站。它包括所有Bootstrap的功能,并添加了几个额外的功能,比如页面平铺,应用程序栏等等。

 

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

4. Kickstrap

Kickstrap是Bootstrap的一个变体。它基于Bootstrap,并在它的基础上添加了许多app,主题以及附加功能。这使得这个框架可以单独地用于构建网站,而不需要额外安装什么。你需要做的仅仅是把它放到你的网站上,然后用就可以了。

App 是一些页面加载完成之后加载运行的JavaScript和CSS打包文件。默认加载的app有Knockout.js, Retina.js, Firebug Lite, and Updater,你也可以自行添加更多的app。

选择不同的主题可以让你的网站在众多Bootstrap构建的类似网站中显得与众不同。

附加功能是一些用来扩展Bootstrap UI 库的附件,它们的语法基本相同或者相似。

 

星彩彩票app下载 22

下半部分的内容…

这一部分我们主要总结了Bootstrap相关的一些框架。在下半部分,我们会介绍更多其他的框架。

赞 14 收藏 3 评论

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

关于作者:厉瑶

星彩彩票app下载 23

有理想有自我价值实现感的前端程序媛,坐标杭州,专注于前端开发,立志成为优秀前端工程师,个人博客(新浪微博:@玉面小飞鱼) 个人主页 · 我的文章 · 2

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

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

祝测试愉快!

本文由星彩网app下载发布于前端技术,转载请注明出处:十大前端开发框架,Web性能优化系列

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。