最近,我有幸采访了大型成人网站Pornhub的一名Web开拓工程师,理解了干系的开拓技能,Web API的改进,以及成为一名成人网站开拓工程师的感想熏染。
把稳:由于成人网站行业竞争激烈,有些问题他们无法回答我,这一点我理解。
成人网站须要显示大量图片内容。在开拓过程中,您是否利用了大量图片和视频占位符?开拓过程中的内容体验与终极产品之间是否存在很大差距?

事实上,我们在开拓这个网站时没有利用任何占位符!
归根结底,代码和功能才是最主要的,至于界面,我们现在已经很熟习了。一开始有点困难,但我们很快就习气了。
在开拓过程中,你们是如何仿照直播视频流和第三方广告脚本的?它们都是主要的资源。
播放器分为两个组件,根本组件实现核心功能,用于触发事宜,开拓分开进行,集成时须要用到第三方脚本和广告,这样可以尽早创造问题,对付一些分外情形,我们汇合营广告商手动触发一些随机事宜。
范例网页至少包含一个视频、一些 GIF 广告、一些实时预览和其他视频的缩略图。如何衡量网页性能?如何最大程度地提高网页性能?
我们利用多种评估系统。
播放器会向我们发送视频播放性能和用户播放状态;
我们利用了第三方RUM系统;
我们利用 WebpageTest,以便能够看到特定时间发生的情形。
我认为播放器是前端最主要和最繁芜的功能之一。如何通过在视频前插入广告、标记视频的关键部分、变动播放速率等来保持播放器的性能、功能和稳定性?
我们有一个专门卖力播放器开拓的团队,他们的紧张任务是持续监控播放器的性能。我们利用所有可用的工具:浏览器性能工具、WebpageTest、性能指标等。每次发布之前,我们都会进行一轮严格的 QA,以确保稳定性和质量。
视频团队有多少全职开拓职员?有多少前端开拓职员?
如果按照全体产品的规模来算,我只能说我们的团队是中等规模。
在您从事成人网站开拓期间,您看到前端领域有哪些发展?哪些新的 Web API 对您有很大帮助?
我看到前端技能在很多方面都在进步。
从利用纯CSS到利用LESS和Mixin,再到利用灵巧的网格系统和图片标签来适应不同的分辨率和屏幕尺寸;
jQuery、jQueryUI 逐渐淡出了我们的视线,回归到更加面向工具的纯 JavaScript 编程,一些框架在特定场景下也发挥着非常有趣的浸染;
我们非常喜好新的 IntersectionObserver API,它对付加载图像非常高效;
我们还利用画中画 API 让视频浮动在页面上,但我们仍在获取用户对这个想法的反馈。
展望未来,您希望看到哪些 Web API 有所改变、改进或新增?
我们估量这些 API 会发生变革或改进:Beacon、WebRTC、Service Worker 和 Fetch。
Beacon:在iOS上存在一些问题,pageHide事宜支持不足好;
Fetch:没有下载进度,也无法拦截要求;
WebRTC:直播的时候,如果分辨率不足高,会受到一些限定;
做事事情线程:对 navigator.serviceWorker.register 的调用不会被做事事情线程的 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 处于网络技能的前沿——WebXR、WebRTC 和 Intersection Observer API。我也很高兴看到他们开始逐步淘汰 jQuery,由于当前的网络 API 非常棒。
我很想从他那里理解有关技能和性能的更多细节,我相信从他们的源代码中可以学到很多东西。你会问什么问题?