手机网站在手机上太慢

Mobile website too slow on the phone

本文关键字：手机手机网网站更新时间：2023-09-26

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

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

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

<小时 /> 摆脱所有未使用的代码

我有很多

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

你甚至需要类或 ID 吗？

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

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

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

优化脚本

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

jQuery 选择器

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

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

而不是选择它

$('.content')

你可以使用

$('div.content' )

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

存储确定代码

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

使用

一半时不要使用"大"插件

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

<小时 />

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

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