移动网页大小

Question

我有一个开发人员设计一个通过手机浏览器在手机上使用的财务应用程序。现在每页都是150kb，我认为这是大的。没有使用图像，因为它主要是HTML按钮和CSS以及可能的JavaScript。 如何最小化页面大小？

Answer 1

minify你的js / css / html。如果没有帮助，您将需要重新构建您的页面以显示更少的信息，正如您所说没有图像，因此您无法在该前端进行任何优化

Answer 2

如果服务器尚未完成，请在服务器上启用HTML压缩。

目标手机上有哪些软件？如果他们有能力的浏览器，你可以通过以JSON形式发送相关数据然后让Javascript呈现相关的HTML来减轻一些重量。如果我们正在谈论移动IE ...也许，也许不是。

而且，正如其他人所说，使用缩小。

在更高级别，您确定每页需要这么多数据吗？在移动浏览器上，导航会很痛苦。

Answer 3

已经说过重要的事情，但我想补充一点：
清理Html标记。检查是否没有不必要的嵌套标记，div等。当DOM更轻时，它还有助于javascript更快地处理。

Answer 4

这是我正在解决的问题，我可以告诉你，你绝对会喜欢Steve Souders的书High Performance Web Sites。

你会在书中发现的第一件事是你应该减少HTTP请求，其中一种方法是将图像放在所谓的“精灵”中（尽管你说你的设计师不使用很多图像，它仍然有助于将少量图像推送到精灵上。）

要做到这一点，你需要一些工具（因为手动操作只是浪费时间），为此我使用了compass，书Pragmatic guide to SASS绝对非常适合这个主题（它直截了当地展示了如何使用指南针制作精灵 - 同样，我打赌一旦你尝试SASS，你将永远不会回到香草css。）

另外，正如Midhat所提到的，你应该缩小你的js / css / html，但最重要的是你应该将你所有的js文件放到一个文件中（减少浏览器必须提出的HTTP请求），所有你的css代码到一个CSS文件。此外，您应该将样式表放在页面顶部，将脚本放在底部。无论如何，我列出的几件事以及史蒂夫的书中总共有14条规则。所以试一试，你不会失望。