AIP

渲染机制

AIP 页面同时支持常规的 H5 渲染和字节客户端的原生化技术渲染。

采用 H5 渲染兼容绝大多数的浏览器环境，保证 AIP 页面的高效分发。

对原生化渲染的支持是希望广告落地页的体验更上一层楼，为用户提供更快更便捷的体验，从而达成更好的广告投放效果。

H5 渲染

成功渲染的前提

正如AIP 页面的构建中高亮代码部分所示，AIP 页面在编写时需要手动引入：

  1. 全局 CSS
<link
    rel="stylesheet"
    type="text/css"
    href="https://unpkg.byted-static.com/latest/byted-fangyuan/aip/dist/aip.css"
/>
1
2
3
4
5

用于规定 AIP 页面的全局样式，以及避免运行时在解析完成前的闪屏现象。

  1. AIP 运行时
<script
    defer
    src="https://unpkg.byted-static.com/latest/byted-fangyuan/aip/dist/aip.iife.js"
></script>
1
2
3
4

用于解析按如下定义为 AIP 页面的 HTML

<!DOCTYPE html>
<html aip></html>

 
1
2

成为常规 H5 页面进行渲染。

运行时解析过程

HTML 页面引入 AIP 运行时后，会依次执行以下行为：

  1. 注入所有 AIP 页面标准中支持的指令和能力
  2. 初始化页面样式
  3. 深度遍历<body>内的 DOM 节点，对每个节点：
    1. 提取 AIP 标准指令
    2. 获取指令运行的上下文内容并收集依赖形成当前节点的沙盒运行环境
    3. 变量绑定、注册事件、模版内容产出和指令内容运行等渲染过程
    4. 移除所有未被 AIP 定义的节点属性
  4. 注册基础组件
  5. 完成渲染

原生渲染

众所周知，广告落地页的性能会直接影响投放效果，为了把广告落地页的性能推到极致，AIP 在实现极速渲染 H5 页面的同时，希望能更进一步，去达成原生页面级别的展现和交互。

AIP 的原生化渲染底层采用的技术是一个用 Web 技术栈绘制 Native UI 的高性能跨端框架。该技术通过自己独特的架构设计，突破了业内跨端框架的首屏性能上限。经过广告业务上的长期验证，大量场景在使用之后都获得了正向的数据收益和产品收益。

而原生化渲染技术目前仅适用于字节生态内的客户端软件，经过 AIP 官方提供的页面创建流程接口将页面提交后，可在投放该页面时开启预加载和页面原生渲染的能力，让页面渲染速度大幅提升。

在开发过程中，开发者只需要花主要精力在 H5 渲染的效果即可。原生化的渲染效果由 AIP 团队维护和保证，在绝大多数情况下和 H5 效果保持一致（存在区别处也将特别指明）。此外我们还提供了原生渲染的预览服务，帮助开发者更快验证效果。

如果开发者遇到渲染不一致的情况欢迎联系我们上报 Bug。

投放时达成原生渲染

  1. 开发者通过页面创建接口提交 AIP 页面后，首先进行页面语法校验并送往审核
  2. 通过校验的页面将被解析为结构化的 AIP 物料：一种类似于创建橙子建站站点open in new window接口中bricks字段的 DSL（由页面排布、组件及其属性等信息组成）
  3. 通过审核后，后台将会把站点 ID 和 DSL 物料持久化存储于数据库中。
  4. 页面进入广告投放链路后，原生渲染服务将会把该站点的 DSL 物料编译为可用于原生渲染的代码。同时页面内的静态资源也将被转存后下载打包，同原生代码一起压缩后储存于CDN中。
  5. C 端用户进行广告流量访问时，服务端从页面服务中查询该站点 ID 对应的原生物料压缩包地址，并下发到客户端。
  6. 客户端下载原生渲染物料后解压暂存于设备中。
  7. 当用户点击广告后，客户端会访问该站点存于设备中的原生物料，运行代码进行本地原生渲染。（由此可见所有代码的运行和静态资源的访问均在设备本地）
Last Updated: 2022/7/15 下午7:22:06