一、前言

我先拋出一個問題，市面上這麼多相關的技術和方案，如果讓你來設計一套Web系統，你會怎麼選擇？

大家都知道，一個完整的 高可用、高性能 的Web系統本身的構成是比較複雜的，除了我們熟知的前端部分，比如 靜態網頁生成器、JS庫、UI框架、監控工具 等，還有 Web Server、雲服務、CDN內容分發、代理服務、HTTP緩存與加速 等等。

有人會說，我會按照我最熟悉的方案來設計，這樣風險最小。

有人會說，我會先Google一些成熟的方案，然後分別預研一下，使用效果最好的方案。

有人會說，我會直接找技術大牛，他做的一定沒問題。

其實只要結果是好的，最終落地成功，效果甚好，那麼技術方案怎麼選都沒有錯。

但是如果我告訴你，現在市面上各大網站的技術棧我都知道個百分之六七十，前端框架用的什麼，伺服器用的什麼，後端用的什麼，CDN用的什麼等等，你會先聽聽我的建議麼？我相信你會的。

Wappalzer 就是這樣一款強大的瀏覽器插件，它的用戶超過100萬，並且它的使用超級簡單，只需要點一下，就能看到當前你訪問的網站所使用的技術棧。先讓我們看看 Segmentfault 用了哪些技術吧。

二、發現你不知道的技術

那麼第二個問題來了，如果你是個有經驗的架構師，那麼Wappalzer對你的幫助可能不大。但是如果你只是一個前端工程師或者後端工程師，現在你要擔負起全棧的工作，負責自己不太熟悉的那部分內容，並且要給出技術方案，可能是個頭疼的問題。因為對於前端工程師來說，伺服器用什麼？後端語言用什麼？資料庫用什麼？搜尋引擎用什麼？雲服務用亞馬遜、微軟的還是阿里、騰訊的？這一些列問題對於很少接觸服務端的人來說，都是一個不小的挑戰。因為好多技術我都沒聽過，更何談選擇呢？

這時候 Wappalzer 就派上用場了，你只需要不停地打開各個網站，看下它給你列出的技術清單，你便很快能知曉一些你不熟悉的技術。

接下來我們測試測試，看看是否真的有用。

首先打開Github，看看他們用到的一些技術

OK，從它給出的技術清單來看，我不知道的有 lit-html 、 Amazon S3 、 Turbo 這三個技術，於是我們只需要點進去看看即可。以 Turbo 為例，點進去之後，Wappalyzer簡單的介紹了Turbo是幹什麼的，並且給出了官網連結。我知道了它是一個用來快速構建Web應用的JS框架。那麼這個沒聽過的技術是不是很冷門呢？接著往下翻，它還列出了訪問瀏覽最高的10個使用該技術的網站列表。

再來看看 Amazon S3 是什麼？

它是亞馬遜的對象存儲服務，接下來我們看看哪些網站使用了它。可以看到，使用它的都是非常出名的網站，包括了 linkedin、figma、notion、spotify 等等。足以說明亞馬遜的對象存儲是個很靠譜的服務，選擇它沒什麼問題。

好了，以上我們用Github為例，簡單介紹了 Wappalzer 的使用方法。大家可能會發現，其實列出的技術清單也並不是很多，這其實和你訪問的網站密不可分，有些技術是很難被探測出來的。

三、橫向對比同一領域使用的技術

第三個問題，當我了解到了一些我不知道的技術後，是否我就可以直接採用這項技術了呢？非也，一項技術的落地一定和整個生態鏈以及項目的整體技術架構息息相關。所以我們並不能單一地決定我們是否能採用這項技術。最好的辦法之一，我們可以對相同類型的網站進行分析，看看他們對於單一功能是否使用了相同或不同的技術，以便於我們進行技術的分析和選擇。

接下來我們以 StackoverFlow 和 Segmentfault 為例，兩者都是問答類技術網站，使用人數都很多，那麼我們對比一下他們使用的技術。

Segmentfault

StackoverFlow

從上面兩張圖的技術清單來看，相同的技術有 Google Analytics、Webpack、Highlight.js、Google Tag Manager 。前端的技術我們就不說了，來看看這個 Google Tag Manager 是什麼東東。它是一個標籤管理系統(TMS)，允許在你的網站或移動應用程式上，快速和輕鬆地更新測量代碼和相關代碼片段作為標籤。

再來看看哪些網站使用了它

那麼經過橫向對比我們現在知道了，博客系統、招聘網站、問答類系統都在使用這個技術，如果你的系統也有類似打標籤的功能，可以放心使用 Google Tag Manager 。

四、這項技術真的過時了嗎？

第四個問題，我們都知道，前端工程化之後，隨著各個前端框架的層出不窮， jQuery 這項技術明顯遭到了排擠和抹黑，甚至很多人看不起使用jQuery的前端，認為這是一種low的表現。作為一個經常使用jQuery的前端工程師，我想反駁卻不知道從何反駁。這時Wappalzer成了我最好的幫手，我們只需要點開那些最出名的網站，看看是否還在使用jQuery即可。

之前我們已經看到Github、StackoverFlow都還在使用jQuery，那我們就點進去看看還有其他哪些網站在使用。

可以看到， Wordpress、codeopen、gitlab、CSDN 等網站都在使用它，不管是歷史遺留原因還是真的需要，都證明了 jQuery 這項技術並不過時。它的定位和現代前端框架本身就不同，不應該受到不公正的評價。

五、尋找替代品

Wappalzer還有個強大的功能，那就是列出了今年最火爆的替代技術，以剛剛的 Google Tag Manager 為例，看看它的替代品有哪些。

當我們點進某個替代品，會列出兩個技術的對比項

六、更多功能

Wappalzer還有其他非常多的功能，包括會告訴你這項技術哪些地區使用最多等。甚至還有收費功能，可以查到更多的技術細節。希望大家可以好好利用這項工具，打開自己的視野。

來源： https://segmentfault.com/a/1190000042316720