写点什么

前端工程化之 H5 性能优化篇

发布于: 2021 年 03 月 18 日
前端工程化之H5性能优化篇

导读:从粗糙到精致,从简单到复杂,全球互联网 Web App(网页应用)平均体积已增压到 1.6Mb,随着音视频等富媒体内容的流量池膨胀,终端设备上的用户对网页装载速度尤其敏感。页面不能做到秒开,就会有大量用户选择离开。重视并改善网站性能,优化即时网页装载时间,加速即时网页在浏览器平台终端状态展现,进而可以带来网站流量增长。

本文源自百度直播研发部,提出了前端渐进增强的页面渲染方案,即“路由分离+预静态化+WebView 预创建”方案,来替代模板同步渲染方案,并采用工程化的方式将能力打包下沉赋能产品线。


一、背景


在直播业务落地的场景中,构建打赏服务精神,创造风格多样,令人难忘的运营活动形式,以满足目标用户需求。进行有效的服务创新,保障 H5 服务品质,控制访问性能,及时化解金主情绪为商业价值,制造特效惊喜,流畅的用户体验,有利于赢得用户对平台的尊重,提升平台品牌气质:


1. 优化访问体验:优化 H5 首屏性能,围绕提升用户服务感受和提升开发者工作效率进行创新,探索 Web 追赶原生的体验创新;


2. 加速需求闭环:解决 H5 页面路由与数据接口耦合的问题,实现 H5 服务自治,释放业务对 Web 产品形态的旺盛需求;


3. 基础设施建设:使用工程化手段沉淀公共通用的前端基础设施,让前端组织更敏捷的支持跨业务的人力调配,技术赋能更多产品线;


围绕以用户为中心的功能完善的体验,以客户为中心的商业价值的转化。提升 H5 服务品质,发挥现代浏览器潜能,赋能传统 Web 新的解决方案。


历史架构的原因,H5 页面的加载过程是 Server 向 Smarty 模板注入 json_encode 后的接口主数据,响应给浏览器带有页面完全 JSON 数据的页面,然后在浏览器端执行 JavaScript,最终 Paint 给用户,流程如下图:


△H5 优化前的加载与渲染流程


△H5 首屏关键路径耗时拆解


两个影响 H5 首屏内容(FCP,First Contentful Paint,首次内容绘制)的关键路径为:


1. 网络耗时:依赖 Server 端数据查询及模板编译,当数据查询慢时延迟了首字节到达(TTFB,Time To First Byte,首字节时间)。


2. 内核渲染耗时:依赖 JavaScript 执行读取页面主数据并生成完全的 DOM 结构。


因此,我们针对性地设计并实施了“路由分离+预静态化+WebView 预创建”的方案,改进后的页面加载与渲染流程如下图:


△H5 优化后的加载与渲染流程


二、路由分离


路由分离之前 H5 页面的 URL 由 Server 分配,前端负责编写 TPL 模板产物,TPL 与最终 URL 的对应关系在 Server 通过配置文件做映射,日益暴露出启动开发慢,页面后期维护交接沟通成本高的问题。

 

所以我们希望页面路由规范化,让前端开发者自主控制页面入口格式,让后端开发者更专注于 API 接口数据逻辑。因此,我们设计了前端路由分离方案,约定了页面 URL 与页面源代码目录映射关系,规则如下图:


△预定式 URL 路由规范


NGINX 直接响应预静态化的 HTML 文件,首字节到达不依赖数据查询与模版编译。


三、预静态化


前端路由分离直接在 NGINX 代理层返回 HTML 文件,但没有页面完全渲染需要的数据,在执行 AJAX 请求没有返回之前,需要规避页面一直处于白屏或全局 loading 状态,提前 FCP 的时间。

 

我们采用了预静态化页面的方案。预静态化不像服务器渲染那样即时编译产出完全静态化的 HTML,它只在构建时为了特定的路由生成特定的几个静态页面,我们可以通过 webpack 插件将一些特定页面在编译时就注入 DOM 结构,这样做有几个好处:第一缩短页面白屏时间,第二相对于服务器端渲染节省云基础设施资源成本,第三输出给搜索引擎爬取页面通用内容。

 

结合实际应用场景和市面上主流的预静态化方式,最终我们开发了基于 ReactDomServer 原生的服务端渲染能力的 webpack 插件,提升预静态化性能和效率。

 

