编程 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 prototype对象的属性说明

Mar 13 Javascript

20款效果非常棒的 jQuery 插件小结分享

Nov 18 Javascript

js toFixed()方法的重写实现精度的统一

Mar 06 Javascript

函数式 JavaScript（一）简介

Jul 07 Javascript

Thinkphp模板没有解析直接原样输出的解决方法

Oct 31 Javascript

JavaScript返回0-1之间随机数的方法

Apr 06 Javascript

第一个Vue插件从封装到发布

Nov 22 Javascript

vue实现数字动态翻牌的效果（开箱即用）

Dec 08 Javascript

JavaScript实现拖拽功能

Feb 11 Javascript

vue 限制input只能输入正数的操作

Aug 05 Javascript

JS轮播图的实现方法2

Aug 25 Javascript

Vue路由重定向和别名的区别说明

Sep 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 file_exists 检查文件或目录是否存在的函数

2010/05/10 PHP

php 截取字符串并以零补齐str_pad() 函数

2011/05/07 PHP

php学习之数据类型之间的转换代码

2011/05/29 PHP

PHP+Mysql+jQuery中国地图区域数据统计实例讲解

2015/10/10 PHP

jQuery 入门讲解1

2009/04/15 Javascript

使用typeof判断function是否存在于上下文

2014/08/14 Javascript

jQuery DOM删除节点操作指南

2015/03/03 Javascript

JavaScript如何自定义trim方法

2015/07/28 Javascript

原生JS实现图片轮播切换效果

2016/12/15 Javascript

通过npm引用的vue组件使用详解

2017/03/02 Javascript

Vue + Webpack + Vue-loader学习教程之相关配置篇

2017/03/14 Javascript

bootstrap 设置checkbox部分选中效果

2017/04/20 Javascript

vue2实现数据请求显示loading图

2017/11/28 Javascript

vue 纯js监听滚动条到底部的实例讲解

2018/09/03 Javascript

图解javascript作用域链

2019/05/27 Javascript

layer提示框添加多个按钮选择的实例

2019/09/12 Javascript

Python3.6连接Oracle数据库的方法详解

2018/05/18 Python

python实现猜单词小游戏

2020/05/22 Python

Python检查ping终端的方法

2019/01/26 Python

wxpython多线程防假死与线程间传递消息实例详解

2019/12/13 Python

django 解决扩展自带User表遇到的问题

2020/05/14 Python

python文件读取失败怎么处理

2020/06/23 Python

html5实现的便签特效(实战分享)

2013/11/29 HTML / CSS

全面解析HTML5中的标准属性与自定义属性

2016/02/18 HTML / CSS

Html5基于canvas实现电子签名并生成PDF文档

2020/12/07 HTML / CSS

Hotels.com韩国：海外国内旅行所需的酒店和住宿预订网站

2020/05/08 全球购物

毕业生毕业总结的自我评价范文

2013/11/02 职场文书

党校学习思想汇报

2014/01/06 职场文书

党员2014两会学习心得体会

2014/03/17 职场文书

岗位廉洁从业承诺书

2014/03/28 职场文书

网站推广策划方案

2014/06/04 职场文书

2015年三八妇女节活动总结

2015/02/06 职场文书

高中开学感言

2015/08/01 职场文书

大学生自我鉴定怎么写

2019/05/07 职场文书

Spring实现内置监听器

2021/07/09 Java/Android

一篇文章告诉你如何实现Vue前端分页和后端分页

2022/02/18 Vue.js