11

原文在 https://twitter.com/wesbos/status/1189190729219760130?s=20
作者是 Wes Bos @wesbos


https://www.apple.com/cn/airpods-pro/

image.png


完全加载70兆数据
1700多个jpg,大多都在页面加载后加载
image.png


348KB 的 JS
大约有两万五千行
使用了RequireJS
大量使用 data-attributes
大量使用事件委托


大约一万八千行CSS
704个媒体查询
十种媒体查询宽度
一个用于反色的媒体查询
大约有三千五百行专门用于不同语言的字体调整
image.png


移动端加载5.8兆数据
苹果貌似有很多ac_开头命名的内部库


我看到唯一使用的库是 wavesurfer.js,用于这个可视化效果:
image.png


在检测到链接速度不快时,并没有使用70兆/1500图的效果
通过 chrome devtool 调到 fast-3g 的时候,请求的是 7.5兆/5图的内容


无论你喜不喜欢苹果,需要承认的一点是,他们的页面总是业界顶尖的。


搬运推特,机翻修改。
没有公众号需要你关注。


chatgpt
4.2k 声望441 粉丝

Github 是 [链接]