我可以使用什么技术来使重js的页面在移动设备上表现良好?

What techniques can I use to make JS-heavy pages performant on mobile devices?

本文关键字：移动 技术 什么 可以使 js 我可以      更新时间：2023-09-26

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

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

这里有几个我正在寻找的例子:

  • 设置jQuery.fx.off = true跳过动画
  • 禁用box-shadow, text-shadow和border-radius等密集CSS效果

还有什么?

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

内联CSS和JS，然后将它们分开并缓存到本地存储(Bing mobile会这样做)

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

使用data-uri的图像

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

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

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

您真的无法找到仅针对移动设备的优化。你提到的两种方法，禁用动画和密集的CSS效果，同样可以在速度较慢的桌面电脑上提高响应速度。同样，针对移动设备所做的任何其他优化也将提高桌面PC的性能。

话虽如此，我能想到的唯一对移动设备特别有利的半优化是减小页面的物理大小。这样人们就不用浪费时间来浏览你的页面的不同部分了。

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

看一下我写的关于Javascript性能优化技术的文章。

对于移动设备上的页面加载时间，最相关的部分是管理和积极减少您的依赖。这里有一些技巧:
  • 编写代码，将库依赖减少到绝对最小。
  • 为你的库和模块使用加载后依赖管理器。
    • 最小化你的代码并组合成模块。

对于UI响应性，您希望关注减少与主机(DOM)对象的交互，以及围绕的技术，从而最大化您的迭代的效率。

  • 保持你的HTML超级精简(摆脱所有那些无用的DIV和SPAN标签)
  • 存储指向浏览器内对象的指针引用
  • 将修改DOM的调用减少到最小，特别是样式更改。

其他部分都是关于创建优化和响应性UI的不同方面的有用内容。

相关文章：