编程 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 相关文章推荐

Whatever:hover 无需javascript让IE支持丰富伪类

Jun 29 Javascript

location.href用法总结(最主要的)

Dec 27 Javascript

Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

Feb 12 Javascript

原生javascript实现拖动元素示例代码

Sep 01 Javascript

jquery实现的蓝色二级导航条效果代码

Aug 24 Javascript

js改变style样式和css样式的简单实例

Jun 28 Javascript

学习掌握JavaScript中this的使用技巧

Aug 29 Javascript

基于Vue实例对象的数据选项

Aug 09 Javascript

Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码

Aug 22 Javascript

Vue 2.0 侦听器 watch属性代码详解

Jun 19 Javascript

JS面向对象实现飞机大战

Aug 26 Javascript

原生JavaScript实现五子棋游戏

Nov 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 $_ENV为空的原因分析

2009/06/01 PHP

php 常用的系统函数

2017/02/07 PHP

php插件Xajax使用方法详解

2017/08/31 PHP

js中匿名函数的N种写法

2010/09/08 Javascript

jquery maxlength使用说明

2011/09/09 Javascript

javascript alert乱码的解决方法

2013/11/05 Javascript

jQuery取得select选择的文本与值的示例

2013/12/09 Javascript

window.open 以post方式传递参数示例代码

2014/02/27 Javascript

javascript与Python快速排序实例对比

2015/08/10 Javascript

jQuery实现获取绑定自定义事件元素的方法

2015/12/02 Javascript

jquery模拟实现鼠标指针停止运动事件

2016/01/12 Javascript

理解javascript中的MVC模式

2016/01/28 Javascript

Bootstrap实现登录校验表单(带验证码)

2016/06/23 Javascript

Vuejs第九篇之组件作用域及props数据传递实例详解

2016/09/05 Javascript

js实现彩色条纹滚动条效果

2017/03/15 Javascript

nodejs集成sqlite使用示例

2017/06/05 NodeJs

JavaScript实现获取用户单击body中所有A标签内容的方法

2017/06/05 Javascript

通过vue-cli来学习修改Webpack多环境配置和发布问题

2017/12/22 Javascript

Node.js API详解之 dns模块用法实例分析

2020/05/15 Javascript

删除目录下相同文件的python代码(逐级优化)

2012/05/25 Python

Python使用scrapy抓取网站sitemap信息的方法

2015/04/08 Python

Python安装第三方库的3种方法

2015/06/21 Python

详解Golang 与python中的字符串反转

2017/07/21 Python

Python两个字典键同值相加的几种方法

2019/03/05 Python

Python 元组拆包示例(Tuple Unpacking)

2019/12/24 Python

jupyter 中文乱码设置编码格式避免控制台输出的解决

2020/04/20 Python

两种CSS3伪类选择器详细介绍

2013/12/24 HTML / CSS

HTML5 图片预加载的示例代码

2020/03/25 HTML / CSS

京东港澳售：京东直邮港澳台

2018/01/31 全球购物

什么是事务？事务有哪些性质？

2012/03/11 面试题

群众路线四风对照检查材料

2014/11/04 职场文书

2015年财务试用期工作总结

2014/12/24 职场文书

2015年小学一年级班主任工作总结

2015/05/21 职场文书

孕妇病假条怎么写

2015/08/17 职场文书

CSS的class与id常用的命名规则

2021/05/18 HTML / CSS

Java 在线考试云平台的实现

2021/11/23 Java/Android