javascript - .load() jquery 在包含 javascript 或 css 等脚本时变慢

Question

我有这段代码:首先.html..

 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../js/prj1100.js"></script>
 <LINK href="../css/prj1100.css" rel="stylesheet" type="text/css">
..

加载 page.html 的事件

  jQuery(".content").click(function(){
 $(".content_2").load('page.html');}

在page.html里面，有:

 <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
 <script type="text/javascript" src="../js/jquery-ui.min.js"></script>
 <script type="text/javascript" src="../js/prj1100.js"></script>
 <LINK href="../css/prj1100.css" rel="stylesheet" type="text/css">
 <?php

 ...

此代码运行良好，但是当多次点击加载此页面时，显示 page.html 的时间过长。似乎 .load() 实例每次 .js 进入内存。

我再次包含在 page.html 上，因为在 first.html 上声明的没有继承到 page.html。

如何改进此代码？

Answer 1

通常，我们不必在两个页面中重复链接 jquery 库和其他文件。链接到 first.html 的库和样式表也必须适用于 page.html。请参阅此链接 Plunkr

index.html

<h1>Hello Plunker!</h1>
<button>Load First</button>
<div class="first"></div>

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>
<script>
  $(document).ready(function() {
    alert('index loaded!');
    $('button').click(function() {
      $('.first').load('first.html');
    })
  });
</script>

first.html

<h1>Hello First!</h1>  

<script>
  $(document).ready(function() {
    alert('first loaded!');
  });
</script>

但是，如果您仍然需要链接两个页面中的所有文件和脚本，最有效的方法是在页面底部。 DOM 加载时间显着缩短。