脚本合并提升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>

时间: 2014-02-22

web性能优化之javascript性能调优

JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用.随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多.JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.绝大多

javascript性能优化之事件委托实例详解

本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

JavaScript性能优化 创建文档碎片(document.createDocumentFragment)

在浏览器中,我们一旦把节点添加到document.body(或者其他节点)中,页面就会更新并反映出这个变化,对于少量的更新,一条条循环插入也会运行很好,也是我们常用的方法.代码如下: 复制代码 代码如下: for(var i=0;i<5;i++){ var op = document.createElement("span"); var oText = document.createTextNode(i); op.appendChild(oText); document.body

JavaScript性能陷阱小结(附实例说明)

1.避免使用eval或者Function构造函数 2.避免使用with 3.不要在性能要求关键的函数中使用try-catch-finally 4.避免使用全局变量 5.避免在性能要求关键的函数中使用for-in 6.使用字符串累加计算风格 7.原操作会比函数调用快 8.设置setTimeout() 和 setInterval() 时传递函数名而不是字符串 9.避免在对象中使用不需要的DOM引用 10.最清晰的目标速度,最小化作用域链 11.试着在脚本中少使用注释,避免使用长变量名 12.在当前作

JavaScript性能优化之小知识总结

随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术.而现在Ajax则是最为流行的一种方式.JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能. 前言 一直在学习javascript,也有看过<犀利开发Jquery内核详解与实践>,对这本书的评价只有两个字犀利,可能是对javas

减少访问DOM的次数提升javascript性能

访问DOM元素是有代价的,修改DOM元素则更为昂贵,因为它会导致浏览器重新计算页面的几何变化. 当然,最坏的情况是在循环中访问修改元素,尤其是对HTML元素集合循环操作. 例如: 复制代码 代码如下: <!-- 优化前 --> <script type="text/javascript"> function innerHTMLLoop () { for(var count = 0; count < 15000; count++){ document.get

提高JavaScript执行效率的23个实用技巧

本文向大家分享23种JavaScript提高执行效率的小技巧.最佳实践等非常实用的内容.当然JavaScript的实用技巧不止这些,还有很多即好玩又能提高程序运行效率的技巧,以后我们会继续分享给大家. 文中所提供的代码片段都已经过最新版的Chrome 30测试,该浏览器使用V8 JavaScript引擎(V8 3.20.17.15). 1.使用逻辑符号&&或者||进行条件判断 var foo = 10; foo == 10 && doSomething(); // 如果 f

有效提高JavaScript执行效率的几点知识

为了提供新鲜.别致的用户体验,很多网站都会使用 JavaScript 来改善设计.验证表单.检查浏览器,以及Ajax请求,cookie操作等等,实现无刷新动态效果 .但是,要将大量内容在浏览器呈现,如果处理不好,网站性能将会急剧下降.所以我们有必要了解下,如何提高JavaScript的执行效率. JavaScript 函数 在JavaScript 中,函数在使用前会预编译.尽管有些时候下可以使用字符串代替函数,但是每次执行这段JavaScript 代码时都会重新解析,影响性能. 1.eval例子

分享50个提高PHP执行效率的技巧

1.用单引号代替双引号来包含字符串,这样做会更快一些.因为PHP会在双引号包围的字符串中搜寻变量, 单引号则不会,注意:只有echo能这么做,它是一种可以把多个字符串当作参数的"函数"(译注:PHP手册中说echo是语言结构,不是真正的函数,故 把函数加上了双引号). 2.如果能将类的方法定义成static,就尽量定义成static,它的速度会提升将近4倍. 3.$row['id'] 的速度是$row[id]的7倍. 4.echo 比 print 快,并且使用echo的多重参数(译注:

JavaScript执行效率与性能提升方案

如何提升JavaScript执行效率与性能在前端开发中位于一个很重要的地方,这节来研究下如何在平时做项目过程中,提升JavaScript性能与运行效率. 循环 循环是很常用的一个控制结构,大部分东西要依靠它来完成,在JavaScript中,我们可以使用for(;;),while(),for(in)三种循环,事实上,这三种循环中for(in)的效率极差,因为他需要查询散列键,只要可以就应该尽量少用.for(;;)和while循环的性能应该说基本(平时使用时)等价. 而事实上,如何使用这两个循环,则

Task提高异步执行效率技巧

async Task 语法糖出来后,异步编程变得非常简单,适合需要耗费较长时间的任务. 有些小伙伴使用后可能会非常疑惑,使用异步和同步,在耗时上几乎没有差别. 下面我们看一个例子,场景是需要调用多个第三方的WebApi,分别是获取名称.年龄.性别,由于网络环境等原因,api响应时间可能会接近1秒 public async Task Test() { var sw = new Stopwatch(); sw.Start(); var userName = await GetUserNameAsyn

JavaScript字符串操作的四个实用技巧

目录 前言 1. 拆分字符串 2. JSON格式化和解析 3. 多行字符串和嵌入式表达式 4. 验证字符串数组中是否存在子字符串 总结 前言 字符串是编程世界最基本最重要的数据类型之一,JavaScript 也不例外.JavaScript 字符串是不可变的,对于存储可以由字符.数字和 Unicode 组成的文本很便捷.JavaScript 提供了许多内置函数,允许以不同的方式创建和操作字符串.在本文将分享一些优雅的操作 JavaScript 字符串的技巧. 1. 拆分字符串 JavaScript

Javascript执行效率全面总结

Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等等)

探寻Javascript执行效率问题

Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容易规避的问题 Javascript自身执行效率 Javascript中的作用域链.闭包.原型继承.eval等特性,在提供各种神奇功能的同时也带来了各种效率问题,用之不慎就会导致执行效率低下. 1.全局导入 我们在编码过程中多多少少会使用到一些全局变量(window,document,自定义全局变量等

Oracle提高sql执行效率的心得建议

复制代码 代码如下: -->FROM子句中包含多个表的情况下,选择记录条数最少的表作为基础表 -->解析WHERE子句是自下而上的 过滤条件要有顺序 -->ORACLE会将'*'转换成列名 -->DELETE会在rollback segment中存放可恢复信息,可以试试TRUNCATE -->COMMIT会释放:1.rollback segment 2.被程序语句获得的锁 3.redo log buffer -->把Alias前缀于每个Column上可以减少解析的时间

Oracle提高SQL执行效率的3种方法

Oracle提供了多种方法用于减少花在剖析Oracle SQL表达式上的时间,在执行带有大量执行计划的复杂查询时剖析过程会拖累系统的性能.现在我们来简要地看看这些方法中的几种. 1.使用ordered提示 Oracle必须花费大量的时间来剖析多表格的合并,用以确定表格合并的最佳顺序.如果SQL表达式涉及七个乃至更多的表格合并,那么有时就会需要超过30分钟的时间来剖析,因为Oracle必须评估表格合并所有可能的顺序.八个表格就会有40,000多种顺序.Ordered这个提示(hint)和其他的提示