我的jQuery运行有点慢.我该如何加快速度
My jQuery is running a bit slow. How do I speed it up?
我能做些什么来加快速度吗?或者你有没有注意到新手犯的错误?
我注意到我重复了很多变量。这就是为什么我不必写出每一行,但我不确定是否有更好的解决方案?
这个问题通常发生在不戴标签后切换回标签时。点击外环需要几秒钟才能做出响应,但之后就没事了。就像有剩余的代码在运行一样,它需要重写吗?我不确定,但我希望有经验的用户能够仔细阅读我的代码,看看可以改进什么。
这是一个正在工作的jsFiddlehttp://jsfiddle.net/eA6x6/1/,下面是我的全部javascript代码。
jQuery(document).ready(function() {
var timeoutHandle;
// hide stuff
var hideServices = function() {
jQuery(".services-inner").css({"opacity": "0"});
jQuery(".insignia-inner").css({"opacity": "0"});
jQuery(".insignia-inner-text").css({"opacity": "0"});
};
var hideAll = function() {
jQuery(".military-kit-inner").css({"opacity": "0"});
jQuery(".property-inner").css({"opacity": "0"});
jQuery(".home-contents-inner").css({"opacity": "0"});
jQuery(".travel-inner").css({"opacity": "0"});
jQuery(".events-inner").css({"opacity": "0"});
jQuery(".adventurous-training-inner").css({"opacity": "0"});
jQuery(".personal-injury-inner").css({"opacity": "0"});
jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
jQuery(".sports-and-tours-inner").css({"opacity": "0"});
jQuery(".winter-sports-inner").css({"opacity": "0"});
jQuery(".now-available").css({"opacity": "0"});
jQuery(".now-available-background").css({"opacity": "0"});
jQuery(".launched-shortly").css({"opacity": "0"});
jQuery(".launched-shortly-background").css({"opacity": "0"});
};
var showServicesDelay = function() {
timeoutHandle = setTimeout(function () {
jQuery(".services-inner").css({"opacity": "0.5"});
jQuery(".insignia-inner").css({"opacity": "1"});
jQuery(".insignia-inner-text").css({"opacity": "1"});
hideAll();
}, 5000);
};
// show messages
var showLaunchedShortly = function() {
jQuery(".launched-shortly").css({"opacity": "1"});
jQuery(".launched-shortly-background").css({"opacity": "1"});
};
var showNowAvailable = function() {
jQuery(".now-available").css({"opacity": "1"});
jQuery(".now-available-background").css({"opacity": "1"});
};
// show services
var showMilitaryKit = function() {
jQuery(".military-kit-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showProperty = function() {
jQuery(".property-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showHomeContents = function() {
jQuery(".home-contents-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showTravel = function() {
jQuery(".travel-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showEvents = function() {
jQuery(".events-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showAdventurousTraining = function() {
jQuery(".adventurous-training-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showPersonalInjury = function() {
jQuery(".personal-injury-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showChallengePursuits = function() {
jQuery(".challenge-pursuits-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showSportsAndTours = function() {
jQuery(".sports-and-tours-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
var showWinterSports = function() {
jQuery(".winter-sports-inner").css({"opacity": "1"});
clearTimeout(timeoutHandle);
};
// military kit
jQuery(".military-kit-hover").click(function() {
hideAll();
hideServices();
showMilitaryKit();
showServicesDelay();
showNowAvailable();
});
// property
jQuery(".property-hover").click(function() {
hideAll();
hideServices();
showProperty();
showServicesDelay();
showNowAvailable();
});
// home contents
jQuery(".home-contents-hover").click(function() {
hideAll();
hideServices();
showHomeContents();
showServicesDelay();
showNowAvailable();
});
// travel
jQuery(".travel-hover").click(function() {
hideAll();
hideServices();
showTravel();
showServicesDelay();
showNowAvailable();
});
// events
jQuery(".events-hover").click(function() {
hideAll();
hideServices();
showEvents();
showServicesDelay();
showLaunchedShortly();
});
// adventurous training
jQuery(".adventurous-training-hover").click(function() {
hideAll();
hideServices();
showAdventurousTraining();
showServicesDelay();
showLaunchedShortly();
});
// personal injury
jQuery(".personal-injury-hover").click(function() {
hideAll();
hideServices();
showPersonalInjury();
showServicesDelay();
showNowAvailable();
});
// challenge pursuits
jQuery(".challenge-pursuits-hover").click(function() {
hideAll();
hideServices();
showChallengePursuits();
showServicesDelay();
showNowAvailable();
});
// sports and tours
jQuery(".sports-and-tours-hover").click(function() {
hideAll();
hideServices();
showSportsAndTours();
showServicesDelay();
showLaunchedShortly();
});
// winter sports
jQuery(".winter-sports-hover").click(function() {
hideAll();
hideServices();
showWinterSports();
showServicesDelay();
showLaunchedShortly();
});
});
加速jQuery的一种方法是缓存DOM元素,以减少多次选择同一元素的次数,这涉及到每次都要在DOM中搜索该元素-这可能很慢,资源也很重,具体取决于DOM的大小或复杂程度。
基于代码的示例:
var insigniaInner = jQuery('.insignia-inner'); //cache the div to a variable
...
//use the variable in your code instead of jQuery('.insignia-inner');
insigniaInner.css({"opacity":0});
如果使用大量选择器,您应该会看到速度显著提高。
编辑:另一种加速代码的方法是给所有想要隐藏的元素一个公共类,所以你只需要做一些类似的事情:
jQuery('.hide').hide();
这也将减少选择器调用。另一种方法是以父元素为目标,淡化或隐藏它,而不是单独的元素。
我猜图形停顿是由于您同时"隐藏所有"然后"显示一个"(动画通常是异步的)。我不认为代码运行缓慢,这是一个图形冲突。在hideAll方法和hideServices方法中添加一个参数"exceptThisOne",并使它们成为case语句。如何处理冲突取决于你自己。
你可以做很多事情,但一个好的开始是确保你在生产中使用自定义的.min版本的jquery。另一种是将其中一些结合起来,例如:
jQuery(".services-inner").css({"opacity": "0"});
jQuery(".insignia-inner").css({"opacity": "0"});
成为
jQuery(".insignia-inner, .services-inner").css({"opacity": "0"});
Jquery docs:Multiple Selector("选择器1、选择器2、选择器N")http://api.jquery.com/multiple-selector/
对于初学者来说,只要jQuery不与任何其他库冲突,就可以用($)替换jQuery,从而节省一点下载时间。
但是,您也可以通过替换来同时分配所有内容:
var hideAll = function() {
jQuery(".military-kit-inner").css({"opacity": "0"});
jQuery(".property-inner").css({"opacity": "0"});
jQuery(".home-contents-inner").css({"opacity": "0"});
jQuery(".travel-inner").css({"opacity": "0"});
jQuery(".events-inner").css({"opacity": "0"});
jQuery(".adventurous-training-inner").css({"opacity": "0"});
jQuery(".personal-injury-inner").css({"opacity": "0"});
jQuery(".challenge-pursuits-inner").css({"opacity": "0"});
jQuery(".sports-and-tours-inner").css({"opacity": "0"});
jQuery(".winter-sports-inner").css({"opacity": "0"});
jQuery(".now-available").css({"opacity": "0"});
jQuery(".now-available-background").css({"opacity": "0"});
jQuery(".launched-shortly").css({"opacity": "0"});
jQuery(".launched-shortly-background").css({"opacity": "0"});
};
比如:
var hideAll = function() {
$('[class $="-inner"]').css({"opacity": "0"});
$(':not[class $="-inner"]').css({"opacity": "0"});
//or, replace the line above with
$('[class ^="now-available"]').css({"opacity": "0"});
$('[class ^="launched-shortly"]').css({"opacity": "0"});
};
这只是一个例子,但逻辑可能不是你想要的(基本上,在这个例子中,所有有一个类的东西的不透明度都为0)。
- 使用谷歌地图上的 80,000 个标记加快页面速度
- 是否可以加快向DOM添加一组元素的速度
- 通过压缩大图像来加快网页速度
- 当我们使用JavaScript点击下一个或上一个按钮时,图像幻灯片播放计时器的速度会加快
- 我的jQuery运行有点慢.我该如何加快速度
- 加快谷歌图表渲染或替代方案的速度
- 通过书签加快加载外部javascript文件的速度
- 带有间隔的 Jquery 滑块在屏幕分辨率更改时加快速度
- 拥有多个 HTML 页面通常使用的单独 javascript 文件是否会加快页面加载速度
- 如何在HTML / JavaScript中加快本地文件系统中大图像的显示速度
- 这个预加载器工作吗?它不用于显示状态,只是加快了以后可能的图像加载速度
- 加快图像背景的页面加载速度
- 如何加快从Angular/Mvc.net加载图像的速度
- 如何加快具有许多数据库请求的大型网页的速度
- 使用自动填充表单控件(自动完成属性),加快表单填充速度
- 有哪些方法可以加快jquery/javascript中img交换的速度
- 调整窗口大小后,画布动画速度加快
- 如何加快jquery/php/ajax聊天室的速度
- 带有css3和html5的简单窗口系统正在缓慢渲染.如何加快速度
- setTimeout使用多个选项卡加快速度