编程 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 插件将this下的div轮番显示

Apr 09 Javascript

js与jquery中获取当前鼠标的x、y坐标位置的代码

May 23 Javascript

Javascript基础教程之定义和调用函数

Jan 18 Javascript

原生js和jquery实现图片轮播特效

Apr 23 Javascript

Express的路由详解

Dec 10 Javascript

javascript基础语法学习笔记

Jan 04 Javascript

探讨：JavaScript ECAMScript5 新特性之get/set访问器

May 05 Javascript

jQuery实现获取h1-h6标题元素值的方法

Mar 06 Javascript

详解react使用react-bootstrap当轮子造车

Aug 15 Javascript

vue 插件的方法代码详解

Jun 06 Javascript

layui动态加载多表头的实例

Sep 05 Javascript

JavaScript中变量提升和函数提升的详解

Aug 07 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新手上路（六）

2006/10/09 PHP

php ftp文件上传函数(基础版)

2010/06/03 PHP

php截取html字符串及自动补全html标签的方法

2015/01/15 PHP

使用PHP处理数据库数据如何将数据返回客户端并显示当前状态

2016/02/16 PHP

详解PHP实现异步调用的4种方法

2016/03/14 PHP

Laravel实现搜索的时候分页并携带参数

2019/10/15 PHP

JavaScript 学习笔记（七）字符串的连接

2009/12/31 Javascript

js汉字转拼音实现代码

2013/02/06 Javascript

jQuery获取注册信息并提示实现代码

2013/04/21 Javascript

JS小功能(onmouseover实现选择月份)实例代码

2013/11/28 Javascript

jQuery中阻止冒泡事件的方法介绍

2014/04/12 Javascript

javascript里使用php代码实例

2014/12/13 Javascript

Jquery1.9.1源码分析系列（六）延时对象应用之jQuery.ready

2015/11/24 Javascript

动态加载css方法实现和深入解析

2017/01/18 Javascript

H5图片压缩与上传实例

2017/04/21 Javascript

JS实现前端缓存的方法

2017/09/21 Javascript

NodeJS有难度的面试题(能答对几个)

2019/10/09 NodeJs

vue 动态组件用法示例小结

2020/03/06 Javascript

JavaScript 接口原理与用法实例详解

2020/05/12 Javascript

从零学Python之入门（二）基本数据类型

2014/05/25 Python

深入理解Python中的内置常量

2017/05/20 Python

Python通过命令开启http.server服务器的方法

2017/11/04 Python

python使用matplotlib画柱状图、散点图

2019/03/18 Python

python 列表转为字典的两个小方法(小结)

2019/06/28 Python

Python实现删除某列中含有空值的行的示例代码

2020/07/20 Python

Jupyter Notebook添加代码自动补全功能的实现

2021/01/07 Python

html5如何及时更新缓存文件(js、css或图片)

2013/06/24 HTML / CSS

亚洲颇具影响力的男性在线购物零售商：His

2019/11/24 全球购物

META-INF文件夹中的MANIFEST.MF的作用

2016/06/21 面试题

应届生英语教师求职信

2013/11/05 职场文书

六月份红领巾广播稿

2014/02/03 职场文书

大学生党员自我批评

2014/02/14 职场文书

2014年重阳节活动策划方案书

2014/09/16 职场文书

先进典型发言材料

2014/12/30 职场文书

世界遗产导游词

2015/02/13 职场文书

uwsgi+nginx代理Django无法访问静态资源的解决

2021/05/10 Servers