Her - High-performance Enhanced Rendering Hao123前端高性能渲染解决方案

Her (High-performance Enhanced Rendering) is a Pagelet and Bigpipe like implement, to provide High-performance Rendering in web pages, which inspried by Fackbook's BigPipe: Pipelining web pages for high performance.

Her is made up of 3 parts, the build tool, the backend output controller and the frontend render controller. The build tool is based on FIS. The backend output controllers are FirstController, QuicklingController and NoScriptController, in which FirstController provide 4 render modes (server|lazy|default|none). And the frontend render controller can load resources and render HTML snippet on demands.

The current implement is for PHP + Smarty. And this repo is the code of the build tool. The backend and frontend runtime code are here - her-runtime.

Hao123前端高性能渲染解决方案(Her)是一个为提升页面加载和渲染性能而设计的通用解决方案，实现了 Pagelet 和类 Bigpipe 输出渲染控制。

Her 由编译工具、后端输出控制和前端渲染控制组成，目前提供了基于 PHP 和 Smarty 的实现。其中编译工具基于 FIS 实现，继承了 FIS 强大的前端构建能力；后端输出控制提供了FirstController|QuicklingController|NoScriptController 3种输出控制器，分别处理基础页请求、局部 Quickling 请求和 NoScript 请求，其中 FirstController 提供 server|lazy|default|none 4种输出模式，方便实现首屏优化、模块开关等；前端渲染控制实现了资源加载、Pagelet 按需渲染和动态打包(planning)。通过对页面进行细粒度分块，收集区块的 HTML 片段、JS、CSS 等资源，后端输出控制和前端按需渲染，极大的增强了前端性能优化的能力。其设计方案和架构图如下：

本仓库为 Her 的构建工具代码，前后端运行时代码见 her-runtime

Docs / Get Start

Her已经兼容fis-plus，请查看 FISP模块迁移文档

核心能力

Her 通过实现以下核心能力来解决前端性能优化：

• 强大的自动化构建能力。Her 集成了 FIS 资源定位、内容嵌入、依赖声明 3种编译构建能力，满足了前端构建需求。

• 核心运行时能力

  • 通过 Pagelet Smarty 插件对页面分块。分块收集 HTML 片段及其依赖的 CSS、JS 资源，对页面模块进行细粒度编码，分解资源依赖和数据获取等
  • 后端输出控制器。后端输出控制提供了FirstController|QuicklingController|NoScriptController 3种输出控制器，分别处理基础页请求、局部 Quickling 请求和 NoScript 请求，其中 FirstController 为 Pagelet 提供了 server|lazy|default|none 4种输出模式，方便实现核心(首屏)模块优先输出、非核心模块延迟输出，模块开关等
  • 前端渲染控制器。实现了 Pagelet 按需加载、渲染，资源及其依赖加载、资源动态化打包(计划中)等

• 定制优化方案的能力，通过对 Pagelet 输出和渲染方式的简单配置编码，可以方便实现以下优化方案和业务方案

  • 延迟加载 lazyPagelets。对于非核心模块 Pagelets 后端可以使用 lazy 渲染模式，基础页请求的时候只输出占位标签，基础页渲染完成之后通过 Quickling 方式延迟加载 lazyPagelets，从而实现延迟加载 lazyPagelets，减少基础页 DOM 节点数，极大的优化页面渲染性能。
  • 延迟渲染 bigRender。对于不可见模块可以先不渲染，当用户滚动页面的时候再渲染相应模块。可以进一步提升性能，减少不可见模块的图片和数据接口请求等。
  • 局部刷新 Quickling。对于数据交互频繁的模块，可以通过 BigPipe.fetch() 实现局部刷新，可以实现同构的异步渲染逻辑，极大了降低了异步刷新的开发成本。

适用场景

Her 适用于采用 Smarty 作为后端模板的 PC 和 Mobile 页面。

案例

参考

BigPipe: Pipelining web pages for high performance

FIS