Home

Home

What is Her ?

Her 是基于 FIS 封装的解决方案，其设计目标是通过工程化的方法解决前端性能优化中的核心问题。

Her 目前提供了基于 Smarty 的实现，适用于使用或计划使用 Smarty 作为模板语言且对页面前端性能优化有较高要求的(PC或mobile)页面和站点。

How to ?

核心能力

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() 实现局部刷新，可以实现同构的异步渲染逻辑，极大了降低了异步刷新的开发成本。

Why Her ?

核心优势

• Her 集成了 FIS 的前端工程化能力，能够有效的

解决前端开发中自动化工具、性能优化、模块化框架、开发规范、代码部署、开发流程等问题

• Her 封装了前端性能优化的核心解决方案，让前端性能优化更简单，如下：
  • 减少页面 DOM 节点数
  • 核心(首屏)模块优先输出、渲染
  • 非核心模块懒加载、延迟渲染
  • 资源按需加载
  • 优化资源打包方案

[Get start](1.Get start)