【译】Netflix 网页性能优化案例

原文地址: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9 由于自己最近一年半的事件都在做视频页面相关的,而且这次 Netflix 的技术栈也与我们相似,因此翻译这篇文章,希望大家一起学习。页面很多细节值得深入,但是整个分析下来其实给我们自己在做页面优化提供基本的思路。 Netflix 目前是全球非常非常出色的流媒体服务网站。自从 2016 年发布之后,Netflix 发现用户不仅会在移动端设注册,也会在 Web 上完成注册相关。 通过优化登出页面使用的 JavaScript 详情 »

[译]Medium 是如何优化图片加载的

Medium 是全球非常知名的阅读平台,允许用户多人协作,并将自己的内容发布到平台上,让更多人知道自己所要表达的信息。 之前写过一篇关于Pinterest如何处理图片预加载的文章,有兴趣的可以点击这里 阅读。今天我们主要分析下Medium在图片预加载有哪些值得大家学习的地方。 先来观察下效果吧: 其实我们可以看到在在那些文章中的图片,我们可以看到起初是一张非常小的并且模糊的图片,随后渐变成我们预期的大图。总之Po主是蛮喜欢这样的效果的。 如果你打开控制台去观察网络请求,就可以看到请求了一张小图然后加载了一张比较大的图片。 具体流程 渲染一个展示图片的 div ,然后将他的padding-bottom设置成百分比,从而与图片长宽比一致。这样做可以避免在图片渲染的时候引起上下跳动的影响。这种加载也被称作intrinsic placeholders 加载一个较小的图片。他们大约会请求一张缩略的jpeg图( 详情 »