是的，你没看错，是P站，不是B站（bilibli）。什么是P站？全称是Pornhub，全球最大的性爱视频分享网站，你懂的。市场上有一句话：没上过P站的程序员，不是优秀的前端切图师。无论您对不伦不类的内容持何种立场，都不可否认成人网站行业对推动Web发展产生了巨大影响。从提高浏览器的视频限制，到通过WebSocket推送广告以使广告拦截器无法检测到它们，您必须在Web开发的最前沿变得更聪明和创新。最近有幸采访到来自全球最大的xx网站：Pornhub的一位web前端开发者。内容包括技术学习，如何改进WebAPI，以及在成人网站上工作是什么感觉。让我们开车（开始）！注意：成人行业竞争激烈，有些问题属于行业机密，因此无法直接回答。我会尊重他们并采取一些采访技巧来接近真相。问题：成人网站显示大量图形内容。在开发过程中，您是否使用了大量图片和视频作为占位符？开发的内容和体验与最终产品有多接近？答：实际上，我们在开发网站时不使用占位符图像。最终的产品，最重要的是代码和功能，以及符合我们使用习惯的界面。一开始肯定有一点学习曲线，但我们很快就习惯了。问：对于直播和第三方广告脚本，网站开发阶段如何模拟这些重要的动态资源？答：为了开发，我们将播放器分成两部分。基础播放器实现核心功能，负责触发相应的事件。这部分开发是完全独立的，在洁净室中完成。为了在网站上集成，我们希望在开发环境中运行那些第三方脚本和广告，以便尽早发现问题。在特殊情况下，我们将与广告商合作，以便我们可以手动触发通常随机触发的事件。问题：平均而言，一个页面至少包含一个视频、一个GIF广告、一些现场表演者的预览以及其他视频的缩略图。您如何衡量页面性能以及如何使其保持最佳性能？你能分享一些技巧吗？答：我们使用多种测量系统。1、我们的播放器会根据视频播放的一些常用指标向我们上报一些数据。2.使用第三方RUM系统测试站点性能。3.基于可用的AWS数据中心搭建一个私有的WebpageTest实例，编写测试脚本进行测试。我们主要用它来查看在给定时间可能发生的事情。他还使我们能够查看来自不同位置和提供商的“瀑布”。问题：我必须假设前端最重要和最复杂的功能是视频播放器。您如何通过在播放前添加广告、标记视频亮点、改变视频播放速度等功能来维护该资源的性能、功能和稳定性？答：我们有一个专门开发视频播放器的团队，他们的首要任务是不断监控性能和效率。为此，我们几乎使用了所有可用的东西。浏览器性能工具、网页测试、指标等。所有更新都将经过严格的质量保证流程，以确保软件的稳定性和质量。问题：专门的视频团队有多少人？团队中有多少前端开发人员？答：我只能说，鉴于产品的规模，团队的规模往往是平均水平。问题：在您从事成人网站工作期间，您如何看待前端技术环境的变化？哪些新的WebAPI让您的工作更轻松？答：我确实看到了前端世界各个方面的许多改进。1.从纯CSS到使用LESS和Mixins，再到使用带有媒体查询和图片标签的自适应Grid布局来适应不同的分辨率和屏幕尺寸。2、JQuery和JQueryUI已经慢慢离开了我们的视野，所以我们使用VanillaJS，回归到更高效的面向对象编程。在某些情况下，框架也很有趣。3.我们喜欢新的IntersectionObserverAPI，它对于图像加载非常高效。4.我们开始使用画中画API让浮动视频出现在我们的一些页面上，主要是为了获得用户对这个想法的反馈。PS：画中画API（画中画）：允许网站始终在其他窗口之上创建浮动视频窗口，以便用户可以在与其他内容站点或设备上的应用程序交互的同时继续消费媒体。问题：展望未来，您是否希望更改、改进甚至创建任何WebAPI？答：我们希望更改和改进一些API；Beacon、Fetch、WebRTC和ServiceWorker。1.Beacon：由于某些IOS问题，无法与pageHide事件一起使用。2、fetch：没有下载进度，没有办法拦截请求。3.WebRTC：如果分辨率不够大，屏幕共享时间不够，联播层也会受到限制。4.ServiceWorkers：serviceworker的Fetch事件处理程序都没有拦截对navigator.serviceWorker.register的调用投入支持VR内容？触觉在您网站上的WebVR中发挥作用吗？答：我们正在研究webXR以及如何最好地适应新兴的计算用例，作为最大的分发平台，我们需要支持创作者和用户，无论他们想如何体验我们的内容。但是，我们还在探索这些新媒体应该有什么样的内容和平台。我们是第一个支持虚拟现实、计算机视觉和虚拟表演者的主要平台，并继续推动新技术和开放网络平台的发展。问题：每个页面上的媒体和内容种类繁多，PC端和移动端之间最大的考虑因素是什么？答：功能主要受操作系统和浏览器类型的限制。当涉及到一组完全不同的访问和功能时，iOSvsAndroid是一个完美的例子。例如，某些iOS移动设备不允许我们在全屏模式下使用自定义视频播放器，而是强制使用本机QuickTime播放器。当我们提出新想法时，我们必须考虑到这一点。另一方面，Android给了我们完全的控制权，这样我们就可以将新功能推送到全屏模式。HLS自适应推流也是一个例子，IE和Edge对于HLS推流质量问题会非常挑剔，所以我们需要防止一些高质量的内容出现在低版本的浏览器中，否则视频会一直出现卡顿现象.问题：您的网站目前支持的最低浏览器版本是多少？是否支持InternetExplorer？答：我们长期以来一直支持IE，但最近放弃了对IE11之前版本的支持。同时，我们停止在我们的视频播放器中使用Flash。我们主要关注Chrome、Firefox和Safari。问题：更广泛地说，你能分享一些关于这个网站的信息吗？服务器和前端？你在使用什么库？答：我们的大部分网站都是基于：1.Nginx2。PHP3。MySQL4。Memcached和Redis以及Varnish、ElasticSearch、NodeJS、Go、Vertica等其他技术（如适用）。对于前端，我们主要运行vanillaJavaScript，我们逐渐从jQuery转移到刚刚开始使用框架，主要是Vue.js。问题：从局外人的角度来看，成人网站通常看起来很相似：大量视频缩略图、聚合视频内容、现场表演、广告。作为网站建设者，您的网站有哪些与众不同的特点？答：我们非常努力地赋予每个品牌不同程度的独特性；内容库、用户体验和功能集，以及许多不同的想法。问题：在为您当前的雇主申请和面试之前，您对在成人网站上工作的可能性有何看法？你犹豫了吗？如果有，您是如何解决您的顾虑的？回答：面对如此诱人的挑战，我从来没有真正感到困扰。想象数百万用户与我实现的功能进行交互就足够鼓舞人心了。事实证明，这个想法很快就产生了，我的第一个实现上线了，这让我感到非常自豪，以至于我真的告诉??我所有的朋友都来看看！色情永不消亡的事实也有助于工作保障！问题：就像最终产品一样，在成人网站上分享您的作品可能与您在当地的另一家公司工作时有所不同。当您与朋友、家人或熟人分享您的作品时，您是否会污名化自己？你犹豫要不要告诉别人你的工作？答：我很自豪我能够开发出这些产品，非常了解我的人在了解它们时会非常羡慕。他总是聊天、开玩笑的好人，而且真的非常有趣。问题：在成人行业以外的机构工作，与在成人场所工作的氛围有何不同？答：这里的气氛非常轻松友好。与其他机构相比，我没有注意到这里的工作文化有任何重大差异，除了它在当地比我以前工作过的任何地方都要大得多。问题：作为前端开发人员，您与哪些团队合作最密切？最常见的日常交流形式是什么？答：我们与后端开发人员、QA测试人员和产品经理密切合作——大多数时候，我们亲自走过去交流。还使用聊天(MicrosoftTeams)和电子邮件。问题：最后，作为一个成人网站的前端开发者，你有什么想分享的？回答：成为能够实现如此广泛的用户体验的产品的一部分令人兴奋。随着技术的不断发展，我们也经常处于趋势和技术重大变革的前沿，这使它充满乐趣和挑战。采访结束时，我发现我们的采访真的很鼓舞人心。我很惊讶他们在开发功能和设计时没有使用大量图像；很高兴看到Pornhub继续通过WebXR、WebRTC和IntersectionObserver推动网络的前沿；也很高兴看到他们认为当前的WebAPI已经足够丰富，可以开始删除jQuery。我真的希望我能从中获得更具体的技术提示、性能和巧妙的技巧。我敢肯定他们的源代码背后有很多东西需要学习！以前Vue+Electron开发跨平台桌面应用，教你写出令人窒息的烂代码[](http://mp.weixin.qq.com/s?__b...
