我正在为网站的移动部分构建原型(prototype)。它不使用动态人员,仅使用 jQuery 和 Foundation 4。当我在 iphone 的浏览器中测试站点时,加载和响应触摸的速度非常非常慢。一些有经验的人可以告诉我所有事情以确保网站在移动设备上加载和运行更快吗?
我所有的图片都是“为网络”保存的,所以它们应该不是问题。会不会因为我的 CSS 样式表很长所以很慢?我还不是将一个类组合和应用到很多事物的专家,所以我可能有太多的 id-s 和单独的类?不过,在这种情况下,这会有什么大不了的吗?另外,它会不会很慢,因为我使用的是 Foundation、jQuery 和 Flexlider 插件,它们每个都有自己的多个样式表和 .js 文件?我应该从他们的文件夹中丢弃任何我不使用的文件吗?我走在正确的轨道上吗?我还能做什么?先感谢您。
有些东西帮助我提高了移动应用程序的速度。我遇到了和你一样的问题,屏幕响应很慢。
摆脱所有未使用的代码
我有很多我实际上没有使用的注释代码和文件。这包括未使用的 css 样式。
您甚至需要类或 ID 吗?
看看我的应用程序,我几乎在任何元素上都有一个类或 Id。我可以使用元素选择器吗? here有关选择器的更多信息。遵循 DOM 结构。
我主要使用一个类来表示组和一个特定元素的 ID(我几乎从不需要)。
检查是否有未添加内容的 css 样式
有时您有多个样式,但实际上并没有向其中添加任何内容。一个很好的例子是使用 float: *;
和 display: inline-block;
。当在一个元素上同时使用这两个时,没有额外的功能,因为默认情况下 float 使元素成为内联 block 。
优化脚本
我的意思是,看看您是否可以缩短具有相同功能的代码。使用两个几乎相同的函数?将它们缩短为一个功能。此外,使用脚本语言的预制功能确实可以帮助您更快地编写代码。所以不要创建自己的排序函数,而是使用预制函数。
有关优化代码的帮助,我建议您看一下 here .
jQuery 选择器
使您的 jQuery 选择器更加具体。例如:
你可能有一个包含类内容的 div。
<div class="content"></div>
而不是选择它
$('.content')
你可以使用
$('div.content' )
jQuery 现在可以将搜索限制为仅 DIV 元素。
有关更高效的 jQuery 选择器的更多信息 here
存储判断码
当您获得信息时,例如 screenWidth 减去另一个 div 的宽度,并且您多次使用它,请存储它!这样您的网页就不必一遍又一遍地计算,只需获取变量即可。
用一半就不要用“大”插件
当您只使用您正在使用的插件的一小部分时,最好找到或其他插件或自己编写代码。加载插件文件可能会损害您的性能,如果实际上什至没有必要,那将是一种耻辱。
这只是一个全局 View ,我在这方面有很大的优势,我希望你能找到一个很好的用途。
如果我错了,请随时纠正我。