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)来监控页面性能。
由于我们是国际性的大站,通过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库都需要显示引用地址,例如:
而Vanilla JS不需要任何引用,在部署引用的时候,只需要:
你没看错,没有任何代码,由于它过于流行,所有的浏览器都必须内置它。
至于新特性,我们非常喜欢InterpObserver API,用它可以更有效的动态加载图像。
画外音:InterpObserver API提供了一种异步观察目标元素是否进入视口(viewport)的方法,它可以方便的实现,懒加载图片,页面无限下滑,根据滚动到相应区域灵活执行任务或动画等需求。
同时,我们也非常喜欢Picture-in-Picture API,它能方便的在某些页面上播放浮动视频,主要用于获取用户的反馈。
画外音:
(1)画中画,是近几年推出的新特性;
(2)用户在浏览P站视频的时候,真的能腾出手来,进行反馈么?
提问:WebVR技术一直在进步,请问WebVR目前发挥了多大的作用?
答:过去几年,我们一直在研究WebVR。作为全球最大的发布平台,我们需要支持创作者和用户,无论他们想如何创作以及体验我们的内容。
非常自豪的说,我们是第一个支持VR,以及虚拟表演的平台,我们也将持续推进新技术的应用。
画外音:WebVR,顾名思义,Web端的VR技术,百度上说,该技术在电子商务,虚拟社区,虚拟展馆等领域有非常广阔的应用前景。
提问:图片、音频、视频,页面上有多种多媒体内容,你们在PC端和移动端是怎么考虑的?
答:主要受限于操作系统与浏览器。
例如,IOS在全屏模式下就不允许自定义播放器,而强制使用本地的QuickTime,而Android则不存在这个问题。
又例如,HLS,IE和Edge遇到高清HLS流时偶尔会出现卡顿,我们必须防止这种现象出现。
画外音:HLS(HTTP Live Streaming),是苹果的动态码率自适应技术。
提问:你们支持哪些浏览器?还会支持IE么?
答:我们一直支持IE,但最近我们决定放弃支持IE11之前的IE版本(兼容性太难搞了),言下之意,我们会放弃对Flash视频播放的支持。我们将专注于Chrome,Firefox和Safari的支持。
提问:你们的播放器,除了播放相对可控的视频资源,你们还引入了很多第三方的广告,在开发的过程中,你们是如何模拟这些动态脚本的加载的?
答:播放器分为两个部分:
(1)基本播放核心功能实现,它是相对独立的;
(2)第三方脚本与广告加载,我们会尽早的集成,以便尽早发现问题,我们与第三方合作,手动触发相关事件;
提问:站在技术的角度展望未来,有没有哪些技术是希望改进的?
答:那就多了去了:
(1)Beacon:在IOS上存在pageHide 事件无正常工作的问题,希望改进;
(2)Fetch:没有下载进度,也没有提供拦截请求的方法,很不爽;
(3)WebRTC:如果分辨率不够大,则即使进行屏幕共享,Simulcast 层也会受到限制;
(4)Service Workers:调用navigator.serviceWorker.register 不会被任何 Service Workers 的 Fetch 事件处理程序拦截;
提问:能分享一下,在P站工作与其他互联网公司工作的不同吗,你会羞于告诉朋友,家人和熟人吗?
答:能够为P站工作是我的自豪。与我亲近与熟悉的人都知道这款产品,并着迷于这些产品。
提问:最后,作为P站的FE,还有什么想分享的?
答:P站作为一款非常重视用户,且被广泛用户使用的产品,能够成为创造者之一,我感到非常激动。随着技术的不断发展,我们有信心一直站在技术趋势的最前沿。
调研:
(1)贵司的前端被秒了么?
(2)你用过Vanilla JS么?