Improve performance by using for-of loop instead of iterate functions

.eslintrc

@@ -18,3 +18,9 @@ rules:
       ignoreTemplateLiterals: true
 
   no-param-reassign: off
+
+  no-restricted-syntax:
+    - error
+    - ForInStatement
+    - LabeledStatement
+    - WithStatement

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Fixed
+
+- Improve conversion performance by using `for-of` loop (40-70% faster) ([#79](https://github.com/marp-team/marpit/pull/79))
+
 ## v0.1.2 - 2018-09-20
 
 ### Fixed

src/element.js

@@ -32,12 +32,12 @@ class Element {
       tag: { enumerable: true, value: tag },
     })
 
-    Object.keys(attributes).forEach(attr => {
+    for (const attr of Object.keys(attributes)) {
       Object.defineProperty(this, attr, {
         enumerable: true,
         value: attributes[attr],
       })
-    })
+    }
 
     Object.freeze(this)
   }

src/helpers/inline_style.js

@@ -64,7 +64,9 @@ export default class InlineStyle {
    * The unexpected declarations will strip to prevent a style injection.
    */
   toString() {
-    return Object.keys(this.decls).reduce((stt, prop) => {
+    let built = ''
+
+    for (const prop of Object.keys(this.decls)) {
       let parsed
 
       try {
@@ -73,14 +75,17 @@ export default class InlineStyle {
         })
       } catch (e) {
         // A declaration that have value it cannot parse will ignore.
-        return stt
       }
 
-      parsed.each(node => {
-        if (node.type !== 'decl' || node.prop !== prop) node.remove()
-      })
+      if (parsed) {
+        parsed.each(node => {
+          if (node.type !== 'decl' || node.prop !== prop) node.remove()
+        })
+
+        built += `${parsed.toString()};`
+      }
+    }
 
-      return `${stt}${parsed.toString()};`
-    }, '')
+    return built
   }
 }

src/helpers/split.js

@@ -10,21 +10,23 @@
  * @returns {Array[]} Splited array.
  */
 function split(arr, func, keepSplitedValue = false) {
-  return arr.reduce(
-    (ret, value) => {
-      /**
-       * Return true at the split point.
-       *
-       * @callback splitCallback
-       * @param {*} value
-       */
-      if (func(value)) return [...ret, keepSplitedValue ? [value] : []]
+  const ret = [[]]
 
+  for (const value of arr) {
+    /**
+     * Return true at the split point.
+     *
+     * @callback splitCallback
+     * @param {*} value
+     */
+    if (func(value)) {
+      ret.push(keepSplitedValue ? [value] : [])
+    } else {
       ret[ret.length - 1].push(value)
-      return ret
-    },
-    [[]]
-  )
+    }
+  }
+
+  return ret
 }
 
 export default split

src/helpers/wrap_tokens.js

