我採訪了一位 Pornhub 工程師，聊了這些純純的話題
- 2019 年 11 月 25 日
- 筆記
譯者丨無明
策劃丨小智
成人網站在推動 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 很給力。
我很想從他那裡挖到更多有關技術和性能的細節，我敢肯定他們的源程式碼里有很多值得一學的東西。換了是你，你會想問哪些問題？
原文鏈接：
