手机上的移动网站太慢[关闭]

Question

我正在为网站的移动部分构建原型。它不使用动态人员，只使用 jQuery 和 Foundation 4。当我在 iphone 的浏览器中测试该站点时，加载和响应触摸非常缓慢。请一些有经验的人告诉我所有的事情，以确保网站在移动设备上加载和运行得更快？

我所有的图片都是“为网络”保存的，所以它们应该不是问题。会不会因为我的 CSS 样式表很长而变慢？我还不是将一个类组合和应用到很多事情的专家，所以我可能有太多的 id-s 和单独的类吗？在这种情况下，这会是一件大事吗？另外，由于我使用的是 Foundation、jQuery 和 Flexlider 插件，而且它们每个都有自己的多个样式表和 .js 文件，它会不会很慢？我应该从他们的文件夹中扔掉我不使用的任何文件吗？我在正确的轨道上，我还能做什么？先感谢您。

Answer 1

有些事情帮助我使我的移动应用程序更快。我和你有同样的问题，屏幕响应非常低。

---

摆脱所有未使用的代码

我有很多实际上没有使用的注释代码和文件。这包括未使用的 css 样式。

你还需要类或 ID 吗？

查看我的应用程序，我几乎在任何元素上都有类或 Id。我是否可以使用元素选择器。 here 更多关于选择器的信息。遵循 DOM 结构。
我主要将一个类用于组和一个特定元素的 Id（我几乎从不需要）。

检查是否有不添加内容的 css 样式

有时您有多种样式，但实际上并没有添加任何东西。一个很好的例子是使用float: *; 和display: inline-block;。当在一个元素上同时使用这两种方法时，没有额外的功能，因为 float 使元素默认为 inline-block。

优化你的脚本

我的意思是，看看您是否可以缩短具有相同功能的代码。使用两个几乎相同的功能？将它们缩短为一个功能。此外，使用脚本语言的预制功能将真正帮助您更快地编写代码。所以不要创建自己的排序函数，而是使用预制函数。 如需帮助优化您的代码，我建议您查看here。

jQuery 选择器

使您的 jQuery 选择器更加具体。例如：
你可能有一个包含类内容的 div。

<div class="content"></div>

而不是选择它

$('.content')

你可以使用

$('div.content' )

jQuery 现在可以将搜索限制为仅 DIV 元素。
更多关于更高效的 jQuery 选择器的信息here

商店识别码

当您获得信息时，例如 screenWidth 减去另一个 div 的宽度，并且您不止一次地使用它，存储它！这样您的网页就不必一遍又一遍地进行计算，只需获取变量即可。

使用一半时不要使用“大”插件

当您只使用您正在使用的插件的一小部分时，最好找到其他插件或自己编写代码。加载插件文件可能会损害您的性能，如果实际上甚至没有必要，那就太可惜了。

---

这只是一个全局视图，如果我有很大的优势，我希望你能找到一个很好的用途。

如果我错了，请随时纠正我。