Gar*_*een 9 javascript performance jquery jquery-plugins
我偶然发现了jQuery.fly() - flyweight模式性能基准测试,在查看了测试代码和插件代码本身(也见下文)之后,我无法弄清楚它有什么用处?我搜索过互联网,找不到有关插件本身的任何有用信息.
它是一种更有效的循环/迭代数组而不是使用$(this)in的方法.each吗?
使用jQuery对象迭代
Run Code Online (Sandbox Code Playgroud)a.each(function() { $(this); });
使用jQuery.fly()迭代
Run Code Online (Sandbox Code Playgroud)a.each(function() { $.fly(this); });
(function($) {
var fly = $(),
push = Array.prototype.push;
$.fly = function(elem) {
var len = fly.length,
i;
if ($.isArray(elem)) {
fly.length = 0;
i = push.apply(fly, elem);
} else {
if (elem instanceof $) {
return elem;
}
if (typeof elem == "string") {
throw "use jQuery()";
}
fly[0] = elem;
fly.length = i = 1;
}
// remove orphaned references
while (i<len) {
delete fly[i++];
}
return fly;
};
})(jQuery);
Run Code Online (Sandbox Code Playgroud)
Ray*_*nos 11
免责声明:fly每次打电话时,您都会获得一个全局变更状态的实例$.fly.如果将它存储在变量中,它将会中断.这是微观优化,除非进行适当的基准测试,否则不应使用.
优化:任何你可以证明使用的情况$.fly因为使用$是一个瓶颈然后正确的解决方案是不使用jQuery并在"vanilla JavaScript"中执行DOM操作
这个想法是呼叫jQuery是昂贵的.要避免这种情况,请调用$()一次,然后将DOM节点注入其中.
这基本上有一个jQuery的全局实例,并交换DOM节点所在的内部.
flyweight是一种通过与其他类似对象共享尽可能多的数据来最小化内存使用的对象
这是通过只有一个jQuery对象来实现的.
var len = fly.length,
i;
// if elem is array push all dom nodes into fly.
if ($.isArray(elem)) {
// empties fly
fly.length = 0;
i = push.apply(fly, elem);
} else {
// if already $ then return it
if (elem instanceof $) {
return elem;
}
// dont use selectors
if (typeof elem == "string") {
throw "use jQuery()";
}
// set dom node.
fly[0] = elem;
fly.length = i = 1;
}
// remove any elements further in the array.
while (i<len) {
delete fly[i++];
}
return fly;
Run Code Online (Sandbox Code Playgroud)
进一步免责声明:此代码未设置this.context,this.selector因此任何使用该代码的代码或任何可通过使用这些代码进行优化的内部jQuery代码都不会进行优化.
您需要彻底的基准测试和仔细测试,以便能够得出结论,不设置那些值得优化,并且共享一个jQuery对象不会在代码中导致细微的错误/副作用.