Pornhub Web 开发者访谈

2019-10-12 admin

原文: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 或者扫描二维码关注公众号:

9tMvlT.jpg

[转载]原文链接:https://segmentfault.com/a/1190000020659742

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77203.html

文章标题:Pornhub Web 开发者访谈

相关文章
JavaScript库开发者们的规则
保持无侵入性 我的HTML标记不想知道你的JavaScript代码。 严禁修改和扩展Object.prototype! 这条很重要,因此需要一条完全针对它的规则。对象是JavaScript功能的基本构建模块,不要搞乱它们。 不要...
2015-11-11
Web缓存基础:术语、HTTP报头和缓存策略
简介 对于您的站点的访问者来说,智能化的内容缓存是提高用户体验最有效的方式之一。缓存,或者对之前的请求的临时存储,是HTTP协议实现中最核心的内容分发策略之一。分发路径中的组件均可以缓存内容来加速后续的请求,这受控于对该内容所声明的缓存策略...
2016-01-13
12个Web设计师必备的Bootstrap工具
作为一位设计师,会经常追寻新鲜有趣的设计工具,这些工具会提高工作的效率,使得工作更有效, 最重要的是使工作变得更方便。非常肯定的说,随着日益增长的工具和应用的数量,设计和开发变得越来越简单了。其中最普遍使用的最终框架 之一是 Bootstr...
2015-12-24
使用AngularJS开发我们下一款Web应用的七个理由
在当下这个电子商务时代,每一家企业都热衷于通过网络拓展自身业务。而这也使Web开发人员市场呈现出前所未有的红火态势。根据最近发布的一份调查报告,全球网站总数已经超过8.76亿个,而且这一数字还在不断上升当中。市场上用于Web开发的平台亦多种...
2015-12-25
HTML5之WebSocket入门3 -通信模型socket.io
socket.io为什么会诞生呢?请看下面文字说明。 为什么需要socket.io? node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一,为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服...
2017-03-29
Clappr——开源的Web视频播放器
巴西著名的门户网站 Globo.com(视频播放器),使用的是基于OSMF的Flash组件。在最近几年的发展过程中,Globo为视频平台陆续添加了不少额外功能,例如: 字幕,广告,画中画播放等。然而,由于缺乏针对视频平台进行维护的专门小组,...
2016-01-13
webpack的proxyTable无效的解决方案
最近遇到这个需要单页访问跨域后台的问题。 遇到了网上很多人说的,proxyTable无论如何修改,都没效果的现象。 经过几轮测试,总结出一下几种解决方案: 1.(非常重要)确保proxyTable配置的地址能访问,因为如果不能访问,在浏览器...
2018-06-15
WebStorm操作Git
前期配置 ① 确定git已经安装后,打开webstorm,在file-settings中直接搜索github,然后输入自己github的账号密码 ② 点击test,出现onnection successful的提示框,说明连接到github...
2018-04-18
vue项目使用WebViewJavascriptBridge
<meta itemprop=“headline” content=“vue项目使用WebViewJavascriptBridge”><meta itemprop=“datePublished” content=“2018...
2018-03-22
webpack4 css打包压缩问题
这两天一直在练习这个webpack4, 发现有好多问题和坑,做开发嘛,一定要有喜欢出问题并喜欢解决问题,坚决踩个坑填个坑的不怕死小强精神! webpack4 在配置上其实是可以是想production和development的, &#x2F...
2018-05-18
回到顶部