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 關註微信公眾號，點擊閱讀原文可以獲取鏈接版原文。