Apple官方网页打开网页速度很快,即使高清图片也很快,怎么做到的?

有几部分。

网络传输CDN

刚才看了一下,苹果官网用的是Akamai,全球最早最大的CDN提供商。为什么没有之一,因为他是CDN技术的发明者。你们也可以去看,在浏览器开发者模式中查看,留意x-cache参数。

响应式资源获取技术

网站的体感速度很大程度受较大的媒体文件(图片,音乐,视频等)下载速度影响,苹果官网大规模利用动态js文件进行异步下载不同规格的图片。使用PC电脑访问,他会根据情况动态选择下载高清大图片,而手机等移动设备屏幕小,就会下载中等或者小图,但是保证清晰度体验。也就是说,同样一个图片,网站制作者都会切出来不同尺寸大小的图片来,当然对于业内前端开发者来说熟视无睹了。

此外其中的动图(视频)也会根据页面大小加载不同的大小。苹果很少用gif,而是用mp4,小屏看起来也很高清。长视频使用的是m4s切段,符合H5规范的分段加载保证了下载速度。

同时,延迟加载(下载)至关重要,同样异步js调用原理,他会加载首页内容,只有你向下翻页,才会动态加载下一页的图片等资源,这样可以避免浏览器被写满产生卡顿感,也省下了HTTP带宽资源给其他小文件使用。

网络协议和浏览器端优化

通过查看苹果页面,能看到的优化都做得很完善。比如js,css,透明图等静态动态分离,相应文件都进行了压缩优化。浏览器端缓存参数合理,也针对常见浏览器进行了参数优化,。对于支持HTTP/2的浏览器,都使用此协议连接,开启了SPDY优化。说人话就是可以并发多通道请求下载。

给TA买糖
共{{data.count}}人
人已赞赏
技术宅

不是吐槽,是干货转载:【苹果办公应用 iWork 大更新】数据透视表超好用,还有 5 大实用功能!

2021-10-1 21:00:01

技术宅

苹果发布SF Symbols 3图标库:含3100多个精心设计的符号和图标

2021-10-2 15:27:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索