脚本合并提升javascript性能示例
更新时间：2014年02月24日 15:49:05 作者：
脚本合并可以有效提升javascript性能，下面有个不错的示例，大家可以参考下
每个<script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的<script>标签数量有助于改善这一情况。这不仅仅针对外链脚本，内嵌脚本的数量同样也要限制。浏览器在解析HTML页面的过程中每遇到一个<script>标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。
通常一个大型网站或网络应用需要依赖数个javascript文件。你可以把多个文件合并成一个，这样只需引用一个<script>标签，就可以减少性能消耗。文件合并的工作可通过离线打包工具或者类似像YaHoo!combo handle的实时在线服务来实现。
<!-- 优化前： -->
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>Hello world!</p>
<script type="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="http://yui.yahooapis.com/combo?2.7.0/build/event/event-min.js"></script>
</body>
</html>
<!-- 优化后： -->
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>Hello world!</p>
<script src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js" type="text/javascript"></script>
</body>
</html>
通常一个大型网站或网络应用需要依赖数个javascript文件。你可以把多个文件合并成一个，这样只需引用一个<script>标签，就可以减少性能消耗。文件合并的工作可通过离线打包工具或者类似像YaHoo!combo handle的实时在线服务来实现。
复制代码 代码如下:
<!-- 优化前： -->
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>Hello world!</p>
<script type="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js"></script>
<script type="http://yui.yahooapis.com/combo?2.7.0/build/event/event-min.js"></script>
</body>
</html>
<!-- 优化后： -->
<html>
<head>
<title>Script Example</title>
</head>
<body>
<p>Hello world!</p>
<script src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js" type="text/javascript"></script>
</body>
</html>
相关文章
下面小编就为大家带来一篇封装获取dom元素的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
在我们开发微信小程序时,获取用户手机号码是常见的需求之一,这篇文章主要给大家介绍了关于微信小程序获取用户手机号码的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了使用 JavaScript如何获取当月的第一天和最后一天,通过本文学习了如何使用 JavaScript 中的Date.getFullYear()和 Date.getMonth()方法获得某个特定月份的第一天和最后一天，需要的朋友可以参考下2023-05-05
JavaScript Konami Code 实现代码2009-07-07
在小程序云开发中，要实现上传文件至云存储，有两种方案：云函数和HTTP API，本文主要讲讲如何使用HTTP API实现小程序外上传文件至云存储，感兴趣的可以了解一下2022-01-01
这篇文章主要介绍了es6中let和const的使用方法,结合实例形式详细分析了es6中let和const的基本功能、原理、使用方法及操作注意事项,需要的朋友可以参考下2020-02-02
javascript小游戏实现代码，喜欢用javascript实现游戏效果代码的朋友可以参考下。2010-08-08
这篇文章主要介绍了JavaScript的concat方法实例代码，包括数组连与字符连接,需要的朋友可以参考下2023-03-03
无缝滚动改进版，封装成函数，同时支持上下左右无缝滚动。2012-12-12
这篇文章主要介绍了Bootstrap导航栏各元素操作方法，针对表单、按钮、文本进行操作，感兴趣的小伙伴们可以参考一下2015-12-12
最新评论