来看看成人网站 PornHub 用了哪些技术吧

[tangbure]

欢迎大家点开链接看文章，直接转过来格式会乱掉

我翻译的地址： https://mp.weixin.qq.com/s/6AyzsHtoPKDzvhnzY4RTmQ

原文地址： https://davidwalsh.name/pornhub-interview

欢迎大家关注哈

[tangbure]

不管你对色情行业持有何种观点，都不能否认成人网站的产业对于推动网络发展的巨大影响力。从推动浏览器对视频的限制到为了广告不被屏蔽，而通过 WebSocket 推送广告，你不得不在网络前沿领域创新上变得更聪明。
最近，我足够幸运的能采访到了一位 Web 开发人员，供职于最大的成人网站：PornHub。我想了解下技术相关的事情，web APIs 还能怎么改进以及在成人网站工作的感受。有趣！
备注：成人产业竞争非常激烈，所以有一些问题他们不能回答。我尊重他们需要保密的需要。
成人网站显然要显示很多色情的图片和视频。在开发过程中，你们会用其他的图片和视频把色情的图片和视频替换掉吗？开发中的内容和体验距离最终产品有多远呢？
实际中，在开发网站时，我们不替换图片和视频！在最后重要的是网站的代码和功能，我们很快就习惯了网站的界面内容，当然一开始肯定“学习曲线”有点陡，但我们都很快适应了

当有视频流和第三方广告脚本，你们怎么在网站和功能的开发过程中模拟如此重要的，动态的资源？
在开发中，播放器功能分为两个部分。基础播放器执行核心功能和触发事件。开发是在一个“干净”的环境进行的。对于网站上的集成，我们想执行第三方的脚本和广告，以便我们能尽早找到问题。在特殊情况下，我们会和广告客户合作，允许我们手动触发通常是随机的事件。


一个普通页面可能有至少一个视频，GIF 广告，一些直播视频的预览和其他视频的缩微图。你怎么评估页面性能，怎么尽可能保证高性能？有什么技巧可以分享么？
我们用了一些评测系统。
我们的播放器会向我们报告视频回放性能和一般操作的指标
整体网站性能使用第三方 RUM(Real User Monitoring )系统。
在可用的 AWS 数据中心中用 WebpageTest 编写测试脚本。我们用这个主要是为了看看在给定的时间可能发生的情况。它还允许我们以不同的位置查看“瀑布型”报表

我不得不假设前端最重要和最复杂的功能是视频播放器。从在视频之前添加广告、标记视频的亮点、更改视频速度和其他功能，您如何保持播放器的性能、功能和稳定性？
我们有一个专门的团队针对视频播放器进行严格工作，他们的首要任务是不断的监控性能和效率。为了做到这一点，我们使用了几乎所有可用的工具：浏览器性能工具、网页测试、各项指标等。稳定性和质量是在每次更新时由 QA 做一轮可靠的测试来保证的。


视频团队有多少人？前端团队有多少人？
我想说的是，基于产品的规模，团队人数趋于行业平均值


你工作在成人网站的这段时间里，你看到了前端有什么变化吗？有什么新的 APIs 使你工作变得更容易吗?
在前端世界的每个方面，我绝对都看到了很多改进；
从普通 CSS 到最终使用 LESS 和 Mixins，到使用具有媒体查询和图片标签的 flexible Grid system，以适应不同分辨率和屏幕尺寸。
jquery 和 jqueryUI 正在慢慢地离开，因此我们将回到纯 js 中更高效的面向对象编程。在某些情况下，框架也非常有趣。
我们喜欢新的 IntersectionObserver API，对于更有效地加载图片非常有用。
我们也开始使用 Picture-in-Picture API，在我们的一些页面上播放浮动视频，主要是为了获得用户对这个想法的反馈。


展望未来，有没有 Web APIs 是您希望修改、改进甚至自己创建的呢？
其中一些是我们希望修改或改进的； Beacon、WebRTC、Service Workers 和 Fetch：
Beacon：在 IOS 上的一些问题，它不能很好地处理 pageHide 事件
Fetch：没有下载进度，也不提供拦截请求的方法
WebRTC：如果分辨率不够大，即使是屏幕共享，Simulcast layers 也是被限制的
Service Workers：调用 navigator.servicework.register 不会被任何服务工作进程的 fetch 事件处理程序拦截


网络虚拟现实(WebVR) 技术在过去几年里一直在进步——在目前的状态下，WebVR 有多大用处？成人网站对内容的支持力度有多大？触觉在你网站上的 WebVR 中有应用吗？
我们正在研究 WebXR 以及如何最好地适应新兴的空间计算用例，作为最大的分发平台，我们需要支持创作者和用户，不管怎样他们希望体验我们的内容。但我们仍在探索这些新媒体的内容和平台应该是什么样的。
我们是第一个支持虚拟现实、计算机视觉和虚拟表演者的主要平台，并将继续推动新技术和开放网络。


