bczFE / articles

📚 百词斩前端写文章的地方
8 stars 1 forks source link

介绍页数据:iPhone 12 Pro #14

Open gaoryrt opened 4 years ago

gaoryrt commented 4 years ago

iPhone 12 Pro

首页加载: image 全部加载: image

gaoryrt commented 4 years ago

js 用到了两个知名的库,还有一个专门给微信做的工具库: image

用的 webpack

茫茫多的 data-attributes 和 inline-css

很大一部分 css 都是 i18n 字型和适配相关的

css 层级嵌套很多,大概率用了预处理器

还有两组帧动画的图片 image

用 canvas 实现了:

Oct-14-2020 11-12-05

Oct-14-2020 11-13-52

绝大部分流量(52.8 MB / 58.2 MB)都给了 avc1 的 mp4,用作滚动响应动画

mp4 文件根据设备做了适配,大屏幕有大视频

gaoryrt commented 4 years ago

image 已经用上 grid 了

gaoryrt commented 4 years ago

找了半天 lottie 用在哪里了

image

这里应该有一个演示下载的动画,但是不知道为啥被 display: none 了没有看到

gaoryrt commented 4 years ago

很多交互动效都是用 inline css variable 来做的:

image

兼容性已经这么好了吗?还是说做了很多套通过 UA 分发适配呢?

然后他们的 css transform function 都转做了 matrix,这个应该是出于性能考虑使用工具库转的。