Netflix的网站优化经验

标签: 业界观察 | 发表时间:2015-09-15 09:09 | 作者:techug
分享到:
出处:http://www.techug.com

服务端与客户端渲染

Netflix团队首先要做的一件事是改进他们的整体前端架构。改版前的netflix.com网站对于服务端生成html标记与客户端的增强这两个过程进行了严格的分离,采用这一设计的主要原因在于前后端所使用的编程语言不同。服务端主要使用Java的技术栈以生成基本的html页面,而在浏览器端的工作则主要是通过jQuery等JavaScript库的使用为服务端生成的html添加一些客户端的行为。

这种分离式前端架构可以说是教科书一般的标准架构,但Netflix团队认为这种方式存在着一些不足之处,因为用户每次都需要等待服务端生成完整的html页面结构之后,才能够看到页面显示在浏览器中。这其中有很大一部分内容是用户很少会关注的,但仍然不得不为了加载这些内容延迟而延长页面的渲染时间。

因此,UI工程团队专门针对这一点进行了全新的设计。改进后的服务端所生成的html只包含页面中的一小部分内容,使客户端的视图能够尽快地显示在用户眼前。为了了解用户对此改动的认可度,UI团队将其设计为一种可配置的架构,可以非常方便地调整服务端所生成的html应当包含多少个视图。这种做法的好处很明显:首先是服务端生成的数据减少了,因此处理时间也相应地减少了。其次由于http的响应负载也减少了,DOM的渲染时间也因此加快了速度。当页面完成渲染后,客户端JavaScript可以按需加载用户所感兴趣的其余视图。

UI团体对此总结道,由于服务端与客户端渲染方式得到了更大的灵活性,为他们在这两种方式之间如何取得平衡提供了更多的选择。这一改动最终不仅使页面启动速度加快,同时也保证了平滑的视图转换过程。

通用JavaScript

UI团队的另一个目标是实现服务端与客户端代码的通用化,这就迫使他们重新思考整个渲染管道的设计。之前所采用的那种分离式服务端生成与客户端增强的做法已经难以满足他们的需求了,主要问题有以下三点:

  • 在两种编程语言之间来回切换是一种负担
  • 如果要对html进行改进,那么对于服务端的生成与客户端的增强都有着很强的依赖性
  • 团队更希望通过同一种API生成html标记

UI团队最终选择了以Node.js与React.js实现一种通用JavaScript的前端架构,这使他们能够实现在服务端进行渲染,等基本的html与React.js组件完成初始化之后,再由客户端完成其它部分的渲染。因此,无论渲染过程是在哪里发生的,应用程序都能够得到相同的输出结果,服务端与客户端的代码也没有了严格的区分,它们全部是按照通用JavaScript的方式设计的。也正是这种共通的渲染逻辑,让UI团队意识到只在服务端进行最小化的html渲染,由客户端完成其余部分加载这种方式的可行性。

减少JavaScript负载

具有丰富交互性体验的网站通常需要用户下载大量的JavaScript代码,这也一定程度上影响了浏览器的性能。为此,UI团队在重构过程中将各种依赖转换为较小的模块,并只为当前访问者输出相应的JavaScript。关于如何实现这一过程的具体设计,来自Netflix的高级前端工程师Alex Liu专门在一篇文章中记录了具体的设计过程。

经过重构之后,老版本设计中的各种大型依赖已经不复存在,它们被替换为一些全新的、更高效的库。其直接结果就是输出的JavaScript负载减少了许多,用户开始浏览时不再需要加载大量的JavaScript代码。而UI团队并不满足于当前的成果,他们还将不断地对JavaScript的负载进行改进。

页面可交互时间

为了对重构后的效果进行测试,以更好地理解它对用户所产生的影响,UI团队对于页面的可交互时间(Time to Interactive – tti)这项指标进行了专门的监控。

可交互时间是指从页面刚刚启动到用户能够与UI进行交互的这一段时间间隔,这里并不需要完整地加载整个页面,只需要用户能够通过输入设备与UI之间进行交互即可。

UI团队建议使用由W3C定义的Navigation Timing API,在能够支持的浏览器上收集访问者的数据,并进行统计分析。

总结

在Netflix团队看来,高性能不是一种可有可无的目标,而是设计优秀的用户体验过程中必不可少的一环。团队将继续寻求业界的最佳实践,以实现更好的用户体验。在接下来的一段时间内,Netflix将研究一些新兴的web标准,例如服务器线程(Service Workers)、ASM.js以及WebAssembly等等,看看这些技术能否帮助他们的网站性能更上一层楼。

相关 [netflix 网站 优化] 推荐:

Netflix的网站优化经验

