Question

我有3页网站。

第1页：19 kb的JS
  第2页：26 kb的JS   第3页：10 kb的JS
  总计：55 kb的JS

这些javascript文件不重复，意味着第2页上不需要第1页上需要的JS，并且我有1个月设置的到期标头。

我仍然想知道加载这些文件的最佳方法是什么，我应该为每个页面加载单独的文件还是将它们加载到一起？

Answer 1

你应该单独加载它们。
但是，为了加快速度，你可以做一个技巧：如果你认为用户在你的页面上停留了一段时间（我不知道，至少5秒），你可以只加载该特定页面的脚本并添加页面加载后远程其他远程。通过这种方式，您可以强制客户端的浏览器制作另一个的缓存副本 - 目前不需要 - js文件，并且因为它们是在构建dom对象后加载的，所以它不会减慢页面渲染速度。登记/> 您必须添加“addScript”函数，并在文档加载完成后进行“addScript”调用。对于第一个js（第一页），它应该是这样的：

function addScript(jsUrl){
    var s = document.createElement('script');
    s.setAttribute('type','text/javascript');
    s.setAttribute('src',jsUrl);
    document.getElementsByTagName('body')[0].appendChild(s);
}
window.onload = function(){
    addScript('mySecondScript.js');
    addScript('myThirdScript.js');
}

美妙之处在于，当您加载其他页面时，会立即加载相应的js文件，因为它是从浏览器的缓存中检索的。

Answer 2

我将它们全部混合在一个JS文件中，用谷歌的Closure Compiler设置“高级优化”来缩小它，并用一堆缓存指令加载它一次。如果您确实使用了高级的Closure Compiler，那么您必须确保HTML文件中没有内联JavaScript（这通常不是一个好的做法），因为函数和变量名称（甚至是全局函数和变量名称）之后将不再相同。

Answer 3

55 kb并不是那么多。但是，当您必须处理第1页和第3页代码时，更新页面可能会更难。此外，你有没有尝试缩小听起来像大型javascript文件的代码。

Answer 4

您描述它的方式，您应该单独加载它们。

如果保证用户导航到所有3个页面然后是，则组合它们。如果他们通常导航到一个页面，那么加载这三个页面就是一种浪费。

也就是说，55k并不大，但考虑移动浏览器甚至拨号的影响。

最小化并使用压缩将JS减少到最大值，但除非需要，否则不要加载文件。

为不同的页面加载不同的js文件或一起加载？

4 个答案: