首页手记 JavaScript优化篇2-Grouping...

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

标签：

PHP JavaScript 前端工具

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 的最佳方法。 本文出自慕课网，转载请注明出处，侵权必究。

点击查看更多内容