javascript - 我可以使用哪些技术来使 JS 密集型页面在移动设备上具有高性能？

Question

我的网站涉及大量 JS 代码(约 100K，包括 jQuery)。当我在手机或平板电脑上浏览类似网站时，我通常会对它们的缓慢速度感到失望。我希望我的网站在移动设备上表现良好(在页面加载时间和响应能力方面)，而无需开发单独的“适合移动设备”的网站版本，或者换出大部分代码。

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

以下是我正在寻找的几个示例:

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

还有什么？

Answer 1

延迟是移动环境中的 killer ，因此首先要关注的事情之一是减少请求，例如:

内联 CSS 和 JS，然后将它们拆分出来并缓存在本地存储中(Bing 移动就是这样做的)

或者内联 JS 并包裹在注释中，然后删除注释并评估 JS(移动 gmail 曾经这样做 - 不知道它是否这样做)

为图像使用数据 uri

从 jquery 切换到更精简的框架，如 zepto.js

不要使用大的 -ve 偏移量来隐藏项目。

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