在P站做web前端，是种怎样的体验？
作者 | David Walsh 翻译 | 博轩
今天，给大家分享一篇重口味的文章，请系好安全带。
对，你没看错，是P站，不是B站（bilibli）。
何谓P站？全称Pornhub，全球最大的sex影片分享网站，你们懂得。
坊间有云：没上过P站的程序员，不是一名优秀的前端切图仔。
无论你对不可描述内容采取什么立场，都无法否认成人网站行业对于推动 Web 的发展产生着巨大的影响。
从提高浏览器的视频限制，到通过 WebSocket 推送广告，使得广告拦截程序无法检测到它们，你都必须更加聪明的在 Web 开发的前沿进行革新。
最近，我很幸运地采访到了一位来自世界最大的xx网站：Pornhub的 Web前端开发者，内容包括技术的学习，如何改进 Web APIs，以及在成人网站上班是一种什么体验。
让我们开车（开始）吧！
注意：成人行业竞争激烈，有些问题属于行业机密，因此无法直接回答。我会尊重他们，并采取一些访问的技巧来接近真相。
问题：成人网站会展示许多图像内容。在开发的过程中，您是否使用了大量的图片和视频进行占位？所开发的内容和经验距离最终产品有多远？
回答： 实际上，我们在开发网站时不使用占位图片。最后的产品，最重要的是代码和功能，以及符合我们使用习惯的界面。一开始肯定会有一些学习曲线，但是我们大家很快就习惯了。
问题：对于直播和第三方广告脚本，您是如何在网站的开发阶段，来模拟这些重要的动态资源？
回答： 为了进行开发，我们将播放器拆分为两个部分。基础的播放器实现核心功能，并负责触发相应的事件。这部分开发是完全独立的，在净室中完成。为了在网站进行集成，我们希望在开发环境运行那些第三方脚本和广告，以便我们尽早的发现问题。在特殊情况下，我们将与广告客户进行合作，便于我们可以手动触发一些通常可能随机触发的事件。
问题：平均一个页面会包含至少一个视频，GIF 广告，一些直播表演者的预览，以及其他视频的缩略图。您是如何衡量页面性能，以及如何使得页面保持最佳性能？您是否可以分享一些技巧呢？
回答： 我们使用一些测量系统。
1、我们的播放器会基于一些视频播放的通用指标，向我们报告一些数据。
2、使用第三方的 RUM 系统测试站点的性能。
3、基于可用的 AWS 数据中心设置私有的 WebpageTest 实例，编写测试脚本进行测试。
我们主要将其用于查看给定时间内可能发生的情况。他还使我们能够查看来自不同位置和提供者的 “瀑布”。
问题：我必须假设前端最重要，最为复杂的功能就是视频播放器。在视频播放之前加上广告，标记视频的精彩时刻，更改视频的播放速度以及一些其他的功能，您是如何维护该资源的性能，功能和稳定性的？
回答： 我们有一支专门致力于开发视频播放器的团队，他们的首要任务是不断监控性能和效率。为此，我们几乎使用了所有可用的东西。浏览器性能工具，网页测试，指标等。所有的更新，都会经过一个严格的 QA 流程，来保证软件的稳定性和质量。
问题：专门的视频团队有多少人？团队中有多少前端开发人员？
回答： 我只能说，鉴于产品的规模，团队的规模趋于一个平均水平。
问题：在成人网站工作期间，您如何看待前端技术环境的变化？哪些新的 Web API 使您的工作更加轻松？
回答： 我肯定在前端世界的每一个方面都看到了许多改进。
1、从纯 CSS 到使用 LESS 和 Mixins，再到使用自适应的 Grid 布局配合使用媒体查询和 picture 标签来适配不同的分辨率和屏幕尺寸。
2、JQuery 和 JQueryUI 已经慢慢走出我们的视野，因此我们使用 Vanilla JS ，并回归到更加高效的面向对象编程。某些情况下，框架也非常有趣。
3、我们喜欢新的 IntersectionObserver API ，它对于图片加载十分有效。
4、我们开始使用 Picture-in-Picture API ，以使浮动视频出现在我们的某些页面上，主要是为了获取用户对该想法的反馈。
PS：Picture-in-Picture API（画中画）：以允许网站始终在其他窗口之上创建浮动视频窗口，以便用户在与其他内容站点或设备上的应用程序交互时可以继续使用媒体。
问题：展望未来，有没有你想要更改，改进甚至创建的 Web API ?
回答： 我们想要改变和改进一些 API ；信标（Beacon）、Fetch、 WebRTC 以及 Service Workers。
1、信标（Beacon）：
由于某些 IOS 问题无法与 pageHide 事件一起使用。
2、Fetch：
没有下载进度，也没有提供拦截请求的方法。
3、WebRTC：
如果分辨率不够大，则及时进行屏幕共享，Simulcast 层也会受到限制。
4、Service Workers：
任何 service worker 的 Fetch 事件处理程序均不会拦截对 navigator.serviceWorker.register 的调用
问题：WebVR 在过去的几年中一直在进步 -- WebVR 在当前状态下有多有用，成人网站为支持 VR 内容付出了多少努力？触觉在您的网站上的 WebVR 中有作用吗？
回答： 我们正在研究 webXR，以及如何最好的适应新兴的计算用例，最为最大的分发平台，我们需要支持创作者和用户，无论他们想以何种方式来体验我们的内容。但是，我们目前仍在探索这些新媒体应该具有什么样的内容和平台。
我们是第一个支持 VR，计算机视觉和虚拟表演者的主要平台，并将继续推动新技术和开放式网络平台的发展。
问题：每个页面上的媒体和内容种类繁多，那么 PC 与移动设备之间最大的考虑是什么？
回答： 功能主要受操作系统和浏览器类型的限制。当涉及一组完全不同的访问和功能时，iOS vs Android 就是一个完美的例子。
例如，某些 iOS 移动设备不允许我们在全屏模式下使用自定义视频播放器，而是强制使用本机的 QuickTime 播放器。我们提出新想法时，必须考虑这一点。另一方面，Android 为我们提供了完全的控制权，以便我们可以将新功能推送至全屏的模式。
HLS 中的自适应流媒体传输也是一个例子，当涉及到 HLS 流媒体传输质量问题时，IE 和 Edge 会很挑剔，因此我们需要防止一些高质量内容出现在低版本浏览器，否则视频将不断出现卡顿的现象。
问题：目前你们网站所支持的最低版本的浏览器是什么？是否支持 Internet Explorer ？
回答： 我们对 IE 的支持持续了很长一段时间，但是最近放弃了对 IE11 之前版本的支持。同时，我们也停止了在视频播放器中使用 Flash。我们主要关注 Chrome 、Firefox 和 Safari。
问题：更广泛的说，您可以分享一些有关网站的信息吗？服务器和前端？您正在使用哪些库？
回答： 我们大多数网站都是以以下内容为基础的：
1、Nginx
2、PHP
3、MySQL
4、Memcached 和 Redis
在适当的地方使用其他技术，例如 Varnish, ElasticSearch, NodeJS, Go, Vertica 。
对于前端，我们主要运行原生 JavaScript，我们逐步摆脱了 jQuery，并刚开始使用框架，主要是 Vue.js。
问题：从一个局外人的角度来看，成人网站通常看起来很相似：很多视频缩略图，汇总的视频内容，直播表演，广告。作为网站的建设者，你们网站与众不同的特征是什么？
回答： 我们非常努力地为每个品牌提供不同层次的独特性；内容库，UX和功能集，以及许多不同的想法。
问题：在为当前雇主申请并面试之前，您对可能在成人网站上工作有何想法？你有犹豫吗？如果有，您是如何消除自己的顾虑的？
回答： 面对如此诱人的挑战，从来没有真正的困扰过我。想象中，会有数以百万计的用户使用我实现的功能进行交互，这足够让人感到鼓舞。事实证明，这个想法很快成立了，我第一次实现的功能上线了，这让我感到非常自豪，我的确告诉了所有朋友去看！色情片永远不会死的事实也使得工作的稳定得到了保障！
问题：就像最终产品，分享你在成人网站的工作，可能与你在当地其他公司工作会有所不同。当你将你的工作分享给朋友，家人，熟人会使得你自己蒙受污名吗？你是否会犹豫讲你的工作告诉别人？
回答： 我为我能够开发这些产品而感到非常自豪，与我熟悉的人得知后也会感到十分羡慕。他始终是聊天，笑话的绝佳来源，而且确实非常有趣。
问题：在成人行业之外的机构工作过，对比在成人场所工作，氛围有何不同？
回答： 这里的气氛非常轻松友好。我没有注意到这里与其他机构在工作文化方面有任何重大差异，除了它在当地比我以前工作过的任何地方都大得多。
问题：作为前端开发人员，您与哪些团队最紧密合作？最常见的日常交流方式是什么？
回答： 我们与后端开发人员，QA 测试人员和产品经理都会有紧密的合作 - 多数时候，我们都是走过去当面沟通。也会使用聊天工具（Microsoft Teams）和电子邮件。
问题：最后，作为在成人网站工作的前端开发，你想分享什么？
回答： 对于可以实现用户体验如此广泛的产品的一部分，确实令人兴奋。随着技术的不断发展，我们通常也会处于趋势和技术重大变革的最前沿，这使它保持着乐趣和挑战性。
访谈结束
我发现，我们的访谈确实很具有启发性。
我很惊讶他们在开发功能和设计的时候没有使用很多图片；很高兴看到 Pornhub 继续使用 WebXR，WebRTC 和 Intersection Observer 推动网络的前沿发展；同时，也很高兴的看到他们认为当前 Web API足够丰富，可以开始移除 jQuery。
我真的希望我能够从中获得更多具体的技术提示，性能和巧妙的技巧。我敢肯定，他们的源代码背后有很多知识值得学习！
如果是你，你会问什么问题？欢迎留言交流～
往期推荐