脚本合并提升javascript性能示例


Posted in Javascript onFebruary 24, 2014

每个<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 相关文章推荐
JavaScript prototype对象的属性说明
Mar 13 Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 Javascript
js toFixed()方法的重写实现精度的统一
Mar 06 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
Thinkphp模板没有解析直接原样输出的解决方法
Oct 31 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
第一个Vue插件从封装到发布
Nov 22 Javascript
vue实现数字动态翻牌的效果(开箱即用)
Dec 08 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
vue 限制input只能输入正数的操作
Aug 05 Javascript
JS轮播图的实现方法2
Aug 25 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 Javascript
动态加载脚本提升javascript性能
Feb 24 #Javascript
巧用局部变量提升javascript性能
Feb 24 #Javascript
javascript中的原型链深入理解
Feb 24 #Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
Feb 24 #Javascript
动态加载js、css等文件跨iframe实现
Feb 24 #Javascript
js操纵dom生成下拉列表框的方法
Feb 24 #Javascript
js设置function参数默认值(适合没有传参情况)
Feb 24 #Javascript
You might like
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php 截取字符串并以零补齐str_pad() 函数
2011/05/07 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
PHP+Mysql+jQuery中国地图区域数据统计实例讲解
2015/10/10 PHP
jQuery 入门讲解1
2009/04/15 Javascript
使用typeof判断function是否存在于上下文
2014/08/14 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
JavaScript如何自定义trim方法
2015/07/28 Javascript
原生JS实现图片轮播切换效果
2016/12/15 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
bootstrap 设置checkbox部分选中效果
2017/04/20 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
图解javascript作用域链
2019/05/27 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
python实现猜单词小游戏
2020/05/22 Python
Python检查ping终端的方法
2019/01/26 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
django 解决扩展自带User表遇到的问题
2020/05/14 Python
python文件读取失败怎么处理
2020/06/23 Python
html5实现的便签特效(实战分享)
2013/11/29 HTML / CSS
全面解析HTML5中的标准属性与自定义属性
2016/02/18 HTML / CSS
Html5基于canvas实现电子签名并生成PDF文档
2020/12/07 HTML / CSS
Hotels.com韩国:海外国内旅行所需的酒店和住宿预订网站
2020/05/08 全球购物
毕业生毕业总结的自我评价范文
2013/11/02 职场文书
党校学习思想汇报
2014/01/06 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
岗位廉洁从业承诺书
2014/03/28 职场文书
网站推广策划方案
2014/06/04 职场文书
2015年三八妇女节活动总结
2015/02/06 职场文书
高中开学感言
2015/08/01 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js