提高HTML5应用和网站性能的50条秘技(2)_H5之家 - 中国HTML5教程资源分享第一站

后面。 　　绝对不要在页面底部链接样式表。否则加载页面时可能会出现闪烁。 　　对于分层样式，不要使用“@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时间和增加并发性为目标进行优化。 　　参考英文原文：<a href="http://www.infoq.com/news/2012/11/Browser-Web-App-Performance">50 Tricks for Faster Web Applications</a> 译文：<a href="http://www.infoq.com/cn/news/2012/11/Browser-Web-App-Performance#3970668-tsina-1-99656-4940258fac58681d93622513463cbd0b">50更快的Web应用程序的技巧</a>