对，你没看错，是 P 站，不是 B 站（bilibli）。何谓 P 站？全称 Pornhub，全球最大的 sex 影片分享网站，你们懂得。坊间有云：没上过 P 站的程序员，不是一名优秀的前端切图仔。无论你对不可描述内容采取什么立场，都无法否认成人网站行业对于推动 Web 的发展产生着巨大的影响。从提高浏览器的视频限制，到通过 WebSocket 推送广告，使得广告拦截程序无法检测到它们，你都必须更加聪明的在 Web 开发的前沿进行革新。最近，我很幸运地采访到了一位来自世界最大的 xx 网站：Pornhub 的 Web 前端开发者，内容包括技术的学习，如何改进 Web APIs，以及在成人网站上班是一种什么体验。注意：成人行业竞争激烈，有些问题属于行业机密，因此无法直接回答。我会尊重他们，并采取一些访问的技巧来接近真相。问题： 成人网站会展示许多图像内容。在开发的过程中，您是否使用了大量的图片和视频进行占位？所开发的内容和经验距离最终产品有多远？回答： 实际上，我们在开发网站时不使用占位图片。最后的产品，最重要的是代码和功能，以及符合我们使用习惯的界面。一开始肯定会有一些学习曲线，但是我们大家很快就习惯了。问题： 对于直播和第三方广告脚本，您是如何在网站的开发阶段，来模拟这些重要的动态资源？回答： 为了进行开发，我们将播放器拆分为两个部分。基础的播放器实现核心功能，并负责触发相应的事件。这部分开发是完全独立的，在净室中完成。为了在网站进行集成，我们希望在开发环境运行那些第三方脚本和广告，以便我们尽早的发现问题。在特殊情况下，我们将与广告客户进行合作，便于我们可以手动触发一些通常可能随机触发的事件。问题： 平均一个页面会包含至少一个视频，GIF 广告，一些直播表演者的预览，以及其他视频的缩略图。您是如何衡量页面性能，以及如何使得页面保持最佳性能？您是否可以分享一些技巧呢？
1. 我们的播放器会基于一些视频播放的通用指标，向我们报告一些数据。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。问题：更广泛的说，您可以分享一些有关网站的信息吗？服务器和前端？您正在使用哪些库？ 在适当的地方使用其他技术，例如 Varnish, ElasticSearch, NodeJS, Go, Vertica 。对于前端，我们主要运行原生 JavaScript，我们逐步摆脱了 jQuery，并刚开始使用框架，主要是 Vue.js。问题：从一个局外人的角度来看，成人网站通常看起来很相似：很多视频缩略图，汇总的视频内容，直播表演，广告。作为网站的建设者，你们网站与众不同的特征是什么？回答： 我们非常努力地为每个品牌提供不同层次的独特性；内容库，UX 和功能集，以及许多不同的想法。问题：在为当前雇主申请并面试之前，您对可能在成人网站上工作有何想法？你有犹豫吗？如果有，您是如何消除自己的顾虑的？回答： 面对如此诱人的挑战，从来没有真正的困扰过我。想象中，会有数以百万计的用户使用我实现的功能进行交互，这足够让人感到鼓舞。事实证明，这个想法很快成立了，我第一次实现的功能上线了，这让我感到非常自豪，我的确告诉了所有朋友去看！色情片永远不会死的事实也使得工作的稳定得到了保障！作者：David Walsh 译者：博轩 排版：土哥 |
