我们经常通过匿名函数（Anonymous function）来写回调。 简单来讲匿名即没有名字的函数，一般都立即执行。但是它与命名函数（有名字的函数）的性能如何呢？ 我们可以比较一下，我们随便找一台可以执行Shell命令的计算机来使用大量函数调用看一看二者执行消耗时间： anonymous.js代码如下: var count = 100000000, sum = 0 while (count--) (function() { sum++ })()执行一下代码如下: $ time node anonymous.js real 0m1.456s...
Python 和 Ruby 也有这样的框架，但因为在实际使用中会不可避免地用到含有同步代码的库，因此没能成长起来，而在 Node.js 之前，JavaScript 的服务器端编程几乎是空白，所以 Node.js 才得以建立起了一个所有 IO 均为异步的代码库。 大部分 Web 应用的瓶颈都在 IO, 即读写磁盘，读写网络，读写数据库。使用怎样的策略等待这段时间，就成了改善性能的关键点。 PHP 的策略：多进程运行，直接原地等待 IO 完成。缺点：多个进程会消耗多...
Javascript在浏览器中的性能，可以说是前端开发者所要面对的最重要的可用性问题。 在Yahoo的Yslow23条规则当中，其中一条是将JS放在底部 。原因是，事实上，大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务，而同一时间只能有一个任务被执行。Javascript运行了多长时间，那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。从基本层面说,这意味着标签的出现使整个页面因脚本解析、运行而出现等待。不论实际的 ...
我们知道，在js中，字符串连接是性能最低的操作之一。 例如：代码如下: var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化。 由于字符串是不可变的，这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。 因此，可以利用数组对象进行优化。 例如：var buffer=[],i=0; buffer[i++]="Hello"; //通过相应索引值添加元素比push方法快 buffer[i++]=" World!"; var te...
如何能做出高效的web前端程序是我每次做前端开发都会不自觉去考虑的问题。几年前雅虎里牛逼的前端工程师们出了一本关于提升web前端性能的书籍，轰动了整个web开发技术界，让神秘的web前端优化问题成为了大街的白菜，web前端优化变成了菜鸟和大牛都能回答的简单问题，当整个业界都知道了惊天秘密的答案，那么现有的优化技术已经不能对你开发的网站产生的质的飞越，为了让我们开发的网站性能比别人的网站更加优秀，我们需要更加深入的...
一、装载 先装载静态页面的引用js文件，然后查找引用文件中是否包含onload函数，比如main.js中包含onload函数，在main.js中查找是否有对其他js文件的引用，优先装载引用js文件，被引用中文件的装载顺序和main.js的顺序一致。 装载完毕后，开始执行onload函数。由于js执行顺序是顺序执行的，为提高页面相应速度，一般做法是在onload中只画页面，一些事件的绑定函数，ajax方法等可延后书写。 二、响应速度分析 1.借助工具进行分析 ...
随着 web 发展，前端应用变得越来越复杂，基于后端的 javascript(Node.js) 也开始崭露头角，此时 javascript 被寄予了更大的期望，与此同时 javascript MVC 思想也开始流行起来。javascript 模板引擎作为数据与界面分离工作中最重要一环，越来越受开发者关注，近一年来在开源社区中更是百花齐放，在 Twitter、淘宝网、新浪微博、腾讯QQ空间、腾讯微博等大型网站中均能看到它们的身影。 本文将用最简单的示例代码描述现有的 javascr...
本文较为详细分析了jQuery性能优化技巧。分享给大家供大家参考。具体分析如下： 一、使用最新版本的jQuery类库 jQuery新版本会较上个版本进行Bug修复和一些优化，不过需要注意的是，在更换版本之后，不要忘记测试你的代码，毕竟有时候不是完全向后兼容的。 二、使用合适的选择器 jQuery选择器性能最佳到最差方式如下： id选择器，如$(#id, context) 标签选择器，如$(p, context) class选择器，如$(.class, context) 属性选择器，如...
比较了4种可以向数组添加项的方法之间的性能： 使用索引器添加代码如下: console.time("index"); var a = []; for (var i = 0, l = times; i < l; i++) {a[i] = i; } console.timeEnd("index");使用push方法代码如下: console.time("push"); var a = []; for (var i = 0, l = times; i < l; i++) {a.push(i); } console.timeEnd("push");使用concat方法代码如下: console.time("concat"); var a = []; for (var i = 0, l = times; ...
本来在那片编写可维护性代码文章后就要总结这篇代码性能文章的，耽搁了几天，本来也是决定每天都要更新一篇文章的，因为以前欠下太多东西没总结，学过的东西没去总结真的很快就忘记了，记录一下在你脑力留下更深的印象，特别是这些可维护性代码，性能什么的，当在你脑子里形成一种习惯了，那你就牛了！这里也要给初学者一个建议：多总结你学过的东西，因为这其实也是在学习新知识！ 好，进入我们的主题：如何提高JS代码的性能。1.优...
对于前端开发人员，在开发过程中经常需要监控某些表达式或变量的值，如果使用用 debugger 会显得过于笨重，最常用的方法是会将值输出到控制台上方便调试。 最常用的语句就是console.log(expression)了。 从早前一道阿里实习生招聘笔试题目入手：function f1() {console.time('time span'); } function f2() {console.timeEnd('time span'); } setTimeout(f1, 100); setTimeout(f2, 200);function waitForMs(n) {var now = Date.now...
一个Node.JS 的进程只会运行在单个的物理核心上，就是因为这一点，在开发可扩展的服务器的时候就需要格外的注意。 因为有一系列稳定的API，加上原生扩展的开发来管理进程，所以有很多不同的方法来设计一个可以并行的Node.JS运用。在这篇博文里，我们就来比较下这些可能的架构。 这篇文章同时也介绍compute-cluster 模块：一个小型的Node.JS库，可以用来很方便的管理进程，从来二线分布式计算。 遇到的问题 我们在Mozilla Persona的...
这篇文章主要深入介绍了提高jQuery性能优化的技巧，有需要的小伙可以来参考下。下面把提高jQuery性能优化技巧给大家分享如下：缓存变量DOM遍历是昂贵的，所以尽量将会重用的元素缓存。// 糟糕 h = $(#element).height(); $(#element).css(height,h-20); // 建议 $element = $(#element); h = $element.height(); $element.css(height,h-20);避免全局变量jQuery与javascript一样，一般来说,最好确保你的变量在函数作用域内。// 糟糕...
使用requestAnimationFrame实现js动画性能好。先给大家简单介绍下requestAnimationFrame比起setTimeout、setInterval有哪些优势？ 示例一： requestAnimationFrame 比起 setTimeout、setInterval的优势主要有两点： 1、requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。 2、在隐藏或不可见的元素中，reques...
先回顾下前一篇文章高性能JavaScript DOM编程，主要提了两点优化，一是尽量减少DOM的访问，而把运算放在ECMAScript这一端，二是尽量缓存局部变量，比如length等等，最后介绍了两个新的API querySelector()以及querySelectorAll()，在做组合选择的时候可以大胆使用。而本文主要讲的是DOM编程可能最耗时的地方，重排和重绘。1、什么是重排和重绘 浏览器下载完页面中的所有组件——HTML标记、JavaScript、CSS、图片之后会解析生成两个...