Netflix使用Node.js+React.js让网站启动更快

15-08-06 banq
                   

Netflix分享了其如何使用Node.js+React.js替代原来的Java + JQuery传统架构,从而让网站页面加载更快,用户体验UX更好。

性能很重要。Netflix的会员希望一打开浏览器就能立即开始观看他们喜爱的内容,更快的启动才能有更令人满意的用户使用UX。所以,Netflix网站的用户界面工程团队将启动性能作为第一优先级考虑。

这一努力最终使得启动时间降低了70%,工作主要集中在三个主要方面:

1.服务器和客户端呈现

2.通用的JavaScript

3.JavaScript的有效载荷的降低

Netflix原来的网站是典型的服务器和客户端页面标记(markup)语法分离的结构,这是因为后端与前端使用了不同的语言,后端服务器使用了Java的Tomcat、Struts和Tiles,在浏览器客户端,使用Javascript的JQuery加强服务器端产生的Html标记。

这种分离导致了启动时间的延长,每次用户上Netflix.com,Java层会产生Html页面的大部分内容,占据了整个页面生命周期的主要部分,因此,用户需要等待Html页面出现,在这之前无法访问页面的任何其他部分。

新的架构只使用很少的页面Html标记,服务器提供更少的数据,因此也就会花费更少的时间将数据转为Html标记的DOM,一旦客户端Javascript接管,它可以检索到当前会话中剩余的数据,然后完成剩余的页面渲染。

为了在客户端和服务器端支持相同的渲染展现,需要重新思考Netflix的渲染管道,必须抛弃之前在服务器产生Html语法然后在客户端增强的传统架构,采用前后端统一的Javascript能够灵活方便实现这一目标。

传统架构的三大痛点导致了Node.js新架构诞生:

1不同语言之间上下文语境进行切换并不理想。

2.Html语法标记的增强导致太多服务器端产生Html语法标记的代码和客户端代码之间更紧密的耦合。

3.宁可使用相同API而产生的所有HTML语法标记。

当然,有许多解决方案并不需要通用的JavaScript,但是我们发现以下教训是最重要的:当存在同一事物的两个副本,这也很容易导致厚此薄彼。 使用通用的JavaScript意味着渲染呈现逻辑能够简单地传递到客户端。


Node.js和React.js架构是自然适合这种风格的应用。 使用Node.js和React.js,我们可以从服务器渲染 ,并随后在在客户端浏览器上渲染呈现其后所有的变化,这些动作都是在初始的Html标记语法和React.js组件被发送到浏览器以后就可以开始。

因为前后端没有共同的渲染呈现逻辑,只有必要的数据在启动时需要加载,其他一切只有在后端变得可用时再进行推送,只有这样,我们才能真正挖掘实现渲染的潜力。

另外一个好处是降低了Javascript的负荷,网络上构建丰富的互动体验必然会转化为大量的Javascript负荷,在新的架构中,可以显著地降低对Html语法增强的依赖性,使用更小的只适合当前访问者的Javascript模块替换以前一次性下载统一的大型的Javascript文件。

即用即加载小的JS模块导致更少的Javascript文件在前后端传输,提高了Javascript启动浏览的时间,这条路远远没有结束。

提供启动性能之路远远没有结束,未来netflix会探索Service Workers, ASM.js, Web Assembly等技术。

The Netflix Tech Blog: Making Netflix.com Faster

[该贴被banq于2015-08-06 11:06修改过]

                   

2
lostalien
2015-08-10 14:38

为了在客户端和服务器端支持相同的渲染展现,需要重新思考Netflix的渲染管道

这句话没太理解,java+jquery这种结构是 服务器标签+dom操作 这两种渲染方式是吗? 那nodejs+react.js 是怎么个相同渲染法 ?

banq
2015-08-10 14:57

2015-08-10 14:38 "@lostalien"的内容
java+jquery这种结构是 服务器标签+dom操作 这两种渲染方式是吗? 那nodejs+react.js 是怎么个相同渲染法 ? ...

Netflix的这种Struts + JQuery是我们现在通用的结构,这个结构的问题是,html页面是在服务器端通过JSP产生的,在用户键入网址,到服务器向用户所在的浏览器客户端输出Html页面之前,这段时间用户需要等待,当然,一般是20ms左右,包括DNS查询 带宽耗费,Netflix现在提高的就是这个20ms,能够提高70%,不考虑带宽,差不多6ms用户就能够看到页面主体,页面的剩余部分靠React.js再向后端请求加载。

有关Node.js + React.Js的渲染可见之前帖子:

使用ReactJS + Node实现服务器端响应渲染

[该贴被banq于2015-08-10 15:01修改过]

lostalien
2015-08-10 15:26

2015-08-10 14:57 "@banq"的内容
差不多6ms用户就能够看到页面主体,页面的剩余部分靠React.js再向后端请求加载。 ...

呃。。。那struts+jq 做不到这一点吗?我首次在服务器端少渲染点html,然后发到客户端,剩下的让jq进行异步加载不是一样么。。。?

banq
2015-08-10 15:58

这涉及到DOM的渲染性能,React的DOM算法采取差额更新,更新量最小,而一般无此算法更新量很大,Dom是庞大的树型结构,如同你更新一批相互关联的数据表,非常缓慢。

2Go 1 2 下一页