javascript - 不同页面加载不同的js文件还是一起加载？

Question

我有 3 个网站页面。

Page 1: 19 kb of JS
Page 2: 26 kb of JS
Page 3: 10 kb of JS
Total : 55 kb of JS

这些 javascript 文件不重复，意味着第 1 页所需的 JS 在第 2 页上不需要，并且我将过期 header 设置为 1 个月。

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

Answer 1

你可能应该单独加载它们......
但是，为了加快速度，您可以采取一个技巧:如果您认为用户在您的页面上停留了一会儿(我不知道，至少 5 秒)，您可以加载该特定页面的脚本并添加其他的则在页面加载后远程进行。通过这种方式，您可以强制客户端的浏览器为您的其他(目前不需要)js 文件创建缓存副本，并且因为它们是在 dom 对象构建后加载的，所以不会减慢页面渲染速度。< br/>您必须添加“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 文件会立即加载，因为它是从浏览器的缓存中检索的。