原文：Interview with a Pronhub Web Developer
作者：David Walsh
譯文：https://juejin.im/post/5da3da91f265da5b6723ee8f
譯者：博軒
無論你對 Pron 內容持有什麼立場，都難以否認該行業對推動 Web 的發展產生著巨大的影響。
從提高瀏覽器的視頻限制，到通過 WebSocket 廣告推送，使其通過廣告攔截程序，從業者必須在 Web 開發的前沿進行革新。
最近，我很幸運地採訪到了一位來自P站的 Web 開發者。採訪內容包括有：前端技術的學習，如何改進 Web APIs ，在P站上班有什麼體驗等。讓我們開始吧！
訪談開始
問：P站會展示許多圖像內容。在開發的過程中，您是否使用了大量的圖片和視頻進行佔位？
答： 實際上，我們在開發網站時不使用佔位圖片。
問： 對於直播和第三方廣告腳本，您是如何在網站的開發階段，來模擬這些重要的動態資源？
回： 為了進行開發，我們將播放器拆分為兩個部分。基礎的播放器實現核心功能，並負責觸發相應的事件。這部分開發是完全獨立的，在淨室中完成。
而對於網站進行集成，我們希望在開發環境運行那些第三方腳本和廣告，以便我們儘早的發現問題。在特殊情況下，我們將與廣告客戶進行合作，便於我們可以手動觸發隨機事件。
問： 一個頁面會包含至少一個視頻，GIF 廣告，一些直播者的預覽，以及其他視頻的縮略圖。您是如何衡量頁面性能，以及如何使得頁面保持最佳性能？您是否可以分享一些技巧呢？
答： 我們使用一些測量系統。
- 我們的播放器會基於視頻播放的通用指標，上報數據。
- 使用第三方的 RUM 系統測試站點的性能。
- 基於可用的 AWS 數據中心設置私有的 WebpageTest 實例，編寫測試腳本進行測試。我們主要將其用於查看給定時間內可能發生的情況。它還使我們能夠查看來自不同位置和提供者的 “瀑布”。
問： 假設前端最重要和最為複雜的功能是視頻播放器。在面對視頻播放之前添加廣告，標記視頻的精彩時刻，更改視頻的播放速度等眾多功能時，您是如何維護該資源的性能，功能和穩定性的？
答： 我們有一支專門致力於開發視頻播放器的團隊，他們的首要任務是不斷監控性能和效率。為此，我們幾乎使用了所有可用的東西。瀏覽器性能工具，網頁測試，指標等。所有的更新，都會經過一個嚴格的 QA 流程，來保證軟件的穩定性和質量。
問： 專門的視頻團隊有多少人？團隊中有多少前端開發人員？
答： 我只能透露，鑑於產品的規模，團隊的規模在平均水平。
問： 在P站工作期間，您如何看待前端技術環境的變化？哪些新的 Web API 使您的工作更加輕鬆？
答： 我肯定前端的技術環境在多方面都得到改進。
- 從純 CSS 到使用 LESS 和 Mixins，再到使用自適應的Grid 佈局配合使用媒體查詢和 picture 標籤來適配不同的分辨率和屏幕尺寸。
- JQuery 和 JQueryUI 已經慢慢走出我們的視野，因此我們使用 Vanilla JS ，並回歸到更加高效的面向對象編程。某些情況下，框架也非常有趣。
- 我們喜歡新的 IntersectionObserver API ，它對於圖片加載十分有效。
- 我們開始使用 Picture-in-Picture API ，以使浮動視頻出現在我們的某些頁面上，主要是為了獲取用戶對該想法的反饋。
Picture-in-Picture API（畫中畫）：以允許網站始終在其他窗口之上創建浮動視頻窗口，以便用戶在與其他內容站點或設備上的應用程序交互時可以繼續使用媒體。
問： 展望未來，有沒有你想要更改，改進甚至創建的 Web API ?
答： 我們想要改變和改進一些 API ；信標（Beacon）、Fetch、 WebRTC 以及 Service Workers。
- 信標（Beacon）：由於某些 IOS 問題無法與 pageHide 事件一起使用。
- Fetch：沒有下載進度，也沒有提供攔截請求的方法。
- WebRTC：如果分辨率不夠大，則及時進行屏幕共享，Simulcast 層也會受到限制。
- Service Workers：任何 service worker 的 Fetch 事件處理程序均不會攔截對 navigator.serviceWorker.register 的調用
問：目前你們網站所支持的最低版本的瀏覽器是什麼？是否支持 IE ？
答： 我們對 IE 的支持持續了很長一段時間，但是最近放棄了對 IE11 之前版本的支持。同時，我們也停止了在視頻播放器中使用 Flash。我們主要關注 Chrome 、Firefox 和 Safari。
問：您可以分享一些有關網站的信息嗎？包括服務器、前端、庫類等？
答： 我們大多數網站都是以以下內容為基礎的：
- Nginx
- PHP
- MySQL
- Memcached 和 Redis
在適當的地方使用其他技術，例如 Varnish, ElasticSearch, NodeJS, Go, Vertica 。
對於前端，我們主要運行原生 JavaScript，我們逐步擺脫了 jQuery，並剛開始使用框架，主要是 Vue.js。
問：在進入公司之前，您對在P站上工作有何想法？你有過猶豫嗎？如果有，您是如何消除自己的顧慮？
答： 面對如此誘人的挑戰，從來沒有真正的困擾過我。我想到會有數以百萬計的用戶使用我實現的功能進行交互，這讓人感到鼓舞。事實證明，這個想法很快成立了，我第一次實現的功能上線了，這讓我非常自豪，我的確告訴了所有朋友去看！愛情片永遠不會死的事實也使得工作的穩定得到了保障！
問：分享你在P站的工作，可能與其他工作性質不同。當你將你的工作分享給朋友，家人，熟人會使得你自己蒙受汙名嗎？你是否會猶豫說出工作經歷？
答： 我為能夠開發這些產品而感到自豪，我的朋友得知後也會感到十分羨慕。因為這是聊天、笑話的絕佳來源，而且確實非常有趣。
訪談結束
我發現我們的訪談確實很具有啟發性。我很驚訝他們在開發功能和設計的時候沒有使用很多圖片。為P站使用 WebXR，WebRTC 和 Intersection Observer 推動網絡的前沿發展感到興奮。
我衷心希望我們能夠從中獲得更多具體的技術、性能和技巧。我敢肯定，他們的源代碼背後有很多知識值得學習！
結語
特別感謝譯者的分享精神，讓我們瞭解到前端的前沿諮詢。
是什麼讓我們在這裡相遇？必定是大家對前端知識的渴求之心吧！
「前端專欄」持續分享前端知識，歡迎關注。
閱讀更多 前端專欄 的文章
