查看原文
其他

Pornhub Web 开发者访谈

前端食堂 2021-01-15

The following article is from madMen Author madneal


原文:Interview with a Pornhub Web Developer

译者:neal1991

welcome to star my articles-translator, providing you advanced articles translation. Any suggestion, please issue or contact me

LICENSE: MIT

无论你对色情内容采取何种立场,都无法否认成人网站行业对推动互联网发展具有巨大影响。从将浏览器的视频限制推送到通过WebSocket推送广告,以便广告拦截器无法检测到它们,你必须足够聪明才能在互联网的前沿进行创新。

最近,我很有幸采访互联网最大的成人网站 Pornhub 的一名 Web 开发者。我想了解技术,Web API 如何改进以及在成人网站上工作的感受。请享用!

注意:成人产业竞争激烈,因此有一些他们无法回答的问题。我尊重他们保守商业机密的需要。

成人网站显然会显示许多图形内容。在开发过程中,你是否使用了大量的占位符图像和视频?最终产品和开发时的内容和经验有什么区别?

实际上,我们在开发网站时不使用占位符!其次,重要的是代码和功能,接口是我们现在非常习惯的东西。一开始肯定会有一些学习曲线,但是我们大家很快就习惯了。

对于网络流和第三方广告脚本,你如何在网站和功能开发过程中模拟这些重要的动态资源?

为了进行开发,播放器分为两个部分。基本播放器实现核心功能并触发事件。开发不会受其他因素干扰。为了在网站上进行集成,我们希望运行那些第三方脚本和广告,以便我们尽早发现问题。在特殊情况下,我们将与广告客户合作,允许我们手动触发通常可能是随机的事件。

平均每个页面可能至少包含一个视频,GIF 广告,一些 cam 表演者预览以及其他视频的缩略图。你如何测量页面性能以及如何使页面保持最佳性能?有什么你可以分享的技巧吗?

我们使用一些测量系统。

  • 我们的播放器会向我们报告有关视频播放性能和一般用法的指标

  • 用于一般站点性能的第三方 RUM 系统。

  • WebpageTest 私有实例,用于在可用的 AWS 数据中心中编写测试脚本。我们主要将其用于查看给定时间可能发生的情况。它还使我们能够查看来自不同位置和提供者的“瀑布”。

我必须假设前端最重要,最复杂的功能是视频播放器。从在视频之前加入广告,标记视频的精彩时刻,更改视频速度和其他功能,你如何维护该资产的性能,功能和稳定性?

我们有一支专门致力于视频播放器的团队,他们的首要任务是持续监控性能和效率。我们为此几乎使用了所有可用的东西;浏览器性能工具,网页测试,指标等。我们进行的所有更新均通过可靠的质量检查来确保稳定性和质量。

专门的视频团队有多少人?团队中有多少前端开发人员?

我要说的是,团队规模倾向于基于产品规模的平均水平。

在成人网站上工作期间,你如何看待前端未来的变化?哪些新的 Web API 使你的生活更轻松?

我肯定在前端世界的每个方面都看到了很多改进;

  • 从纯 CSS 到最终使用 LESS 和 Mixins,再到使用具有媒体查询和图片标签的灵活 Grid 系统,以适应不同的分辨率和屏幕尺寸

  • jQuery 和 jQueryUI 慢慢地被淘汰,因此我们将回到 vanilla JS 中更高效的面向对象编程。在某些情况下,框架也非常有趣

  • 我们喜欢新的 IntersectionObserver API,对于以更有效的方式加载图像非常有用

  • 我们也开始使用画中画 API,以便在我们的某些页面上播放该浮动视频,主要是为了获得用户对该想法的反馈。

展望未来,有没有你想要更改,改进甚至创建的 Web API?

其中有一些是我们希望改变或改进的;Beacon,WebRTC, Service Workers 以及 Fetch:

  • Beacon:在 IOS 上存在 pageHide 事件无正常工作的问题

  • Fetch:没有下载进度,也没有提供拦截请求的方法

  • WebRTC:如果分辨率不够大,则即使进行屏幕共享,Simulcast 层也会受到限制

  • Service Workers:调用 navigator.serviceWorker.register 不会被任何 Service Workers 的 Fetch 事件处理程序拦截

WebVR 在过去几年中一直在进步--WebVR 在当前状态下作用有多大,成人网站为支持 VR 内容付出了多少努力?触觉在你们网站上的 WebVR 中有起到作用吗?

我们正在研究 webXR 以及如何最好地适应新兴的空间计算用例,作为最大的发布平台,我们需要支持创作者和用户,无论他们想体验我们的内容如何。但是,我们仍在探索这些新媒体应具有什么样的内容和平台。

