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

javascript 动态添加事件代码

Nov 30 Javascript

js 强制弹出窗口代码研究－又一款代码

Mar 20 Javascript

css样式标签和js语法属性区别

Nov 06 Javascript

js中传递特殊字符(+,&)的方法

Jan 16 Javascript

javascript 获取元素样式必杀技

May 04 Javascript

js拆分字符串并将分割的数据放到数组中的方法

May 06 Javascript

基于jquery实现的鼠标悬停提示案例

Dec 11 Javascript

ajax图片上传，图片异步上传，更新实例

Dec 30 Javascript

JavaScript体验异步更好的解决办法

Jan 08 Javascript

JS实现的字符串数组去重功能小结

Jun 17 Javascript

QML实现圆环颜色选择器

Sep 25 Javascript

解决VUE双向绑定失效的问题

Oct 29 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语法(3)

2006/10/09 PHP

精美漂亮的php分页类代码

2013/04/02 PHP

非常好用的Zend Framework分页类

2014/06/25 PHP

用document.documentElement取代document.body的原因分析

2009/11/12 Javascript

jQuery学习3：操作元素属性和特性

2010/02/07 Javascript

js 文件引入实现代码

2010/04/23 Javascript

js函数的延迟加载实现代码

2012/10/11 Javascript

九种原生js动画效果

2015/11/11 Javascript

javascript实现Email邮件显示与删除功能

2015/11/21 Javascript

js智能获取浏览器版本UA信息的方法

2016/08/08 Javascript

手机浏览器后退按钮强制刷新页面方法总结

2016/10/09 Javascript

Node.js数据库操作之连接MySQL数据库（一）

2017/03/04 Javascript

神级程序员JavaScript300行代码搞定汉字转拼音

2017/05/20 Javascript

浅谈React高阶组件

2018/03/28 Javascript

js 压缩图片的示例（只缩小体积，不更改图片尺寸）

2020/10/21 Javascript

微信小程序canvas动态时钟

2020/10/22 Javascript

Nuxt的路由配置和参数传递方式

2020/11/06 Javascript

使用Mock.js生成前端测试数据

2020/12/13 Javascript

[05:11]TI9战队采访——VIRTUSPRO

2019/08/22 DOTA

sublime text 3配置使用python操作方法

2017/06/11 Python

理论讲解python多进程并发编程

2018/02/09 Python

transform python环境快速配置方法

2018/09/27 Python

python3人脸识别的两种方法

2019/04/25 Python

HTML5 Canvas绘制文本及图片的基础教程

2016/03/14 HTML / CSS

使用css创建三角形使用CSS3创建3d四面体原理及代码(html5实践)

2013/01/06 HTML / CSS

html5构建触屏网站之网站尺寸探讨

2013/01/07 HTML / CSS

有750多个顶级品牌的瑞士时尚在线：ABOUT YOU

2017/01/04 全球购物

父母对孩子的寄语

2014/04/09 职场文书

课外小组活动总结

2014/08/27 职场文书

五四演讲稿范文

2014/09/03 职场文书

校园新闻广播稿5篇

2014/10/10 职场文书

怀孕辞职信怎么写

2015/02/28 职场文书

幼儿教师辞职信范文

2015/03/02 职场文书

具结保证书范本

2015/05/11 职场文书

2015年污水处理厂工作总结

2015/05/26 职场文书

党员干部学习心得体会

2016/01/23 职场文书