我有一个大问题。我使用jQuery创建了网站，但运行速度非常慢。在手机上它太可怕了！我不知道，出了什么问题......有人可以帮助我吗？
链接尚未运行，因为我希望在此布局上使用CMS，但在我想要优化这些脚本之前。
这是测试网站： http://wm.pawelgorastudio.pl
以下是脚本：
<script type="text/javascript" src="js/css3-mediaqueries.js"></script>
<script type="text/javascript" src="js/picturefill.js"></script>
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/jquery.color.plus-names-2.1.1.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
<!-- Magnific Popup core JS file -->
<script src="js/jquery.magnific-popup.min.js"></script>
<!-- jQuery carouFredSel JS file -->
<script src="js/jquery.carouFredSel-6.2.1-packed.js"></script>
<!--Adobe TypeKit fonts - https://typekit.com-->
<script type="text/javascript" src="//use.typekit.net/eiz5mrm.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- Preloader -->
<script type='text/javascript'>
$(window).load(function() {
$(".preloader").delay(100).fadeOut(1000);
})
</script>
<!-- Image viewer -->
<script type='text/javascript'>
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});
</script>
<!-- All div links engine for Internet Explorer -->
<script type='text/javascript'>
$(document).ready(function(){
$(".mainmenu1 a, .mainmenu2 a, .rowclients a").click(function(event) {
event.preventDefault(); window.location = $(this).attr("href");
});
});
</script>
<!-- Top menu links hover animation -->
<script type='text/javascript'>
$(document).ready(function(){
$(".topmenu2 .topContact a").hover(
function() {
$(this).stop().animate({"color": "#B2B2B2"}, 250);
},
function() {
$(this).stop().animate({"color": "#666666"}, 250);
}
);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".topmenu2 #ENDesk a, .topmenu2 #ENMobile a").hover(
function() {
$(this).stop().animate({"color": "#FF6400"}, 250);
},
function() {
$(this).stop().animate({"color": "#CCCCCC"}, 250);
}
);
});
</script>
<!-- Main menu links animation -->
<script type='text/javascript'>
$(document).ready(function anime(){
setInterval(function(){
$(".A1b").delay(0).animate({"opacity": "1"}, 500, "swing");
$(".A1b").animate({"opacity": "0"}, 1000, "swing");
$(".A3b").delay(250).animate({"opacity": "1"}, 500, "swing");
$(".A3b").animate({"opacity": "0"}, 1000, "swing");
$(".A4b").delay(500).animate({"opacity": "1"}, 500, "swing");
$(".A4b").animate({"opacity": "0"}, 1000, "swing");
$(".A6b").delay(750).animate({"opacity": "1"}, 500, "swing");
$(".A6b").animate({"opacity": "0"}, 1000, "swing");
$(".A8b").delay(1000).animate({"opacity": "1"}, 500, "swing");
$(".A8b").animate({"opacity": "0"}, 1000, "swing");
$(".A9b").delay(1250).animate({"opacity": "1"}, 500, "swing");
$(".A9b").animate({"opacity": "0"}, 1000, "swing");
$(".anime-2img").delay(1500).animate({left: "195px", top: "100px"}, 700, "swing");
$(".anime-5img").delay(1500).animate({left: "181px", top: "97px"}, 700, "swing");
$(".anime-7img").delay(1500).animate({left: "1px", top: "7px"}, 700, "swing");
$(".anime-3img").delay(1600).animate({left: "80px"}, 500, "swing");
$(".anime-3txt").delay(1600).animate({left: "80px"}, 500, "swing");
$(".anime-4img").delay(1600).animate({top: "30px"}, 500, "swing");
$(".anime-4txt").delay(1600).animate({top: "30px"}, 500, "swing");
$(".A1b").delay(3000).animate({"opacity": "1"}, 500, "swing");
$(".A1b").animate({"opacity": "0"}, 1000, "swing");
$(".A3b").delay(3250).animate({"opacity": "1"}, 500, "swing");
$(".A3b").animate({"opacity": "0"}, 1000, "swing");
$(".A4b").delay(3500).animate({"opacity": "1"}, 500, "swing");
$(".A4b").animate({"opacity": "0"}, 1000, "swing");
$(".A6b").delay(3750).animate({"opacity": "1"}, 500, "swing");
$(".A6b").animate({"opacity": "0"}, 1000, "swing");
$(".A8b").delay(4000).animate({"opacity": "1"}, 500, "swing");
$(".A8b").animate({"opacity": "0"}, 1000, "swing");
$(".A9b").delay(4250).animate({"opacity": "1"}, 500, "swing");
$(".A9b").animate({"opacity": "0"}, 1000, "swing");
$(".anime-2img").delay(4500).animate({left: "51px", top: "12px"}, 700, "swing");
$(".anime-5img").delay(4500).animate({left: "1px", top: "7px"}, 700, "swing");
$(".anime-7img").delay(4500).animate({left: "181px", top: "97px"}, 700, "swing");
$(".anime-3img").delay(4600).animate({left: "100px"}, 500, "swing");
$(".anime-3txt").delay(4600).animate({left: "100px"}, 500, "swing");
$(".anime-4img").delay(4600).animate({top: "43px"}, 500, "swing");
$(".anime-4txt").delay(4600).animate({top: "43px"}, 500, "swing");
}, 10000);
});
</script>
<!-- Social links hover animation and links engine for Internet Explorer -->
<script type='text/javascript'>
$(document).ready(function(){
$(".B1a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 500);
},
function() {
$(this).stop().animate({"opacity": "1"}, 500);
}
);
$(".fadehover a").click(function(event) {
event.preventDefault(); window.open($(this).attr("href"));
});
});
</script>
<!-- Submenu links hover animation and engine for mobile menu -->
<script type='text/javascript'>
$(document).ready(function(){
$(".submenu#MobileMenu").fadeOut(0);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#EnterMenu").hover(
function() {
$(".submenu#Mobile p").stop().animate({"color": "#FFFFFF"}, 250);
$(".M1a").stop().animate({"opacity": "0"}, 250);
},
function() {
$(".submenu#Mobile p").stop().animate({"color": "#333333"}, 250);
$(".M1a").stop().animate({"opacity": "1"}, 250);
}
);
$("#EnterMenu").click(function(event) {
event.preventDefault();
$(".submenu#MobileMenu").fadeIn(250);
$('.submenu#MobileMenu .submenuList a').each(function(i) {
var margins = 25 - ($(this).height()/2) + "px";
$(this).css({"margin-top": margins, "margin-bottom": margins});
});
});
});
</script>
<script type='text/javascript'>
$(window).load(function() {
$('.submenu#DeskMenu .submenuList').each(function(i) {
var margins = 25 - ($(this).height()/2) + "px";
$(this).css({"margin-top": margins, "margin-bottom": margins});
});
});
$(window).resize(function() {
$('.submenu#DeskMenu .submenuList, .submenu#MobileMenu .submenuList a').each(function(i) {
var margins = 25 - ($(this).height()/2) + "px";
$(this).css({"margin-top": margins, "margin-bottom": margins});
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".submenu a").hover(
function() {
$(this).stop().animate({"color": "#FFFFFF"}, 250);
},
function() {
$(this).stop().animate({"color": "#333333"}, 250);
}
);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".submenuList p").hover(
function() {
$(this).stop().animate({"color": "#FFFFFF"}, 250);
},
function() {
$(this).stop().animate({"color": "#333333"}, 250);
}
);
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#CloseMenu").hover(
function() {
$("#Close p").stop().animate({"color": "#FFFFFF"}, 250);
$(".C1a").stop().animate({"opacity": "0"}, 250);
},
function() {
$("#Close p").stop().animate({"color": "#333333"}, 250);
$(".C1a").stop().animate({"opacity": "1"}, 250);
}
);
$("#CloseMenu").click(function(event) {
event.preventDefault();
$(".submenu#MobileMenu").fadeOut(250);
});
});
</script>
<!-- Clients list animation -->
<script type='text/javascript'>
$(window).load(function() {
$('.clientsImg').each(function(i) {
var clients = $('.clientsImg');
var index = clients.index(this);
var next = clients[index+1];
var prev = clients[index-1];
$(this).css("top", 27 - ($(this).height()/2) + "px");
if (i == 0) {
$(this).css("left", 0);
}
else {
$(this).css("left", $(prev).width() + $(prev).position().left + 40 + "px");
}
window.TotalWidth = 0;
$('.clientsList').find('.clientsImg').each(function() {
window.TotalWidth += $(this).width() + 40;
});
$('.clientsList').width(TotalWidth);
});
(function fly() {
$('.clientsImg').animate({left: "-=1px"}, 10, "linear", function () {
if ($(this).position().left <= 0 - $(this).width()) {
$(this).css("left", "+=" + TotalWidth + "px");
}
fly();
});
}());
});
</script>
<!-- Footer list hover animation -->
<script type='text/javascript'>
$(document).ready(function(){
$(".rowfooter a").hover(
function() {
$(this).stop().animate({"color": "#4C4C4C"}, 250);
},
function() {
$(this).stop().animate({"color": "#999999"}, 250);
}
);
});
</script>
<!-- Cookies Info box animation engine for display it and set and read cookies engine -->
<script type='text/javascript'>
$(window).load(function() {
var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
$(".cookiesInfo").css({opacity: 0, bottom: cookieHeight});
if ($.cookie("cookieBox") != 1) {
var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
$(".cookiesInfo").delay(1100).animate({opacity: 1, bottom: 0}, 1000, "swing");
}
})
</script>
<script type='text/javascript'>
$(document).ready(function(){
$(".C2a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 500);
},
function() {
$(this).stop().animate({"opacity": "1"}, 500);
}
);
$(".closecookiesInfo a").click(function(event) {
event.preventDefault();
$.cookie("cookieBox", 1);
var cookieHeight = "-" + $(".cookiesInfo").height() + "px";
$(".cookiesInfo").animate({opacity: 0, bottom: cookieHeight}, 1000, "swing");
});
});
</script>
答案 0 :(得分：0)
使用iphone 3g / s时你必须考虑到它们的功能与新型号相比真的很慢，如果你有时间this article它有一些关于这个主题的固定点，并且javascript被解释得更慢.. < / p>
即使是网站，它也是＆＃34;小＆＃34;只有64 request和252kb的转移，但仍然在移动设备上表现不佳，所以我唯一想到的就是压缩文件将所有内容放在一起，通过使用带有css的文本或{{3}来减少图像}。因此请求较小也对性能速度不重要，但处理移动设备事件非常好，如果您知道设备是移动设备或具有触摸功能，请尽量避免使用click。您可以使用sprites或jQuery mobile来处理此类事件，例如tap或double tap。
同时避免使用多个：
$(document).ready(function() {
});
和
$(document).load(function() {
});
您可以查看JQT以供参考。