我们是第一个支持 VR,计算机视觉和虚拟表演者的主要平台,并将继续推动新技术和开放互联网的发展。

每个页面上的媒体和内容种类繁多,那么桌面设备与移动设备之间最大的考虑是什么?

功能主要受操作系统和浏览器类型的限制。当涉及一组套完全不同的访问和功能时,iOS 对比 Android 是一个完美的例子。

例如,某些 iOS 移动设备不允许我们在全屏模式下使用自定义视频播放器,而是强制使用本机 QuickTime 播放器。我们提出新想法时必须考虑这一点。另一方面,Android 为我们提供了完全的控制权,我们可以将功能在全屏模式实现。

HLS 中的自适应流式传输也是另一个示例,当涉及到 HLS 流式传输质量时,IE 和 Edge 需要有所顾虑,因为我们需要防止某些更高质量的内容,否则视频将不断卡顿并出现伪像。

当前针对你工作的成人网站的最低浏览器版本支持是什么?是否已经淘汰 IE 浏览器?

我们对 IE 的支持时间很长,但是最近放弃了对 IE11 之前的任何版本的支持。有了它,我们也停止了为视频播放器使用 Flash。我们主要关注 Chrome,Firefox 和 Safari。

更广泛地说,你能否分享一些有关典型成人网站技术栈的信息?服务器和/或前端?你正在使用哪些库?

我们的大多数网站都以以下内容为基础:

  • Nginx

  • PHP

  • MySQL

  • Memcached 和/或 Redis

在适当的地方使用其他技术,例如 Varnish,ElasticSearch,NodeJS,Go,Vertica。

对于前端,我们主要运行原生 Javascript,我们逐渐摆脱了 jQuery,我们才刚刚开始使用框架,主要是Vue.js

从局外人的角度来看,成人网站通常看起来很相似:很多视频缩略图,聚合的视频内容,摄像头表演,广告。作为从事这些工作的人,使成人网站与众不同的特征是什么?

我们非常努力地为每个品牌赋予不同层次的独特性;内容库,UX 和功能集,以及许多不同的算法。

在你申请这份工作和面试之前,你对在成人场所工作的想法是什么?你有犹豫吗?如果是这样,你如何释怀的?

这真的从来没有困扰过我,最终挑战是如此吸引人。数以百万计的人会使用我正在开发的功能确实令人鼓舞。事实证明,这很快就成立了,我第一次的工作成果上线了,我感到非常自豪,我的确告诉所有朋友去看看!色情片永远不会消失的事实也使工作稳定得到了保证!

就最终产品而言,分享下你在成人网站上工作可能与在本地互联网公司上工作不同。你会羞于告诉朋友,家人和熟人在成人网站工作吗?你是否会犹豫告诉别人你在成人网站工作?

我为能够为这些产品工作而感到自豪,与我亲近的人都知道并着迷于这些产品。它始终是交谈,笑话的绝佳来源,而且非常有趣。

曾在成人产业以外的机构工作过,和在成人网站工作时气氛有差异吗?

这里的气氛非常轻松友好。除了在这里比我以前工作过的任何地方都大得多的事实外,我没有注意到和其他机构在工作文化方面的任何重大差异。

作为前端开发人员,你与哪些团队合作最紧密?最常见的日常交流方式是什么?

我们与后端开发人员,QA 测试人员和产品经理平等地合作--大多数时候,我们只是在彼此的办公桌旁交谈。另外使用 cat(MS Teams)非常普遍。然后就是电子邮件。

最后,作为在成人网站上工作的前端开发人员,你有什么想分享的吗?

作为创造用户如何体验如此广泛使用的产品的一部分,确实令人兴奋。随着技术的不断发展,我们通常处于趋势和技术重大变革的最前沿,这使它保持乐趣和挑战性。

访谈结束

我发现我们的采访确实很有启发性。我很惊讶他们在开发功能和设计时没有使用图像。很高兴看到 Pornhub 继续使用 WebXR,WebRTC 和 Intersection Observer 推动互联网的前沿发展。我也很高兴看到他们认为当前的 Web API足够了从而开始移除 jQuery。

我真的希望我能够从中获得更多具体的技术提示;性能和巧妙的技巧。我敢肯定,他们的源代码背后有很多知识要学习!你会问什么问题?

可以扫描二维码或者搜索 mad_coder 关注微信公众号,点击阅读原文可以获取链接版原文。

    您可能也对以下帖子感兴趣

    文章有问题?点此查看未经处理的缓存