Perf: Replace forEach() with for...of

.eslintrc.json

@@ -21,8 +21,24 @@
     "const-case/uppercase": 0,
     "func-names": 0,
     "global-require": 0,
+    "no-continue": 0,
     "no-param-reassign": 0,
     "no-plusplus": 0,
+    "no-restricted-syntax": [
+      "error",
+      {
+        "selector": "ForInStatement",
+        "message": "for..in loops iterate over the entire prototype chain, which is virtually never what you want. Use Object.{keys,values,entries}, and iterate over the resulting array."
+      },
+      {
+        "selector": "LabeledStatement",
+        "message": "Labels are a form of GOTO; using them makes code confusing and hard to maintain and understand."
+      },
+      {
+        "selector": "WithStatement",
+        "message": "`with` is disallowed in strict mode because it makes code impossible to predict and optimize."
+      }
+    ],
     "no-return-assign": [2, "except-parens"],
     "no-use-before-define": 0,
     "no-shadow": 0,

packages/child/index.js

@@ -321,10 +321,10 @@ Parent page: ${version} - Child page: ${VERSION}.
 
     log(`Applying sizeSelector: ${sizeSelector}`)
 
-    document.querySelectorAll(sizeSelector).forEach((el) => {
+    for (const el of document.querySelectorAll(sizeSelector)) {
       log(`Applying data-iframe-size to: ${getElementName(el)}`)
       el.dataset.iframeSize = true
-    })
+    }
   }
 
   function setMargin() {
@@ -531,19 +531,14 @@ This version of <i>iframe-resizer</> can auto detect the most suitable ${type} c
     }
 
     function bindAnchors() {
-      function setupLink(el) {
-        function linkClicked(e) {
-          e.preventDefault()
-
-          findTarget(this.getAttribute('href'))
-        }
-
-        if (el.getAttribute('href') !== '#') {
-          addEventListener(el, 'click', linkClicked)
+      for (const link of document.querySelectorAll('a[href^="#"]')) {
+        if (link.getAttribute('href') !== '#') {
+          addEventListener(link, 'click', (e) => {
+            e.preventDefault()
+            findTarget(link.getAttribute('href'))
+          })
         }
       }
-
-      document.querySelectorAll('a[href^="#"]').forEach(setupLink)
     }
 
     function bindLocationHash() {
@@ -751,12 +746,11 @@ The <b>size()</> method has been deprecated and replaced with  <b>resize()</>. U
 
     const nodeList = getAllElements(rootElement)()
 
-    // eslint-disable-next-line no-restricted-syntax
     for (const node of nodeList) {
-      if (resizeSet.has(node) || node?.nodeType !== Node.ELEMENT_NODE) continue // eslint-disable-line no-continue
+      if (resizeSet.has(node) || node?.nodeType !== Node.ELEMENT_NODE) continue
 
       const position = getComputedStyle(node)?.position
-      if (position === '' || position === 'static') continue // eslint-disable-line no-continue
+      if (position === '' || position === 'static') continue
 
       resizeObserver.observe(node)
       resizeSet.add(node)
@@ -767,6 +761,7 @@ The <b>size()</> method has been deprecated and replaced with  <b>resize()</>. U
   function setupResizeObservers() {
     resizeObserver = new ResizeObserver(resizeObserved)
     resizeObserver.observe(document.body)
+        resizeSet.add(document.body)
     attachResizeObserverToNonStaticElements(document.body)
   }
 
@@ -777,28 +772,15 @@ The <b>size()</> method has been deprecated and replaced with  <b>resize()</>. U
     let newMutations = []
 
     const updateMutation = (mutations) => {
-      const { length } = mutations
-
-      for (let i = 0; i < length; i++) {
-        const { addedNodes, removedNodes } = mutations[i]
+      for (const mutation of mutations) {
+        const { addedNodes, removedNodes } = mutation
 
-        const aLen = addedNodes.length
-        const rLen = removedNodes.length
-
-        if (aLen > 2) {
-          log('MutationObserver: addedNodes', addedNodes)
-        }
-
-        if (aLen) {
-          for (let j = 0; j < aLen; j++) {
-            observedMutations.add(addedNodes[j])
-          }
+        for (const node of addedNodes) {
+          observedMutations.add(node)
         }
 
-        if (rLen) {
-          for (let j = 0; j < rLen; j++) {
-            observedMutations.delete(removedNodes[j])
-          }
+        for (const node of removedNodes) {
+          observedMutations.delete(node)
         }
       }
     }
@@ -906,14 +888,14 @@ The <b>size()</> method has been deprecated and replaced with  <b>resize()</>. U
 
     let len = targetElements.length
 
-    targetElements.forEach((element) => {
+    for (const element of targetElements) {
       if (
         !hasTags &&
-        hasCheckVisibility && // Safari missing checkVisibility
+        hasCheckVisibility && // Safari was missing checkVisibility until March 2024
         !element.checkVisibility(checkVisibilityOptions)
       ) {
         len -= 1
-        return
+        continue
       }
 
       elVal =
@@ -924,7 +906,7 @@ The <b>size()</> method has been deprecated and replaced with  <b>resize()</>. U
         maxVal = elVal
         maxEl = element
       }
-    })
+    }
 
     setPerfEl(maxEl)
     performance.mark(PREF_END, {

packages/child/overflow.js

@@ -20,31 +20,33 @@ export const overflowObserver = (options) => {
     entry.boundingClientRect[side] === 0 ||
     entry.boundingClientRect[side] > entry.rootBounds[side]
 
-  const callback = (entries) => {
+  function update() {
+    overflowedElements = document.querySelectorAll(`[${OVERFLOW_ATTR}]`)
+    log('overflowedElements:', overflowedElements.length)
+    onChange()
+  }
+
+  function callback(entries) {
     entries.forEach((entry) => {
       entry.target.toggleAttribute(OVERFLOW_ATTR, isTarget(entry))
     })
 
     // Call this on the next frame to allow the DOM to
     // update and prevent reflowing the page
-    requestAnimationFrame(() => {
-      overflowedElements = document.querySelectorAll(`[${OVERFLOW_ATTR}]`)
-      log('overflowedElements:', overflowedElements.length)
-      onChange()
-    })
+    requestAnimationFrame(update)
   }
 
   const observer = new IntersectionObserver(callback, observerOptions)
 
-  function add(el) {
-    if (el?.nodeType !== Node.ELEMENT_NODE) return
-    if (observedElements.has(el)) return
+  return function (nodeList) {
+    for (const node of nodeList) {
+      if (node.nodeType !== Node.ELEMENT_NODE || observedElements.has(node))
+        continue
 
-    observer.observe(el)
-    observedElements.add(el)
+      observer.observe(node)
+      observedElements.add(node)
+    }
   }
-
-  return (nodeList) => nodeList.forEach(add)
 }
 
 export const isOverflowed = () => overflowedElements.length > 0