脚本合并提升javascript性能示例_javascript技巧

每个<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>

时间: 2024-12-31 01:49:57

脚本合并提升javascript性能示例_javascript技巧的相关文章

脚本合并提升javascript性能示例

 脚本合并可以有效提升javascript性能,下面有个不错的示例,大家可以参考下 每个<script>标签初始下载时都会阻塞页面渲染,所以减少页面包含的<script>标签数量有助于改善这一情况.这不仅仅针对外链脚本,内嵌脚本的数量同样也要限制.浏览器在解析HTML页面的过程中每遇到一个<script>标签,都会因执行脚本而导致一定的延时,因此最小化延迟时间将会明显改善页面的总体性能.    通常一个大型网站或网络应用需要依赖数个javascript文件.你可以把多个

原生JavaScript实现合并多个数组示例_javascript技巧

1.原生的JavaScript实现 复制代码 代码如下: var array1 = ["a", "b"]; var array2 = ["c", "d"]; 我要合并后变成下面这样: 复制代码 代码如下: <span class="keyword" style="font-weight:bold">var</span> <span class="k

使用firebug进行调试javascript的示例_javascript技巧

复制代码 代码如下: <script type="text/javascript"> //用于在friefox中调试 用console.log("hello"); /** function test(name) { console.log(name); } test("hello world");**/ //调试的技巧 function showLog(message) { console.log(message); console.

动态加载脚本提升javascript性能

 动态加载脚本可以有效提升javascript性能,下面有个不错的示例,大家可以参考下 通过文档对象模型(DOM),几乎可以用Javascript动态创建HTML中的所有 内容.其根本在于,<script>标签与页面中的其他元素并无差异:都能通过DOM引用,都能在文档中移动.删除,甚至被创建.用标准的DOM方法可以非常容易地创建一个新年的<script>元素:   代码如下: <script type="text/javascript">  var

Web性能优化系列 10个提升JavaScript性能的技巧_javascript技巧

Nicholas Zakas是一位 JS 大师,Yahoo! 首页的前端主程.他是<高性能 Javascript>的作者,这本书值得每个程序员去阅读. 当谈到 JS 性能的时候,Zakas差不多就是你要找的,2010年六月他在Google Tech Talk发表了名为<Speed Up Your Javascript>的演讲. 但 Javascript 性能优化绝不是一种书面的技术,Nicholas 的技术演进列出了10条建议,帮助你写出高效的 JS 代码. 1. 定义局部变量 当

JavaScript缓冲运动实现方法(2则示例)_javascript技巧

本文实例讲述了JavaScript缓冲运动实现方法.分享给大家供大家参考,具体如下: 实现原理:(目标距离-当前距离) / 基数 = 速度(运动距离越大速度越小,运动距离和速度成反比) 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; 需要注意:当计算出来的速度有小数时需要取整: 复制代码 代码如下: (500 - oDiv.offsetLeft) / 7 = iSpeed; iSpeed = iSpeed>0?Math.ceil(iSpeed):

JavaScript编写检测用户所使用的浏览器的代码示例_javascript技巧

能力检测在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数首付存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本. 怪癖检测怪癖实际上是浏览器实现中存在的bug,例如早期的webkit中就存在一个怪癖,即它会再for-in循环中返回被隐藏的属性.怪癖检测通常涉及到运行一段代码,然后确定浏览器是否存在某个怪癖.由于怪癖检测无法精确地检测特定的浏览器和版本. 用户代

javascript insertAfter()定义与用法示例_javascript技巧

本文实例讲述了javascript insertAfter()定义与用法.分享给大家供大家参考,具体如下: HTML部分: <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript部分: window.onload=function(){ var a =document.createElement("span"); var b =document.createTe

JavaScript中return用法示例_javascript技巧

本文实例讲述了JavaScript中return用法.分享给大家供大家参考,具体如下: return可以接受函数中的返回值,前提是函数中要有return语句. 下面是一个应用小示例: <html> <head> <script type='text/javascript'> function linkPage(){ alert('You Clicked??'); return false; } </script> </head> <body