最近,我有幸采访了大型成人网站 Pornhub 的一位 Web 开拓工程师,理解了干系的开拓技能、Web API 的改进,以及作为成人网站开拓工程师是一种若何的体验。
把稳:由于成人网站这个行业竞争相称激烈,有一些问题他们不能回答我,这一点我表示理解。
成人网站须要显示大量的图像内容,在开拓过程中,你是否利用了大量的图片和视频占位符?开拓过程中的内容体验和终极产品差距大吗?

实际上,在开拓这个网站时我们并没有利用占位符!
归根结底,代码和功能才是最主要的东西,至于界面什么的,到了这个时候我们已经很熟习了。刚开始时有一点难度,但很快我们就适应了。
在开拓过程中,你们是如何仿照直播视频流和第三方广告脚本的?它们都是很主要的资源。
播放器被分为两个组件,基本组件实现了核心功能,用于触发事宜。开拓是单独进行的,在进行集成时,我们须要用到第三方脚本和广告,这样可以尽早创造问题。对付一些分外情形,我们会与广告主互助,通过手动的办法来触发一些随机事宜。
一样平常页面上至少会有一个视频、一些 GIF 广告、一些直播预览和其他视频的缩略图。你是如何测定页面性能的?以及如何只管即便提升页面的性能?
我们利用了一些测评系统。
播放器会将视屏播放的性能和用户播放情形发送给我们;
我们利用了第三方的 RUM 系统;
我们利用了 WebpageTest,这样就可以知道在某个时段发生了什么事情。
我假设播放器是前真个一个最主要也最繁芜的功能。在视频前面插入广告、标记视频的关键部分、改变播放速率,等等,你是如何保持播放器的性能、功能和稳定性的?
我们有一个专门卖力开拓播放器的团队,他们的紧张任务是持续地监控播放器的性能。我们用上了所有可用的工具:浏览器性能工具、WebpageTest、性能指标,等等。每次在发布更新之前,我们都会进行一轮严格的 QA 来担保稳定性和质量。
视频团队有多少专职开拓职员?有多少前端开拓职员?
我只能说,如果从全体产品的规模来看,我们的团队规模算是中等的。
在从事成人网站开拓期间,你看到前端领域经历了哪些发展?有哪些新的 Web API 给你带来很大的帮助?
我看到前端技能在很多方面都有进步。
从利用纯 CSS 到利用 LESS 和 Mixin,再到利用灵巧的栅格系统和图像标签来适应不同的分辨率和屏幕大小;
jQuery 和 jQueryUI 逐渐淡出了我们的视线,我们回到了更加面向工具的纯 JavaScript 编程。一些框架在某些场景下也起到非常有趣的浸染;
我们很喜好新的 IntersectionObserver API,用它来加载图像非常高效;
我们还利用了画中画 API,让视频漂浮在页面上,不过现在还在争取用户对这个想法的反馈。
展望未来,有没有哪些 Web API 是你希望发生变革、改进的?或者涌现新的 Web API?
我们希望这些 API 能够发生变革或改进:Beacon、WebRTC、Service Worker 和 Fetch。
Beacon:在 iOS 上有些问题,对 pageHide 事宜支持得不太好;
Fetch:没有下载进度,也没有供应拦截要求的办法;
WebRTC:在进行直播时,如果分辨率不足大就会有所限定;
Service Worker:调用 navigator.serviceWorker.register 不会被 Service Worker 的 Fetch 事宜处理器拦截到。
WebVR 在过去几年已经有所改进。目前来看,它的浸染有多大?成人网站会投入多大精力来支持 VR 内容?Pornhub 的 WebVR 有涉及触觉技能吗?
我们正在研究如何将 WebXR 运用在沉浸式空间场景中。作为最大的内容分发平台,我们有必要为用户供应让他们能够按照自己的办法来体验网站内容的机会。但我们还在探索,在利用这些新媒体时,内容和平台该当是什么样子。
我们是支持 VR、打算机视觉和虚拟主播的一个紧张平台,我们将连续推动新技能的发展。
每个页面上都有不同类型的媒体和内容,对付桌面版或移动版来说,最须要考虑的东西是什么?
我们紧张考虑操作系统和浏览器对功能方面的限定。比如,iOS 和 Android 在访问权限和功能方面就非常不一样。
一些 iOS 设备不许可在全屏时利用自定义播放器,它们会逼迫利用原生的 QuickTime 播放器。而 Android 则给了我们完备的掌握权限,可以在全屏时利用我们的播发器。
另一个例子是 HLS 视频流,IE 和 Edge 对 HLS 视频流质量非常挑剔,以是我们须要掌握视频的质量,否则在播放时就断断续续或者涌现重影。
目前 Pornhub 可以支持的最低浏览器版本是哪个?现在还支持 IE 吗?
我们支持 IE 很永劫光了,但最近不支持 IE 11 之前的版本。其余,我们也停滞支持 Flash 播发器。我们现在紧张支持 Chrome、Firefox 和 Safari。
可以分享一下 Pornhub 的技能栈吗?从做事器端到前端,你们利用了哪些库?
基本上,我们利用了这些东西:
Nginx;
PHP;
MySQL;
Memcached/Redis。
其他技能还包括 Varnish、ElasticSearch、NodeJS、Go 措辞、Vertica。
前端方面,我们紧张利用了纯 JavaScript。我们在逐步淘汰 jQuery,并开始利用框架,比如 Vue.js。
在生手看来,成人网站的网页上一样平常充斥着各种视频缩略图、视频、直播和广告。从开拓者的角度来看,是什么东西让一个成人网站变得分歧凡响?
我们努力让每一个品牌都具备一定程度的独特性,不同的内容、界面体验和功能,还利用了很多不同的算法。
在口试 Pornhub 时,你是怎么想的?你有犹豫过吗?如果有,又是怎么肃清这种感情的?
我没有感到有什么欠妥,毕竟这个寻衅对我来说充满了吸引力。一想到有数百万人会用到我开拓的东西,我就感到很愉快。这个想法很快就得到了验证,当我开拓的功能第一次上线时,我感到很自满,我还叫我的朋友们也去看看!
成人网站永久都不会消亡,它为我们供应了稳定的事情来源。
与开拓一样平常的网站比较,开拓成人网站可能会有所不同。当你见告你的朋友、家人和熟人自己在开拓成人网站,你会以为这是一种耻辱吗?你会犹豫见告他们这些吗?
我为自己开拓的东西感到自满,我身边的人都知道,也很喜好它们。这也成了我们的茶余饭后的谈资,非常故意思。
你也在其他地方开拓过其他网站,在 Pornhub 的事情氛围有什么不同吗?
这里的氛围非常轻松友好,我不以为跟在其他地方有什么不同。
作为前端开拓职员,你须要与哪些团队密切打仗?你们平常常用哪些互换办法?
我们须要与后端开拓职员、QA 和产品经理打交道。大部分韶光我们会跑到各自的工位上谈论问题,其次是利用谈天工具(Microsoft Teams),然后是电子邮件。
末了,作为一名在成人网站事情的开拓工程师,你还有什么想要分享的吗?
我非常高兴能够参与开拓这个有如此大规模用户的产品。我们身处技能发展的最前沿,这让统统都变得有趣且颇具寻衅性。
后记
这个采访很有启示性。我很惊异他们在开拓时居然没有利用图像。Pornhub 走在 Web 技能的最前沿——WebXR、WebRTC 和 Intersection Observer API。我也很高兴看到他们开始逐步淘汰 jQuery,由于现在的 Web API 很给力。
我很想从他那里挖到更过有关技能和性能的细节,我敢肯定他们的源代码里有很多值得一学的东西。换了是你,你会想问哪些问题?