不敢相信,技术栈,居然被P站秒了

架构师之路

共 2650字,需浏览 6分钟

 ·

2020-06-15 23:23

PornHub的FE,分享了P站前端一些实践,英文比较晦涩难懂,故翻译整理了一下,很多同学对前端技术不是很熟悉,故加入了简单解释,希望对大家理解相关技术有帮助。


提问:能分享一下,P站架构使用了哪些技术栈么?

,除了大数据体系,都是比较常用的技术栈:

(1)核心架构采用的是Nginx,PHP,MySQL;

(2)使用Memcached和Reids来做缓存;

(3)使用Varnish来做页面缓存加速;

(4)使用ES来解决搜索问题;

(5)服务用的是go;

(6)大数据体系用的Vertica;

画外音:Vertica是一款基于列存储的,支持PB级别结构化数据存储的数据库。

(7)前端NodeJS也有使用;


提问:一个页面至少包含一个视频,一个GIF广告,一些直播视频的预览,一些视频的微缩图,如何监控页面性能,如何找到花时间最长的地方?

:我们使用第三方RUM(Real User Monitoring)来监控页面性能。

42db230ee38f6153815aa7acfa749482.webp

由于我们是国际性的大站,通过RUM监控,能够检测到哪些地域流畅,哪些地域卡顿,哪些地域流量高,哪些地域没有流量。

画外音,页面性能监控,常见的有两种方式:

(1)模拟性能监控

主要通过外部代理,模拟真实用户行为(登陆,点击等),执行固定监控脚本,收集页面性能数据。这是国内主流页面性能监控方式。

(2)真实用户性能监控

在用户真实流量的过程中,加入了一些埋点,收集相关性能数据。这种方式的优缺点都很明显:优点,代表最真实的用户性能体验;缺点,对用户体验有影响。


至于找到页面性能瓶颈,我们使用最常见的页面抓包,看执行时间“瀑布流”。


提问:前端交互对P站来说尤为重要,你们如何看待前端技术的变化?哪些新的WebAPI最吸引你们?

:我们在前端技术栈上做了很多改进。


CSS层面,从最初的纯CSS,到LESS,再到现在的Grid,用户在观看视频的场景很多,我们必须适应不同的分辨率和屏幕尺寸。

画外音:

LESS(Leaner Style Sheets),是一门向后兼容的CSS扩展语言,它和CSS非常像,并对CSS增加了一些有用的扩展,例如:变量,混合(Mixins),嵌套,函数,作用域,注释等等一些特性。

Grid,是目前最强大的CSS网格布局方案,它将网页划分成一个个网格,可以任意组合不同的网格,做出不同的布局。对跨终端,多屏幕适配尤为有效。


JS层面,我们逐步淘汰了jQuery和jQuery UI,而使用Vanilla JS这款更加高效的JS框架。

画外音:Vanilla JS,世界上最轻量级的JS框架,没有之一。特点是快速、轻量、跨平台,可以用它快速构建JS应用程序。其官方网站是:

http://vanilla-js.com/ 

别的JS库都需要显示引用地址,例如: