【AICon】探索RAG 技术在实际应用中遇到的挑战及应对策略!AICon精华内容已上线73%>>> 了解详情
写点什么

Netflix 的网站优化经验

  • 2015-08-10
  • 本文字数:1841 字

    阅读完需:约 6 分钟

服务端与客户端渲染

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 等等,看看这些技术能否帮助他们的网站性能更上一层楼。


感谢郭蕾对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们,并与我们的编辑和其他读者朋友交流(欢迎加入 InfoQ 读者交流群)。

2015-08-10 08:142775
用户头像

发布了 428 篇内容, 共 171.4 次阅读, 收获喜欢 36 次。

关注

评论

发布
暂无评论
发现更多内容

IPQ9574 motherboard and QCN9274 network card are perfectly combined to achieve triple-band rate 2.4G/5G/6E

wifi6-yiyi

wifi6 WiFi7

看这个视频,4万人学会云上部署 Stable Diffusion

Serverless Devs

云计算 Serverless 函数计算FC

你说搞开发的很累,那做什么工作不累?

树上有只程序猿

基于群组实现从 Azure AD 到极狐GitLab 的单点登录

极狐GitLab

统一身份认证 IdP 单点登录 用户同步 配置群组同步

实现淘宝母婴订单实时查询和可视化|Flink-Learning实战营

Apache Flink

大数据 flink

TICDC 数据同步至 MySQL初体验

TiDB 社区干货传送门

迁移

如何使用 Flink SQL 探索 GitHub 数据集|Flink-Learning 实战营

Apache Flink

大数据 flink 实时计算

南通市属于几线城市?本地有正规等保测评机构吗?

行云管家

等级保护 等保测评 南通

程序员搞开发的时候,心态真的不稳

伤感汤姆布利柏

如何用极狐GitLab 为 iOS App 创建自动化CI/CD?详细教程来了

极狐GitLab

ios DevOps gitlab 自动化 CI/CD

MySQL中字符串查询效率大比拼

不在线第一只蜗牛

数据库 sql

linux自动化运维工具用哪款好?理由是什么?

行云管家

Linux IT运维 自动化运维

记一次Native memory leak排查过程 | 京东云技术团队

京东科技开发者

native 企业号 6 月 PK 榜 memory leak

【TiDB v7.1.0】资源管控调研及评测

TiDB 社区干货传送门

7.x 实践

Flink CDC 2.4 正式发布,新增 Vitess 数据源,PostgreSQL 和 SQL Server CDC 连接器支持增量快照,升级 Debezium 版本

Apache Flink

flink

6月优质更文活动结果已出炉,快来看看有没有你

InfoQ写作社区官方

热门活动 6 月 优质更文活动

Gartner®DevOps 平台魔力象限出炉,GitLab 获评「领导者」!

极狐GitLab

gitlab 安全 开放平台 开源贡献者 领导者象限

证书管理:从手工到平台化

vivo互联网技术

运维自动化 运维开发 证书管理

零样本视频生成无压力,基于飞桨框架实现Text2Video-Zero核心代码及依赖库

飞桨PaddlePaddle

人工智能 百度 paddle 飞桨 百度飞桨

边缘云特点、应用实践和发展趋势浅析

天翼云开发者社区

边缘云

火山引擎A/B测试推出智能流量调优实验,助力汽车行业破局营销困境

字节跳动数据平台

LED租赁屏市场

Dylan

活动 广告 方案 设备 LED显示屏

WEB系统安全之开源软件风险使用评估

天翼云开发者社区

开源 Web

高考成绩都出来了,你的秒杀系统如何了?

冰河

并发编程 多线程 高并发 协程 秒杀系统

关于 3.0 和 2.0 的数据文件差异以及性能优化思路

爱倒腾的程序员

从零开始初识机器学习 | 京东云技术团队

京东科技开发者

人工智能 机器学习 企业号 6 月 PK 榜

微服务之道:8个原则,打造高效的微服务体系

不在线第一只蜗牛

微服务 微服务架构

如何基于G6进行双树流转绘制?

EquatorCoco

G6 CRM系统 双树流

表格检测识别技术面临的挑战和发展趋势

合合技术团队

人工智能 表格识别 表格检测

数字先锋|云上医院长什么样?宁夏固原中医医院带你一探究竟!

天翼云开发者社区

云计算

TIDB v7.1 reource control资源管控特性体验贴

TiDB 社区干货传送门

版本测评 7.x 实践

Netflix的网站优化经验_JavaScript_邵思华_InfoQ精选文章