2

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

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

4

1 回答 1

4

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

摆脱所有未使用的代码

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

你甚至需要类或ID吗？

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

检查您是否有不添加某些内容的 CSS 样式

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

优化你的脚本

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

jQuery 选择器

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

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

而不是选择它

$('.content')

你可以使用

$('div.content' )

jQuery 现在可以将搜索限制为仅 DIV 元素。
有关更高效的 jQuery 选择器的更多信息，请点击此处

存储确定代码

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

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

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

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

当我错了，请随时纠正我。

于 2013-10-11T22:28:20.997 回答