PHP生成jQuery - 效率

Question

最近我一直在研究一个相对简单的个人项目,我需要生成相当数量的Javascript来将各种事件处理程序绑定到元素(例如on('click')),这让我想知道on('click')每个元素生成多个定义的效率,基于关于数组中的值(可能会更改每页加载),或者具有将其绑定到每个元素的单个函数.例如:

PHP生成jQuery

<?php
foreach($var as $key => $val){
    echo '$("' . $key . '").on("click", function(){
        // do something
    });';
}
// Which will generate:
// $(elemkey1).on("click", function(){ // do something });
// $(elemkey2).on("click", function(){ // do something });
// $(elemkey3).on("click", function(){ // do something });
// $(elemkey4).on("click", function(){ // do something });
// ...

纯粹的jQuery

$(elem).each(function(){
    // do something
);

所以我的问题是:哪个是最有效的方式来声明上面的内容？

显然,第二个例子取决于所使用的选择器(无论是一个id还是一个class例子而且我完全了解这里的注意事项)但除此之外,假设使用了正确的选择器,我很想知道是否有轻微的性能有利于使用PHP for循环显式地声明每个元素的事件处理程序,而不是jQuery .each()或类似的方法.

Answer 1

一个选择器是首选

存在性能差异,一旦打破3000左右的元素大小,它就会变得可见.10,000点是不可否认的.

使用单个选择器一次以处理事件的效率要高得多,因为只有在触发时才需要检查一次click事件.

事件派遣是主要原因

效率变化的主要原因是事件的运作方式.当一个事件被调度时,它必须一直传播到元素,通过DOM传播到目标,然后一直冒泡回来.与在DOM中进一步触发事件相比,这是非常低效的.

请阅读3.1.事件调度和DOM事件在W3C 流动,以获得更精细的颗粒细节.

以下是该部分的图表之一:

在PHP生成的场景中,带宽和缓存也可能存在问题

除了JavaScript执行角度之外,还存在php生成代码的问题.虽然对于较小的集合来说可能可以忽略不计,但从带宽的角度来看,对于较大的集合来说这是有问题的(这在处理移动浏览时会发挥得更为明显).此外,当服务器生成javascript代码时,为浏览器缓存将是非常困难的,假设这些集合通常会不同,因此生成不同的选择器.如果没有选择器集的缓存中断方案(可能使用用于生成它们的术语),那么可能会缓存错误的选择器集.