原文：Interview with a Pronhub Web Developer
作者：David Walsh
译文：https://juejin.im/post/5da3da91f265da5b6723ee8f
译者：博轩
无论你对 Pron 内容持有什么立场，都难以否认该行业对推动 Web 的发展产生着巨大的影响。
从提高浏览器的视频限制，到通过 WebSocket 广告推送，使其通过广告拦截程序，从业者必须在 Web 开发的前沿进行革新。
最近，我很幸运地采访到了一位来自P站的 Web 开发者。采访内容包括有：前端技术的学习，如何改进 Web APIs ，在P站上班有什么体验等。让我们开始吧！
访谈开始
问：P站会展示许多图像内容。在开发的过程中，您是否使用了大量的图片和视频进行占位？
答： 实际上，我们在开发网站时不使用占位图片。
问： 对于直播和第三方广告脚本，您是如何在网站的开发阶段，来模拟这些重要的动态资源？
回： 为了进行开发，我们将播放器拆分为两个部分。基础的播放器实现核心功能，并负责触发相应的事件。这部分开发是完全独立的，在净室中完成。
而对于网站进行集成，我们希望在开发环境运行那些第三方脚本和广告，以便我们尽早的发现问题。在特殊情况下，我们将与广告客户进行合作，便于我们可以手动触发随机事件。
问： 一个页面会包含至少一个视频，GIF 广告，一些直播者的预览，以及其他视频的缩略图。您是如何衡量页面性能，以及如何使得页面保持最佳性能？您是否可以分享一些技巧呢？
答： 我们使用一些测量系统。
- 我们的播放器会基于视频播放的通用指标，上报数据。
- 使用第三方的 RUM 系统测试站点的性能。
- 基于可用的 AWS 数据中心设置私有的 WebpageTest 实例，编写测试脚本进行测试。我们主要将其用于查看给定时间内可能发生的情况。它还使我们能够查看来自不同位置和提供者的 “瀑布”。
问： 假设前端最重要和最为复杂的功能是视频播放器。在面对视频播放之前添加广告，标记视频的精彩时刻，更改视频的播放速度等众多功能时，您是如何维护该资源的性能，功能和稳定性的？
答： 我们有一支专门致力于开发视频播放器的团队，他们的首要任务是不断监控性能和效率。为此，我们几乎使用了所有可用的东西。浏览器性能工具，网页测试，指标等。所有的更新，都会经过一个严格的 QA 流程，来保证软件的稳定性和质量。
问： 专门的视频团队有多少人？团队中有多少前端开发人员？
答： 我只能透露，鉴于产品的规模，团队的规模在平均水平。
问： 在P站工作期间，您如何看待前端技术环境的变化？哪些新的 Web API 使您的工作更加轻松？
答： 我肯定前端的技术环境在多方面都得到改进。
- 从纯 CSS 到使用 LESS 和 Mixins，再到使用自适应的Grid 布局配合使用媒体查询和 picture 标签来适配不同的分辨率和屏幕尺寸。
- JQuery 和 JQueryUI 已经慢慢走出我们的视野，因此我们使用 Vanilla JS ，并回归到更加高效的面向对象编程。某些情况下，框架也非常有趣。
- 我们喜欢新的 IntersectionObserver API ，它对于图片加载十分有效。
- 我们开始使用 Picture-in-Picture API ，以使浮动视频出现在我们的某些页面上，主要是为了获取用户对该想法的反馈。
Picture-in-Picture API（画中画）：以允许网站始终在其他窗口之上创建浮动视频窗口，以便用户在与其他内容站点或设备上的应用程序交互时可以继续使用媒体。
问： 展望未来，有没有你想要更改，改进甚至创建的 Web API ?
答： 我们想要改变和改进一些 API ；信标（Beacon）、Fetch、 WebRTC 以及 Service Workers。
- 信标（Beacon）：由于某些 IOS 问题无法与 pageHide 事件一起使用。
- Fetch：没有下载进度，也没有提供拦截请求的方法。
- WebRTC：如果分辨率不够大，则及时进行屏幕共享，Simulcast 层也会受到限制。
- Service Workers：任何 service worker 的 Fetch 事件处理程序均不会拦截对 navigator.serviceWorker.register 的调用
问：目前你们网站所支持的最低版本的浏览器是什么？是否支持 IE ？
答： 我们对 IE 的支持持续了很长一段时间，但是最近放弃了对 IE11 之前版本的支持。同时，我们也停止了在视频播放器中使用 Flash。我们主要关注 Chrome 、Firefox 和 Safari。
问：您可以分享一些有关网站的信息吗？包括服务器、前端、库类等？
答： 我们大多数网站都是以以下内容为基础的：
- Nginx
- PHP
- MySQL
- Memcached 和 Redis
在适当的地方使用其他技术，例如 Varnish, ElasticSearch, NodeJS, Go, Vertica 。
对于前端，我们主要运行原生 JavaScript，我们逐步摆脱了 jQuery，并刚开始使用框架，主要是 Vue.js。
问：在进入公司之前，您对在P站上工作有何想法？你有过犹豫吗？如果有，您是如何消除自己的顾虑？
答： 面对如此诱人的挑战，从来没有真正的困扰过我。我想到会有数以百万计的用户使用我实现的功能进行交互，这让人感到鼓舞。事实证明，这个想法很快成立了，我第一次实现的功能上线了，这让我非常自豪，我的确告诉了所有朋友去看！爱情片永远不会死的事实也使得工作的稳定得到了保障！
问：分享你在P站的工作，可能与其他工作性质不同。当你将你的工作分享给朋友，家人，熟人会使得你自己蒙受污名吗？你是否会犹豫说出工作经历？
答： 我为能够开发这些产品而感到自豪，我的朋友得知后也会感到十分羡慕。因为这是聊天、笑话的绝佳来源，而且确实非常有趣。
访谈结束
我发现我们的访谈确实很具有启发性。我很惊讶他们在开发功能和设计的时候没有使用很多图片。为P站使用 WebXR，WebRTC 和 Intersection Observer 推动网络的前沿发展感到兴奋。
我衷心希望我们能够从中获得更多具体的技术、性能和技巧。我敢肯定，他们的源代码背后有很多知识值得学习！
结语
特别感谢译者的分享精神，让我们了解到前端的前沿咨询。
是什么让我们在这里相遇？必定是大家对前端知识的渴求之心吧！
「前端专栏」持续分享前端知识，欢迎关注。
閱讀更多 前端專欄 的文章
