我可以使用哪些技术在移动设备上使JS重页面具有高性能？

Question

我有一个涉及大量JS代码的网站（~100K包括jQuery）。当我在手机或平板电脑上浏览类似的网站时，我常常对它们的缓慢感到失望。我希望我的网站在移动设备上运行良好（页面加载时间和响应能力），而无需开发单独的“移动设备友好”版本的网站或交换大部分代码。

当然，有无数的性能技术适用于所有环境。我想听到的是我可能想要在移动/蜂窝环境中为性能而做的事情，而我 想要在桌面/宽带环境中做这些事情。

以下是我正在寻找的几个例子：

• 设置jQuery.fx.off = true以跳过动画
• 禁用强化CSS效果，例如box-shadow，text-shadow和border-radius

还有什么？

Answer 1

延迟是移动环境中的杀手锏，所以首先要关注的是减少请求，例如：

内联CSS和JS，然后将它们拆分并缓存在localstorage中（Bing mobile会这样做）

或者内联JS并在注释中包含然后删除注释并评估JS（用于执行此操作的移动gmail - 不知道是否存在）

将data-uri用于图像

从jquery切换到更轻薄的框架，如zepto.js

请勿使用较大的-ve偏移来隐藏视图中的项目。

如果您从Velocity EU找到@ standardista的演示文稿，它会包含一系列其他想法。

Answer 2

您实际上无法找到仅针对移动设备的优化。你提到的两个，禁用动画和密集的CSS效果，也可以提高慢速桌面PC的响应速度。同样，您可以针对移动设备进行的任何其他优化也将提高台式PC的性能。

话虽如此，我能想到的唯一半优化，特别是移动设备的优势在于减少页面的物理尺寸。这样人们就不必浪费时间缩放到页面的不同部分。

另外，要添加到列表中，我强烈建议您使用Minify：http://code.google.com/p/minify/

Answer 3

查看我在 Javascript Performance Optimization Techniques 上撰写的以下文章。

对于移动设备上的页面加载时间，最相关的部分是管理并主动降低您的依赖关系。这里的一些技巧是：

• 编写将库依赖性降低到绝对最小值的代码。
• 为库和模块使用后加载依赖项管理器。
• 最小化并将代码组合到模块中。

对于 UI响应，您希望专注于减少与主机（DOM）对象的交互，以及围绕最大化迭代效率的技术 。一些关键的是：

• 让你的HTML超级精简（摆脱所有那些无用的DIV和SPAN标签）
• 存储指向浏览器内对象的指针。
• 减少调用以将DOM修改为绝对最小值，尤其是样式更改。

其他部分对于创建优化和响应式UI的不同方面都很有用。希望你发现它们很有用。