Javascript 为什么从外部url加载div非常慢？

我制作了两个按钮来打开两个不同的php页面

当我单击其中任何一个按钮时，它会将相应的url加载到div中。但是当我单击另一个按钮时，加载另一个页面的速度会很慢

在按钮之间切换非常慢。有时看起来好像按钮甚至不起作用..或者被吊死了

<div id="ButtonNav" style="width:1487px;margin:10px auto 0;">
<button class="tablink" onclick="openPage('url1.php', this, '#f9bd48')" id="defaultOpen">Admin</button>
<button class="tablink" onclick="openPage('url2.php', this, '#f9bd48')">DB management</button>

<div id="myContent"></div>
</div>

管理
数据库管理

java脚本函数就是这样

function openPage(pageName,elmnt,color) {
$("#myContent").load(pageName, function(){
});

tablinks = document.getElementsByClassName("tablink");

for (i = 0; i < tablinks.length; i++) {
    tablinks[i].style.backgroundColor = "";
}

document.getElementById("myContent").style.display = "block";
document.getElementById("myContent").style.backgroundColor = color;
elmnt.style.backgroundColor = color;
}

函数openPage（页面名、elmnt、颜色）{
$（“#myContent”）.load（页面名称，函数（）{
});
tablinks=document.getElementsByClassName（“tablink”）；
对于（i=0；i

任何猜测或帮助，我应该做得更好，以获得最佳性能

---

提前感谢

这里出现的第一个错误我们获取的是相同的响应，每次用户单击按钮时，最好在用户单击之前获取数据，并根据用户操作添加数据 例如：

var内容={
“url1.php”：{
resp:null
},
“url2.php”：{
resp:null
}
};
$url1=$.get（“url1.php”）.done（函数（resp）{
内容[“url1.php”][“resp”]=resp；
});
$url2=$.get（“url2.php”）.done（函数（resp）{
内容[“url2.php”][“resp”]=resp；
});
内容[“url1.php”][“xhr”]=$url1；
内容[“url2.php”][“xhr”]=$url2；
函数addHtml（elmnt，颜色）{
$（“#myContent”）.html（内容[pageName].resp）；
tablinks=document.getElementsByClassName（“tablink”）；
对于（i=0；i

这里发生的第一个错误是我们获取相同的响应，每次用户单击按钮时，最好在用户单击之前获取数据，并根据用户操作添加数据 例如：

var内容={
“url1.php”：{
resp:null
},
“url2.php”：{
resp:null
}
};
$url1=$.get（“url1.php”）.done（函数（resp）{
内容[“url1.php”][“resp”]=resp；
});
$url2=$.get（“url2.php”）.done（函数（resp）{
内容[“url2.php”][“resp”]=resp；
});
内容[“url1.php”][“xhr”]=$url1；
内容[“url2.php”][“xhr”]=$url2；
函数addHtml（elmnt，颜色）{
$（“#myContent”）.html（内容[pageName].resp）；
tablinks=document.getElementsByClassName（“tablink”）；
对于（i=0；i

当实际的PHP页面加载缓慢时，为什么不在

myContent

div上放置一个加载指示器呢？例如：

或者，您可以通过使用

onmouseover

+

cache

预加载页面来“欺骗”一点以加快速度：

---

当实际的PHP页面加载速度较慢时，为什么不在

myContent

div上放置一个加载指示器呢？例如：

或者，您可以通过使用

onmouseover

+

cache

预加载页面来“欺骗”一点以加快速度：

---

如果直接通过浏览器访问这些URL会发生什么？如果您尝试了几次（但别忘了在两次尝试之间清除浏览器缓存），然后查看它是否也很慢。我们需要知道是ajax请求速度慢还是页面速度慢。顺便说一句，当url在代码中（

url1.php

和

url2.php

）看起来是本地的时候，您编写了“外部url”？我想，使用iFrame可以更好地做到这一点：请看：这些PHP站点基本上有点慢too@MagnusEriksson是的，这些站点实际上与此新页面（带有按钮）托管在同一台服务器上。但是这些php站点没有从其他服务器获取大量数据，因此速度很慢。现在我们要管理主页上的所有其他页面，在主页上按钮链接到这些页面。如果您直接通过浏览器访问这些URL，会发生什么情况？如果您尝试了几次（但别忘了在两次尝试之间清除浏览器缓存），然后查看它是否也很慢。我们需要知道是ajax请求速度慢还是页面速度慢。顺便说一句，当url在代码中（

url1.php

和

url2.php

）看起来是本地的时候，您编写了“外部url”？我想，使用iFrame可以更好地做到这一点：请看：这些PHP站点基本上有点慢too@MagnusEriksson是的，这些站点实际上与此新页面（带有按钮）托管在同一台服务器上。但是这些php站点没有从其他服务器获取大量数据，因此速度很慢。现在，我们要管理主页中按钮链接到这些页面的所有其他页面。我想尝试您的代码，但它引发了一个错误：Uncaught TypeError:content[pageName]。xhr.readyState不是一个函数，我想尝试您的代码，但它引发了一个错误：Uncaught TypeError:content[pageName].xhr.readyState不是函数，

var container = $("#myContent");
var tablinks = $(".tablink");

function openPage(pageName, elmnt, color) {
    tablinks.prop("disabled", true);
    container.text("Loading...");

    container.load(pageName, function (response, status) {
        if (status === "error") {
            container.text("Error loading page.");
        }
        tablinks.prop("disabled", false);
    });
}

<div id="ButtonNav" style="width:1487px;margin:10px auto 0;">
<button class="tablink" onmouseover="preloadPage('url1.php')" onclick="openPage('url1.php', this, '#f9bd48')" id="defaultOpen">Admin</button>
<button class="tablink" onmouseover="preloadPage('url2.php')" onclick="openPage('url2.php', this, '#f9bd48')">DB management</button>

<div id="myContent"></div>
</div>