8

在我的一个网络项目中,我使用了大量的 javascript/jQuery 代码,这在浏览器(Windows 7 x64)上非常慢,尤其是在 IE 上。

我只在主页上同时使用 3 个 Ajax 请求。

在搜索页面上,我还使用 ajax 请求,这些请求在滚动事件、任何“搜索标签”(简单的锚标签)点击事件等上触发,这通常会使数据加载非常缓慢。

我使用 jQuery 插件,例如,Anythingslider、jquery coockies 插件、Raty(评级插件)、Tipsuy、jQuery coreUISelect、jScrollPane、鼠标滚轮等。我已经缩小并组合在 jquery.plugins.js 文件中的所有这些第 3 方插件,其中几乎是 80KB。

我用 jQuery 选择了很多 DOM 元素。例如,我使用以下代码:

$("#element")

代替:

document.getElementById('element');

我还有一个大的 CSS 文件,超过 5 000 行,因为我已经将所有 3rd 方 jQuery 插件的 css 文件合并到一个文件中,用于缓存和减少 HTTP 请求。

  1. 好吧,我想知道,我可以做些什么来优化我的代码以获得更好的性能并加快网页加载速度?

  2. 我可以使用什么样的工具来调试我的 JS 代码?我忘了提一下,当我在 Google Chrome 或 Firefox 中刷新页面并打开 firebug 或 Chrome 原生开发工具时,在这种情况下页面加载速度也很慢。有时 Firefox 甚至被压垮了。

  3. 使用原始 js 选择 DOM 元素会给我一种更好更快的方式来解析文档吗?还是我应该离开,jQuery 选择?谈论的是大约50个元素。

  4. 我应该分开并在之后缩小外部插件,例如Anythingslider吗?或者当我拥有“一体式”js文件时会更好吗?

  5. 将 jQuery 插件的 css 代码与 main style.css 分开会更好吗?因为即使悬停在元素上并影响 css 文件中的 :hover 状态,也非常慢。

好吧,伙计们,我真的很指望你们。

我一直在谷歌上搜索我的问题的答案,并真的希望在这里找到它。

谢谢。

4

4 回答 4

7

1)缩小它

2) 所有浏览器都自带调试工具

3)通过将引用存储在变量中来减少对dom的访问,不要两次查找相同的元素

4)分离并使用众所周知的cdn

5)分开只是因为它更容易管理

更多 jQuery 技巧在这里:jquery-performance-rules和这里:improv-your-jquery-25-excellent-tips

确保所有静态资源都被缓存,没有磁盘查找

这个图书馆很酷

于 2012-11-02T09:06:23.503 回答
2

您可以在此处比较选择器性能:http: //jsperf.com/

只需设置您的 HTML 代码,包括 jQuery 库并将您想要比较的每个选择器作为各种测试用例进行比较。

许多jquery-performance-rules仍然适用,

也看看这里jquery-proven-performance-tips-tricks

于 2012-11-02T09:04:54.210 回答
2

由于有很多方法可以改进代码,特别是对于像您这样的大型网站,我认为只发布外部链接会更有用,因为这些都是非常好的编写和简洁的教程和工具。这里是其中的一些:

我还推荐 IDE 用于构建称为JetBrains 的 PHPStorm的 Web 应用程序/网站。它是商业软件,但绝对物有所值,因为它在打字时提供了改进的提示和技巧。

于 2012-11-02T09:12:26.440 回答
0

原始性能可能不是您的问题。如果您发现页面加载性能不佳,请参阅我专门撰写的关于在页面初始化时最小化 javascript 执行的这篇文章。

http://blog.lavoie.sl/2013/12/optimizing-page-loads-by-reducing-javascript.html

于 2013-12-07T06:05:03.803 回答