H5开屏从龟速到闪电,企微是如何做到的-世界报道
(相关资料图)
导读|H5开屏龟速常是令开发者头疼的问题。腾讯企业微信团队对该现象进行分析优化,最终H5开屏耗时130ms,达到秒开效果!企微前端开发工程师陈智仁将分享可用可扩展的Hybird H5秒开方案。该团队使用离线包解决了资源请求耗时的问题,在这个基础上通过耗时分析找到瓶颈环节,进一步采用“预热”进行优化提速以解决了WebView初始化、数据预拉取、js执行(app初始化)耗时的问题。希望这些通用方法对你有帮助。
背景
服务端渲染(SSR)是Web主流的性能优化手段。SSR直出相比传统的SPA应用加载渲染规避了首屏拉取数据和资源请求的网络往返耗时。团队针对Web开发也已经支持了SSR能力。近期出于动态化运营的考虑,我们选择了Web开发,同时我们也接到了提升体验的诉求。以企业微信要开发的页面为例:采用SSR方案,从用户点击到首屏渲染的耗时均值约600ms,白屏时间的存在是可以感知到的。为了尽可能消除白屏达到秒开效果,我们尝试做更多探索。方案思路1) 方案选型如何实现页面秒开呢?从最直观的渲染链路来入手分析。下图列出了从用户点击到看到首屏渲染可交互,一个SPA应用主要环节的加载流程。我们调研了业内相关方案,从渲染链路的视角来看下常见方案的优化思路。传统离线包在加载渲染过程中,网络IO是很明显的一个耗时瓶颈。传统的离线包方案思路很直接,如果网络耗时那就将资源离线,很好地解决了资源请求的耗时。用Service Worker也能达到离线包的效果,同时也是Web标准。首次渲染优化一般需要结合客户端配置预启动脚本来达到缓存资源的效果。SSRSSR则从另外的角度出发,在请求页面的时候就进行服务端数据拉取和页面直出,首屏得以在一个网络往返就可以展示,有效地规避了后续需要等待css/js资源加载、数据拉取的时间。性能体验有比较大的提升,在BFF普及的情况下开发模式简单,很受欢迎。公司内相关工作考虑到WebView的初始化(冷启动/ 二次启动)、页面网络请求、首屏数据接口的耗时,白屏时间还是可感知地存在的。以我们要开发的页面为例采用SSR首屏耗时均值~600ms,可交互时间均值~1100ms。如何进一步消除白屏?这里为各位介绍公司内外针对h5首屏性能优化的优秀方案。手Q团队的VasSonic是集大成者,主要思路是采用WebView和数据预拉取并行的方式。这套方案需要客户端和服务端采用指定协议改造接入,开发时也有一定的改造工作。微信游戏团队主要思路是利用jsCore做客户端预渲染,用户点击后直接上屏。这个方法也达到了很好的效果,首屏FCP时间从1664ms降低到了411ms。我们做了一个简要的方案对比,可以看到每个方案都针对渲染链路的某个或多个环节做了优化,其中VasSonic的效果比较显著。不过结合企业微信业务实际情况,我们列出了如下几点考虑:首先,接入对客户端和服务端有一定的改造成本,业务开发也有一定的改造工作。其次,我们已经有一套的统一发布平台,希望能复用这套发布能力。最后,性能上有没有进一步优化的空间呢?业务需求对体验上的要求是希望达到更好的性能效果或者说尽可能完全地消除白屏。基于以上考虑,我们在上述方案的基础上做了进一步的实践探索,以期望达到更好的性能效果。离线包 | SSR | VasSonic | CSR |
资源加载 | |||
数据拉取 | |||
JS执行 | |||
WebView启动优化 | |||
首屏FCP | |||
可交互(取决于JS执行) |
首次冷启动/ms | 二次打开/ms | |
iOS(WKWebView) | 480ms | 90ms |
腾讯工程师技术干货直达:
1、算法工程师深度解构ChatGPT技术
2、10分钟!从架构视角读懂K8s
3、探秘微信业务优化:DDD从入门到实践
4、耗时减半?腾讯云OCR只做了3件事
标签:
推荐文章
- H5开屏从龟速到闪电,企微是如何做到的-世界报道
- 好的领域模型应该是什么样子?
- 中牧股份(600195):中牧实业股份有限公司关于减持公司所持其他上市公司部分股份
- 全球百事通!联德股份获3家机构调研:今年募投项目“年新增34,800套高精度机械零部件技改项目”投产进展顺利,符合公司预期(附调研问答)
- 太康县构建亲清政商关系推进营商环境工作再优化
- 杜淳晒与老婆合照秀恩爱,甜蜜大手牵小手,养眼又般配
- 南非再度执行大规模限电 总统称存在人为破坏可能 世界聚看点
- 过年哪旅游好 适合过年旅游的地方介绍
- 安徽合力:未来工业车辆后市场前景广阔 提前布局新能源叉车|环球快看点
- 【世界独家】黄山胶囊董秘回复:公司的生产运营中心会根据客户订单和市场需求有序安排生产
- 天天日报丨剑桥科技: 中信证券股份有限公司关于上海剑桥科技股份有限公司2022年度持续督导工作现场检查报告
- 【环球新要闻】国家统计局评价11月份经济形势:总体保持恢复态势
- 东南网架:公司目前暂未涉及现有会展中心光伏改造项目 环球热讯
- 动态焦点:怡达股份: 关于召开2022年第四次临时股东大会的通知
- 栾川县重渡沟示范区:创建“五星”支部 赋能乡村振兴
- 今日关注:格力电器入局“预制菜”行业
- 当前头条:首个共享单车骑行碳普惠方法学在深圳发布
- 华仁药业董秘回复:欧盟ce认证和国内注册要求不同
- 致远互联: 北京致远互联软件股份有限公司关于选举董事长、监事会主席、董事会专门委员会委员及聘任高级管理人员、证券事务代表的公告-环球热议
- 观点:中信科移动两项目成功入选2022中国5G+工业互联网大会典型应用案例
- ST华英(002321.SZ)与新奥新瑞设立合资公司新瑞华英 拟利用公司闲置资源启动分布式光伏发电项目
- 雅戈尔董秘回复:根据公司2022年三季报披露,报告期末,雅戈尔全品牌网点数量2,045个 全球微动态
- 【天天时快讯】微电生理(688351):集采降幅预期温和 新品上市房颤更上一台阶
- 今日热议:中信股份(00267):中信特钢拟为上电钢管及其子公司天津钢管提供不超过35亿元的担保
- 山特全方位电源解决方案,护航生物制药行业“成长生命线”
- 研究人员最新发现 单个细胞可同时处理成百上千个信号
- 陆军第73集团军某旅 创新升级模拟训练器材
- 长期暴露在光照下性能退化 科学家发现钙钛矿太阳能电池最大缺陷
- 宁夏启动双百科技支撑行动 构建高水平产业创新体系
- 陆军炮兵防空兵学院 毕业学员综合战术演习现地备课工作圆满完成
- 国内首颗以茶叶冠名遥感卫星 安溪铁观音一号发射成功
- 区域特色产业转型升级 四川屏山以“3+”模式推进科技创新工作
- 激发创新动能促进产业发展 无锡滨湖走出产业转型“绿色”路
- 绥化全域低风险!黑龙江绥化北林区一地调整为低风险
- 走访抗美援朝纪念馆:长津湖的寒冷,与战斗一样残酷
- 节后第一天北京白天晴或多云利于出行 夜间起秋雨或再上线
- 走近网瘾少年们:他们沉迷网络的病根何在?
- “双减”后首个长假:亲子游、研学游需求集中释放
- 获2021年诺奖的蛋白,结构由中国学者率先解析
- 他从一窍不通的“门外汉”,到重装空投“兵专家”
- 升旗、巡岛、护航标、写日志,他们一生守护一座岛
- 中国故事丨“沉浸式”盘点今年的教育好声音!
- 农业农村部:确保秋粮丰收到手、明年夏季粮油播种
- “双减”出台两个月,组合拳如何直击减负难点?
- 《山海情》里“凌教授”的巨菌草丰收啦
- 且看新疆展新颜
- 天山脚下,触摸丝路发展新脉动
- 160万骑手疑似“被个体户”?平台不能当甩手掌柜
- 网游新政下,未成年人防沉迷的“主战场”在哪?
- “辱华车贴”商家及客服被行拘,处罚要不放过每一环
- 沙害是自然界的恶魔,而他是荒沙碱滩的征服者
- 面对婚姻,“互联网世代”的年轻人在忧虑什么?
- IP类城市缘何吸引力强?玩法创新带动游客年轻化
- 国庆主题花坛持续展摆至重阳节
- 都市小资还是潮流乐享?花草茶市场呈爆发性增长
- 从1.3万元降到700元,起诉书揭秘心脏支架“玄机”
- 北京国庆7天接待游客超861万人次 冬奥线路受青睐
- 陈毅元帅长子忆父亲叮嘱:你们自己学习要好,就可以做很多事儿
- 报告显示:这个国庆假期,粤川浙桂赣旅游热度最高
- 中国科技人才大数据:广东总量第一,“北上”这类人才多
- 嘉陵江出现有记录以来最强秋汛
- 全国模范法官周淑琴:为乡村群众点燃法治明灯
- 线上教学模式被盯上,网络付费刷课形成灰色产业链
- 云南保山:170公里边境线,4000余人日夜值守
- 警方查处故宫周边各类违法人员12人
- 农业农村部:确保秋粮丰收到手、明年夏季粮油播种
- 受南海热带低压影响 海南海口三港预计停运将持续到10日白天
- 多地网友投诉遭遇旅游消费骗局,呼吁有关部门严查乱象
- 神经科学“罗塞塔石碑”来了:迄今为止最完整的大脑细胞图谱
- 汾河新绛段发生决口
- 陕西支援14省份采暖季保供用煤3900万吨
- 这场红色故事“云比拼”,穿越时空为我们指引方向
- 受琼州海峡封航影响 10月7日、8日进出海南岛旅客列车停运
- 辽宁省工信厅发布10月8日电力缺口橙色预警
- 广州10月8日至20日对所有从省外来(返)穗人员实施核酸检测
- 假期怎么过得这么快?国庆5.15亿人次出游,你咋过的?
- 国庆假期全国道路交通总体安全平稳有序
- 哈尔滨市南岗区爱达88小区将调整为低风险地区
- 新疆霍尔果斯市2例无症状感染者新冠病毒均为德尔塔变异株
- 百闻不如一见——北京大学留学生参访新疆
- 看,生机勃勃的中国
- 国庆假期中国预计发送旅客4.03亿人次
- 新疆兵团可克达拉市:195名密接者已全部隔离医学观察
- 山西平遥消防4天29次救援:拖着腿走路也要完成任务
- 国庆假期北京接待游客861.1万人次
- 冷空气自西向东影响中国大部地区 气温将下降4℃至6℃
- 新疆哈密市巴里坤县发生4.3级地震 震源深度9千米
- 国庆假期中国国内旅游出游5.15亿人次
- 公安部交管局:国庆假期日均出动警力18万余人次,5位交警辅警牺牲
- 受南海热带低压影响广东将暂别高温天气
- “数说”杭州无障碍改造:触摸城市“爱的厚度”
- 新疆霍尔果斯无症状感染者新冠病毒属德尔塔变异株 未发现高度同源的基因组序列
- 新疆伊犁州:妥善做好滞留旅客安置返回工作
- 国庆假期广西累计接待游客逾3611万人次 实现旅游消费272.41亿元
X 关闭
资讯
X 关闭