@@ -18,9 +18,7 @@ function wrapTokens(type, container, tokens = []) {
   const { tag } = container
 
   // Update nesting level of wrapping tokens
-  tokens.forEach(t => {
-    t.level += 1
-  })
+  for (const t of tokens) t.level += 1
 
   // Create markdown-it tokens
   const open = new Token(`${type}_open`, tag, 1)
@@ -30,12 +28,10 @@ function wrapTokens(type, container, tokens = []) {
   Object.assign(close, { ...(container.close || {}) })
 
   // Assign attributes
-  Object.keys(container).forEach(attr => {
-    if (['open', 'close', 'tag'].includes(attr)) return
-    if (container[attr] == null) return
-
-    open.attrSet(attr, container[attr])
-  })
+  for (const attr of Object.keys(container)) {
+    if (!['open', 'close', 'tag'].includes(attr) && container[attr] != null)
+      open.attrSet(attr, container[attr])
+  }
 
   return [open, ...tokens, close]
 }

src/markdown/background_image.js

@@ -30,22 +30,20 @@ function backgroundImage(md) {
     'marpit_parse_image',
     'marpit_background_image',
     ({ tokens }) => {
-      tokens.forEach(t => {
-        if (t.type !== 'image') return
-
-        if (t.meta.marpitImage.options.includes('bg')) {
+      for (const t of tokens) {
+        if (t.type === 'image' && t.meta.marpitImage.options.includes('bg')) {
           t.meta.marpitImage.background = true
           t.hidden = true
 
-          t.meta.marpitImage.options.forEach(opt => {
+          for (const opt of t.meta.marpitImage.options) {
             if (bgSizeKeywords[opt])
               t.meta.marpitImage.backgroundSize = bgSizeKeywords[opt]
 
             if (opt === 'left' || opt === 'right')
               t.meta.marpitImage.backgroundSplit = opt
-          })
+          }
         }
-      })
+      }
     }
   )
 
@@ -57,7 +55,7 @@ function backgroundImage(md) {
 
       let current = {}
 
-      tokens.forEach(tb => {
+      for (const tb of tokens) {
         if (tb.type === 'marpit_slide_open') current.open = tb
         if (tb.type === 'marpit_inline_svg_content_open')
           current.svgContent = tb
@@ -92,44 +90,44 @@ function backgroundImage(md) {
           current = {}
         }
 
-        if (!current.open || tb.type !== 'inline') return
-
-        tb.children.forEach(t => {
-          if (t.type !== 'image') return
-
-          const {
-            background,
-            backgroundSize,
-            backgroundSplit,
-            filter,
-            height,
-            size,
-            url,
-            width,
-          } = t.meta.marpitImage
-
-          if (background && !url.match(/^\s*$/)) {
-            current.images = [
-              ...(current.images || []),
-              {
+        if (current.open && tb.type === 'inline')
+          for (const t of tb.children) {
+            if (t.type === 'image') {
+              const {
+                background,
+                backgroundSize,
+                backgroundSplit,
                 filter,
                 height,
-                size: (() => {
-                  const s = size || backgroundSize || undefined
-
-                  return !['contain', 'cover'].includes(s) && (width || height)
-                    ? `${width || s || 'auto'} ${height || s || 'auto'}`
-                    : s
-                })(),
+                size,
                 url,
                 width,
-              },
-            ]
-          }
+              } = t.meta.marpitImage
 
-          if (backgroundSplit) current.split = backgroundSplit
-        })
-      })
+              if (background && !url.match(/^\s*$/)) {
+                current.images = [
+                  ...(current.images || []),
+                  {
+                    filter,
+                    height,
+                    size: (() => {
+                      const s = size || backgroundSize || undefined
+
+                      return !['contain', 'cover'].includes(s) &&
+                        (width || height)
+                        ? `${width || s || 'auto'} ${height || s || 'auto'}`
+                        : s
+                    })(),
+                    url,
+                    width,
+                  },
+                ]
+              }
+
+              if (backgroundSplit) current.split = backgroundSplit
+            }
+          }
+      }
     }
   )
 
@@ -138,10 +136,9 @@ function backgroundImage(md) {
     'marpit_advanced_background',
     state => {
       let current
+      const newTokens = []
 
-      state.tokens = state.tokens.reduce((ret, t) => {
-        let tokens = [t]
-
+      for (const t of state.tokens) {
         if (
           t.type === 'marpit_inline_svg_content_open' &&
           t.meta &&
@@ -160,7 +157,7 @@ function backgroundImage(md) {
             if (splitSide === 'left') t.attrSet('x', '50%')
           }
 
-          tokens = [
+          newTokens.push(
             ...wrapTokens(
               'marpit_advanced_background_foreign_object',
               { tag: 'foreignObject', width, height },
@@ -178,27 +175,30 @@ function backgroundImage(md) {
                     tag: 'div',
                     'data-marpit-advanced-background-container': true,
                   },
-                  images.reduce(
-                    (imgArr, img) => [
-                      ...imgArr,
-                      ...wrapTokens('marpit_advanced_background_image', {
-                        tag: 'figure',
-                        style: [
-                          `background-image:url("${img.url}");`,
-                          img.size && `background-size:${img.size};`,
-                          img.filter && `filter:${img.filter};`,
-                        ]
-                          .filter(s => s)
-                          .join(''),
-                      }),
-                    ],
-                    []
-                  )
+                  (() => {
+                    const imageTokens = []
+
+                    for (const img of images)
+                      imageTokens.push(
+                        ...wrapTokens('marpit_advanced_background_image', {
+                          tag: 'figure',
+                          style: [
+                            `background-image:url("${img.url}");`,
+                            img.size && `background-size:${img.size};`,
+                            img.filter && `filter:${img.filter};`,
+                          ]
+                            .filter(s => s)
+                            .join(''),
+                        })
+                      )
+
+                    return imageTokens
+                  })()
                 )
               )
             ),
-            t,
-          ]
+            t
+          )
         } else if (current && t.type === 'marpit_inline_svg_content_close') {
           const { open, height, width } = current.meta.marpitBackground
 
@@ -212,7 +212,7 @@ function backgroundImage(md) {
           )
             style.set('color', open.meta.marpitDirectives.color)
 
-          tokens = [
+          newTokens.push(
             t,
             ...wrapTokens(
               'marpit_advanced_background_foreign_object',
@@ -231,14 +231,16 @@ function backgroundImage(md) {
                   'data-marpit-pagination'
                 ),
               })
-            ),
-          ]
+            )
+          )
 
           current = undefined
+        } else {
+          newTokens.push(t)
         }
+      }
 
-        return [...ret, ...tokens]
-      }, [])
+      state.tokens = newTokens
     }
   )
 }

src/markdown/container.js

@@ -16,9 +16,8 @@ function container(md, containers) {
   md.core.ruler.push('marpit_containers', state => {
     if (state.inlineMode) return
 
-    target.forEach(cont => {
+    for (const cont of target)
       state.tokens = wrapTokens('marpit_containers', cont, state.tokens)
-    })
   })
 }