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

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

这些JavaScript文件是非重复，意味着页面1上所需的JS不需要在页面2上，而且我的过期头文件设置为1个月。

不过我想知道什么是加载这些文件的最佳方式，我应该为每个页面加载单独的文件还是将这些文件加载在一起？

2011-01-22 Shishant

你可能应该单独加载它们......
但是，为了加快速度，你可以做一个技巧：如果你认为用户停留了一段时间（我不知道，至少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文件会立即加载，因为它是从浏览器的缓存中检索的。

来源

2011-01-22 20:58:12

谢谢，我进一步扩展它。我制作了一组js文件，然后根据用户所在的页面，首先为它加载文件，然后在空闲时间休息。 – Shishant 2011-01-22 22:19:19

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

来源

2011-01-22 20:22:03

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

来源

2011-01-22 20:24:01 qw3n

您描述的方式，你应该分开加载它们。

如果用户保证导航到所有3页然后是，将它们合并。如果他们通常导航到一页，然后加载所有三个是浪费。

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

最小化并使用压缩将JS最大限度地减少，但除非需要才加载文件。

来源

2011-01-22 20:34:47 Dekker500

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

回答

相关问题