Vue SSR的渲染性能

一.前言

前端技术年年有新宠,Vue.js 2.0以其轻量级、渐进式、简洁的语法在MVVM框架中脱颖而出,一经推出便很受业界青睐。

为了提高首屏渲染速度 缓存+直出 是必不可少的。在Vue 1× 时代,没有 server-side-render 方案,直出需要专门给写一份首屏非Vue语法的模板。Vue2.0 server-side-render(简称Vue SSR)的推出,成功地让前后端渲染模板代码同构。

不过对于海量PV级的业务,直出模板的渲染效率直接影响服务端的压力,在对业务代码重构的同时,直出模板的性能是需要衡量的关键指标。

当前常用的模板渲染方案可以归结成两类:

  • a类:string-based (基于字符串拼接)

  • b类:virtual-dom-based(基于虚拟dom对象)

Vue SSR的模板是virtual-dom-based

二、常用string-based模板渲染原理介绍

还是先介绍下常用的string-based模板的写法和编译后的样子, 帮助不太熟悉HTML模板原理的同学可以更容易理解文章后面优化的过程。

首先看一下H5页面常用的HTML模板写法:

上面的模板应该是前端开发者很熟悉的一种模板语法,通过<%%>来包裹逻辑,<%=%>来赋值。

下面来看看模板代码被编译后的JS是什么样的:

JS中执行 tmpl.test(data) 即可拿到渲染出来的HTML片段。tmpl.test 就相当于是一个test模板的render函数。

那么这个render函数是如何通过上面的script模板转换过来的呢,此时需要一个模板的编译工具来实现,编译工具的核心是一个正则表达式:

let jscReg = new RegExp(/(?:(?:\r\n|\r|\n)\s*?)?<%([=-]?)([\w\W\r\n]*?)%>(?:\r\n|\r|\n)?/gmi);

用这个正则表达式,可以将模板代码中的 JS逻辑与JS属性值 分割出来,再通过'引号来将静态dom串包裹,拼接,最后加上函数的头尾,就能得到一个完整的render函数。编译过程可以通过预编译在线下实现,也可以在线上实时动态完成。

看到现在应该都理解了string-based HTML模板在JS中渲染的方式了吧,这种类型的模板渲染效率其实是最高的,因为它的render函数是不存在任何冗余逻辑,completely字符串拼接。

 

三、Vue SSR性能如何

实测循环 1w 次渲染耗时对比:

  • 传统模板:143ms

  • Vue SSR:2685ms

Vue SSR的耗时是传统模板的近20倍

四、20倍差距是如何产生的?

20倍差距是如何产生的?我们来分析一下Vue SSR完整的渲染过程。

Vue模板片段:

Vue模板语法大部分都是指令试的伪代码,既不是HTML语法,也不是JS语法,这也是virtual-dom类模板渲染较复杂的原因之一。

 步骤1:模板字符串通过正则解析成virtual-dom对象:

步骤2:生成with绑定上下文对象的render函数(该函数被缓存):

 步骤3:_h ----> _createElement    执行render函数返回 包含了业务数据 的vnode对象:

 

 步骤4:遍历dom对象属性 拼接字符串 HTML渲染完成:

 

四、性能瓶颈分析

在上文中可以看到,步骤1(模板字符串通过正则解析成virtual-dom对象)与步骤2(生成with绑定上下文对象的render函数)都已经被缓存,在本次对比中直接忽略其耗时,问题只能出在步骤3、4:

  • 步骤3:执行render函数生成vnode-tree对象;

  • 步骤4:递归遍历vnode-tree将其转化拼接成HTML;

相比传统string-based模板以最直接的方式拼接HTML,逻辑包含了 with、call、对象创建、递归拼接 是制约性能的关键,由于vnode对象是包含了业务数据,不能通过缓存vnode来解决,即便是缓存了vnode,步骤4的拼接耗时也是瓶颈所在。

五、缓存没有用,直接上大招!

既然我们已经知道什么样的render函数是最快的,那么就做个工具直接把Vue模板编译成string-based类的render函数即可,目标:

引入jscHelper https://github.com/jialunguo/vue-server-render-jscHelper

 

步骤1:

将vue-server-render在 第1步 生成的 virtual-dom对象 拼成 string-based语法的模板字符串,genEl是先将Vue模板语法转换成jsc语法:

1)值的转换

2)for循环转换

3)if判断转换

4)处理属性

 

5)Vue指令转换

 

 

6)样式class和内联代码转换

 

7)递归处理子dom

 

8)标签闭合

 

步骤2:

再通过文章开头介绍的正则表达式:

let jscReg = new RegExp(/(?:(?:\r\n|\r|\n)\s*?)?<%([=-]?)([\w\W\r\n]*?)%>(?:\r\n|\r|\n)?/gmi);

将模板编译成render函数,加以缓存。详细过程请看GitHub上的jscHelper源码。

七、写在最后

通过jscHelper对vue-server-render的性能做提升,需要持续地维护对Vue语法的兼容,而且目前并不支持类似, , 等高级语法,对组件的渲染方式也需要兼容。作为使用方,我们更希望Vue作者本身能多提供一种简单的string-based渲染方式来作为高性能的直出渲染方案。

 相关的issue https://github.com/vuejs/vue/issues/5176 ,希望能在Vue.js未来版本中看到更好的渲染实现。

posted @ 2018-03-26 15:18  btg.yoyo  阅读(1358)  评论(0编辑  收藏  举报