由于每个<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 的最佳方法。
本文出自慕课网,转载请注明出处,侵权必究。
2024 - 快车库 - 我的知识库 重庆启连科技有限公司 渝ICP备16002641号-10
企客连连 表单助手 企服开发 榜单123