代码简化简化通常是使用在脚本和样式文件中，删除一些不必要的字符，比如空格，换行符，或者注释等。不需要暴露给外部的命名就可以被缩短为一个或者两个字符，比如变量名。合适的简化资源通常在客户端不需要做任何其他的处理，并且平均减少20%的资源大小。内嵌在HTML中的脚本和样式文件也是可以精简的。有很多很好的库来做精简化的操作，这些库一般也同时会提供合并多个文件这样减少请求数的服务。 简化带来的好处并不局限于减少带宽和延迟，对于那些移动设备上缓存无法保存的过大资源来说，也是很有改善的。Gzip在这个方面并没有任何帮助，因为资源是在被解压后才被缓存起来的。 实现小贴士：易于实现。Google的Closure Compiler已经难以置信地完成了理解和简化Javascript的工作。但是CSS的简化则没有那么容易，因为对不同浏览器来说有不同的CSS技术能迷惑CSS简化工具，然后让CSS简化后无法正常工作。必须要注意的是，已经有这样的案例了，即使只是删除了不必要的字符，简化工作也有可能破坏页面。所以当你应用简化技术之后，请做一下完整的功能测试工作。 调整图片大小图片通常是占用了Web页面加载的大部分网络资源，也占用了页面缓存的主要空间。小屏幕的移动设备提供了通过调整图片大小来加速传输和渲染图片资源的机会。如果用户只是在小的移动浏览器窗口中看图片的话，高分辨率的图片就会浪费带宽、处理时间和缓存空间。 为了加速页面渲染速度和减少带宽及内存消耗，可以动态地调整图片大小或者将图片替换为移动设备专用的更小的版本。不要依靠浏览器来将高分辨率的图片转换成小尺寸的图片，这样会浪费带宽。 另外一个方法是先尽快加载一个低分辨率的图片来渲染页面，在onload或者用户已经开始和页面交互以后将这些低分辨率的图片替换成为高分辨率的图片。 实现小贴士：特别应用在高度动态化的网站是有优势的。 使用HTML5和CSS 3.0来简化页面HTML5包括了一些新的结构元素，例如header，nav，article和footer。使用这些语义化的元素比传统的使用div和span标签能使得页面更简单和更容易解析。一个简单的页面更小加载更快，并且简单的DOM（Document Object Model）代表着更快的JavaScript执行效率。新的标签能很快地应用在包括移动端的新浏览器版本上，并且HTML5设计让那些不支持它的浏览器能平稳过渡使用新标签。 HTML5的一些表单元素提供了许多新属性来完成原本需要javascript来完成的功能。例如，新的placeholder属性用于显示在用户输入进入输入框之前显示的介绍性文字，autofocus属性用于标示哪个输入框应当被自动定位。 也有一些新的输入框元素能不用依靠Javascript就可以完成一些通用的需求。这些新的输入框类型包括像e-mail，URL，数字，范围，日期和时间这样需要复杂的用户交互和输入验证的元素。在移动浏览器上，当需要输入文本的时候，弹出的键盘通常是由特定的输入框类型来做选择的。不支持指定的输入类型的浏览器就会只显示一个文本框。 另外，只要浏览器支持内建的层次，圆角，阴影，动画，过渡和其他的图片效果，CSS 3.0就能帮助你创建轻便简易的页面了，而这些图片效果原先是需要加载图片才能完成的。这样，这些新特性就能加速页面渲染了。 有很多Web站点都提供哪些移动或者桌面浏览器支持哪项性能的更新说明。（例如：http://caniuse.com/ 和 mobilehtml5.org）。 实现小贴士：需要进一步考虑。人工地做这些改动是非常复杂和耗时的。如果你使用CMS，它可以帮你生成许多你不需要控制的HTML和CSS。 优化客户端的程序处理浏览器按照什么顺序来执行代码生成一个页面，和页面复杂性及JavaScript的技术选择，都对性能有很大的影响。特别在客户端相对较慢的CPUs和少内存的移动端中尤为明显。下面的章节提供一些策略来提升页面处理的性能。 延迟渲染”BELOW-THE-FOLD”内容 可以确定的是如果我们将不可见区域的内容延迟加载，那么页面就会更快地展现在用户面前，这个区域叫做”below the fold”。为了减少页面加载后需要重新访问的内容，可以将图片替换为正确的高宽所标记的 实现小贴士：平稳处理。一些好的Javascript库可以用来处理这些below-the-fold 延迟加载的图像。^12 延迟读取和执行的脚本在一些移动设备上，解析Javascript代码的速度能达到100毫秒每千字节。许多脚本的库直到页面被渲染以后都是不需要的加载的。下载和解析这些脚本可以很安全地被推迟到onload事件之后来做。例如，一些需要用户交互的行为，比如托和拽，都不大可能在用户看到页面之前被调用。相同的逻辑也可以应用在脚本执行上面。尽量将脚本的执行延迟到onload事件之后，而不是在初始化页面中重要的可被用户看到的内容的时候执行。 这些延迟的脚本可能是你自己写的，更重要的是，也有可能是第三方的。对广告、社交媒体部件、或者分析的差劲的脚本优化会导致阻塞页面的渲染，会增加珍贵的加载时间。当然，你需要小心地评估诸如jquery这样为移动网站设计的大型脚本框架，特别当你仅仅只是使用这些框架中的一些对象的时候更要小心评估。 实现小贴士：平稳处理。许多第三方的框架现在提供延迟加载的异步版本的API。开发者只需要将原先的逻辑转化到这个异步版本。一些JavaScript要做延迟加载会有些复杂，因为在onload之后执行这些脚本需要注意很多注意事项。（例如，你有个脚本需要绑定到onload事件上，你需要做什么？如果你将脚本延迟到onload事件之后，就一定就会失去很多执行的时机。） 使用Ajax来增强进程Ajax（Asynchronous JavaScript and XML）是一项使用XHR（XMLHttpRequest）对象来从Web服务器上获取数据的技术，它并不需要更新正在运行的页面。Ajax能更新页面上的某个部分而不需要重新构建整个页面。它通常用来提交用户的交互相应，但是也可以用来先加载页面的框架部分，然后当用户准备好浏览网页的时候再填充详细的内容。 尽管是这个名字，但是XMLHttpRequest并不强制要求你只能使用XML。你可以通过调用overrideMineType方法来制定”application/json”类型来使用json替换XML。使用JSON.parse会比使用原生的eval()函数快了几乎两倍，并且更为安全。 同时，切记Ajax的返回响应也会得益于那些应用在普通的返回响应的优化技术上面。确保对你的Ajax返回响应使用了缓存头，简化，gzip压缩，资源合并等技术。 实现小贴士：由于这个技术是根据具体应用不同而不同的，所以很难量化。或许由于跨域问题，你需要使用XHR2，这个技术能使用外部域的资源，从而能进行跨域的XHR请求。 根据网络状况进行适配处理由于使用更多带宽会使用更多移动网络的费用，所以只有能检测网络的类型才能使用针对特定网络的优化技术。例如，预加载未来使用到的请求是非常聪明的做法，但是如果用户的带宽很稀有，并且加载的有些资源是永远不会用到的话，这个技术就是不合理的了。 在Android 2.2+，navigator.connection.type属性的返回值能让你区分Wifi和2G/3G/4G网络。在Blackberry上，blackberry.network也能提供相似的信息。另外，服务端通过检测请求中的User-Agent头或者其他的嵌入到请求中的信息能让你的应用检测到网络状况。 实现小贴士：需要进一步考虑。检测网络信息的API最近已经有所变化了。^11 接口现在不是直接定义Wi-Fi，3G等网络状况，而是给出了带宽信息和诸如“非常慢，慢，快和非常快”这样的建议。有个属性能给出估计的MB/s值和一个“meterd”的Boolean值来表示它的可信度，但是对浏览器来说，很难根据这个来判断环境。判断当前网络环境然后适配仍然是一种最好的方法，但是这种方法正在被考虑被替换。 |
