如何优化javascript/jquery代码以加快其性能?

Lad*_*dze 7 javascript performance jquery

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

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

在"搜索"页面上,我还使用了对滚动事件触发的ajax请求,任何"搜索标记"(简单锚标记)点击事件等等,这通常会使数据加载速度非常慢.

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

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

$("#element")
Run Code Online (Sandbox Code Playgroud)

代替:

document.getElementById('element');
Run Code Online (Sandbox Code Playgroud)

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

  1. 好吧,我想知道,我该怎么做才能优化我的代码以获得更好的性能并加快网页加载?

  2. 我可以用什么样的工具来调试我的JS代码?我忘了提到,当我使用firebug或Chrome本机开发人员工具刷新Google Chrome或Firefox中的页面时,该情况下的页面加载速度也非常慢.有时Firefox甚至被压垮了.

  3. 使用原始js选择DOM元素会给我一个更好,更快的解析文档的方法吗?或者我应该离开,jQuery选择?谈论约50个元素.

  4. 我应该分开并在此之后缩小外部插件,例如Anythingslider?或者当我拥有'all in one'js文件时它会更好吗?

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

好吧,伙计们,我真的指望着你.

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

谢谢.

Nim*_*sky 6

1)缩小它

2)所有浏览器都带有内置的调试工具

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

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

5)将cos分开,更容易管理

这里有更多jQuery技巧:jquery-performance-rules和这里:better-your-jquery-25-excellent-tips.

确保缓存所有静态资源而不进行磁盘查找

这个库非常酷


Nik*_*ain 2

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

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

许多jquery 性能规则仍然适用,

另请参阅此处jquery-proven-performance-tips-tricks