HTML画板

尽管用CSS渐变可以消除物理图片的加载，但是这个方法仍然会导致设备在浏览器中显示图片，从而减弱性能。

通过canvas要素和一些JavaScript，可以让浏览器显示出渐变效果。至少，如果不能用CSS3完成或是你发现它有助于提高性能时，canvas是不错的绘制工具。

为了上面的工具条，首先需要在HTML文件中创建一个canvas要素：

<canvas id="toolbar"></canvas>

然后，使用JavaScript，可以用下面的脚本在画板上生成所需的渐变：

var canvas = document.getElementById("toolbar");

var context = canvas.getContext("2d");

var gradient = context.createLinearGradient(0, 0, 0, 44);

gradient.addColorStop(0,'#2F2F2F');

gradient.addColorStop(0.5,'#151515');

gradient.addColorStop(0.51,'#000000');

gradient.addColorStop(1,'#000000');

context.fillStyle = gradient;

context.fillRect(0, 0, 300, 44);

上面的代码效果如下：

硬件加速

当谈到移动Web应用时，苹果产品因用户群庞大，所以需要认真考虑。Safari可使用额外的硬件设备功能来增强图片和转换，因此可以加速用户界面性能。其他浏览器也添加了硬件加速支持，包括Firefox 4，Chrome 10和Opera 11。

留意CSS3的演示性能

Opacity属性也可以令safari硬件加速显示出现故障，所以不可滥用。

使用RGBa值记号来说明浏览器中CSS颜色属性是缓解opacity性能问题的权宜之计；RGB中的a表示阿尔法。用RGB值来说明颜色，然后附上一个或更多数值，就可以在不适用opacity CSS属性的情况下完全控制一个要素的透明度了。

不需要使用：

.myElement {

 background-color: #000000;

 opacity: 0.75;

}

只需使用：

.myElement {

 background-color: rgba(0, 0, 0, 0.75);

}

离线用户体验

利用本地数据存储意味着数据一旦被下载到设备中，就可以使用.manifest文件，这个文件对文件进行本地缓冲。所以用户离线时，也能继续在客户端保存数据。

虽然离线状态时，不能从服务器下载数据，但至少可以在客户端为用户提供保存选项和决定权，一旦恢复网络连接就可以将其选择同步到服务器。

结论