Question

所以我正在寻找执行以下操作的绝对，最快的方式：

加载jQuery
加载my-library.js
执行一些DOM操作

我发现了许多相互矛盾和过时的信息，但到目前为止，我认为我应该做以下事情：

通过在头部执行一些花哨的脚本加载来阻止渲染阻塞（请参阅Google Analytic的最新方法）。

从Google CDN加载jQuery，以增加缓存命中率。

最小化并gzip my-library.js。

使用$（document）.ready（）来触发DOM操作。

好的，去......

Answer 1

您可能会发现，通过将两个库组合在一起并将它们缩小，可以更快地将它们加载到一个请求中。您必须衡量差异：Google的CDN服务速度会更快，但您仍然在等待自己的服务器，所以最好不要跳过CDN并从服务器上获取所有服务器。

Answer 2

如果您希望优化jQuery脚本，则应使用jQuery Lint进行检查。或者使用内置Jquery Lint的firebug的FireQuery插件。

Answer 3

我不确定，但您可以在＆lt; head＆gt; 中执行类似的操作：

(function(w,d)
    var js = function(a,b){var c='script',s=d.createElement(c),t=d.getElementsByTagName(c)[0];s.async=true;if(b){if(s.readyState){s.onreadystatechange=function(){if(s.readyState==='loaded'||s.readyState==='complete'){s.onreadystatechange=null;b()}}}else{s.onload=function(){b()}}}s.src=a;t.parentNode.insertBefore(s,t)};
    js('//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js', function(){w.initPlugins&&w.initPlugins()});
    js('/js/plugins.js', function(){w.jQuery&&w.initPlugins()});
    js('//www.google-analytics.com/ga.js');
})(window, document);

您必须使用更新的jQuery，因为它可以加载异步。在你的plugins.js（Closure compiled，gzipped）中：

window.initPlugins = function(){
   // plugin1
   // plugin2
   // plugin3
};

这将并行加载3个文件并按正确的顺序执行它们。我认为绝对最快的方法是内联页面中的文件，但它们不会被缓存（可能就是这种情况）。

P.S。如果您使用Google Analytics的协议相对URL，则可以在IE6中生成错误对话框。

Answer 4

我认为你有两个选择：你需要和inline loader script。

然后你需要决定你是否愿意 1）动态地将每个页面的所有javascript组合成一个文件。然后，加载器脚本调用正在提供的页面的相关javascript文件。文件本身将使用modconcat或local combo handler

等动态构建

2）或者采用并行加载选项来管理依赖关系，例如labjs。

可以在加载页面后加载Google分析代码和类似代码。所有这些都应该在关闭的body标签内，而不是你提到的头部。

为了使用并行方法快速加载Jquery的最佳机会，请确保使用CDN，如Google CDN for JQuery。

Answer 5

使用DOM创建脚本节点是最糟糕的方式，不安全（因为你不确定在所有浏览器中都有相同的行为，有些可以并行某些异步）。最好的方法是使用一系列

document.write('<s'+'cript type="text/javascript" src="whatever you want"></s'+'cript>;' );

脚本将并行下载，然后按正确的顺序执行。（按你编写的顺序）。

加载jQuery plus库的绝对最快的方法

5 个答案: