Pornhub Web 开发者访谈

原文:Interview with a Pornhub Web Developer

译者:neal1991

welcome to star my articles-translator, providing you advanced articles translation. Any suggestion, please issue or contact me

LICENSE: MIT

无论你对色情内容采取何种立场,都无法否认成人网站行业对推动互联网发展具有巨大影响。从将浏览器的视频限制推送到通过WebSocket推送广告,以便广告拦截器无法检测到它们,你必须足够聪明才能在互联网的前沿进行创新。

最近,我很有幸采访互联网最大的成人网站 Pornhub 的一名 Web 开发者。我想了解技术,Web API 如何改进以及在成人网站上工作的感受。请享用!

注意:成人产业竞争激烈,因此有一些他们无法回答的问题。我尊重他们保守商业机密的需要。

成人网站显然会显示许多图形内容。在开发过程中,你是否使用了大量的占位符图像和视频?最终产品和开发时的内容和经验有什么区别?

实际上,我们在开发网站时不使用占位符!其次,重要的是代码和功能,接口是我们现在非常习惯的东西。一开始肯定会有一些学习曲线,但是我们大家很快就习惯了。

对于网络流和第三方广告脚本,你如何在网站和功能开发过程中模拟这些重要的动态资源?

为了进行开发,播放器分为两个部分。基本播放器实现核心功能并触发事件。开发不会受其他因素干扰。为了在网站上进行集成,我们希望运行那些第三方脚本和广告,以便我们尽早发现问题。在特殊情况下,我们将与广告客户合作,允许我们手动触发通常可能是随机的事件。

平均每个页面可能至少包含一个视频,GIF 广告,一些 cam 表演者预览以及其他视频的缩略图。你如何测量页面性能以及如何使页面保持最佳性能?有什么你可以分享的技巧吗?

我们使用一些测量系统。

  • 我们的播放器会向我们报告有关视频播放性能和一般用法的指标
  • 用于一般站点性能的第三方 RUM 系统。
  • WebpageTest 私有实例,用于在可用的 AWS 数据中心中编写测试脚本。我们主要将其用于查看给定时间可能发生的情况。它还使我们能够查看来自不同位置和提供者的“瀑布”。

我必须假设前端最重要,最复杂的功能是视频播放器。从在视频之前加入广告,标记视频的精彩时刻,更改视频速度和其他功能,你如何维护该资产的性能,功能和稳定性?

我们有一支专门致力于视频播放器的团队,他们的首要任务是持续监控性能和效率。我们为此几乎使用了所有可用的东西;浏览器性能工具,网页测试,指标等。我们进行的所有更新均通过可靠的质量检查来确保稳定性和质量。

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

我要说的是,团队规模倾向于基于产品规模的平均水平。

在成人网站上工作期间,你如何看待前端未来的变化?哪些新的 Web API 使你的生活更轻松?

我肯定在前端世界的每个方面都看到了很多改进;

  • 从纯 CSS 到最终使用 LESS 和 Mixins,再到使用具有媒体查询和图片标签的灵活 Grid 系统,以适应不同的分辨率和屏幕尺寸
  • jQuery 和 jQueryUI 慢慢地被淘汰,因此我们将回到 vanilla JS 中更高效的面向对象编程。在某些情况下,框架也非常有趣
  • 我们喜欢新的 IntersectionObserver API,对于以更有效的方式加载图像非常有用
  • 我们也开始使用画中画 API,以便在我们的某些页面上播放该浮动视频,主要是为了获得用户对该想法的反馈。

展望未来,有没有你想要更改,改进甚至创建的 Web API?

其中有一些是我们希望改变或改进的;Beacon,WebRTC, Service Workers 以及 Fetch:

  • Beacon:在 IOS 上存在 pageHide 事件无正常工作的问题
  • Fetch:没有下载进度,也没有提供拦截请求的方法
  • WebRTC:如果分辨率不够大,则即使进行屏幕共享,Simulcast 层也会受到限制
  • Service Workers:调用 navigator.serviceWorker.register 不会被任何 Service Workers 的 Fetch 事件处理程序拦截

WebVR 在过去几年中一直在进步--WebVR 在当前状态下作用有多大,成人网站为支持 VR 内容付出了多少努力?触觉在你们网站上的 WebVR 中有起到作用吗?

我们正在研究 webXR 以及如何最好地适应新兴的空间计算用例,作为最大的发布平台,我们需要支持创作者和用户,无论他们想体验我们的内容如何。但是,我们仍在探索这些新媒体应具有什么样的内容和平台。

我们是第一个支持 VR,计算机视觉和虚拟表演者的主要平台,并将继续推动新技术和开放互联网的发展。

每个页面上的媒体和内容种类繁多,那么桌面设备与移动设备之间最大的考虑是什么?

功能主要受操作系统和浏览器类型的限制。当涉及一组套完全不同的访问和功能时,iOS 对比 Android 是一个完美的例子。

例如,某些 iOS 移动设备不允许我们在全屏模式下使用自定义视频播放器,而是强制使用本机 QuickTime 播放器。我们提出新想法时必须考虑这一点。另一方面,Android 为我们提供了完全的控制权,我们可以将功能在全屏模式实现。

HLS 中的自适应流式传输也是另一个示例,当涉及到 HLS 流式传输质量时,IE 和 Edge 需要有所顾虑,因为我们需要防止某些更高质量的内容,否则视频将不断卡顿并出现伪像。

当前针对你工作的成人网站的最低浏览器版本支持是什么?是否已经淘汰 IE 浏览器?

我们对 IE 的支持时间很长,但是最近放弃了对 IE11 之前的任何版本的支持。有了它,我们也停止了为视频播放器使用 Flash。我们主要关注 Chrome,Firefox 和 Safari。

更广泛地说,你能否分享一些有关典型成人网站技术栈的信息?服务器和/或前端?你正在使用哪些库?

我们的大多数网站都以以下内容为基础:

  • Nginx
  • PHP
  • MySQL
  • Memcached 和/或 Redis

在适当的地方使用其他技术,例如 Varnish,ElasticSearch,NodeJS,Go,Vertica。

对于前端,我们主要运行原生 Javascript,我们逐渐摆脱了 jQuery,我们才刚刚开始使用框架,主要是Vue.js

从局外人的角度来看,成人网站通常看起来很相似:很多视频缩略图,聚合的视频内容,摄像头表演,广告。作为从事这些工作的人,使成人网站与众不同的特征是什么?

我们非常努力地为每个品牌赋予不同层次的独特性;内容库,UX 和功能集,以及许多不同的算法。

在你申请这份工作和面试之前,你对在成人场所工作的想法是什么?你有犹豫吗?如果是这样,你如何释怀的?

这真的从来没有困扰过我,最终挑战是如此吸引人。数以百万计的人会使用我正在开发的功能确实令人鼓舞。事实证明,这很快就成立了,我第一次的工作成果上线了,我感到非常自豪,我的确告诉所有朋友去看看!色情片永远不会消失的事实也使工作稳定得到了保证!

就最终产品而言,分享下你在成人网站上工作可能与在本地互联网公司上工作不同。你会羞于告诉朋友,家人和熟人在成人网站工作吗?你是否会犹豫告诉别人你在成人网站工作?

我为能够为这些产品工作而感到自豪,与我亲近的人都知道并着迷于这些产品。它始终是交谈,笑话的绝佳来源,而且非常有趣。

曾在成人产业以外的机构工作过,和在成人网站工作时气氛有差异吗?

这里的气氛非常轻松友好。除了在这里比我以前工作过的任何地方都大得多的事实外,我没有注意到和其他机构在工作文化方面的任何重大差异。

作为前端开发人员,你与哪些团队合作最紧密?最常见的日常交流方式是什么?

我们与后端开发人员,QA 测试人员和产品经理平等地合作--大多数时候,我们只是在彼此的办公桌旁交谈。另外使用 cat(MS Teams)非常普遍。然后就是电子邮件。

最后,作为在成人网站上工作的前端开发人员,你有什么想分享的吗?

作为创造用户如何体验如此广泛使用的产品的一部分,确实令人兴奋。随着技术的不断发展,我们通常处于趋势和技术重大变革的最前沿,这使它保持乐趣和挑战性。

访谈结束

我发现我们的采访确实很有启发性。我很惊讶他们在开发功能和设计时没有使用图像。很高兴看到 Pornhub 继续使用 WebXR,WebRTC 和 Intersection Observer 推动互联网的前沿发展。我也很高兴看到他们认为当前的 Web API足够了从而开始移除 jQuery。

我真的希望我能够从中获得更多具体的技术提示;性能和巧妙的技巧。我敢肯定,他们的源代码背后有很多知识要学习!你会问什么问题?

可以扫描二维码或者搜索 mad_coder 关注微信公众号,点击阅读原文可以获取链接版原文。

原文地址:https://www.cnblogs.com/madneal/p/11666529.html

时间: 2024-10-15 00:38:19

Pornhub Web 开发者访谈的相关文章

Web开发者不可不知的15条编码原则

HTML已经走过了近20的发展历程.从HTML4到XHTML,再到最近十分火热的HTML5,它几乎见证了整个互联网的发展.但是,即便到现在,有很多基础的概念和原则依然需要开发者高度注意.下面,向大家介绍这些应该遵循的开发原则. 1.善用DIV来布局 当开发一个Web页面时,要考虑第一件事就是区分页面重点.将这些内容用DIV标签包含起来,页面的代码会呈现出整洁.缩进良好的风格. <div id="header"></div> <div id="bo

Web 开发者学习路线图

2017 Web 开发者学习路线图(头图源自谷歌) 本文是源自 Github 上 Kamran Ahmed 建立的一个仓库.在文中,作者为他的老教授分享了一组成为前端与后端开发者以及 Devops 人员需要掌握的学习路线图,以便与他的学生们分享他们的观点. 同时,有任何改进的建议或意见也欢迎给作者提 PR .那么,我们一起来看看需要 Get 哪些技能? 介绍 前端开发学习路线图 对于后端,作者更喜欢使用 Node JS 和 PHP-7,同时最近他也在研究 GO 语言.除了学习上述所说的,如果还可

在Linux系统下运行微信Web开发者工具

微信Web开发者工具只有window版本和mac版本,如果想要在Linux系统下运行微信Web开发者工具,需要花费很大周折. 注:带 * 的步骤或文件为不确定是否管用的步骤或文件.本人系统为Linux Mint 18.1版本. 1.下载nwjs 下载nwjs的SDK. 2.将微信web开发者工具拷贝到nwjs 将在window系统下安装的微信web开发者工具文件夹中的package.nw.icon.ico.* 微信web开发者工具.exe拷贝到nwjs sdk解压后的文件夹内. * 解压 微信w

Web开发者需养成的8个好习惯

Web开发者需养成的8个好习惯 每个行业有着每个行业的标准和一些要求,自己只是一个进入前端领域的小白,但是深刻的知道,习惯很重要,就Web开发分享一下,要养成的一些好的习惯. 优秀的Web开发人员工作效率更高,因为他们拥有丰富的经验和良好的习惯.作者Gregor Dorfbauer分享了用于Web开发中的8个好习惯,这些良好的工作习惯不仅能提高效率,还能让您创建更加优秀的应用,让您的工作事半功倍. 1. 使用Bug追踪系统 想要做好软件开发并非易事,这里面还包含大量的功能需求.Bug报告以及用户

微信web开发者工具初探

最近需要在微信企业号中挂接网页,之前也没有接触过微信开发,刚开始也不知道怎么调试,后来同事介绍使用“微信web开发者工具”,于是在网上下了一个,使用了一下的确很好用.它不仅支持Android和IOS同时还可以调试Hybrid APP应用,当然用谷歌的开发者工具也能调试Hybrid应用. 这里是官方下载地址:http://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html#.E4.B8.8B.E8.BD.BD.E5.9C.B

微信web开发者工具调试

微信web开发者工具调试 前几天写了一篇使用fiddler调试微信端页面的,然后博友评论说使用fiddler太麻烦了,推荐使用微信web开发者工具调试微信页面,这两天弄着玩了一下,很强大.这篇文章只是做一个记录,方便自己以后使用的时候看看,不对的地方请大家批评指正.放入官方的微信web开发者工具下载链接以及文档说明https://mp.weixin.qq.com/wiki/10/e5f772f4521da17fa0d7304f68b97d7e.html,参考这个文档,我又给细节化了一些内容.下载

Web开发者应知的URL编码知识

原文出处:http://blog.jobbole.com/42246/ 本文首先阐述了人们关于统一资源定位符(URL)编码的普遍的误读,其后通过阐明HTTP场景下的URL encoding 来引出我们经常遇到的问题及其解决方案.本文并不特定于某类编程语言,我们在Java环境下阐释问题,最后从Web应用的多个层次描述如何解决URL编码的问题来结尾. 简介 当我们每天上网冲浪时,有一些技术我们无时无刻不在面对.有数据本身(网页),数据的格式化,能够让我们获取数据的传输机制,以及让Web网络能够真正成

Web开发者的六个代码调试平台

代码调试平台是Web开发者进行开发.测试.分享.协作和交流的网络应用,它们支持实时的编辑.预览HTML.CSS和JavaScript的客户端代码.这些代码调试平台最值得称道的地方在于,它们中的大多数都是免费的,你可以很容易的以学习或者调试程序为目的与他人分享你的工作. 就个人而言,这些web应用程序在日常工作中给我带来了不小的帮助.每当在使用JavaScript或者CSS编程碰到瓶颈的时候,我可以在代码调试平台上分享自己的代码并邀请其他的开发者朋友来解决.这种模式的有趣性和互动性对于新手的学习有

微信web开发者工具

概述 为帮助开发者更方便.更安全地开发和调试基于微信的网页,我们推出了 web 开发者工具.它是一个桌面应用,通过模拟微信客户端的表现,使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作.立即下载体验 你可以: 使用自己的微信号来调试微信网页授权 调试.检验页面的 JS-SDK 相关功能与权限,模拟大部分 SDK 的输入和输出 使用基于 weinre 的移动调试功能 利用集成的 Chrome DevTools 协助开发 该工具界面主要由几大部分组成,如下图所示: 顶部菜