jquery的$内存消耗问题

Question

我们通常使用jquery设置一个对象的属性

$("#div1").css('display','block');
$("#div1").css({"background-color":"yellow","font-size":"200%"});

但是我使用$("#div1")获取会造成对应的内存浪费吗?是不是改成下面的代码更省内存

var div1=$("#div1");
div1.css('display','block');
div1.css({"background-color":"yellow","font-size":"200%"});

Answer 1

每使用一个$就会实例化一次jquery对象，并进行相应的逻辑处理，比如.css(),实例化之后执行css函数，但这也就只是一个函数的执行，是会增加计算量，但除了闭包外，其他的都是用后即焚，不会占用内存，只考验机器的运算速度，不过这点儿计算量对现在的计算机运算量来说可以忽略不计。
反而是var 了一个div = $()；这样代码虽然只执行了一遍，单内容被存储了下来，要是不清理，这才是占用内存。不过这些操作都不会有啥影响，计算机运算很强，不用担心。

Answer 2

$("#div1")这样的语句会对DOM查询，DOM操作太频繁会比较慢，所以推荐将多个DOM操作合并起来减少重复操作，就像是后面那种写法。
主要还是影响效率，内存占用问题不大

Answer 3

第一种写法进行了不必要的重复运算，多次循环迭代的时候，会显著地增加运行时间，而内存占用影响，据我所知，应该不大。
第二种写法确实更优，一个引用其实占不了多少内存，而且这种逻辑通常写在函数体内，退出作用域之后的下一次 GC 会回收其内存的。

Answer 4

“第一种方式不分配内存”的说法是错误的，因为 JS 这样非底层的语言，所有的表达式都需要占用内存，针对内存，我们所能优化的只能是节约使用以及不要给内存回收添堵。

如果你了解 jQuery 的原理的话，你会发现一句 jQuery 背后给你做了多少工作：1. 判断参数类型、2. 解析参数、调用 DOM 接口、构造 jQuery 对象、隐式迭代。使用第一种方案意味着每次都要把这些事情从头做一遍，其耗费的计算资源和运行时间都是成倍地增长，在内存被回收之前，两个表达式就要同时占用两块内存，其中的 DOM 接口效率又较为低下，所谓得不偿失，而且不确定有没有真的得到什么优化。

至于赋值会不会给内存回收添堵，这在我认知盲区内，我看过的所有资料都表明垃圾回收是发生在函数退出执行环境的情况下才进行的(但不排除未引用的内存在函数没有返回的情况下也会被回收，具体要看 JS 引擎的实现)。但如果赋值会阻碍内存回收，那么真正有效的优化方案，也只能是在第二种方案的基础上，适时主动解除引用：

var div1=$("#div1");
div1.css('display','block');
div1.css({"background-color":"yellow","font-size":"200%"});

// 用完之后，把变量 div1 指向 null，以解除对 jQuery 对象的引用
div1 = null;

Answer 5

看操作dom的次数吧，如果操作的比较多第二中显然更好，如果就一次就必要分配内存了