记一次对p站开发人员的面试

作者：davidwalsh 译者：前端css和js干货 来源：davidwalsh

无论您对成人网站的立场如何，都无法否认成人网站行业对推动网络发展产生了巨大影响的事实。 从突破浏览器的视频限制到通过WebSocket推送广告从而躲过广告拦截器的检测，必须聪明地在网络的前沿进行创新。
最近有幸采访了最大的成人网站P站的网络开发人员。 我想了解如何改进 Web API，以及在成人网站上工作是什么感觉。
注意：成人行业竞争非常激烈，所以有一些他们不方便回答的问题。

1.成人网站显然会显示大量图形内容。 在开发过程中，您是否使用了大量图像和视频占位符？ 开发内容离最终产品还有多远？

我们在开发网站时实际上不使用占位符！ 重要的是代码和功能。 一开始肯定会有一点学习曲线，但我们都很快就习惯了。

2.当涉及到流和第三方广告脚本时，您如何在站点功能开发过程中模拟如此重要的动态资源？

对于开发，播放器分两个部分，基础播放器实现核心功能并触发事件，开发是在一个干净的房间里面完成的。为了集成到网站，我们希望这些第三方脚本和广告能够运行，以便我们能够尽早在流程中发现问题。在特殊情况下，我们将与广告商合作，允许我们手动触发通常是随机的事件。

3.一个普通页面可能至少有一个视频、GIF 广告、一些摄像师预览以及其他视频的缩略图。 您如何衡量页面性能以及如何尽可能保持页面性能？ 有什么技巧可以分享吗？

我们使用一些评测系统。

• 我们的播放器周期性向我们报告有关视频播放性能和一般使用的指标
• 用于一般站点性能监测的第三方 RUM 系统。
• WebpageTest 私有实例，用于在AWS 数据中心编写测试脚本。 我们主要使用它来查看在某段时间可能发生的事情。通过他我们还能查看“瀑布图”。

4.假设前端最重要和最复杂的功能是视频播放器。 比如在视频前加入广告、标记视频的精彩瞬间、更改视频速度和其他功能，如何保持它的性能、功能和稳定性？

我们有一个专业的视频播放器团队，他们的首要任务是不断监控性能和效率。 为此，我们几乎使用了所有可用的东西； 浏览器性能工具、网页测试等。我们所做的任何更新都通过可靠的QA确保稳定性和质量。

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

我想说，考虑到产品的规模，团队规模接近平均水平。

6.在您从事成人网站工作期间，您如何看待前端格局的变化？ 哪些新的 Web API 使工作更轻松？

我确实在前端的各个方面都看到了很多进步；

1. 从纯 CSS 到使用 LESS 和 Mixins，再到具有媒体查询和图片标签的灵活网格系统，以适应不同的分辨率和屏幕尺寸
2. jQuery 和 jQueryUI正在慢慢淡出，所以我们将转向更高效的面向对象框架vanilla JS 。
3. 我们喜欢新的 IntersectionObserver API，它对于加载图像的方式更有效
4. 我们也开始使用画中画 API，在我们的一些页面上放置浮动视频，主要是为了获得用户对反馈。

7.展望未来，有没有您希望更改、改进甚至创建的 Web API？

其中一些我们希望改变或改进； Beacon、WebRTC、Service Workers 和 Fetch：

• Beacon：一些 IOS 问题，它不能很好地处理 pageHide 事件
• Fetch：没有下载进度，也没有提供拦截请求的方法
• WebRTC：如果分辨率不够大，即使是屏幕共享，联播层也会受到限制
• Service Workers：调用 navigator.serviceWorker.register 不会被任何service worker的 Fetch 事件处理程序拦截

8.在过去几年中WebVR 一直在改进，WebVR 在当前状态下有多大用处？成人网站为支持 VR 内容付出了多少努力？ 触觉在您网站上的 WebVR 中是否有作用？

我们正在研究 webXR，作为最大的分发平台，我们需要支持创作者和用户，因为他们想体验我们的内容。 我们仍在探索在这些新媒体中，内容和平台应该是什么样的。

