标签 前端 下的文章 - 星野梦璃

Pornhub 技术栈首度公开-你不想看看PornHub用了哪些技术吗？ 成人网站在推动 Web 发展方面所起到的作用无可辩驳。从突破浏览器的视频能力限制，到利用 WebSocket 推送广告（防止被广告拦截器拦截），你必须 不 断想出各种聪明的办法，让自己处在 Web 技术创新的最前沿。   最近，我有幸采访了大型成人网站 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 很给力。   我很想从他那里 挖到更过有关 技术和性能的细节，我敢肯定他们的源代码里有很多值得一学的东西。换了是你，你会想问哪些问题？   档铺网——在线文档免费处理