图片 8

标准终于完工了,Web性能优化系列

Web性能优化系列(1):Web性能优化分析

2015/04/08 · CSS,
HTML5,
JavaScript ·
性能优化

本文由 伯乐在线 –
鸭梨山大
翻译,sunbiaobiao
校稿。未经许可,禁止转载!
英文出处:gokulkrishh.github.io。欢迎加入翻译组。

如果你的网站在1000ms内加载完成,那么会有平均一个用户停留下来。2014年,平均网页的大小是1.9MB。看下图了解更多统计信息。

图片 1

网站的核心内容需要在1000ms内呈现出来。如果失败了,用户将永远不会再访问你的网站。通过降低页面加载的时间,很多著名公司的收入和下载量有显著的提升。比如

  • Walmart 每降低100ms的加载时间,
    他们的收入就提高1%.
  • Yahoo
    每降低400ms的加载时间,他们的访问量就提升9%。
  • Mozilla
    将他们的页面速度提升了2.2秒,每年多获得了1.6亿firefox的下载量。

历时八年,HTML5 标准终于完工了

2014/10/29 · HTML5 ·
HTML5

原文出处: 驱动之家   

万维网联盟(W3C)今天泪流满面地宣布,经过几乎8年的艰辛努力,HTML5标准规范终于最终制定完成了,并已公开发布。

在此之前的几年时间里,已经有很多开发者陆续使用了HTML5的部分技术,Firefox、Google
Chrome、Opera、Safari 4+、Internet Explorer
9+都已支持HTML5,但直到今天,我们才看到“正式版”。

HTML5将会取代1999年制定的HTML 4.01、XHTML
1.0标准,以期能在互联网应用迅速发展的时候,使网络标准达到符合当代的网络需求,为桌面和移动平台带来无缝衔接的丰富内容。

W3C CEO Jeff
Jaffe博士表示:“HTML5将推动Web进入新的时代。不久以前,Web还只是上网看一些基础文档,而如今,Web是一个极大丰富的平台。我们已经进入一个稳定阶段,每个人都可以按照标准行事,并且可用于所有浏览器。如果我们不能携起手来,就不会有统一的Web。

HTML5还有望成为梦想中的“开放Web平台”(Open Web
Platform)的基石
,如能实现可进一步推动更深入的跨平台Web应用。

接下来,W3C将致力于开发用于实时通信、电子支付、应用开发等方面的标准规范,还会创建一系列的隐私、安全防护措施。

W3C还曾在2012年透露说,计划在2016年底前发布HTML 5.1

HTML5正式版:

赞 收藏
评论

图片 2

10款最佳JavaScript 和 HTML5演示(幻灯片)框架

2014/12/26 · HTML5,
JavaScript ·
HTML5,
Javascript,
幻灯片

本文由 伯乐在线 –
cucr
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:devzum.com。欢迎加入翻译组。

JavaScript 和
HTML5 框架在现代浏览器中为创建演示文稿扮演着重要的角色。他们在web页面中嵌入特性,提供了一种有效的方式来展示信息。一般来说,手动编写需要大量的时间和精力。而且手动真的很复杂,初学者如果没有应用有效的技术无法获得足够的成果。另一方面,演示框架具有在不发生任何问题和复杂性就产生很好的工作成果的特性。他们以最大的速度和准确性交付最好的web开发成果。

HTML5在现代设计师和web开发人员中变得非常受欢迎。其丰富的功能和无滞后的表现在很大程度上提高一个网站的功能和效率。你可以很容易地通过选择一款出色的框架来修改你的网站的界面外观,。毫无疑问,这是微软power
point和keynote的一个完美的web替代品。

因此,看看这些顶级JavaScript和HTML5演示框架,并选择最好的一款,通过这些幻灯片演示框架的帮助来展示你的任务。

网站优化的步骤

  1. 设定性能预算。
  2. 测试当前的性能。
  3. 找出导致性能问题的地方。
  4. 最后,duang,使用优化特技。

下面有几种方法可以提升你的页面性能,让我们来看看

1) HTML5 Slides

图片 3

Slides是一款有效的web开发演示框架。由谷歌提供,这款框架提供了一个链接,通过它可以极大容易和舒适地获取模板。大家需要做的就是复制样本幻灯片的代码,并为他们填上新的内容。

速度指标

速度指标是指页面的可视部分被呈现在浏览器中的平均速度。表示为毫秒的形式,并且取决于viewport的大小。请看下图(用视频帧的形式展现页面加载时间,以秒为单位)。

速度指标越低越好。

图片 4

速度指标可以通过Webpagetest
来测试(由Google维护)

2) Reveal.js

图片 5

Reveal.js是一款著名的web开发框架。它创造很棒的幻灯片,可以水平和垂直定位。通过使用它,你可以很容易地为你的演示添加各种效果的完美组合和3
d幻灯片过渡。大量的web开发人员正在使用这款有效并且可靠的框架。

长话短说

Webpage test 有很多特性,比如在不同的地方用不同的浏览器跑多个测试。
还可以测算其他的数据比如加载时间,dom元素的数量,首字节时间等等…

例如:查看amazon在webpagetest上的测试结果

可以看看这个视频,了解由
Patrick Meenan
讲解的关于webpagetest的更多信息(需要梯子)。

3) Impress.js

图片 6

另一款有效的框架是Impress.js。这是一款神奇的框架,幻灯片排列在3
d空间,同时定义在“div”元素中,并通过足够的数据属性控制x,y,z的位置和旋转。通过使用它,您可以很容易地设计一些流畅的,惊人的,新颖的幻灯片。

渲染阻塞

如果你知道浏览器如何运行,那么你应该知道HTML, CSS,
JS是怎么被浏览器解析的以及其中哪个阻塞了页面的渲染。如果你不知道,请看下图。

图片 7

点击how a browser
works了解更多浏览器工作原理(作者为Tali
Garsiel 和Paul
Irish).

4) Deck.js

图片 8

如果你想要一款可靠的框架来创建出色的web演示。deck.js可以满足您的需求。这是一款最古老的HTML5幻灯片之一,具有惊人和有效的功能来显示你的幻灯片。它的API文档对创建用户自定义的扩展起到很大的帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:, ,
网站地图xml地图