如何优化javascript/jquery代码以提高其性能? [英] How to optimize javascript/jquery code to speed up it's performance?
问题描述
在我的一个Web项目中，我使用了大量的javascript/jQuery代码，这在浏览器(Windows 7 x64)上非常慢，尤其是在IE上.
On one of my web projects, I use a lot of javascript/jQuery code, which is pretty slow on browsers (Windows 7 x64), especially on IE.
我仅在主页上同时使用3个Ajax请求.
I use 3 Ajax requests at the same time only on Home page.
在搜索"页面上，我还使用了ajax请求，该请求在滚动事件，任何搜索标签"(简单锚标签)单击事件等上触发，这通常会使数据加载非常缓慢.
On Search page, I also use ajax requests, which are fired on scroll event, on any 'search tag' (simple anchor tag) click event and etc. which in general is making data loading very slow.
我使用jQuery插件，例如Anythingslider，jquery coockies插件，Raty(评级插件)，Tipsuy，jQuery coreUISelect，jScrollPane，鼠标滚轮等.我缩小并结合在jquery.plugins.js中的所有这些第三方插件.文件，几乎是80KB.
I use jQuery plugins such as, Anythingslider, jquery coockies plugin, Raty (rating plugin), Tipsuy, jQuery coreUISelect, jScrollPane, mouse wheel and etc. All those 3rd party plugins I have minified and combined in jquery.plugins.js file, which is almost 80KB.
我使用jQuery选择了很多DOM元素.例如，我使用以下代码:
I select a lot of DOM elements with jQuery. For example I use the following code:
$("#element")
代替:
document.getElementById('element');
我还有一个很大的CSS文件，超过5000行，因为我已将所有第三方jQuery插件的css文件组合到一个文件中，以进行缓存和减少HTTP请求.
I also have one big CSS file, which is more than 5 000 lines, because I have combined all 3rd party jQuery plugins's css files into one file, for caching and less HTTP requests.
-
好吧，我想知道如何做才能优化代码以提高性能并加快网页加载速度?
Well, I wonder, what can I do to optimize my code for better performance and speeding up web page load?
我可以使用哪种工具来调试我的JS代码?我忘了提一下，当我在打开了Firebug或Chrome本机开发人员工具的Google Chrome或Firefox中刷新页面时，这种情况下的页面加载速度也非常慢.有时Firefox甚至被破坏了.
What kind of tools can I use to debug and my JS code? I forgot to mention that, when I refresh page in Google Chrome or Firefox with firebug or Chrome native developer tools opened, the page in that case loads also very slow. Sometimes the Firefox is even crushed.
使用原始js选择DOM元素是否可以为我提供一种更好，更快的解析文档的方法?还是我应该离开，jQuery选择?谈论的是大约50个元素.
Will selecting of DOM elements with raw js give me a better and faster way to parse the document? Or should I leave, the jQuery selecting? Talk about is about 50 elements.
我应该分开，然后缩小外部插件(例如Anythingslider)吗?还是当我拥有所有功能"的js文件时更好?
Should I separate and after that minify external plugins, such as Anythingslider? Or is it better when I have 'all in one' js file?
是否还可以将jQuery插件的CSS代码与主style.css分开?因为即使将鼠标悬停在元素上并影响css文件中的:hover状态，也相当慢.
Is it better to also separate jQuery plugins's css code from main style.css? Because even hovering on element and affecting the :hover state from css file, is pretty slow.
伙计们，我真的很指望你.
Well guys, I'm really counting on you.
我整夜都在搜寻有关问题的答案，非常希望在这里找到答案.
I've been googling all night to find answers on my questions and really hope to find it here.
谢谢.
推荐答案
1)缩小
2)所有浏览器均内置调试工具
2) all the browsers come with built in debugging tools
3)通过将引用存储在变量中来减少对dom的访问，不要两次查找相同的元素
3) reduce access to the dom by storing references in variables, don't look up the same element twice
4)分离并使用众所周知的CDN
4) separate and use a well known cdn
5)分开只是因为它更易于管理
5) separate just cos its easier to manage
更多jQuery提示: jquery-performance-rules 和此处: improve-your-jquery-25-excellent -提示.
More jQuery tips here : jquery-performance-rules and here : improve-your-jquery-25-excellent-tips.
确保在不进行磁盘查找的情况下缓存了所有静态资源
Make sure all your static resources are cached with no disk lookup
此库非常酷
这篇关于如何优化javascript/jquery代码以提高其性能?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
