Pornhub Web 开发者访谈

原文：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 关注微信公众号，点击阅读原文可以获取链接版原文。