通过 webpack 插件系统获取每次构建的 compilation 上下文,通过 html-webpack-plugin 的 before AssetTagGeneration hook 获取当前页面 bundle,afterTemplateExecution hook 获取当前页面编译后的模板 HTML,通过 eval 执行 bundle 导出的整个页面 APP 模块,通过 ReactDomServer 对单页应用的每个路由产出 APP HTML 与模板 HTML 合并后落盘为预静态化的 HTML。


H5 预静态化调用序列如下:


△H5 预静态化调用序列


页面入口 export APP:


基于 Node.js 环境,创建 JSDOM 实例提供浏览器宿主环境,使用 ReactDOMServer 将组件渲染为静态 HTML 标记。使用自研的预静态化 webpack 插件替换 html-webpack-plugin,并不增加新的编译阶段。

 

Webpack 插件与市面上主流的预静态化方法做个对比,如基于无头浏览器的、基于本地启动 HTTP Server、通用的静态站点生成工具等。结果如下:


结果如下:


综合对比,我们的预静态化速度最优,可在开发阶段实时看到预静态化结果,所见即所得,方便研发调试,不需要增加新的编译阶段。


遵循尽可能让页面骨架内容显示最终内容的原则,产出预静态化的 HTML 文件,对于展示用户个性化内容的动态组件,仍需要等待一个 AJAX 请求的时间,这部分组件在执行 AJAX 请求没有返回之前,我们采用了组件级别的 Skeleton 方案,以保证首屏使用通用内容+动态组件骨架填充:


1. 静态组件开发时定义公共部分 state,填充页面公共部分内容,代码示例:


2. 动态组件根据 window.isPrerender 标记做预静态化环境与浏览器渲染环境两种环境下的响应,代码示例:


△动态组件在两种环境下的响应流程

 

经过预静态化后的页面首屏内容(FCP)不依赖 JS 执行完毕,通过一次首次渲染(FP,First Paint,首次绘制)即可向用户展示出页面公共内容,待 AJAX 返回后替换成完全渲染的页面。


四、WebView 预创建


在 APP 启动时立即初始化好 WebView 组成的缓存池,保证加载每个 URL 时省去了 WebView 初始化的时间,并利用上预静态化的 HTML 缓存,最终使页面无白屏加载态。


五、整体收益

 


渲染流程改进前后对比:




直接收益:


预静态化收益:


1. 发布前端通用高性能预静态化插件;

2. 提供了工程化引入骨架屏(Skeleton)的方式。


路由分离收益:


1. 约定式的页面 URL 路径,减小维护成本,减少前后端沟通成本;

2. BrowserRouter 支持,针对 SPA(Single Page Application)页面场景,支持了基于 history API 的 BrowserRouter 访问方式;

3. 删除模版配置管理步骤,对于后端同学可以更加专注于数据逻辑。


六、工程化


前端组织从小作坊发展到了大前端时代,前端工程开发模式受到了新的挑战如模块化、组件化、规范化、自动化等。


前端工程本质上是软件工程的一种。软件工程化关注的是性能、稳定性、可用性、可维护性等方面,注重基本的开发效率、运行效率的同时,思考维护效率。采用工程化的思想管理前端工程范畴的各环节,转化挑战为机遇,创建支持多团队协作的开发流,建立坚实的工业前端基础设施。


七、总结


Web H5 性能优化不再是只追求一两个页面装载速度指标的提升,更考验一个前端团队的综合能力:


1. 顶层设计能力

在设计时提前布局,寻找痛点一击即中,并根据实际情况不断维护、进行调整、优化、保证规范有效性;


2. 工程管理能力

用更有效的工作方法和手段使全局实践最优,节约成本并提升研发效率;


3. 文化创新能力

持续学习是最好的创新办法,始终保持着与时俱进的基本价值观,每一次契机都可能会促成一次成功的创新,创造独特价值。


Web 生态技术日新月异,性能是日趋规范化的领域,如 PWA/快应用/小程序,标准化是彻底解决频发问题、改善工作质量的好办法。


参考资料

| https://github.com/stereobooster/react- snap/blob/master/doc/alternatives.md


原文链接:https://mp.weixin.qq.com/s/PkMvl2FIE



百度架构师


百度官方技术公众号上线啦!


技术干货 · 行业资讯 · 线上沙龙 · 行业大会


招聘信息 · 内推信息 · 技术书籍 · 百度周边


欢迎各位同学关注!


发布于: 2021 年 03 月 18 日阅读数: 47
用户头像

百度官方技术账号 2021.01.22 加入

百度官方技术号,百度的技术创新均呈现于此。

评论

发布
暂无评论
前端工程化之H5性能优化篇