繁体 English 中英

vanillaJS DOM节点选择逻辑和高效使用，来自jquery [关闭]

[英]vanillaJS DOM node selection logic & efficient usage, coming & migrating from jquery [closed]

原文 2022-09-25 21:13:41 7 0 javascript/ jquery/ performance/ dom/ dom-events

上下文：在浏览器中运行的数据驱动应用程序并始终以大量 html 打开（>1500 个 dom 节点 99.9% 动态创建，并定期更新每次重新创建大部分内容，因为数据总是在变化）

我对 javascript 浏览器引擎如何有效地管理此迁移缺乏适当的方法和理解； 我开始以某种方式相信

对 DOM 的查询和交互越少越好，
每当多个节点需要更新时，最好更新公共父节点，将所有更新包装到一个节点中
.find()从现有的 jquery object 据说是 select DOM 节点的最有效方法

但也许它只是 jquery 的东西。

与 jquery 我做：

// on DOM loaded
const $body = $(document.body)

const generateHtmlString = function($t,e) {
                           
                                  // do stuff
                                  // insert always one node only at top level
                                  return '<div>'+htmlElementsString+'</div>' 

}

// events declaration
$body.on(event, eventTargetSelector, function(e){
  
  const $t = $(this)
  // change html of another node
  $body.find(elementToUpdateSelector).html(generateHtmlString ($t,e))
 })

=> 每次选择 DOM 节点时（绝对）需要在document.body和find()上的 jQuery object 和 find() 中的 object

所以，现在，研究并想知道在 vanilla js 中做同样事情的最有效和最高效的方法是什么，而无需重写我的太多代码。

尝试使用数千行代码进行更新是非常困难的（如果我选择了一种方式，然后在中途意识到它会产生我没有预见到的问题 => 这一切都是徒劳的，我必须重新启动）

1 - 是否值得继续使用将在整个应用程序中引用正文节点的 one 变量？

const body = document.body

矫枉过正？ 它甚至会像我期望的那样像 jquery 那样工作吗（在任何时候访问当前的主体而不是实例化的主体）？

2 - 替换.on()这应该很好，我假设：

body.addEventListener(event,function(e) {
       switch(e.target):
          case  //has tag, id,  class, prop...
            body.querySelector(elementToUpdateSelector).replaceChildren(generateHtmlString(e.target));
            break;
         case //etc 
         default:
   })

3 - a - body.querySelector(elementToUpdateSelector).replaceChildren('<div>'+htmlElementsString+'</div>')是否正确有效？ 还是我可以做得更好？ （目前不使用document.createElement() ，在我的代码中重新思考和重写的事情太多了）

我已经收集到应该尽可能优先使用documentGetElementById /class/Tag ，但我不知道在插入节点之前将节点包装到一个父节点中是否仍然重要

3 - b - 当出于某种原因您必须使用querySelector()时，选择器的特异性如何？

=> 是否适用与 jQuery 相同的逻辑？ 即：具体在右边少那么左边section div div.className而不是.className而不是section.className1 div.className2 div.className3 ？ 还是像一路更具体，引擎最容易访问 DOM 节点？