HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 提高HTML5应用和网站性能的50条秘技

提高HTML5应用和网站性能的50条秘技

Jatinder Mann是微软Internet Explorer产品的一名项目经理,在BUILD 2012大会上,他做了题为“提高HTML5应用和网站性能的50条秘技(50 performance tricks to make your HTML5 apps and sites faster)”的演讲,介绍了很多为Web应用程序提速的技巧。


  Mann的建议是按照下面六个原则组织的。


  1. 快速响应网络请求。


  避免重定向。排名前1000的网站中,63%使用了重定向。如果不执行重定向的话,页面速度可以提高10%。


  避免Meta-refresh。世界上14%的URL使用了Meta-refresh。


  尽可能通过CDN定位用户,使服务器响应时间最小化。


  从不同的域下载资源,使并发连接的应用最大化。


  复用连接。不要在响应请求时关闭连接。


  确保页面加载不会因合作伙伴网站提供的数据而延迟。


  了解耗时的网络组件,如重定向、缓存、DNS、请求和响应等。在IE 9和10中可以使用Navigation Timing API来测量浏览器花在每个操作上的时间。


  2. 最小化下载的字节数。


  加载页面时,要尽量减少下载的数据量。平均而言,每个页面要下载的数据量达777KB,其中有474KB的图片、128KB的脚本和84KB的Flash。


  请求gzip压缩的内容。


  将资源保存在本地的包中,比如为Windows商店应用生成的包资源索引(Package Resource Index)文件。这样当需要这些资源时就可以很容易地获取到。


  使用HTML5 App Cache缓存动态资源。App Cache会只下载一次资源,从而避免多次网络行程。当应用的版本号发生变化时,它会自动重新下载相应资源。


  尽量在响应中使用“Expires”字段来提供可缓存的内容。


  通过设定请求的If-Modified-Since字段来使用条件请求。


  缓存数据请求,如HTTP、XML和JSON等,因为大约95-96%的请求不会整天变化。虽然这个想法很合理,但实际缓存接收到的请求的网站所占比重还不到1%。


  用大写将文件命名标准化。虽然服务器可能把Icon.jpg当作 icon.jpg,但是对于Web平台而言,它们是不同的资源,对应不同的网络请求。


  3. 高效地组织标记。


  对于IE而言,请使用最新的标记标准,因为它速度最快。IE 10也能识别早期的IE6-IE9标记风格,但是其速度不如新的标记风格。


  特定的业务Web应用可能需要强制IE运行于传统模式,请使用HTTP头字段“X-UA-Compatible: IE=EmulateIE7”来代替HTML标签 ,这样速度会快一些。


  为了平滑地渲染,样式表应该链接在页面顶部的<head>之中的<title>后面。


  绝对不要在页面底部链接样式表。否则加载页面时可能会出现闪烁。


  对于分层样式,不要使用“@import”,因为它是同步的,会阻塞CSS数据结构的创建和屏幕绘制。


  避免样式的嵌入和内联,因为它会强制浏览器在HTML和CSS解析器之间进行上下文切换。


  仅包含必要的样式。不要下载和解析用不到的样式。


  仅在页面底部链接JavaScript。这可以确保脚本执行时图片和CSS等资源已经加载,无需等待,也避免了上下文切换。


  不要在页面开头链接JavaScript。如果某些脚本必须在开始处加载的话,请使用“defer”属性。


  不要内联JavaScript,这样可以避免上下文切换。


  使用“async”属性加载JavaScript,这样整个脚本就可以异步加载和执行。


  避免冗余代码。世界上52%的网页包含100行甚至更多的冗余代码,比如一个JavaScript文件被链接了两次。


  将一个JS框架标准化,无论是jQuery,Dojo,Prototype.js还是其他框架。浏览器没有必要加载多个功能基本相同的框架。


  不要加载FB和Twitter等网站的脚本,只是看起来很酷而已,它们会争用资源。


  4. 优化多媒体资源的使用。


  图片是最常用的资源,每个页面平均会下载58张图片。


  尽量避免下载太多图片,根据页面加载时间将图片最大数量控制在20-30之间。


  使用Image Sprites将多个图片组合成一个。该技术可以减少网络连接数,也会减少下载的字节数并节省GPU处理周期。


  手动创建Image Sprites,因为工具创建的可能会留下较大的空洞,这会加大需要下载的数据量,也需要更多的GPU 处理周期。


  使用PNG格式的图片,该格式在下载大小、解码时间、兼容性和压缩率之间实现了完美的折中。JPEG格式可以用于照片。


  使用原始的图像分辨率,这样可以避免下载不必要的数据以及缩放所需的CPU 处理。


  尽可能使用CSS3 Gradient替代图片。


  尽可能使用CSS3 border radius替代图片。


  使用CSS3 Transform来创建移动、旋转和倾斜效果。


  对于小型的单个图片,可以使用Data URI。这样可以节省一张图片的下载量。


  避免复杂的SVG,因为它们会延长下载和处理时间。


  当包含HTML5时,指定一个预览图片。这样浏览器就不必下载整个视频文件来确定预览图片了。


  使用HTML5来代替Flash、Silverlight或QuickTime。HTML5速度更快,而且其他几种形式的运行时插件会消耗系统资源。


  主动地以异步方式下载富媒体资源并将其保存在App Cache中。


  5. 编写快速的JavaScript。


  在JavaScript中进行数学运算时尽量使用整型。JavaScript的浮点运算比相应的整型运算耗费的时间要多得多。在进行数学运算,特别是计算密集型运算时,请使用Math.floor和Math.ceil将浮点数转换为整型数。


  降低JavaScript代码量,这样不但可以减少下载的数据量,而且能够提供更好的运行时性能。


  按需初始化JS。当需要时动态加载JS。


  通过缓存变量(如document和body等)使DOM交互减到最少。


  使用内置的DOM代码,如element.firstChild或node.nextSibling等。这些代码都是高度优化的,相对于第三方库能提供更好的性能。


  访问大量DOM元素时,使用querySelectorAll。


  使用.innerHTML来构建动态页面。


  批量标记更改。


  维护小巧而健壮的DOM——将其元素数目控制在1000以内。


  JSON快于XML。


  使用浏览器的JSON原生方法。


  不要滥用正则表达式。


  6. 知道你的应用在做什么。


  理解JavaScript定时器,了解setTimeout和clearInterval。除非确定要使用定时器完成一些功能,否则不要启动定时器。组合定时器也是如此。


  如果监视器的刷新率是60Hz,请将显式帧的定时器调整为16.7 ms。


  在IE 10、Chrome和Firefox中,图形处理请使用requestAnimationFrame动画函数。其绘制通过回调实现,因此不需要定时器。


  使用可见性API(document.hidden和 Visibilityhange)来确定应用程序的可见状态,如果页面是隐藏的,就关闭该活动。这样可以节省CPU和电池寿命。


  Mann建议在IE中使用Windows Performance Tools来测试Web页面的性能, 并以减少CPU时间和增加并发性为目标进行优化。


  参考英文原文:50 Tricks for Faster Web Applications


        译文:50更快的Web应用程序的技巧

