代码如下: 事实证明cssText在多数浏览器中性能较高 || var container = document.getElementById('container'); function appendElement(){ var ary = []; container.innerHTML = ''; for(var i=0;ivar div = document.createElement('div'); ary.push(div); container.appendChild(div); } return ary; } function test1(){ var ary = appendElement(); var d1 = new Date; for(var j=0;jary[j].style.width = '50px'; ...
假设要生成一千万个随机数，常规的做法如下： 代码如下: var numbers = []; for (var i = 0; i < 10000000; i++) { numbers.push(Math.random()); } 然而，在IE下执行这段代码时，却弹出了一个窗口提示用户是否停止这段脚本。出现这种情况，首先想到的是优化循环体。但明显地，循环体很简单，没什么优化的余地。即使把循环体清空，提示仍然存在。于是，我得出了一个结论：在IE下，一旦循环次数超过了某个特定值，就会弹出停止...
新版本中的部分重要改进：attr()、val()和data()方法有了更好的性能；在attr()方法中支持Boolean属性；添加了钩子函数，允许对attr()和val()方法进行扩展；map()方法添加了对对象的支持（将JavaScript对象的属性映射到函数）允许使用相对值（“+=”，“-=”）更新CSS；添加了deferred.always(), deferred.pipe()方法，减少了代码量，提高了代码易读性；同步动画 – 现在所有动画都同步到相同的时间间隔. 使用新的浏览器功能，动画也...
第一章：加载和执行 浏览器的JavaScript的引擎是编译器层的优化； 当浏览器执行JavaScript代码时，不能同时做其他任何事情（单一进程），意味着标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载)，所以头部的JS和CSS用来渲染页面，交互行为（几乎所有）的JS放在底部； 主流浏览器都允许并行下载JS。 减少外链脚本数量将会改善性能（合并JS） 任何网站都可以使用一个把制定文...
这是一篇原创翻译文章。原文地址。我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：Steve Souders在他的blog里面有阐述：Using Iframes Sparingly:iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池 阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过...
精妙的 tmpl 前端模板类开源的不少，但最属 jQuery 作者 John Resig 开发的 “javascript micro templating” 最为精妙，寥寥几笔便实现了模板引擎核心功能。 它的介绍与使用方式请看作者博客：http://ejohn.org/blog/javascript-micro-templating/ 让我们先看看他的源码： 代码如下: (function(){ var cache = {}; this.tmpl = function (str, data){ var fn = !/\W/.test(str) ? cache[str] = cache[str] || tmpl(document.getE...
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具，只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。尽量减少DOM访问使用JavaScript访问DOM元素很容易，代码更容易阅读，但是速度很慢。下面介绍几个要点：限制使用JavaScript来修饰网页布局，把针对访问元素的引用缓存起来。有时，当你的网站依赖大量的DOM改动...
原因是我在测试的时候：带入了错误的变量。具体可以查看图片上的 $(parentID > childClass) 我直接比较两个字符换大小了！ 感谢 html5中文网 QQ群中的 “不见丘比特”。 其中第三点提到父元素与子元素的关系中提到了 从父元素选择子元素的用例： 代码如下: $(.child, $parent) $parent.find(.child) $parent.children(.child) $(#parent > .child) $(#parent .child) $(.child, $(#parent)) 在其所给的测试...
最近，我就对jQuery的选择器使用做了一些个小小的实验，用来说明jQuery的不同选择器在不同的情况下，哪个效率更高，更值得使用。 先在每个测试页面的head中引入google提供的jquery文件和用于测试的小插件firejspt。 代码如下: 1. 最常用的id选择器和class选择器 将以下代码复制200次，置于body标签内。 代码如下: 比较id选择器和class选择器 比较id选择器和class选择器 用于本次测试的JS代码如下： 代码如下: function il...
代码如下: Ext.applyIf(Array.prototype, { /** * Checks whether or not the specified object exists in the array. * @param {Object} o The object to check for * @param {Number} from (Optional) The index at which to begin the search * @return {Number} The index of o in the array (or -1 if it is not found) */ indexOf : function(o, from){ var len = this.length; from = from || 0; from += (from < 0) ? len ...
Daniel Clifford 在 Google I/O 2012 上做了一个精彩的演讲“Breaking the JavaScript Speed Limit with V8”。在演讲中，他深入解释了13个简单的代码优化方法，可以让你的代码在 Chrome 的 V8 JavaScript 引擎编译/运行你的 JavaScript 代码更加快速。在演讲中，他解释了怎么优化，并且解释了原因。下面简明的列出了优化的要点： 1. 在构造函数中初始化所有的对象 2. 始终用相同的顺序初始化对象 3. 尽量使用数字 ...
局部变量也就可以理解为在函数内部定义的变量，很明显访问局部变量要比域外的变量要快，因为它位于作用域链的第一个变量对象中(关于作用域链的介绍可以阅读这篇文章)。变量在作用域链的位置越深，访问所需要的时间就越长，全局变量总是最慢的，因为它们位于作用域链的最后一个变量对象。 每种数据类型的访问都需要付出点性能代价，对于直接量和局部变量基本都能消费得起，而访问数组项和对象成员则要代价高点。下图显示了不同浏览器...
@老赵 的一个微博“ 由eval生成的代码效率真的很差吗？ http://t.cn/zWTUBEo 内含人身攻击，不喜勿入。” 引发了最近对eval火爆的讨论，教主 @Franky 和 灰大 @otakustay 也给了精彩的数据分析。 刚好之前也做过类似的测试，我也跟风凑个热闹，提供两组数据供大家参考。 更新1： 感谢灰大 @otakustay 的指导，为排除eval('')调用本身对结果的影响，增加一组新数据A3, B3。并对旧的全部数据重测。 更新2： 感谢莫大 @貘吃馍香 的强力...
本文提供即刻提升你的脚本性能的十个步骤。不用担心，这并不是什么高深的技巧。人人皆可运用！这些技巧包括： 使用最新版本 合并、最小化脚本 用for替代each 用ID替代class选择器 给选择器指定前后文 建立缓存 避免DOM操作 避免使用concat()，利用join()处理长字串 返回false值 利用小抄和参考文档 使用最新版本 jQuery一直处于不断的开发和改进过程中。 John 和他的团队不断研究着提升程序性能的新方法。 一点题外话，几个月前他还...
如果对jQuery这东西只停留在用的层面，而不知其具体实现的话，真的很容易用出问题来。这也是为什么近期我一直不怎么推崇用jQuery，这框架的API设定就有误导人们走上歧途之嫌。 代码如下: $.fn.beautifyTable = function(options) { //定义默认配置项，再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children(tbody), tr = tbody.children(tr), th = tbody.children(th), td = tbody.childre...