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

Js中setTimeout()和setInterval() 何时被调用执行的用法

Apr 12 Javascript

node.js入门教程迷你书、node.js入门web应用开发完全示例

Apr 06 Javascript

js如何实现点击标签文字，文字在文本框出现

Aug 05 Javascript

jquery无限级联下拉菜单简单实例演示

Nov 23 Javascript

有关JavaScript中call()和apply() 的一些理解

May 20 Javascript

判断输入的字符串是否是日期格式的简单方法

Jul 11 Javascript

jQuery EasyUI基础教程之EasyUI常用组件(推荐)

Jul 15 Javascript

[js高手之路]图解javascript的原型(prototype)对象,原型链实例

Aug 28 Javascript

原生JS实现日历组件的示例代码

Sep 22 Javascript

原生JS实现小小的音乐播放器

Oct 16 Javascript

jQuery 同时获取多个标签的指定内容并储存为数组

Nov 20 jQuery

JS实现长图上下滚动效果

Mar 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

AM/FM收音机的安装与调试

2021/03/02 无线电

php不使用copy()函数复制文件的方法

2015/03/13 PHP

修改WordPress中文章编辑器的样式的方法详解

2015/12/15 PHP

国外Lightbox v2.03.3 最新版下载

2007/10/17 Javascript

javascript各种复制代码收集

2008/09/20 Javascript

JS 创建对象(常见的几种方法)

2008/11/03 Javascript

动态加载图片路径保持JavaScript控件的相对独立性

2010/09/06 Javascript

通过javascript获取iframe里的值示例代码

2013/06/24 Javascript

Windows下用PyCharm和Visual Studio开始Python编程

2015/10/26 Javascript

JS中Json数据的处理和解析JSON数据的方法详解

2016/06/29 Javascript

jquery设置css样式的多种方法(总结)

2017/02/21 Javascript

jquery+ajax实现省市区三级联动（封装和不封装两种方式）

2017/05/15 jQuery

基于vue打包后字体和图片资源失效问题的解决方法

2018/03/06 Javascript

Vue 页面跳转不用router-link的实现代码

2018/04/12 Javascript

详解JavaScript作用域和作用域链

2019/03/19 Javascript

vue 弹窗时监听手机返回键关闭弹窗功能(页面不跳转)

2019/05/10 Javascript

在微信小程序中渲染HTML内容3种解决方案及分析与问题解决

2020/01/12 Javascript

Vue循环中多个input绑定指定v-model实例

2020/08/31 Javascript

wxpython中Textctrl回车事件无效的解决方法

2016/07/21 Python

快速实现基于Python的微信聊天机器人示例代码

2017/03/03 Python

python生成词云的实现方法(推荐)

2017/06/13 Python

Python子类继承父类构造函数详解

2019/02/19 Python

Python替换月份为英文缩写的实现方法

2019/07/15 Python

python调用支付宝支付接口流程

2019/08/15 Python

Pycharm 2019 破解激活方法图文详解

2019/10/11 Python

利用Python中的Xpath实现一个在线汇率转换器

2020/09/09 Python

Django如何实现防止XSS攻击

2020/10/13 Python

css3设置box-pack和box-align让div里面的元素垂直居中

2014/09/01 HTML / CSS

canvas像素点操作之视频绿幕抠图

2018/09/11 HTML / CSS

美国一站式电动和手动工具商店：International Tool

2020/11/26 全球购物

美国床垫连锁店：Mattress Firm

2021/02/13 全球购物

农救科工作职责

2013/11/27 职场文书

《第一朵杏花》教学反思

2014/04/16 职场文书

意外伤害赔偿协议书范本

2014/09/28 职场文书

出纳工作检讨书

2014/10/18 职场文书

我的生日感言

2015/08/03 职场文书