experiment

benchmarks/ssr/common.js

@@ -25,6 +25,8 @@ function generateGrid (rowCount, columnCount) {
 
 const gridData = generateGrid(1000, 10)
 
+const five = [0, 1, 2, 3, 4]
+
 module.exports = {
   template: '<div><h1>{{ Math.random() }}</h1><my-table></my-table></div>',
   components: {
@@ -39,17 +41,34 @@ module.exports = {
       components: {
         row: {
           props: ['row'],
-          template: '<tr><th>{{ Math.random() }}</th><column v-for="item in row.items"></column></tr>',
+          // template: '<tr><th>{{ Math.random() }}</th><column v-for="item in row.items"></column></tr>',
+          render (h) {
+            return h('tr', [
+              new TextNode(1, [
+                new TextNode(2),
+                ...this.row.items.map(item => h('column'))
+              ])
+            ])
+          },
           components: {
             column: {
-              template: '<td class="item">' +
-                // 25 plain elements for each cell
-                '<ul class="yoyo">' +
-                  '<li class="hihi" v-for="i in 5">' +
-                    '<span v-for="i in 5">fsefs</span>' +
-                    '</li>' +
-                '</ul>' +
-              '</td>'
+              render (h) {
+                return h('td', { class: 'item' }, [
+                  new TextNode(4,
+                    five.map(() => new TextNode(5,
+                      five.map(() => new TextNode(6, [new TextNode(7)])))
+                    )
+                  )
+                ])
+              }
+              // template: '<td class="item">' +
+              //   // 25 plain elements for each cell
+              //   '<ul class="yoyo">' +
+              //     '<li class="hihi" v-for="i in 5">' +
+              //       '<span v-for="i in 5">fsefs</span>' +
+              //       '</li>' +
+              //   '</ul>' +
+              // '</td>'
             }
           }
         }
@@ -57,3 +76,21 @@ module.exports = {
     }
   }
 }
+
+const renderFns = [
+  { open: () => `<tr>`, close: `</tr>` },
+  { open: () => `<th>`, close: `</th>` },
+  { open: () => Math.random() },
+  { open: () => `<td class="item">`, close: `</td>` },
+  { open: () => `<ul class="yoyo">`, close: `</ul>` },
+  { open: () => `<li class="hihi">`, close: `</li>` },
+  { open: () => `<span>`, close: `</span>` },
+  { open: () => `fsefs` }
+]
+
+function TextNode (id, children) {
+  this.isTextNode = true
+  this.open = renderFns[id].open
+  this.close = renderFns[id].close
+  this.children = children
+}

benchmarks/ssr/renderToString.js

@@ -11,7 +11,9 @@ console.log('--- renderToString --- ')
 const self = (global || root)
 self.s = self.performance.now()
 
-renderToString(new Vue(gridComponent), () => {
+renderToString(new Vue(gridComponent), (err, res) => {
+  if (err) throw err
+  // console.log(res)
   console.log('Complete time: ' + (self.performance.now() - self.s).toFixed(2) + 'ms')
   console.log()
 })

src/server/render.js

@@ -38,7 +38,9 @@ const normalizeRender = vm => {
 }
 
 function renderNode (node, isRoot, context) {
-  if (isDef(node.componentOptions)) {
+  if (node.isTextNode) {
+    renderTextNode(node, context)
+  } else if (isDef(node.componentOptions)) {
     renderComponent(node, isRoot, context)
   } else {
     if (isDef(node.tag)) {
@@ -161,6 +163,22 @@ function renderComponentInner (node, isRoot, context) {
   renderNode(childNode, isRoot, context)
 }
 
+function renderTextNode (el, context) {
+  const { write, next } = context
+  if (isUndef(el.children) || el.children.length === 0) {
+    write(el.open() + (el.close || ''), next)
+  } else {
+    const children: Array<VNode> = el.children
+    context.renderStates.push({
+      type: 'Element',
+      rendered: 0,
+      total: children.length,
+      endTag: el.close, children
+    })
+    write(el.open(), next)
+  }
+}
+
 function renderElement (el, isRoot, context) {
   const { write, next } = context