- - 程序师
Netflix团队首先要做的一件事是改进他们的整体前端架构. 改版前的netflix.com网站对于服务端生成html标记与客户端的增强这两个过程进行了严格的分离,采用这一设计的主要原因在于前后端所使用的编程语言不同. 服务端主要使用Java的技术栈以生成基本的html页面,而在浏览器端的工作则主要是通过jQuery等JavaScript库的使用为服务端生成的html添加一些客户端的行为.

聊聊 API Gateway 和 Netflix Zuul

- - ScienJus's Blog
最近参与了公司 API Gateway 的搭建工作,技术选型是 Netflix Zuul,主要聊一聊其中的一些心得和体会. 本文主要是介绍使用 Zuul 且在不强制使用其他 Neflix OSS 组件时,如何搭建生产环境的 Gateway,以及能使用 Gateway 做哪些事. 不打算介绍任何关于如何快速搭建 Zuul,或是一些轻易集成 Eureka 之类的的方法,这些在官方文档上已经介绍的很明确了.

Netflix开源数据流管理器Suro

- - IT经理网
Netflix近日开源了一个叫做Suro的工具,可以收集来自多个应用服务器的事件数据,并实时定向发送到目标数据平台如Hadoop和Elasticsearch. Netfix的这项创新有望成为大数据主流技术. Netflix用Suro进行数据源到目标主机的实时导向,Suro不但在Netflix的数据管道中扮演关键角色,而且也是脱胎大型互联网公司的众多开源数据分析工具中的佼佼者.

网络营销行为经济学分析: Amazon Apple Netflix Groupon Facebook

- zementary - 互联网营销|Internet Marketing
7月1日,Wired杂志,中文名为连线,最近杜克大学 行为经济学家 丹•艾瑞里(Dan Ariely)撰文在线公司如何让我们共享更多,消费更多. Ariely经济学家用行为经济学理论分别对亚马逊Amazon、Netflix、团购Groupon、 Zynga、Facebook和苹果的网络营销做了分析.

TiVo和微软媒体中心的倒下和Netflix的崛起

- Zhang Qiwei - 36氪
十年前TiVo定义了DVR(数字视频录像机)这个行业. 现在 TiVo已经变成一个动词,如果你想在有限电视公司提供的DVR上录制电视节目,你可以直接说“TiVo一段电视节目”. 但知名度也无法挽救TiVo产品线的颓势,数字媒体科技已经发生彻底变革. 也正是这种变革可以解释为什么微软会在Windows 8中淡化Windows媒体中心(Media Center)的概念.

Google、微软与Netflix计划将HTML5媒体内容加密

- - HTML5研究小组
Google, Microsoft, 和 Netflix提出一项将HTML5音频和视频文件加密的Encrypted Media Extensions提案,该提案将使网络和其他地方应用程序使用密匙控制是否有权访问特定的媒体流,从而实现支持key或bit的任何格式都可以在HTML5下使用. 这将消除Adobe和其他相关提供者关于HTML5内容版权限制的异议.

Netflix推荐系统(第二部分)—— 排序

- - xlvector - Recommender System
Netflix最近发表了第二篇关于他们推荐系统的技术blog,相比第一篇,这篇blog透露了不少技术细节. 因此这里我准备翻译并分析一下这篇博客. 这篇blog很长,这里首先分析第一部分:排序. We will discuss some of our current models, data, and the approaches we follow to lead innovation and research in this space..

Netflix发布云中间层服务开源项目Ribbon

- - InfoQ cn
1月28日,全球最大的互联网视频提供商Netflix在自己的技术团队博客上 发布文章,对外公布了他们的开源项目Ribbon,其主要功能是将Netflix的中间层服务连接在一起. 文章开头说到Ribbon项目的背景:. Netflix使用了细粒度的SOA架构,这是我们基于云的部署模式的根基. 目前,我们运行着上百个细粒度服务,使用诸如Netflix API Services这样的“边缘服务(Edge Service)”,共同负责处理面向客户的请求.

Netflix 公布个性化和推荐系统架构

- - 互联网分析
Netflix的推荐和个性化功能向来精准,前不久,他们公布了自己在这方面的系统架构. 3月27日,Netflix的工程师 Xavier Amatrain和 Justin Basilico在官方博客 发布文章,介绍了自己的个性化和推荐系统架构. 要开发出这样的一个软件架构,能够处理海量现有数据、响应用户交互,还要易于尝试新的推荐方法,这可不一点都不容易.

Spring Cloud Netflix构建微服务入门实践

- - 简单之美
在使用Spring Cloud Netflix构建微服务之前,我们先了解一下Spring Cloud集成的Netflix OSS的基础组件Eureka,对于Netflix的其他微服务组件,像Hystrix、Zuul、Ribbon等等本文暂不涉及,感兴趣可以参考官网文档. 这里,我们用最基础的Eureka来构建一个最基础的微服务应用,来演示如何构建微服务,了解微服务的基本特点.