得物App内h5的项目都是通过webview打开。对于webview的性能大家普遍的印象就是打开速度比native慢。
对于SPA应用,一个用户打开webveiw访问h5需要经过如下过程:
从程序执行的角度,我们来看一个没有优化过的webview加载h5的过程:
压缩每一个阶段的时间,是性能优化的关键点。
结合App的webview我们采用了两个优化手段:
如下图秒开率有15%的提高。
SPA会场下页面渲染整个流程:
SSR会场下页面渲染整个流程:
SPA与SSR在FMP上的表现,中间的凹槽是线上切到SPA的情况,可见SSR对于秒开有平均15%的提升。
分析页面的html,我们发现一些js脚本 block了html的加载。
减少三个block的script的加载。
webp能够达到90%压缩率,其重要性不言而喻。
现有方案在ssr直出的组件没有webp的能力。即使端上支持webp也加载了jpg或者png的图片,导致资源太大。而在ios的14版本后ios有了支持webp的能力,咨询了IOS同学,14版本的占比至少百分之七八十。
node端直出所有图片都为webp。在端上做一次webp的check,不支持则降级到原jpg或者png。
不支持webp的手机:注意头图。
从图片源头上解决图片过大的问题,使用了开源方案imagemin/imagemin。
会场传图统一收口交互,避免同一张图多次上传的情况。平均压缩率60%。
组件按需加载。
结论:Lighthouse 相应提升了 20%+。
优化前数据:
第一期优化后:
结论:transferred 提升了 20%。
第一期优化根据各种数据汇总,性能整体提升 10%。
有些组件在node端没有直出,且没有图片懒加载的能力。
node端直出组件,且屏外的图片使用懒加载的功能。
涉及以一键领券,分会场入口等组件
前:
后:
经过一系列的努力,App端优化与h5端的优化。我们把页面的秒开率提高到了40%左右。
文|问问en
关注得物技术,携手走向技术的云端
write by 阿会楠 环境:IE7+IE6 时间 2008-7-30 2008-7-30 2008-7-30 2008-7-30 ...
再次感谢大家对 Flutter Engage China 活动 的关注和积极参与!我们在活动前后收...
本文主要讲讲 CSS 非常新的一个特性,CSS @property,它的出现,极大的增强的 CS...
在写样式中,我们可以经常看到这样的情况 代码如下 div style=width: 300px;bord...
在默认情况之下,如果在Canvas之中将某个物体(源)绘制在另一个物体(目标)之...
复制代码 代码如下: div id="test" a href="#" test /a /div div id="result"/di...
代码如下所示: !DOCTYPE htmlhtmlhead meta charset=UTF-8 link rel=stylesheet...
最近在用canvas绘图时遇到了一个令人头痛的问题:canvas绘制网络字体时没效果,...
1. pc-reset PC样式初始化 /* normalize.css */html { line-height: 1.15; /* 1 ...
Dreamweaver中如何使用Flash影片 1、首先需要我们准备的是一个Flash文件,其次最...