Position Absolute

优化JavaScript / jQuery加载时间,初学者’s guide

因此,您创建了那个漂亮的网站或Web应用程序,并希望在优化前端加载时间进一步逐步?使用一些伟大的免费工具,如果您愿意交易嵌入JavaScript文件的规则方式,您可以轻松优化您的JavaScript以加载2或3倍。

异步加载脚本

您需要知道的一件事是您的脚本标记阻止了页面的渲染。事实上,它在实际上阻止了发生的任何事情,当您正在下载和执行一个脚本时,不是下载一个CSS文件或一个图像。所以想象一下,你的头部装入了10个脚本文件,大约300k大约为300k,浏览器需要一个接一个地加载它们 (事实上​​,在FF和WebKit中的时间,IE8中的多达18(或更多)。在较旧的浏览器中,它一次将是一个。),并逐个执行它们,到那个时候,您的页面已经有很好的机会已经呈现了HTML和CSS。

你能做的第一个和非常容易的事情就是在身体结束前加载它们。

<script type="text/javascript" src="/js/jquery/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.json-2.2.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/formvalidator/jquery.validationEngine.js"></script>
 
</body>
</html>

这样,至少,CSS和HTML将在JavaScript之前加载。做这件事真的很酷,这就是jquery dom就绪陈述变得过时了。您的HTML已经准备好了,因为您在任何脚本标记之前解析了它。据说,注意全局范围,我仍然会把我的脚本包裹在匿名自我执行的函数中,如下所示:

(function () {
 add script here ...
})()

用labjs进一步走一步

Labjs. 您可以完全异步加载JS文件。与前面例子的差异是,即使您的脚本位于底部,它们仍然逐个下载。使用此工具,您可以同时加载脚本并指定执行顺序。从我的测试 dynatrace.,JavaScript加载3x更快使用 Labjs.,我的页面在IE8上加载15%(约15个js文件)。一个例子:

<script src='/js/LAB.min.js'></script>
<script>
$LAB
.script("/modules/comment/front/js/comment.js")
.script("/modules/core/commun/js/common.js")
.script("/modules/core/front/js/custom.js")
</script>
 
</body>
</html>

您的装载速度增益具有复杂性的成本。正如我之前所说的那样,它加载它们异步,所以任何一个都可以在另一个之前执行。如果使用像jQuery这样的库,则非常糟糕,需要先执行。在这里有2个选择,使用 。等待() 在每个脚本的末尾,需要保留执行顺序或使用 .setOptions({AlsemalPreServeOrder:True}) 这将始终以小的性能成本保持订单。所以,如果你想去所有的枪支使用.wait(),如果没有,请使用alwayspreserveorder(这就是我所做的,速度成本真的很少)。一些例子:

与.wait()

<script src='/js/LAB.min.js'></script>
<script>
$LAB
.script("js/jquery/jquery-1.4.2.min.js").wait()
.script("js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/jquery.json-2.2.min.js").wait()
.script("js/jquery/common.js")
</script>
</body>
</html>

alwayspreserveorder.

<script src='/js/LAB.min.js'></script>
<script>
$LAB
.setOptions({AlsemalPreServeOrder:True})
.script("js/jquery/jquery-1.4.2.min.js")
.script("js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/jquery.json-2.2.min.js")
.script("js/jquery/common.js")
</script>
 
</body>
</html>

完整的Labjs解决方案

好吧,我们弄清楚了我们的执行顺序,我们的内联脚本怎么样?在下载任何JS文件之前,可能会执行这些脚本块。嗯,解决方案很酷,但并不简单。我们将创建一个包含所有内联编码的全局变量。要执行第一件事,请将变量添加到头部。

<script> var _loadingQueue = []; // declare our array</script>
</head>

现在在页面的任何部分,您可以以这种方式添加内联脚本块:

<script src='/js/LAB.min.js'></script>
<script>
 _loadingQueue.push(function(){
	$("body").html("this is loaded from an inline script block")
 }); 
</script>

正如你可以看到我在那里使用jquery, _loadingqueue.push. 会将此匿名功能添加到我们的加载队列中,您可以根据需要使用尽可能多的内联脚本。

在我们的Labjs加载序列中,我们需要做一些黑客来做这项工作。

<html>
<head>
<script> var _loadingQueue = []; // declare our array</script>
</head>
<body>
<randomHtmlTags..............>
<script>
 _loadingQueue.push(function(){
	$("body").html("this is loaded from an inline script block")
 }); 
