手记

JavaScript优化篇2-Grouping Scripts 成组脚本

Grouping Scripts 成组脚本

由于每个<script>标签下载时阻塞页面解析过程,所以限制页面的<script>总数也可以改善性能。这个规则对内联脚本和外部脚本同样适用。每当页面解析碰到一个<script>标签时,紧接着有一段时间用于代码执行。最小化这些延迟时间可以改善页面的整体性能。

这个问题与外部JavaScript 文件处理过程略有不同。每个HTTP 请求都会产生额外的性能负担,下载一个100KB 的文件比下载四个25KB 的文件要快。总之,减少引用外部脚本文件的数量。典型的,一个大型网站或网页应用需要多次请求JavaScript 文件。你可以将这些文件整合成一个文件,只需要一个<script>标

签引用,就可以减少性能损失

Yahoo! 为他的“Yahoo! 用户接口(Yahoo! User Interface,YUI)”库创建一个“联合句柄”,这是通过他们的“内容投递网络(Content Delivery Network,CDN)”实现的。任何一个网站可以使用一个“联合句柄”URL指出包含YUI 文件包中的哪些文件。例如,下面的URL 包含两个文件

http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js

此URL 调用2.7.0 版本的yahoo-min.js 和event-min.js 文件。这些文件在服务器上是两个分离的文件,但是当服务器收到此URL 请求时,两个文件将被合并在一起返回给客户端。通过这种方法,就不再需要两个<script>标签(每个标签加载一个文件),一个<script>标签就可以加载他们:

<html>

<head>

<title>Script Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<p>Hello world!</p>

<– Example of recommended script positioning –>

<script type=”text/javascript”

src=”http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js”></s

cript>

</body>

</html>
此代码只有一个<script>标签,位于页面的底部,加载多个JavaScript 文件。这是在HTML 页面中包含多个外部JavaScript 的最佳方法。 本文出自慕课网,转载请注明出处,侵权必究。
4人推荐
随时随地看视频
慕课网APP