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时间和增加并发性为目标进行优化。
我们一直都在努力坚持原创.......请不要一声不吭，就悄悄拿走。
我原创，你原创，我们的内容世界才会更加精彩！
【所有原创内容版权均属TechTarget，欢迎大家转发分享。但未经授权，严禁任何媒体（平面媒体、网络媒体、自媒体等）以及微信公众号复制、转载、摘编或以其他方式进行使用。】
微信公众号
TechTarget
官方微博
TechTarget中国
作者
相关推荐
-
AWS MEAN堆栈+JavaScript=快速搭建应用
开发人员在构建Web应用时有许多选择。市面上有无数的框架和语言可选，而像AWS这样的云平台可以方便地部署和扩展应用程序。
-
当web成为选择 开发原生移动app还值得吗？
随着iPhone的推出，其进入的代价是通过苹果应用商店流通的编译过的Objective-C二进制代码的分发。
-
对话陈本峰：HTML5究竟给企业带来了什么？
智能手机的普及，移动计算的应用，带火了HTML5技术。尤其，当我们看到微软朋友圈被“故宫与腾讯合作”的广告刷屏，我们不得不承认，HTML5技术确实很重要，但是HTML5究竟带来了什么，与以往移动技术有什么不同？
-
HTML5促进企业移动化服务走向极致
在企业困扰于传统移动化方式过于复杂时， HTML5凭借其天然的跨平台特性，乘势而起并逐渐得到企业的关注。可是，由于HMTL5标准建立时间不长，展示性能及稳定性更是需要和浏览器有一个良好的兼容，除此之外企业更是缺乏实际应用经验，所以基于HTML5技术的企业级服务市场还处于一片初创状态。