jquery页面动态渲染_搭建系统奇美拉的同构渲染服务

背景

我们的搭建系统从积木盒子到奇美拉，PC和H5页面都是静态的，发布时将页面静态化发布到cdn，浏览器访问时，从cdn获取页面进行异步渲染。由于页面是静态和异步的，对于首屏和SEO有诉求的场景无法很好的支持；另外对于像组件AB、动态区块等动态能力也没有办法实现。基于上诉原因，同构渲染是我们搭建系统所需要的。

技术方案

出于性能、稳定性和可扩展性的考虑，奇美拉的同构渲染服务分为3个部分：搭建(页面来源)-> 预处理 -> 同构渲染服务，下面是整体架构图，接下来将详细介绍每个部分。

搭建(页面来源)

搭建就是将组件拼凑成页面，类似搭积木，输出是描述页面结构的schema，供预处理消费。由于页面是通过schema表示的，所以可以方便的对接其他平台。那么schema里面有什么呢？

组件

第一个肯定是组件，组件分为”布局“和”组件“，”布局“是用来控制”组件“放在什么地方的，比如下面的”布局“含有三个位置，可以放不同的”组件“。

为了确定组件，给定包名和版本就可以了。

数据

一般情况下仅有组件是无法渲染的，还需要数据，除非是静态组件，为此schema还需要包括数据获取方式的描述。虽然奇美拉和积木盒子通过jdata能够很好的获取数据，但是一些业务无法走jdata，所以需要一种通用的方式，在服务器端HSF就是一种很好的方式。为此获取数据的方式分为jdata和HSF两种，如下：

jdata(通过value就可以获取数据): 

{   "type": "jdata",   "value": 123456}

HSF(value是用来描述调用HSF的数据)：

{   "type": "hsf",   "value": {      "appName": "widget-router-hsf",      "id": "com.alibaba.widgetpt.service.WidgetService:2.0.0",      "group": "HSF",      "method": "getJsonComponent",      "args": [         "adPcWidget:adPcWidget",         "execute"      ],      "argsTypes": [         "java.lang.String",         "java.lang.String"      ]   }}

除了jdata和HSF，上面的格式能够容易的扩展到其他方式。

组件组件的其他描述

为了能够支持一张页面同时存在同构动态组件(服务器端渲染，数据会不断变化，比如千人千面的组件)、同构静态组件(服务器端渲染，数据不会变化，比如热区组件)、异步组件(在浏览器端获取数据并渲染的组件)，schema需要有字段区分它们；同时为了支持不同技术体系的组件，比如react和jquery，也需要有字段区分；此外schema中还有一些组件其他描述，比如spm(c位)。

页面渲染描述

上面已经了解了渲染组件所需要的内容，将组件拼装成页面，还需要一些页面级别的描述。比如承载页面的模板，我们成为原型prototype；页面的访问地址；页面的SPM ab位；下线时间和下线地址；页面的头部和尾部等。

schema

下面是一份简单的页面schema：

{  "attributes": {    "page-url": "https://cms.1688.com/ssr/ssr/ssr/hhd2n7pi.html", // 访问地址    "page-spm": "a2632k.12847700", // spm ab位置    "offline-time": null, // 下线时间    "offline-url": "", // 下线地址    "page-prototype": "1688/pc/fusion.html", // 页面原型    "page-header": "", // 页面头部    "page-footer": "", // 页面尾部  },  "children": [    {      ...      "attributes": {        "component-name": "@alife/ocms-layout-1688-wap-layout-common", // 包名        "component-version": "1.0.4", // 版本        "component-spm": "jxolqgpw", // spm c        "component-type": "layout", // 表示布局类型        "component-tech": "pure", // 技术体系，pure表示jquery组件        "component-runat": "server" // 表示同构静态组件      },      "children": [        {          "attributes": {            ...            "component-name": "@alife/ocms-fusion-1688-pc-brand-pc-gather",            "component-spm": "jyh2ezk1",            "component-version": "1.0.17",            "component-type": "component",            "component-tech": "fusion",            "component-runat": "web",            "component-isomorphic": true,            // 描述数据获取的方式            "component-isomorphic-data": "{\"type\":\"hsf\",\"value\":{\"appName\":\"widget-router-hsf\",\"id\":\"com.alibaba.widgetpt.service.WidgetService:2.0.0\",\"group\":\"HSF\",\"method\":\"getJsonComponent\",\"args\":[\"adPcWidget:adPcWidget\",\"execute\"],\"argsTypes\":[\"java.lang.String\",\"java.lang.String\"]}}"          }        }      ]    }  ]}

预处理

出于性能和稳定性的考虑，我们没有把描述页面的schema直接交给同构渲染服务，而且进行一次预处理，主要包括资源分析和处理、预渲染、资源预取和兜底页面几个部分。

资源分析处理

由于我们的组件都在cdn上，schema只给出了组件的包名和版本，组件渲染还需要其依赖，为此要将每个组件的依赖、js列表和css列表都分析出来。由于同构渲染服务是通过积木盒子的渲染引擎croco来实现的，它的渲染是根据描述页面的DSL来实现的，所以需要将描述页面schema转化成DSL，DSL中包含预先渲染好的同构静态组件。下面是一个croco DSL的例子：

{  "backupUrl": "https://show.1688.com/ssr/ssr/ssr/hhd2n7pi.html", // 兜底页面  "data": {    // croco需要的dsl    "html": "