我们是第一个支持VR、计算机视觉和虚拟表演者的平台，并将继续推动新技术。

9.每个页面上都有这么多不同类型的媒体和内容，桌面与移动设备的最大考虑是什么？

功能主要受操作系统和浏览器类型限制。 就完全不同的功能集而言，iOS 与 Android 是一个很好的例子。

例如，一些 iOS 移动设备不允许我们在全屏模式下使用自定义视频播放器，它们强制使用本机 QuickTime 播放器。 当我们开发新功能时，必须考虑到这一点。 然而，Android 给了我们完全的控制权，我们可以将我们的功能应用到全屏模式。

HLS中的自适应流也是另一个例子，IE和Edge对HLS流质量很挑剔，处理不当时，视频会不断地卡顿并产生伪影。

10.您工作的成人网站的当前最低浏览器支持是多少？ Internet Explorer 是否已被淘汰？

很长一段时间我们支持 IE ，但最近放弃了对 IE11 之前的任何浏览器的支持。 同时，我们也停止使用 Flash视频播放器。 我们主要关注 Chrome、Firefox 和 Safari。

11.您能否分享一些有关典型成人网站技术栈的信息？ 服务器和前端？ 你在使用哪些库？

我们的大多数网站都使用以下内容作为基本技术栈：

• nginx
• PHP
• MySQL
• Memcached 和/或 Redis
• 在适当的地方使用其他技术，如 Varnish、ElasticSearch、NodeJS、Go、Vertica。

对于前端，我们主要使用 vanilla Javascript，我们正在慢慢放弃jQuery，我们才刚刚开始使用框架，主要是 Vue.js

12.从局外人的角度来看，成人网站通常看起来非常相似：大量视频缩略图、聚合视频内容、摄像头表演、广告。 作为从事这些工作的人，如何脱颖而出？

我们非常努力地在不同层面赋予每个品牌一些独特性； 内容库、用户体验和功能集，以及许多不同的算法。

13.在为您当前的雇主申请和面试之前，您对可能在成人网站上工作有什么想法？ 你有过犹豫吗？ 如果是这样，你的包袱是如何放下的？

它从来没有真正困扰过我，最终是如此吸引人。 数以百万计的人可能与我所从事的功能进行交互真的很鼓舞人心。我第一次做的东西上线了，我非常自豪，我确实告诉我所有的朋友都去看看！

14.就最终产品而言， 告诉朋友、家人和熟人您在成人网站上工作是否会带来耻辱？ 告诉人们您在成人网站上工作是否有任何犹豫？

我很自豪能在这些产品上工作，我身边的人都知道并为之着迷。 它总是令人惊奇谈话、笑话的来源，而且真的很有趣。

15.在成人网站工作时气氛是否有所不同？

这里的气氛非常轻松和友好。 我没有发现这里工作文化与其他地方有任何重大差异，空间上这里比我以前工作过的任何地方都大得多。

16.作为前端开发人员，您与哪些团队合作最密切？ 最常见的日常沟通方式有哪些？

我们与后端开发人员、QA 测试人员和产品经理合作——大部分时间我们只是走到彼此的办公桌前交谈。 如果没有，聊天（MS Teams）会经常使用。 然后是电子邮件。

17.最后，作为在成人网站上工作的前端开发人员，您有什么想分享的吗？

作为创造用户广泛使用的产品的一部分，真的很令人兴奋。 随着技术的发展，我们通常处于技术发展的最前沿，这使其充满乐趣和挑战性。

18.面试结束

我发现我们的采访真的很有启发性。 我有点惊讶他们在开发功能和设计时没有使用图像占位符。 很高兴看到 P站继续通过 WebXR、WebRTC 和 Intersection Observer 推动网络的发展。 我也很高兴看到他们认为当前的Web API集，足以放弃 jQuery。

我真的希望我能够从他们那里得到更具体的技术技巧； 尤其是性能优化和hacks技巧。 我相信在他们的源代码背后有很多知识需要学习！如果是你会问什么问题？