脚本合并提升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 相关文章推荐
jquery validation插件表单验证的一个例子
Mar 03 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
jquery实现顶部向右伸缩的导航区域代码
Sep 02 Javascript
jquery插件pagination实现无刷新ajax分页
Sep 30 Javascript
jQuery树形插件jquery.simpleTree.js用法分析
Sep 05 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
JavaScript中使用import 和require打包后实现原理分析
Mar 07 Javascript
MVVM 双向绑定的实现代码
Jun 21 Javascript
Vue-不允许嵌套式的渲染方法
Sep 13 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
vue强制刷新组件的方法示例
Feb 28 Javascript
基于JS实现table导出Excel并保留样式
May 19 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&amp;java(一)
2006/10/09 PHP
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php简单生成随机数的方法
2015/07/30 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP用continue跳过本次循环中剩余代码的注意点
2017/06/27 PHP
jQuery Jcrop插件实现图片选取功能
2011/11/23 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
jquery实现select选中行、列合计示例
2014/04/25 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
使用pjax实现无刷新更改页面url
2015/02/05 Javascript
JavaScript 函数的执行过程
2016/05/09 Javascript
深入理解JavaScript单体内置对象
2016/06/06 Javascript
create-react-app 修改为多入口编译的方法
2018/08/01 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
2019/03/28 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
JavaScript实现点击自制菜单效果
2021/02/02 Javascript
Python3 入门教程 简单但比较不错
2009/11/29 Python
python中pass语句用法实例分析
2015/04/30 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python向日志输出中添加上下文信息
2017/05/24 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
python定间隔取点(np.linspace)的实现
2019/11/27 Python
keras之权重初始化方式
2020/05/21 Python
QML实现钟表效果
2020/06/02 Python
澳大利亚领先的宠物用品商店:VetSupply
2017/09/08 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
开会迟到检讨书
2014/01/08 职场文书
楼面部长岗位职责范本
2014/02/14 职场文书
环保建议书400字
2014/05/14 职场文书
小学数学课题方案
2014/06/15 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2015年前台接待工作总结
2015/05/04 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL