客户端内H5页面的首屏性能优化

简介: 客户端内H5页面的首屏性能优化

写在前面


性能优化是前端开发中不可避免的一个话题。本文将记录一次客户端内H5页面首屏性能优化的项目。


背景介绍


信息流App是当下最流行的产品之一,如今日头条等。我所在的团队也是在做这样一款信息流App。App的Feed流是客户端Native实现的。用户点击Feed流中的文章后,会进入到文章底层页。文章底层页大部分都是Native实现的,但是有一些文章的数据是非结构化的,Native没有办法很好地处理,所以用H5页面来承接这部分文章。整个业务场景很简单,用图表示如下:

640.jpg

毫无疑问,H5页面会极大影响App的用户体验。因此,H5页面的首屏性能十分重要,要争取能做到秒开。


优化前


优化前,H5底层页的加载流程如下:

640.jpg

上图的加载流程是一个很常见的页面加载流程。在这个流程中,至少包含了四次http请求。每一次http都会拖慢页面呈现的时间。如果是一个单独的H5页面,没有任何问题,但是这个页面是在客户端内,是要争取做到秒开的。


优化方案调研


首先考虑一下目前流行的解决方案。ssr

服务端渲染。服务端渲染是将数据请求和页面结构生成放到服务端完成,用户访问页面url时,接口吐出的就是完整的,带有数据内容的html,首屏速度自然会有提升。但是这里有几个问题:

1、目前的非结构化文章数据就是一大串HTML字符串,服务端不太好去处理一大串HTML的字符串。

2、就算实施了ssr,在用户访问H5底层页链接的时候,始终会有一次Http请求,首屏速度依然会收到网络环境等因素的影响。


离线包


一个完整的离线包方案,是根据业务模块配置,把H5页面和相关资源都打包上传,然后客户端在特定的时机对离线包进行预下载,解压、检验等工作,然后在特定的时机使用离线包里的本地文件等。离线包是一个不错的解决方案,但是离线包有一个问题:太重了。


轻量级的解决方案


权衡了各种因素后,我们采用了一种轻量级的解决方案。方案概述


640.jpg

  1. 前端在开发上线打包时,产出两个HTML模板文件,一个用于之前的逻辑,一个用于预加载逻辑。预加载HTML已字符串的形式写入后台的配置服务。将产出的js,css文件上传cdn,并且将cdn地址上传到后台保存。
  2. 用户访问客户端时,后台会通过预加载接口下发预加载数据,客户端将带有数据的HTML模板字符串保存在本地,同时下载静态文件保存。
  3. 用户访问H5底层页时,客户端直接load本地的HTML模板字符串,同时拦截webview的静态资源请求,直接使用提前下载好的js,css文件。


总结起来,就是后台提供预加载接口,准备好H5底层页需要的Html,文章数据,js,css等,用户点击进入到底层页时,客户端直接load本地的资源进行渲染。上面的示意图给出了完整的主流程。


方案补充


  • HTML预加载模板相关

iOS和Andorid对于拦截Webview中静态资源请求的方式不太一样,所以在预加载HTML模板中,需要对iOS和Android分别做逻辑。我是借助 webpack plugin 和后台的golang模板引擎来实现的。大致代码如下:


<!DOCTYPE html><html><head>    ...    <script>        var __articleContent__ = JSON.stringify({{.articleContent}});</script>    {{if eq .ostype "ios"}}        <link rel="stylesheet" type="text/css" href="./**CSSURL**/"/>    {{else}}        <link rel="stylesheet" type="text/css" href="/**CSSURL**/"/>    {{end}}</head><body>    ...    <main></main>    {{if eq .ostype "ios"}}        <script src="./**JSURL**/"></script>    {{else}}        <script src="/**JSURL**/"></script>    {{end}}    ...</body></html>
  • 校验与容错


客户端从预加载接口获取了静态资源后,会进行版本校验以及资源完整性校验,才会决定是否使用该预加载资源。如果HTML请求的资源与预加载的资源无法匹配,会去网络获取资源。当预加载出错时,客户端会走老的那一套逻辑,即:访问H5文章底层页的链接。


方案总结


  • 直接将数据写入html,省去了H5页面请求接口拉取数据的开销。
  • js,css等静态资源预加载,需要时直接从本地load,省去了H5页面通过网络获取静态资源的开销。
  • 轻量级方案,整个过程可控,H5页面上线和更新的流程简单。


写在后面


本文总结了特定场景下,App内的H5页面首屏性能优化方案。最终上线后的详细数据就不再给出了,只能说:肉眼可见的快。整个方案是由前端发起的,在方案实施的过程中,我也学到了挺多的东西,不仅仅是技术上的。符合预期。

推荐阅读


当考虑网页首屏时长优化的时候,我们在考虑什么?


使用service worker做缓存来加快首屏速度,可行么?

目录
打赏
0
0
0
0
29
分享
相关文章
如何优化前端网页加载速度:最佳实践与技巧
本文探讨了如何通过优化前端网页加载速度来提升用户体验和网站性能。从资源压缩和合并、减少HTTP请求、优化图片、使用CDN加速、采用异步加载和延迟加载等方面介绍了一系列最佳实践和技巧,帮助开发者更好地优化前端性能,提升网页加载速度。
JavaScript 性能优化:如何减少页面加载时间?
JavaScript 性能优化:如何减少页面加载时间?
124 0
优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面
本文探讨了优化 Flutter 应用启动速度的策略,涵盖理解启动过程、资源加载优化、减少初始化工作、界面布局优化、异步初始化、预加载关键数据、性能监控与分析等方面,并通过案例分析展示了具体措施和效果,强调了持续优化的重要性及未来优化方向。
150 10
在资源加载优化中,如何利用浏览器缓存提升性能?
通过以上这些方法,可以有效地利用浏览器缓存来提升资源加载的性能,减少网络请求次数,提高用户体验和应用的响应速度。同时,需要根据具体的应用场景和资源特点进行灵活调整和优化,以达到最佳的效果。此外,随着技术的不断发展和变化,还需要持续关注和学习新的缓存优化方法和策略。
127 53
前端懒加载:提升页面性能的关键技术
前端懒加载是一种优化网页加载速度的技术,通过延迟加载非首屏内容,减少初始加载时间,提高用户访问体验和页面性能。
网页性能优化——提升用户体验的关键
网页性能优化——提升用户体验的关键
如何利用浏览器的缓存来优化网站性能?
【10月更文挑战第23天】通过以上多种方法合理利用浏览器缓存,可以显著提高网站的性能,减少网络请求,加快资源加载速度,提升用户的访问体验。同时,要根据网站的具体情况和资源的特点,不断优化和调整缓存策略,以适应不断变化的业务需求和用户访问模式。
196 7
优化Web应用性能的前端技巧:从加载时间到用户体验
在现代Web开发中,提升前端性能不仅仅是为了缩短页面加载时间,更是为了提供更流畅的用户体验。本文将探讨几种有效的前端优化技术,包括懒加载、代码拆分、资源压缩以及浏览器缓存策略。通过具体实例和最佳实践,读者将能够掌握如何系统地提高Web应用的响应速度,减少资源消耗,并最终改善用户的整体体验。
如何优化前端网页性能提升用户体验
本文将探讨如何通过一系列前端优化技术,提高网页加载速度、减少资源请求次数,从而优化用户体验。我们将介绍一些常用的性能优化技巧,包括资源压缩、懒加载、CDN 加速等方法,帮助开发者更好地构建高效、流畅的前端网页。