手机Web开发后期优化设计

1、 
最小化外部资源

  
尽量少的链接外部资源，包括CSS样式、JavaScript库、图片库等，外部资源库需要通过网络连接来查询内容，一旦查询出，每个资源都需要浏览器的内存来渲染，在某些情况下，还需要缓存文件系统；

可以通过以下方法来减少外部资源的链接：

1、 
除非必须，不要用更多的CSS样式表。理想情况是只用一个，在手机浏览器中，对每个CSS文件都要发送一次网络请求，浏览器在每个样式表处理后，都要进行一次再渲染，直到所有的样式表处理完成后才把页面渲染完成。

2、 
除非必须，不要用更多的JavaScript库。理想情况是只用一个。

3、 
尽量减少文档中的图片数量，在页面设计时确保用到的每个图片都是绝对必须；

2、 
去除空白、注释和不必要的标记

1、 
注释、空白（空格、TAB和换行）和一些标签属性有助于阅读代码，但对手机浏览器是不必要的，这些会增加手机浏览器的下载量。一般这些会使文件增加30%-50%

(可以通过一些工具来最小化CSS文件和JavaScript文件）

2、 
对CSS文件，如果用了外部CSS文件，应该尽量在站点中用同一个CSS文件，这样可以减少CSS文件的下载数量，可以在浏览器中缓存CSS文件，标记可以在文档中共享。如果用了内部样式表，则应该在文档中仅包括一个样式声明，内部样式的作用范围只在当前文件。

3、 
尽量减少CSS选择器的长度为1-2字符，这样可以减少XHTML标记中用到的样式名字字符的数量，但要注意JavaScript库中用到的ID和一些选择元素的类名字；

4、 
JavaScript脚本优化同CSS文件一样，减少注释和不必要的空格，JavaScript函数和变量的名字要尽量短到1-2字符。但要确保JavaScript中的功能正确，优化之前应该确保没有问题，优化之后还要再进行测试。

5、 
对内嵌CSS和JavaScript也应该采用3，4原则；

通过该方法优化后，最大可以使Web的脚本文件缩小50%。

3、 
变更和转变图片的编码

1、 
在不影响站点的可读性和可用性前提下尽量使图片的尺寸减小；

2、 
减少使用的图片的分辨率，可以根据设备支持的分辨率来选择图片文件的分辨率，或根据图片显示的大小采用不同的版本；

3、 
可以对图片进行压缩来减小文件的大小，但是图片压缩后，图像的质量会下降，所以必须在优化文件大小和图像质量方面做出平衡；

4、 
对图片转换为合适的格式，现在的手机浏览器支持JPG、PNG和GIF格式；

5、 
对图片采用静态的和即时的调整大小和格式变换，静态方法对同一个图片有多种格式和大小，WEB服务端根据请求的设备采用合适的图片大小，静态方法适用于内容很少变动的图片，如公司的Logo，页头和页尾等部分的信息。即时方法一般有通过代理服务器把静态的图片转换为合适的大小和格式，该方法一般用于新闻和娱乐频道的图片显示。

4、 
在Response文档时使用MIME多部件编码

  
该方法是在响应用户的请求时如果包含多种格式的文件，如同时包括Jpg、txt等内容，可以通过MIME多部件编码方式，来提供给用户，这样可以减少网络的延迟和加快浏览器的渲染速度。

  
该方式需要浏览器的支持。

5、 
服务器端优化

1、 
配置服务器队对传送的文档进行压缩，从而可以更快的到达手机上；

2、 
在HTTP Response中使用缓存通知浏览器文档内容是否进行了缓存和缓存多久；

可以通过HTTP Response
Header中Cache-Control参数设置或使用缓存，此外还可以通过以下参数Date
、Last-Modified、Expires、Pragma、Vary进行组合调整。

6、 
页面中样式和标记的规则化

页面中样式和标记的规则化在桌面WEB中不是很重要，因为桌面浏览器一般会智能的标示出无效的标记，猜测作者的意图，并试图纠正这些错误的标记。但对移动WEB情况相反，会显的很重要，一方面移动WEB的浏览器种类很多，如果不合乎规则，可能在有些浏览器中不能正确显示，另一方面现在移动WEB浏览器不是很智能，有时浏览器试图去渲染一个错误的标记而引起多次循环，这样会引起很差的性能。

可以通过一些工具来检测样式和标记是否符合规则。