</script>
<randomHtmlTags..............>
 
<script src='/js/LAB.min.js'></script>
<script>
var $LoadDefer = $LAB
.setOptions({AlsemalPreServeOrder:True})
.script("js/jquery/jquery-1.4.2.min.js")
.script("js/jquery/jquery-sortable-1.7.1.custom.min.js")
.script("js/jquery/jquery.json-2.2.min.js")
.script("js/jquery/common.js");
.wait(function(){
      framework.doSomething(); 
   });
 
 
if( typeof( window[ '_loadingQueue' ]) != "undefined"){ 
	for(var i=0,len=_loadingQueue.length; i<len; i++){	 
		$LoadDefer = $LoadDefer.wait(_loadingQueue[i]);	
	}
}
</script>
</body>
</html>

正如你可以看到我现在有一个很好的循环。如果存在变量_loadingqueue,则获取_loadingqueue长度,并且当所有脚本加载和执行时($ loaddefer.wait)。我执行所有存储的函数。很不错!

这是一个完整的解决方案,用于异步加载您的脚本,我认为它将涵盖您需求的99%。我在下面添加了一个演示。

查看演示

结合和缩小脚本

在本地开发中可能会注意到的东西是文件请求是耗时的。想象一下,您的页面中有10个JS文件,如果您的浏览器在网上花费100毫秒寻找每个脚本,您将丢失一个完整的第二个只是查看这些文件的Web!

输入缩减

缩小 是一个很好的PHP库,可让您在瞬间将CSS和JS文件组合并在服务器上缓存它们。使用这个库,您可以获得1秒钟。

缩小 易于安装,您下载它,把它放在地址root,从那里你可以简单访问这样的缩小文件 http//www.example.com/min/?f=js/jquery/jquery-1.4.2.min.js,js/jquery/jquery-sortable-1.7.1.custom.min.js。在我的工作场所,我们使用微小的几个通用插件和我们在给定站点中使用的组件。这是一个很好的妥协,这样我们就可以组合大约10个JavaScript文件,我们仍然可以从我们的自定义脚本中看到错误。但是,您可以简单地将所有文件组合以实现最大性能,以丢失错误位置。

您可能会在配置中丢失,这2个非常重要的配置 $ min_cachepath.$ min_documentrot.。我不得不在与Zend框架工作的缩小工作。

将它与Labjs集成

一旦缩小作品,添加它并不是真正复杂。

<script src='/js/LAB.min.js'></script>
<script>
var $LoadDefer = $LAB
.setOptions({AlsemalPreServeOrder:True})
.script("/min/?f=js/jquery/jquery-1.4.2.min.js,js/jquery/jquery-sortable-1.7.1.custom.min.js").
.script("js/jquery/common.js")
 
if(_loadingQueue){ for(var i=0,len=_loadingQueue.length; i<len; i++){	 $LoadDefer = $LoadDefer.wait(_queue[i])	}}
</script>

小警告

我不使用Minify来组合我的CSS文件,因为它刹车我的图像路径。如果您总是使用绝对路径,您将没有问题,但请记住,大多数jQuery插件在其CSS中使用相对路径。

结论

优化不是免费的,它随着为您的应用程序添加一层复杂性,个人我为Zend Framework创建了一个小助手,该Zend框架包含了上面提到的一切。从一个布尔变量,我可以决定是否希望使用Labjs缩减和嵌入。这对调试非常有用。此外,如果您有兴趣优化您的JS,我将强烈建议您看看两者的API Labjs.缩小 有关更多选项和更详细的说明。

其他一些技术值得一提, YUI压缩机 作为缩小图书馆的替代品,以及 quertjs. 作为Labjs的替代品。 RequireJS获得了不同的方法,而不是专注于加载Asynch我们的文件,而是仅在页面中加载需要执行给定脚本所需的文件。

来自James Burke的小澄清:Requirejs还异步加载文件。与Labjs相比,Requirejs鼓励编写井中的模块,并使用其内置的优化工具来组合和缩小脚本。

Dynatrace.

Dynatrace. 实际上是用于在Internet Explorer上测试前端性能的工具,您可以从一切,CPU使用率和更多的情况下获取执行时间。它是我在前端跟踪的任何平台上看到的最强大的工具。最好的部分?这完全免费!