后面。</font></p><p><font size="3"><br></font></p><p><p><font size="3">  绝对不要在页面底部链接样式表。否则加载页面时可能会出现闪烁。</font></p><p><font size="3"><br></font></p> <p><font size="3">  对于分层样式,不要使用“@import”,因为它是同步的,会阻塞CSS数据结构的创建和屏幕绘制。</font></p><p><font size="3"><br></font></p> <p><font size="3">  避免样式的嵌入和内联,因为它会强制浏览器在HTML和CSS解析器之间进行上下文切换。</font></p><p><font size="3"><br></font></p> <p><font size="3">  仅包含必要的样式。不要下载和解析用不到的样式。</font></p><p><font size="3"><br></font></p> <p><font size="3">  仅在页面底部链接JavaScript。这可以确保脚本执行时图片和CSS等资源已经加载,无需等待,也避免了上下文切换。</font></p><p><font size="3"><br></font></p> <p><font size="3">  不要在页面开头链接JavaScript。如果某些脚本必须在开始处加载的话,请使用“defer”属性。</font></p><p><font size="3"><br></font></p> <p><font size="3">  不要内联JavaScript,这样可以避免上下文切换。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用“async”属性加载JavaScript,这样整个脚本就可以异步加载和执行。</font></p><p><font size="3"><br></font></p> <p><font size="3">  避免冗余代码。世界上52%的网页包含100行甚至更多的冗余代码,比如一个JavaScript文件被链接了两次。</font></p><p><font size="3"><br></font></p> <p><font size="3">  将一个JS框架标准化,无论是jQuery,Dojo,Prototype.js还是其他框架。浏览器没有必要加载多个功能基本相同的框架。</font></p><p><font size="3"><br></font></p> <p><font size="3">  不要加载FB和Twitter等网站的脚本,只是看起来很酷而已,它们会争用资源。</font></p><p><font size="3"><br></font></p> <p><font size="3"><b>  4. 优化多媒体资源的使用。</b></font></p><p><font size="3"><br></font></p> <p><font size="3">  图片是最常用的资源,每个页面平均会下载58张图片。</font></p><p><font size="3"><br></font></p> <p><font size="3">  尽量避免下载太多图片,根据页面加载时间将图片最大数量控制在20-30之间。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用Image Sprites将多个图片组合成一个。该技术可以减少网络连接数,也会减少下载的字节数并节省GPU处理周期。</font></p><p><font size="3"><br></font></p> <p><font size="3">  手动创建Image Sprites,因为工具创建的可能会留下较大的空洞,这会加大需要下载的数据量,也需要更多的GPU 处理周期。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用PNG格式的图片,该格式在下载大小、解码时间、兼容性和压缩率之间实现了完美的折中。JPEG格式可以用于照片。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用原始的图像分辨率,这样可以避免下载不必要的数据以及缩放所需的CPU 处理。</font></p><p><font size="3"><br></font></p> <p><font size="3">  尽可能使用CSS3 Gradient替代图片。</font></p><p><font size="3"><br></font></p> <p><font size="3">  尽可能使用CSS3 border radius替代图片。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用CSS3 Transform来创建移动、旋转和倾斜效果。</font></p><p><font size="3"><br></font></p> <p><font size="3">  对于小型的单个图片,可以使用Data URI。这样可以节省一张图片的下载量。</font></p><p><font size="3"><br></font></p> <p><font size="3">  避免复杂的SVG,因为它们会延长下载和处理时间。</font></p><p><font size="3"><br></font></p> <p><font size="3">  当包含HTML5时,指定一个预览图片。这样浏览器就不必下载整个视频文件来确定预览图片了。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用HTML5来代替Flash、Silverlight或QuickTime。HTML5速度更快,而且其他几种形式的运行时插件会消耗系统资源。</font></p><p><font size="3"><br></font></p> <p><font size="3">  主动地以异步方式下载富媒体资源并将其保存在App Cache中。</font></p><p><font size="3"><br></font></p> <p><font size="3"><b>  5. 编写快速的JavaScript。</b></font></p><p><font size="3"><br></font></p> <p><font size="3">  在JavaScript中进行数学运算时尽量使用整型。JavaScript的浮点运算比相应的整型运算耗费的时间要多得多。在进行数学运算,特别是计算密集型运算时,请使用Math.floor和Math.ceil将浮点数转换为整型数。</font></p><p><font size="3"><br></font></p> <p><font size="3">  降低JavaScript代码量,这样不但可以减少下载的数据量,而且能够提供更好的运行时性能。</font></p><p><font size="3"><br></font></p> <p><font size="3">  按需初始化JS。当需要时动态加载JS。</font></p><p><font size="3"><br></font></p> <p><font size="3">  通过缓存变量(如document和body等)使DOM交互减到最少。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用内置的DOM代码,如element.firstChild或node.nextSibling等。这些代码都是高度优化的,相对于第三方库能提供更好的性能。</font></p><p><font size="3"><br></font></p> <p><font size="3">  访问大量DOM元素时,使用querySelectorAll。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用.innerHTML来构建动态页面。</font></p><p><font size="3"><br></font></p> <p><font size="3">  批量标记更改。</font></p><p><font size="3"><br></font></p> <p><font size="3">  维护小巧而健壮的DOM——将其元素数目控制在1000以内。</font></p><p><font size="3"><br></font></p> <p><font size="3">  JSON快于XML。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用浏览器的JSON原生方法。</font></p><p><font size="3"><br></font></p> <p><font size="3">  不要滥用正则表达式。</font></p><p><font size="3"><br></font></p> <p><font size="3"><b>  6. 知道你的应用在做什么。</b></font></p><p><font size="3"><br></font></p> <p><font size="3">  理解JavaScript定时器,了解setTimeout和clearInterval。除非确定要使用定时器完成一些功能,否则不要启动定时器。组合定时器也是如此。</font></p><p><font size="3"><br></font></p> <p><font size="3">  如果监视器的刷新率是60Hz,请将显式帧的定时器调整为16.7 ms。</font></p><p><font size="3"><br></font></p> <p><font size="3">  在IE 10、Chrome和Firefox中,图形处理请使用requestAnimationFrame动画函数。其绘制通过回调实现,因此不需要定时器。</font></p><p><font size="3"><br></font></p> <p><font size="3">  使用可见性API(document.hidden和 Visibilityhange)来确定应用程序的可见状态,如果页面是隐藏的,就关闭该活动。这样可以节省CPU和电池寿命。</font></p><p><font size="3"><br></font></p> <p><font size="3">  Mann建议在IE中使用Windows Performance Tools来测试Web页面的性能, 并以减少CPU时间和增加并发性为目标进行优化。</font></p><p><font size="3"><br></font></p> <p><font size="3">  参考英文原文:<a href="http://www.infoq.com/news/2012/11/Browser-Web-App-Performance">50 Tricks for Faster Web Applications</a></font></p><p><br></p><p>     <font size="3">   译文:<a href="http://www.infoq.com/cn/news/2012/11/Browser-Web-App-Performance#3970668-tsina-1-99656-4940258fac58681d93622513463cbd0b">50更快的Web应用程序的技巧</a></font></p></p>

【提高HTML5应用和网站性能的50条秘技】相关文章

1. 提高HTML5应用和网站性能的50条秘技

2. 利用HTML5监控网站性能

3. 程序员:提高编程技能的11个建议

4. HTML5应用开发工具Sencha.io融资1500万美元

5. HTML 5应用开发工具Sencha.io融资1500万美元

6. 每位设计师都应该拥有的50个CSS代码片段

7. 10条影响CSS渲染速度的写法与建议

8. 迪士尼收购手机和网游开发商Indiagames

9. RequireJS Optimizer 的使用和配置方法

10. 谷歌新一代手机操作系统性能有很大提高

本文来源:https://www.51html5.com/a2994.html

点击展开全部

﹝提高HTML5应用和网站性能的50条秘技﹞相关内容

「提高HTML5应用和网站性能的50条秘技」相关专题

其它栏目

也许您还喜欢