Javascript 为什么我的网页组件加载缓慢？
这是我正在制作的益智游戏的网页： 如果您查看它，不断刷新页面，则需要一两秒钟才能加载所有组件 我以为是ajax加载速度慢，但我不这么认为。有人请帮忙！谢谢 我的javascript代码：Javascript 为什么我的网页组件加载缓慢？,javascript,Javascript,这是我正在制作的益智游戏的网页： 如果您查看它，不断刷新页面，则需要一两秒钟才能加载所有组件 我以为是ajax加载速度慢，但我不这么认为。有人请帮忙！谢谢 我的javascript代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes /smoothness/jquery-ui.css" />
<style>
#puzzle {
width: 450px;
height: 450px;
outline: 4px solid black;
padding: 0px;
-webkit-padding-start: 0px;
margin-left:440px;
margin-right:auto;
margin-top:-205px;
}
.helper {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0px;
}
.piece {
float: left;
display: block;
width: 148px;
height: 148px;
border: 1px solid black;
margin: 0px;
background-size: 450px 450px;
background-repeat:no-repeat;
}
.piece span {
display:inline-block;
border:1px solid #FFFFFF;
color: #B80000;
display: none;
}
.ui-dialog .ui-dialog-title {
text-align: center;
width: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
var plant = "";
$.when($.ajax({"url":"http://botanicalapp.com/api/v1/plants/?photo=true"}))
.done(function(fullData){
(function(){
var rand = Math.floor(Math.random()*fullData.length)
plant = fullData[rand].plant.image_default.url;
})()
startGame();
});
function startGame() {
$("#puzzle div").css({'background-image':'url('+ plant +')'});
$("#helper").attr("src",plant);
var puzzle = $("#puzzle");
var pieces = $("#puzzle div");
pieces.sort(function (a, b) {
var temp = parseInt(Math.random() * 100);
var isOddOrEven = temp % 2;
var isPosOrNeg = temp > 5 ? 1 : -1;
return (isOddOrEven * isPosOrNeg);
}).appendTo(puzzle);
var checkDone = false;
var timer;
var secs = 0;
var mins = 0;
var millsecs = 0;
var timeString = document.getElementById("time");
timeString.innerHTML = "00:00:00";
function update(){
if(millsecs > 98) {
secs++;
millsecs = 0;
if(secs > 59){
mins++;
secs = 0;
}
}
else {
millsecs++;
}
if((millsecs<10) && (secs<10) && (mins<10)) {
timeString.innerHTML = '0' + mins + ':0' + secs + ':0' + millsecs;
}
else if ((millsecs<10) && (secs<10)) {
timeString.innerHTML = mins + ':0' + secs + ':0' + millsecs;
}
else if ((millsecs<10) && (mins<10)) {
timeString.innerHTML = '0' + mins + ':' + secs + ':0' + millsecs;
}
else if((secs<10) && (mins<10)){
timeString.innerHTML = '0' + mins + ':0' + secs + ':' + millsecs;
}
else if (millsecs<10) {
timeString.innerHTML = mins + ':' + secs + ':0' + millsecs;
}
else if (secs<10){
timeString.innerHTML = mins + ':0' + secs + ':' + millsecs;
}
else if (mins<10) {
timeString.innerHTML = '0' + mins + ':' + secs + ':' + millsecs;
}
else {
timeString.innerHTML = mins + ':' + secs + ':' + millsecs;
}
}
function start(){
timer = setInterval(function() {update()}, 10);
}
document.getElementById("instr").onclick=function(){ $("#instruct").dialog("open"); };
start();
initSwap();
$("#final").dialog({
autoOpen: false,
modal: true,
width: 900,
resizable: false,
height: 540,
position: [250,75],
dialogClass: "fixed-dialog",
title: "Congratulations Puzzle Solved!",
draggable: false
});
$("#instruct").dialog({
autoOpen: false,
modal: true,
width: 700,
resizable: false,
height: 250,
position: [325,75],
dialogClass: "fixed-dialog",
draggable: false,
title: "Puzzle Instructions",
open: function(ev, ui) { clearTimeout(timer); },
close: function(ev, ui) { if (!checkDone) { start(); } }
});
function initSwap() {
initDroppable($("#puzzle div"));
initDraggable($("#puzzle div"));
}
function initDraggable($elements) {
$elements.draggable({
appendTo: "body",
helper: "clone",
cursor: "move",
revert: "invalid"
});
}
function initDroppable($elements) {
$elements.droppable({
activeClass: "ui-state-default",
hoverClass: "ui-drop-hover",
accept: ":not(.ui-sortable-helper)",
over: function (event, ui) {
var $this = $(this);
},
drop: function (event, ui) {
var $this = $(this);
var linew1 = $(this).after(ui.draggable.clone());
var linew2 = $(ui.draggable).after($(this).clone());
$(ui.draggable).remove();
$(this).remove();
initSwap();
var finished = "1,2,3,4,5,6,7,8,9";
var started = '';
$("#puzzle div").each(function(){
var image = $(this).attr("id");
started += image.replace("recordArr_","")+",";
});
started = started.substr(0,(started.length)-1);
if(started == finished){
checkDone = true;
clearTimeout(timer);
$("#thePlant").attr("src",plant);
$("#final").dialog("open");
}
}
});
}
}
});
</script>
</head>
<body>
<big><big><big><div id="time"></div></big></big></big>
<div id="help"><image id="helper" width="200", height="200"/></div>
<div id="final"><img id="thePlant" width="450", height="450" <p align="top"> Plant Information! </p></div>
<div id="instruct"><p> To begin playing a picture will appear that has been scrambled.
Your job is to drag each piece into the location you think it should be.
When you move all the pieces into their correct locations a window will appearthat will tell you
more about that plant and where to find it when you visit the Botanical Gardens.
If you need help, click on the hints button and numbers will appear in the corners
of the pictures to show you what order the pieces should be in. Good Luck!</p></div>
<div id="maindiv">
<div id="puzzle">
<div id="1" class="piece" style="background-position: -000px -000px;"><b><big><big><span>1</span></big></big></b></div>
<div id="6" class="piece" style="background-position: -301px -151px;"><b><big><big><span>6</span></big></b></big></div>
<div id="9" class="piece" style="background-position: -301px -301px;"><b><big><big><span>9</span></big></big></b></div>
<div id="4" class="piece" style="background-position: -000px -151px;"><b><big><big><span>4</span></big></big></b></div>
<div id="3" class="piece" style="background-position: -301px -000px;"><b><big><big><span>3</span></big></big></b></div>
<div id="7" class="piece" style="background-position: -000px -301px;"><b><big><big><span>7</span></big></big></b></div>
<div id="2" class="piece" style="background-position: -151px -000px;"><b><big><big><span>2</span></big></big></b></div>
<div id="5" class="piece" style="background-position: -151px -151px;"><b><big><big><span>5</span></big></big></b></div>
<div id="8" class="piece" style="background-position: -151px -301px;"><b><big><big><span>8</span></big></big></b></div>
</div>
</div>
无标题文件
#谜题{
宽度：450px；
高度：450px；
外形：4倍纯黑；
填充：0px；
-webkit填充开始：0px；
左边距：440px；
右边距：自动；
利润上限：-205px；
}
.助手{
宽度：200px；
高度：200px；
边框：1px纯黑；
边际：0px；
}
.件{
浮动：左；
显示：块；
宽度：148px；
高度：148px；
边框：1px纯黑；
边际：0px；
背景尺寸：450px 450px；
背景重复：无重复；
}
.件跨{
显示：内联块；
边框：1px实心#FFFFFF；
颜色：#B80000；
显示：无；
}
.ui对话框.ui对话框标题{
文本对齐：居中；
宽度：100%；
}
$（函数（）{
var plant=“”；
$.when（$.ajax（{“url”：”http://botanicalapp.com/api/v1/plants/?photo=true"}))
.done（功能（完整数据）{
（功能（）{
var rand=Math.floor（Math.random（）*fullData.length）
plant=fullData[rand].plant.image\u default.url；
})()
startGame（）；
});
函数startName（）{
$（“#拼图div”）.css（{'background-image'：'url（'+plant+'））}）；
$（“#helper”）.attr（“src”，工厂）；
var拼图=$（“#拼图”）；
var碎片=$（“#拼图分割”）；
工件排序（函数（a，b）{
var temp=parseInt（Math.random（）*100）；
var isOddOrEven=temp%2；
变量IsPosoreng=温度>5？1:-1；
返回（isOddOrEven*isposoreng）；
}).附录（拼图）；
var checkDone=false；
无功定时器；
var-secs=0；
var-mins=0；
var millsecs=0；
var timeString=document.getElementById（“时间”）；
timeString.innerHTML=“00:00:00”；
函数更新（）{
如果（毫秒>98）{
secs++；
millsecs=0；
如果（秒>59）{
mins++；
秒=0；
}
}
否则{
millsecs++；
}
如果（（millsecs使用Firebug，您可以在网络选项卡中看到哪个部分速度慢
您应该在单独的文件中提取javascript和css，然后对它们进行压缩。正如其他用户建议的那样-如果您从internet加载第三方内容，您必须记住，每次刷新页面时，下载时间可能会有所不同
无论如何，我的建议是将自定义js代码移动到单独的文件中，并在完成开发过程后将其缩小
最重要的是：将该文件放在
标记之前
这样做的原因是页面头部的脚本会阻塞浏览器。在下载并解析所有脚本之前，浏览器必须停止处理网站。
stackoverflow上有关于这个问题的详细讨论，您应该仔细阅读。的get请求大约需要2-3.5秒，因此您可能无法更快地处理它
我建议您将包含站点javascript的脚本标记移到页面底部。它不必驻留在head中，也不必在body的结束标记允许页面上的其他外部组件在加载脚本之前尽快下载之前将其放在正确的位置。似乎没有什么能让它变得更好。我赢了dering.有没有一种方法可以像一个看起来更平滑的加载屏幕那样覆盖它？我在查看js微调器，但无法使其正常工作。但这可以做到吗？我解决了这个难题，但没有得到信息。ma信息在哪里？：）对图片的请求需要时间。看起来植物学家app.com页面的整体响应时间很慢。哈哈，还是要加上：）。嗯，我想……那我就无能为力了，嗯