由于每页都有这么多不同类型的媒体和内容，在桌面与移动（如果有的话）之间，最大的考虑是什么？
功能主要受操作系统和浏览器类型的限制。当涉及到完全不同的访问和功能集时，iOS 与 Android 是一个完美的例子。
例如，一些 iOS 移动设备不允许我们在全屏模式下自定义视频播放器，它们强制使用原生的 QuickTime 播放器。我们在想新点子时必须考虑到这一点。另一方面，Android 给了我们完全的控制权，我们可以将我们的功能应用到全屏模式。
适配 HLS (HTTP Live Streaming)中的数据流是另一个例子，当 HLS 的数据流质量很好时，IE 和 Edge 很挑剔，因此我们需要阻止某些更高质量的数据流，否则视频会不断卡顿并产生伪影。


你工作的成人网站目前支持的最低版本浏览器是什么？ Internet Explorer 是否被淘汰？
我们支持 IE 很长一段时间了，但最近放弃支持任何比 IE11 更老的版本。同时，我们也停止在视频播放器上使用 Flash。我们主要关注 Chrome、Firefox 和 Safari。


更广泛地说，你能分享一下典型的成人网站用到的技术栈吗？服务器端和(或)前端？你们在用哪些库？
我们的大多数网站都以以下内容为基础：
Nginx
PHP
MySQL
Memcached and/or Redis
其他技术像：Varnish, ElasticSearch, NodeJS, Go, Vertica 用在需要的地方
对于前端，我们主要用的普通 Javascipt，我们正慢慢舍弃 JQuery，我们刚刚开始使用框架，主要是 Vue.js


从局外人的角度来看，成人网站似乎非常相似：许多视频缩略图、聚合视频内容、摄像机前的表演者、广告。作为一个在成人网站工作的人，成人网站的独特之处是什么？
我们非常努力地为每种类型的人提供不同层次的独特性；主要通过内容库、用户体验和功能集，以及许多不同的算法。


在申请和面试你现在的公司之前，你对可能在成人网站工作有什么想法？你有什么犹豫吗？如果有，你的担心是如何平息？
这从来没有真正困扰过我，最终的挑战是如此吸引人。数百万人有可能与我所研究的功能进行交互的想法真的很有激励作用。事实很快就证明了这一点，我第一次做的东西上线时，我非常自豪，我真的告诉我所有的朋友去看看！色情电影永远不会消亡的事实也让工作稳定得到了保证！


就最终产品而言，分享您在成人网站工作的信息可能与在本地网络公司工作的信息不同。告诉朋友、家人和熟人你在成人网站上工作有没有一种耻辱感？告诉别人你在成人网站工作有什么犹豫吗？
我很自豪能为这些产品工作，也为此着迷，我身边的人都很清楚。它总是一个超级棒的话题，笑话和真正趣味的来源。


在成人行业以外的机构工作过后，在成人网站工作的气氛有什么不同吗？
这里的气氛非常轻松友好。我没有注意到其他机构的工作文化有什么重大差异，除了这里比我以前工作过的任何地方都要大得多。


作为前端开发人员，哪个团队和你工作接触的更多？日常沟通最常见的方法是什么？
我们和后端开发，QA 测试和产品经理接触时间是同等的--大部分时间我们去对方的桌子前直接沟通，如果不面对面沟通，就用 Microsoft Teams。最后是 Emails。


最后，你作为工作在成人网站的前端，有什么事情想分享下吗？
作为创造用户如此广泛使用的产品的一部分，这真的很令人兴奋。我们通常处于科技发展趋势和重大变革的前沿，这使我们保持了科技的乐趣和挑战性。


采访结束
我觉得我们的采访很有启发性。我有点惊讶他们在开发功能和设计时没有使用图片。看到 Pornhub 使用 WebXR, WebRTC 和 Intersection Observer，推动着网络的前沿领域，真是令人兴奋。我也很高兴看到他们认为当前的 Web APIs 足够用，开始舍弃 jQuery。
我真希望我能从中得到更多具体的技术提示，尤其是有关性能和巧妙的技巧。我敢肯定他们的源代码背后有很多需要学习的知识！
你会问什么问题？

[zwxyzx]

支持

[ungrown]

ph 站的页面性能其实很烂，相当烂，不论是主页还是播放页，我不开玩笑，虽然论资源论社区它是同行业最强

[ungrown]

我是从用户角度来说的，反正我现在特别不愿意开 ph 的页面，就算要上去找资源也是首页根据图片挑几个链接直接下载，播放页面真的是不愿意开，整个系统都被拖累。
b 站都比它做得好，虽然 b 站页面比 ph 还吃运算，但是好歹 b 站页面资源载入够快。