【译】性能提升70%,Netflix的网站提速最佳实践

简单来说,今天要说的是性能问题。大家上网时都想马上看到自己想看的内容,而且我们也发现快速的启动能提高用户满意度。因此,当我们着手做期待已久的Neflix.com升级任务时,网站的界面工程团队把启动性能作为最高优先级的任务。

这次我们把启动时间缩短了70%,主要在以下三个方面做了改善:

1. 服务器和客户端渲染

2. 通用JavaScript

3. 降低JavaScript负载

服务器和客户端渲染

旧版netflix.com网站堆栈在服务器标记语言和客户端转化之间有着硬性的分离。这主要是由于我们应用的各个部分使用了不同的编程语言。在服务器端,我们使用的是配合Tomcat,Struts和Tiles使用的Java语言。在浏览器端,我们通过JavaScript来转化服务器生成的标记语言,主要使用jQuery。

这样的分离导致启动时间很不理想。每当用户访问netflix.com上的页面,我们的Java层响应的时候都要处理整个页面并转成HTML发送。于是用户需要一直等待直到整个页面完全生成,而其中大部分内容他们并不感兴趣。

我们的新架构只渲染页面的一小部分,自动生成客户端视图。我们可以改变服务器生成的总视图的数量,这样便于观察因此产生的正面或负面的影响。服务器响应时需要的数据很少,将数据转换为DOM元素时花的时间也更少。客户端JavaScript接管后,它会检查当前视图的数据以及后续会话要求的视图的数据。这样做最大好处是减少了服务器处理时间,并且把渲染整合到同一种语言中。

我们发现服务器和客户端分别渲染还提供了一种灵活性,允许我们选择哪些部分在服务器端渲染,哪些在客户端渲染,于是实现了更快的启动和视图之间的平滑切换。

通用的JavaScript

为了在服务器端和客户端支持相同的渲染,我们要重新考虑我们的渲染路径。必须放弃我们以前的架构中把在服务器端生成标记语言与在客户端进行强化这二者分离的做法。

三大痛点促使我们使用新的Node.js架构:

1. 语言之间的内容切换不理想。

2. 强化标记语言需要太多用于生成标记语言的服务器专用代码和用于强化的客户端专用代码的直接耦合。

3. 我们更倾向于使用同一种API生成所有的标记语言。

针对这个问题,实际上有许多不需要用到Universal JavaScript的解决方法,但是基于如下原因我们发现这个方案是最合适的:如果同一个东西有两个副本,那这两个副本之间很容易产生微小的差异。使用Universal JavaScript意味着只需要把渲染逻辑发送到客户端。

Node.js和React.js天然适用于这类应用场景。通过Node.js和React.js,我们可以在服务器进行渲染,然后在最初的标记语言和React.js的内容发送到浏览器之后,再在客户端对整体的变化进行渲染。这种灵活性允许应用程序在不同的位置独立地进行相同的渲染输出。服务器端和客户端的硬性分离不复存在,它们的渲染输出也就不会有所不同。

降低JavaScript负载的影响

在网站上实现丰富的交互体验,对用户来说往往会转变为沉重的JavaScript负载。在我们的新架构中,我们特别注意把一些大的依赖库替换成多个小模块,并且只对当前访问的用户发送适合他们的JavaScript。

很多在旧架构中用过的大的依赖库没有继续用在新架构中,我们把它们替换成一批新的、更有效率的库。更新这些库使得JavaScript的负载变小了很多,这意味着人们在访问的时候只需要很少的JavaScript。我们知道这个部分仍然有很多要完善的地方,我们正在努力使得JavaScript负载进一步下降。

交互时间

为了了解这些改进带来的影响,我们监控了一个叫交互时间(tti)的参数。

交互时间指的是应用平台首次启动与UI界面互动响应之间的时间量。注意,这并不需要UI界面完全加载,而是用户可以使用输入设备与UI进行交互的第一时间点。

对于在浏览器中运行的应用,这个数据可以从Navigation Timing API得到。

工作仍在继续

我们坚信,高性能并不是一个随意的工程目标——它是创造良好用户体验的硬性要求。我们已经在启动性能方面取得了显著进步,并将在致力于为用户持续提供更好的用户体验的过程中,不断尝试挑战行业的最佳做法。

接下来的几个月,我们会研究Service Workers, ASM.js, Web Assembly和其它新兴的网络标准,看看能否利用它们实现更高性能的网站体验。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,637评论 18 139
  • 转自《人人都是产品经理》,原文链接:写给产品经理技术书 产品经理有三大领域的技术是需要去攻克的,分别是:客户端相关...
    游社长阅读 4,144评论 4 79
  • 不知道你们有没有遇到过这种人,他们一见到让自己不爽的人或事,总免不了一顿唠嗑,逮谁说谁,一副欠他五百万没还,苦大仇...
    灵珂阅读 511评论 7 24
  • 今天才真正明白,什么叫做世上本无事,庸人自扰之。这个庸人,应该就是那种将事情做的一团糟的人吧~ 很简单的查课行为,...
    林薮阅读 387评论 0 0
  • 道沖,而用之又弗盈也。 渊呵,似万物之宗。 湛呵,似或存。 吾不知谁之子也,象帝之先。
    陆军_4bcb阅读 70评论 0 0