编程 Javascript

脚本合并提升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 经典动画菜单效果代码

Jan 26 Javascript

clientX,pageX,offsetX,x,layerX,screenX,offsetLeft区别分析

Mar 12 Javascript

JavaScript中String和StringBuffer的速度之争

Apr 01 Javascript

JSQL 一个 web DB 的封装

May 05 Javascript

jQuery validate 中文API 附validate.js中文api手册

Jul 31 Javascript

简略的前端架构心得&&基于editor为例子的编码小技巧

Nov 25 Javascript

解决3.01版的jquery.form.js中文乱码问题的解决方法

Mar 08 Javascript

{}与function(){}选用空对象{}来存放keyValue

May 23 Javascript

js实现简易的单数字随机抽奖（0-9）

Mar 19 Javascript

JavaScript实现的多种鼠标拖放效果

Nov 03 Javascript

详解前端构建工具gulpjs的使用介绍及技巧

Jan 19 Javascript

Three.JS实现三维场景

Dec 30 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中static关键字原理的学习研究分析

2011/07/18 PHP

PHP MPDF中文乱码的解决方式

2015/12/08 PHP

PHP让数组中有相同值的组成新的数组实例

2017/12/31 PHP

Alliance vs Liquid BO3 第三场2.13

2021/03/10 DOTA

扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁

2011/12/08 Javascript

js中的异常处理try...catch使用介绍

2013/09/21 Javascript

使用JQUERY进行后台页面布局控制DIV实现左右式

2014/01/07 Javascript

项目中常用的JS方法整理

2015/01/30 Javascript

JS实现灵巧的下拉导航效果代码

2015/08/25 Javascript

JS中取二维数组中最大值的方法汇总

2016/04/17 Javascript

AngularJS控制器继承自另一控制器

2016/05/09 Javascript

使用js获取地址栏参数的方法推荐(超级简单)

2016/06/14 Javascript

JavaScript实现刷新不重记的倒计时

2016/08/10 Javascript

基于JS实现发送短信验证码后的倒计时功能(无视页面刷新，页面关闭不进行倒计时功能)

2016/09/02 Javascript

原生和jQuery的ajax用法详解

2017/01/23 Javascript

js实现canvas保存图片为png格式并下载到本地的方法

2017/08/31 Javascript

基于Vue单文件组件详解

2017/09/15 Javascript

解决Nodejs全局安装模块后找不到命令的问题

2018/05/15 NodeJs

Vue axios 将传递的json数据转为form data的例子

2019/10/29 Javascript

[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29

2020/12/02 DOTA

Python装饰器decorator用法实例

2014/11/10 Python

python cx_Oracle的基础使用方法(连接和增删改查)

2017/11/19 Python

python3+PyQt5实现柱状图

2018/04/24 Python

python 矢量数据转栅格数据代码实例

2019/09/30 Python

Python实现非正太分布的异常值检测方式

2019/12/09 Python

CSS3 实现footer 固定在底部(无论页面多高始终在底部)

2019/10/15 HTML / CSS

亚洲航空公司官方网站：AirAsia

2019/11/25 全球购物

大学生学习生活的自我评价

2013/11/01 职场文书

课程设计心得体会

2013/12/28 职场文书

澳大利亚商务邀请函

2014/01/17 职场文书

优秀信贷员先进事迹

2014/01/31 职场文书

餐饮营销方案

2014/02/23 职场文书

高中生第一学年自我鉴定

2014/09/12 职场文书

2015秋季开学演讲稿范文

2015/07/16 职场文书

python绘制箱型图

2021/04/27 Python

python 制作一个gui界面的翻译工具

2021/05/14 Python