在我的一个网络项目中,我使用了大量的 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 请求。
好吧,我想知道,我可以做些什么来优化我的代码以获得更好的性能并加快网页加载速度?
我可以使用什么样的工具来调试我的 JS 代码?我忘了提一下,当我在 Google Chrome 或 Firefox 中刷新页面并打开 firebug 或 Chrome 原生开发工具时,在这种情况下页面加载速度也很慢。有时 Firefox 甚至被压垮了。
使用原始 js 选择 DOM 元素会给我一种更好更快的方式来解析文档吗?还是我应该离开,jQuery 选择?谈论的是大约50个元素。
我应该分开并在之后缩小外部插件,例如Anythingslider吗?或者当我拥有“一体式”js文件时会更好吗?
将 jQuery 插件的 css 代码与 main style.css 分开会更好吗?因为即使悬停在元素上并影响 css 文件中的 :hover 状态,也非常慢。
好吧,伙计们,我真的很指望你们。
我一直在谷歌上搜索我的问题的答案,并真的希望在这里找到它。
谢谢。