差距大，沒想到成人網站用的技術都甩我們幾條街！

不管你對色情行業持有何種觀點，都不能否認成人網站的産業對于推動網絡發展的巨大影響力。從推動浏覽器對視訊的限制到為了廣告不被屏蔽，而通過WebSocket推送廣告，你不得不在網絡前沿領域創新上變得更聰明。

最近，我（原作者）足夠幸運的能采訪到了一位Web開發人員，供職于最大的成人網站：PornHub。我想了解下技術相關的事情，web APIs 還能怎麼改進以及在成人網站工作的感受。有趣！

備注：成人産業競争非常激烈，是以有一些問題他們不能回答。我尊重他們需要保密的需要。

Q：成人網站顯然要顯示很多色情的圖檔和視訊。在開發過程中，你們會用其他的圖檔和視訊把色情的圖檔和視訊替換掉嗎？開發中的内容和體驗距離最終産品有多遠呢？

A：實際中，在開發網站時，我們不替換圖檔和視訊！在最後重要的是網站的代碼和功能，我們很快就習慣了網站的界面内容，當然一開始肯定“學習曲線”有點陡，但我們都很快适應了

Q：當有視訊流和第三方廣告腳本，你們怎麼在網站和功能的開發過程中模拟如此重要的，動态的資源？

A：在開發中，播放器功能分為兩個部分。基礎播放器執行核心功能和觸發事件。開發是在一個“幹淨”的環境進行的。

對于網站上的內建，我們想執行第三方的腳本和廣告，以便我們能盡早找到問題。在特殊情況下，我們會和廣告客戶合作，允許我們手動觸發通常是随機的事件。

Q：一個普通頁面可能有至少一個視訊，GIF廣告，一些直播視訊的預覽和其他視訊的縮微圖。你怎麼評估頁面性能，怎麼盡可能保證高性能？有什麼技巧可以分享麼？

A：我們用了一些評測系統。

我們的播放器會向我們報告視訊回放性能和一般操作的名額

整體網站性能使用第三方RUM(Real User Monitoring )系統。

在可用的AWS資料中心中用WebpageTest編寫測試腳本。我們用這個主要是為了看看在給定的時間可能發生的情況。它還允許我們以不同的位置檢視“瀑布型”報表

Q：我不得不假設前端最重要和最複雜的功能是視訊播放器。從在視訊之前添加廣告、标記視訊的亮點、更改視訊速度和其他功能，您如何保持播放器的性能、功能和穩定性？

A：我們有一個專門的團隊針對視訊播放器進行嚴格工作，他們的首要任務是不斷的監控性能和效率。

為了做到這一點，我們使用了幾乎所有可用的工具：浏覽器性能工具、網頁測試、各項名額等。穩定性和品質是在每次更新時由QA做一輪可靠的測試來保證的。

Q：視訊團隊有多少人？前端團隊有多少人？

A：我想說的是，基于産品的規模，團隊人數趨于行業平均值

Q：你工作在成人網站的這段時間裡，你看到了前端有什麼變化嗎？有什麼新的APIs使你工作變得更容易嗎?

A：在前端世界的每個方面，我絕對都看到了很多改進；

從普通CSS到最終使用LESS和Mixins，到使用具有媒體查詢和圖檔标簽的flexible Grid system，以适應不同分辨率和螢幕尺寸。

jquery和jqueryUI正在慢慢地離開，是以我們将回到純js中更高效的面向對象程式設計。在某些情況下，架構也非常有趣。

我們喜歡新的IntersectionObserver API，對于更有效地加載圖檔非常有用。

我們也開始使用Picture-in-Picture API，在我們的一些頁面上播放浮動視訊，主要是為了獲得使用者對這個想法的回報。

Q：展望未來，有沒有Web APIs 是您希望修改、改進甚至自己建立的呢？

A：其中一些是我們希望修改或改進的；Beacon、WebRTC、Service Workers和Fetch：

Beacon：在IOS上的一些問題，它不能很好地處理pageHide事件

Fetch：沒有下載下傳進度，也不提供攔截請求的方法

WebRTC：如果分辨率不夠大，即使是螢幕共享，Simulcast layers也是被限制的

Service Workers：調用navigator.servicework.register不會被任何服務工作程序的fetch事件處理程式攔截

Q：網絡虛拟現實(WebVR) 技術在過去幾年裡一直在進步——在目前的狀态下，WebVR有多大用處？成人網站對内容的支援力度有多大？觸覺在你網站上的WebVR中有應用嗎？

A：我們正在研究WebXR以及如何最好地适應新興的空間計算用例，作為最大的分發平台，我們需要支援創作者和使用者，不管怎樣他們希望體驗我們的内容。但我們仍在探索這些新媒體的内容和平台應該是什麼樣的。

我們是第一個支援虛拟現實、計算機視覺和虛拟表演者的主要平台，并将繼續推動新技術和開放網絡。

Q：由于每頁都有這麼多不同類型的媒體和内容，在桌面與移動（如果有的話）之間，最大的考慮是什麼？

A：功能主要受作業系統和浏覽器類型的限制。當涉及到完全不同的通路和功能集時， iOS與Android是一個完美的例子。

例如，一些iOS移動裝置不允許我們在全屏模式下自定義視訊播放器，它們強制使用原生的QuickTime播放器。我們在想新點子時必須考慮到這一點。另一方面，Android給了我們完全的控制權，我們可以将我們的功能應用到全屏模式。

适配HLS (HTTP Live Streaming)中的資料流是另一個例子，當HLS的資料流品質很好時，IE和Edge很挑剔，是以我們需要阻止某些更高品質的資料流，否則視訊會不斷卡頓并産生僞影。

Q：你工作的成人網站目前支援的最低版本浏覽器是什麼？Internet Explorer是否被淘汰？

A：我們支援IE很長一段時間了，但最近放棄支援任何比IE11更老的版本。同時，我們也停止在視訊播放器上使用Flash。我們主要關注Chrome、Firefox和Safari。

Q：更廣泛地說，你能分享一下典型的成人網站用到的技術棧嗎？伺服器端和(或)前端？你們在用哪些庫？

A：我們的大多數網站都以以下内容為基礎：

Nginx ，PHP ，MySQL ，Memcached and/or Redis

其他技術像：Varnish, ElasticSearch, NodeJS, Go, Vertica 用在需要的地方

對于前端，我們主要用的普通Javascipt，我們正慢慢舍棄JQuery，我們剛剛開始使用架構，主要是Vue.js

Q：從局外人的角度來看，成人網站似乎非常相似：許多視訊縮略圖、聚合視訊内容、錄影機前的表演者、廣告。作為一個在成人網站工作的人，成人網站的獨特之處是什麼？

A：我們非常努力地為每種類型的人提供不同層次的獨特性；主要通過内容庫、使用者體驗和功能集，以及許多不同的算法。

Q：在申請和面試你現在的公司之前，你對可能在成人網站工作有什麼想法？你有什麼猶豫嗎？如果有，你的擔心是如何平息？

A：這從來沒有真正困擾過我，最終的挑戰是如此吸引人。數百萬人有可能與我所研究的功能進行互動的想法真的很有激勵作用。

事實很快就證明了這一點，我第一次做的東西上線時，我非常自豪，我真的告訴我所有的朋友去看看！色情電影永遠不會消亡的事實也讓工作穩定得到了保證！

Q：就最終産品而言，分享您在成人網站工作的資訊可能與在本地網絡公司工作的資訊不同。告訴朋友、家人和熟人你在成人網站上工作有沒有一種恥辱感？告訴别人你在成人網站工作有什麼猶豫嗎？

A：我很自豪能為這些産品工作，也為此着迷，我身邊的人都很清楚。它總是一個超級棒的話題，笑話和真正趣味的來源。

Q：在成人行業以外的機構工作過後，在成人網站工作的氣氛有什麼不同嗎？

A：這裡的氣氛非常輕松友好。我沒有注意到其他機構的工作文化有什麼重大差異，除了這裡比我以前工作過的任何地方都要大得多。

Q：作為前端開發人員，哪個團隊和你工作接觸的更多？日常溝通最常見的方法是什麼？

A：我們和後端開發，QA測試和産品經理接觸時間是同等的--大部分時間我們去對方的桌子前直接溝通，如果不面對面溝通，就用Microsoft Teams。最後是Emails。

Q：最後，你作為工作在成人網站的前端，有什麼事情想分享下嗎？

A：作為創造使用者如此廣泛使用的産品的一部分，這真的很令人興奮。我們通常處于科技發展趨勢和重大變革的前沿，這使我們保持了科技的樂趣和挑戰性。

采訪結束

我覺得我們的采訪很有啟發性。我有點驚訝他們在開發功能和設計時沒有使用圖檔。看到Pornhub使用WebXR, WebRTC和Intersection Observer，推動着網絡的前沿領域，真是令人興奮。我也很高興看到他們認為目前的Web APIs足夠用，開始舍棄jQuery。