迎關(guān)注頭條號(hào)：老顧聊技術(shù)

精品原創(chuàng)技術(shù)分享，知識(shí)的組裝工

目錄

1. 前言
2. 方案一：網(wǎng)頁靜態(tài)HTML化
3. 偽靜態(tài)
4. 布局樣式模板化
5. 應(yīng)用層nginx
6. 分發(fā)層nginx

前言

我們小伙伴們?cè)谠L問淘寶、網(wǎng)易等大型網(wǎng)站時(shí)有沒有考慮到，網(wǎng)站首頁、商品詳情頁以及新聞詳情頁面是如何處理的？怎么能夠支撐這么大流量的訪問呢？

很多小伙伴們就會(huì)提出他們都采用了靜態(tài)化的方案，這樣用戶請(qǐng)求直接獲取靜態(tài)數(shù)據(jù)html，就不需要訪問數(shù)據(jù)庫了，性能就會(huì)大大提高；而且提高網(wǎng)站SEO優(yōu)化。那今天老顧就帶著大家聊一下靜態(tài)化。把老顧之前工作場(chǎng)景中靜態(tài)化方案遇到的問題，以及如何演變的，分享給小伙伴。

關(guān)于相關(guān)的靜態(tài)文件的CDN技術(shù)，老顧就不在這邊講了。這個(gè)大型網(wǎng)站肯定都會(huì)用到的，什么是CDN，小伙伴們可以在網(wǎng)上查詢看一下，比較簡(jiǎn)單；我們這邊注重看技術(shù)方案。

方案一：網(wǎng)頁靜態(tài)HTML化

這個(gè)方案是老顧最早使用的方案，我們就拿CMS系統(tǒng)舉例，類似網(wǎng)易的新聞網(wǎng)站；核心流程圖

上圖的核心思想：

1）管理后臺(tái)調(diào)用新聞服務(wù)創(chuàng)建文章成功后，發(fā)送消息到消息隊(duì)列

2）靜態(tài)服務(wù)監(jiān)聽消息，把文章靜態(tài)化，也就是生成html文件

3）在靜態(tài)服務(wù)器上面安裝一個(gè)文件同步工具，此工具的功能可以做到只同步有變動(dòng)的文件，即做增量同步（老顧用久沒用了，忘了工具的名稱）

4）通過同步工具把html文件同步到所有的web服務(wù)器上面

這樣的話就達(dá)到了，用戶訪問一些變化不大的頁面時(shí)，是直接訪問的html文件，直接在web服務(wù)器那邊直接返回，不需要在訪問數(shù)據(jù)庫了，系統(tǒng)吞吐量比較高。

這個(gè)方案的問題：

1、網(wǎng)頁布局樣式僵化，無法修改

如果產(chǎn)品經(jīng)理覺得新聞詳情頁面的布局要調(diào)整一下，現(xiàn)在的不夠美觀，或者加個(gè)其他模塊，那就坑爹了，我們需要把所有的已經(jīng)靜態(tài)html化的文章全部重新靜態(tài)化。這個(gè)是不現(xiàn)實(shí)的，因?yàn)橄窬W(wǎng)易這么大的體量，新聞量是很大的，會(huì)被搞死。

2、頁面會(huì)出現(xiàn)暫時(shí)間不一致

會(huì)出現(xiàn)用戶剛剛再看最新的新聞，刷新一下又不存在了。這個(gè)是因?yàn)橥焦ぞ咴谕降絯eb服務(wù)器是要有時(shí)間的，同步到web服務(wù)器A上面了，但web服務(wù)器B還沒有來得及同步。用戶在訪問的時(shí)候通過nginx進(jìn)行負(fù)載均衡，隨機(jī)把請(qǐng)求分配給web服務(wù)器的導(dǎo)致的。當(dāng)然可以調(diào)整nginx負(fù)載均衡策略去解決。

3、Html文件太多，無法維護(hù)

這個(gè)是很明顯的問題，html文件會(huì)越來越多，對(duì)存儲(chǔ)空間要求很大，而且每臺(tái)web服務(wù)器都一樣，浪費(fèi)磁盤空間；將來遷移維護(hù)也會(huì)帶來很大的麻煩。

4、同步工具的不穩(wěn)定

因?yàn)槲募坏┒嘀?，同步工具穩(wěn)定性就出現(xiàn)了問題

這個(gè)方案應(yīng)該是比較傳統(tǒng)的（不推薦）

方案二：偽靜態(tài)化

什么是偽靜態(tài)？

舉個(gè)例子：我們一般訪問一個(gè)文章，一般的鏈接地址為：http://www.xxx.com/news?id=1代表請(qǐng)求id為1的文章。不過這種鏈接方式對(duì)SEO不是太友好（SEO對(duì)網(wǎng)站來說太重要了）；所以一般進(jìn)行改造：http://www.xxx.com/news/1.html 這樣看上去就是個(gè)靜態(tài)頁面。一般我們可以采用nginx對(duì)url進(jìn)行rewrite。小伙伴如何有興趣可以自行了解，比較簡(jiǎn)單。

之所以是偽靜態(tài)其實(shí)也是需要?jiǎng)討B(tài)處理的。

針對(duì)方案一上面問題，方案進(jìn)一步的演化，如下圖

此方案的核心思想

1）管理后臺(tái)調(diào)用新聞服務(wù)創(chuàng)建文章成功后，發(fā)送消息到消息隊(duì)列

2）緩存服務(wù)監(jiān)聽消息，把文章內(nèi)容緩存到緩存服務(wù)器上面

3）用戶發(fā)起請(qǐng)求，web服務(wù)器根據(jù)id，直接查詢緩存服務(wù)器

4）獲取數(shù)據(jù)返回給用戶

此方案就解決了方案一的一個(gè)大問題，就是html文件多的問題，因?yàn)椴恍枰蒱tml，而且用緩存的方式，解決不需要訪問數(shù)據(jù)庫，提升系統(tǒng)吞吐量。

不過此方案的問題：

1、網(wǎng)頁布局樣式維護(hù)成本比較高，因?yàn)榇朔桨刚諛邮前阉械膬?nèi)容放到了緩存中，如果需要修改布局，需要重新設(shè)置緩存。

2、分布式緩存壓力比較大，一旦緩存故障就導(dǎo)致所有請(qǐng)求會(huì)查詢數(shù)據(jù)庫，導(dǎo)致系統(tǒng)崩潰

還有個(gè)小問題，就是實(shí)時(shí)數(shù)據(jù)處理，就是頁面中如價(jià)格，庫存需要到后臺(tái)讀取的。當(dāng)然小伙伴也許就會(huì)說，也可以處理啊，用戶把商品內(nèi)容請(qǐng)求到后，然后在用瀏覽器發(fā)送異步的ajax請(qǐng)求獲得商品數(shù)量就好了啊。這樣就是無形的增加了一次請(qǐng)求。（此問題可以忽略）

此方案類似很多公司都在使用，如：同程旅游等

方案三：布局樣式模板化

針對(duì)方案二的問題，我們可以采用openresty技術(shù)方案進(jìn)行，利用http模板插件lua腳本進(jìn)行解決，這里老顧不會(huì)介紹openresty+lua技術(shù)，有興趣的小伙伴，可以到訪問https://www.roncoo.com/view/139 這個(gè)視頻課程。

如下圖：

這里說明一下上圖中我們小伙伴不需要全部都要了解，這個(gè)是比較全的商品詳情頁的解決方案，涉及到了三級(jí)緩存這個(gè)概念，在這里老顧就不深入講三級(jí)緩存了。

我們主要看的是上面怎么會(huì)有兩層ngnix，分發(fā)層和應(yīng)用層，這個(gè)是什么意思？

應(yīng)用層nginx

老顧先介紹一下應(yīng)用層nginx是什么意思？nginx一般被用做負(fù)載均衡，其實(shí)nginx還有很多的功能，尤其他的openresty擴(kuò)展 + lua腳本語言結(jié)合起來可以完成很多功能，小伙伴可以理解為lua腳本語言就是類似java語言，可以動(dòng)態(tài)處理業(yè)務(wù)，如：本地緩存處理，遠(yuǎn)程http訪問，訪問redis等。

應(yīng)用層nginx就是利用了http模板 + 緩存通過lua腳本完成的網(wǎng)頁渲染

http模板

1）應(yīng)用層nginx通過lua腳本語言先獲取本地商品數(shù)據(jù)，然后和http模板進(jìn)行渲染，形成最終商品詳情頁返回給用戶

2）如果應(yīng)用層nginx本地的緩存沒有此商品數(shù)據(jù)，就通過lua腳本發(fā)起http請(qǐng)求訪問web服務(wù)器，獲取商品數(shù)據(jù)。

3）web服務(wù)器會(huì)向redis或本機(jī)的ehcache請(qǐng)求商品數(shù)據(jù)（這里涉及三級(jí)緩存概念），如果存在此商品數(shù)據(jù)，直接返回給用戶；如果不存在則請(qǐng)求微服務(wù)訪問數(shù)據(jù)庫

這個(gè)思路就是通過http模板，解決了方案二中的布局樣式的問題，如果需要調(diào)整布局，只要改一下模板就行了，非常方便。也解決了實(shí)時(shí)性問題。這邊涉及到的nginx本地緩存其實(shí)就是為了保證不需要訪問數(shù)據(jù)庫，提升系統(tǒng)吞吐量。小伙伴只要了解一下思路，如果不了解openresty和lua可以自行上網(wǎng)了解，也可以聯(lián)系老顧。

分發(fā)層ngnix

為什么上面還有一層分發(fā)層呢？這個(gè)是因?yàn)榇笮途W(wǎng)站的商品數(shù)太多了，應(yīng)用層nginx的本地緩存是有限的，不可能把所有的商品數(shù)據(jù)緩存在同一個(gè)服務(wù)器的本地緩存；一臺(tái)應(yīng)用層nginx只能緩存部分商品數(shù)據(jù)，說到這里小伙伴是不是應(yīng)該就知道為什么了吧？就是利用hash一致性算法，根據(jù)商品id路由分發(fā)到同一個(gè)應(yīng)用層ngnix服務(wù)器。

分發(fā)層ngnix的作用就是hash策略的負(fù)載均衡，保證了商品id路由到固定的應(yīng)用層服務(wù)器。

三級(jí)緩存保證了系統(tǒng)的穩(wěn)定性，即使redis緩存崩潰，還有其他2個(gè)緩存保障。

總結(jié)：

1. 方案三是比較完整的方案，很多大廠都在使用，能夠承受億級(jí)流量，但系統(tǒng)比較復(fù)雜。
2. 如果對(duì)實(shí)時(shí)性要求不高，布局樣式調(diào)整不頻繁，可以考慮方案二，系統(tǒng)比較簡(jiǎn)單

-End-

如有收獲，請(qǐng)幫忙轉(zhuǎn)發(fā)，您的鼓勵(lì)是作者最大的動(dòng)力，謝謝！

10幾年的經(jīng)驗(yàn)實(shí)戰(zhàn)分享

相關(guān)微服務(wù)，分布式，高并發(fā)，高可用，企業(yè)實(shí)戰(zhàn)，干貨等原創(chuàng)文章正在路上

歡迎關(guān)注頭條號(hào)：老顧聊技術(shù)

精品原創(chuàng)技術(shù)分享，知識(shí)的組裝工

推薦閱讀

1、你知道如何保障生產(chǎn)端100%消息投遞成功嗎？

2、你知道如何更新緩存嗎？如何保證緩存和數(shù)據(jù)庫雙寫一致性？

3、你知道怎么解決DB讀寫分離，導(dǎo)致數(shù)據(jù)不一致問題嗎？

4、DB讀寫分離情況下，如何解決緩存和數(shù)據(jù)庫不一致性問題？

5、你真的知道怎么使用緩存嗎？

6、如何利用鎖，防止緩存擊穿？重構(gòu)思想的重要性

7、海量訂單產(chǎn)生的業(yè)務(wù)高峰期，如何避免消息的重復(fù)消費(fèi)？

信息加速發(fā)展的互聯(lián)網(wǎng)時(shí)代，越來越多的科技公司為了專注核心競(jìng)爭(zhēng)力業(yè)務(wù)以及降低軟件項(xiàng)目成本，開始將項(xiàng)目中的部分業(yè)務(wù)模塊分發(fā)給第三方外包公司來完成。而這樣是否就意味著大幅度地降低成本了？

事實(shí)告訴我們，并沒有。

本文作者作為一名外包商，以自身的經(jīng)歷告訴我們本可以在3天之內(nèi)完成了的一個(gè)報(bào)價(jià)僅為 1500 美元的靜態(tài) HTML 頁面，是如何被大型企業(yè)硬是拖成了一個(gè)為期 7 周且需要耗費(fèi) 18000 美元（約為人民幣12萬）項(xiàng)目的。

不久前，我作為承包商工作，經(jīng)常從一個(gè)項(xiàng)目跳到另一個(gè)項(xiàng)目。有些是短期的，工作一周左右，可很快提交我的工作成果。也有的項(xiàng)目會(huì)持續(xù)幾個(gè)月，這期間我會(huì)攢一些錢用以休息一段時(shí)間。

我更喜歡短期工作，因?yàn)檫@樣的工作使我可以在單位時(shí)間內(nèi)收取更高的費(fèi)用。這樣不僅我感覺是在為自己打工，而且我覺得我不需要太努力工作就能過上還算體面的生活了。我的最高費(fèi)率仍然在合理的范圍之內(nèi)，而且我總是提供高質(zhì)量的服務(wù)。這就是我和一家大公司定下這個(gè)項(xiàng)目之前我的工作狀態(tài)。

這家公司聯(lián)系我的時(shí)候顯得很著急，經(jīng)理告訴我他們現(xiàn)在就需要一個(gè)人來搞定這件事。需要一個(gè)不怎么需要公司培訓(xùn)就能馬上上手，而且能交付最大性能的人。不管怎么說，這剛好是我的座右銘。這個(gè)項(xiàng)目正是我喜歡的工作類型。它內(nèi)容簡(jiǎn)短，很快就能做好，而且報(bào)酬很高。

在談判確定好合適的費(fèi)率后，我收到了一封包含說明的電子郵件。他們給了我更多關(guān)于這個(gè)項(xiàng)目的背景。他們的開發(fā)人員在沒有事先告知的情況下就離開了，并且從未跟任何其他人匯報(bào)過項(xiàng)目的進(jìn)展。

我們需要您毫不分心地完成此項(xiàng)目。在合同期限內(nèi)，您將只與我們合作，并及時(shí)交付成果。我們會(huì)對(duì)給您造成的麻煩進(jìn)行補(bǔ)償。

任務(wù)說明很簡(jiǎn)單：閱讀這些需求然后估計(jì)完成這個(gè)項(xiàng)目需要多長時(shí)間。這是我職業(yè)生涯中遇到的一個(gè)那類比較容易的項(xiàng)目之一。這是一個(gè)HTML頁面，包含一些簡(jiǎn)單的動(dòng)畫和幾個(gè)嵌入的視頻。我花了一個(gè)晚上研究需求并在腦中模擬實(shí)施。這些年來，我已經(jīng)學(xué)會(huì)了在能確定收到報(bào)酬之前不為客戶寫任何代碼。

我確定了這個(gè)項(xiàng)目充其量也就是一天的活兒。但為了保持謹(jǐn)慎，我上報(bào)了20個(gè)小時(shí)，總計(jì)1500美元。畢竟這只是一個(gè)HTML頁面而已，我也只能收取這么多費(fèi)用。他們讓我到25英里外的衛(wèi)星辦公室去。在為他們工作的那三天里我必須天天開車去那兒。

第二天，我到了衛(wèi)星辦公室。在一個(gè)購物中心，然后通過一扇秘密的門進(jìn)入了一個(gè)秘密的世界，一些工作人員在他們的小隔間里安靜地工作著。接待員給我看了一個(gè)我將用它來工作的全新MacBook Pro，我必須從零開始設(shè)置環(huán)境。我的確更偏向于使用公司的筆記本電腦，因?yàn)樗麄兘?jīng)常要求承包商安裝一些可疑的軟件。（我可不想裝到自己電腦上。）

我花了一天時(shí)間下載我的工具包，設(shè)置電子郵件、SSH密鑰和請(qǐng)求服務(wù)的授權(quán)。換句話說，我什么都沒做。這就是為什么我上報(bào)了20個(gè)小時(shí)，還沒開始寫代碼呢，光前期設(shè)置就耗費(fèi)了8個(gè)小時(shí)。

第二天，我準(zhǔn)備開始真正地干活了。有了MacBook Pro，我用它發(fā)了一封電子郵件給經(jīng)理。我告訴他我已經(jīng)準(zhǔn)備好工作了，正在等待上述的資源。那天，我在我柔和燈光下的工位上待著，玩著手指，直到太陽落山。

我再次計(jì)算了一下。根據(jù)我的估計(jì)，我還只剩4個(gè)小時(shí)的時(shí)間來完成這項(xiàng)工作，這對(duì)單個(gè)HTML頁面來說也不是不可能。但不用說，第二天，我把這剩下的4個(gè)小時(shí)花在了吃公司贊助的午餐上，伙食很不錯(cuò)，而且我與其他員工玩得很開心。

當(dāng)預(yù)計(jì)的20小時(shí)到期時(shí)，我確保向經(jīng)理發(fā)送了另一封電子郵件，讓他知道我確實(shí)人一直在公司，但我沒有收到我需要的資源。當(dāng)然，那封電子郵件被無視了。

接下來的星期一，我猶豫地開過了這25英里。令我驚訝的是，經(jīng)理已經(jīng)來到衛(wèi)星辦公室，并熱情地問候了我。他是個(gè)三十來歲，很隨和很不錯(cuò)的人。我很不解，他并不像當(dāng)初要雇我的那時(shí)候那么著急了。我們進(jìn)行了友好的交談，沒有提到任何工作。后來，我們?nèi)コ晕绮停读隋X。這是美好的一天。完全沒工作。

好吧你可以說我很容易形成習(xí)慣，但如果你供我吃喝并每天呵護(hù)我，我會(huì)習(xí)慣這一切。這變成了一個(gè)例程。

我來上班，花一些時(shí)間在網(wǎng)上閱讀以及看視頻。我每天發(fā)一封電子郵件，所以他們知道我確實(shí)去了公司。

然后，我會(huì)去吃午飯并和碰見的有趣的人一起玩耍。在一天結(jié)束時(shí)，我站起來，伸個(gè)懶腰，打一個(gè)當(dāng)之無愧的哈欠，然后開車回家。

我習(xí)慣了。事實(shí)上，我在期待這些。當(dāng)我終于收到一封帶有指向我需要的資源的鏈接的電子郵件時(shí)，我反而有點(diǎn)失望。我重新開始腳踏實(shí)地，變回自己工作時(shí)的嚴(yán)肅臉。但是，在花了幾分鐘查看Zip文件后，我才注意到它缺少了我需要的大部分內(nèi)容。設(shè)計(jì)師給我發(fā)了一些Adobe Illustrator文件，我無法在MacBook上打開它。

我回復(fù)了電子郵件來解釋我的疑慮，而且一并問了一些其他問題以節(jié)省時(shí)間。那時(shí)，我當(dāng)初上報(bào)的20個(gè)小時(shí)時(shí)間早都已經(jīng)過了。我現(xiàn)在真的想要完成這項(xiàng)工作了。

點(diǎn)擊發(fā)送后不久，我收到了一封電子郵件。只有一句：“轉(zhuǎn)發(fā)給Alex”，然后Alex得到了這封電子郵件的抄送。

Alex回答說他轉(zhuǎn)發(fā)給了Steve。Steve回答說Michelle是設(shè)計(jì)師，她會(huì)了解得更多一些。

Michelle的自動(dòng)回復(fù)稱她正在度假，所有詢問都應(yīng)該直接告訴她的經(jīng)理。

她的經(jīng)理回復(fù)說“誰是Ibrahim？(我的名字)”我的經(jīng)理回復(fù)說他很抱歉還沒有向大家介紹我。

作為承包商，在人們注意到我在那里工作之前，我通常就已經(jīng)完成我的工作并離開那家公司了。但這次，我收到了大量歡迎的電子郵件。這樣的郵件持續(xù)了一段時(shí)間，而我被迫回復(fù)那些友好地過了頭的郵件。有些人很想跟我本人見面。當(dāng)我說我在加利福尼亞州，離得遠(yuǎn)著呢，他們有點(diǎn)失望。以及羨慕，他們說他們羨慕加州美好的天氣。

他們很有禮貌地?zé)o視我的電子郵件，用抄送來轉(zhuǎn)移我的問題，把我問過的任何事情歸為垃圾郵件。我花了很多時(shí)間，像一位考古學(xué)家在深深的電子郵件之溝內(nèi)挖掘，希望找到我問題的答案。

你可以想象每當(dāng)我想起我唯一的任務(wù)是構(gòu)建一個(gè)靜態(tài)HTML頁面時(shí)，我感覺到的冒名頂替綜合癥（心虛，懷疑自己的回報(bào)不是理所應(yīng)得的）的程度之深。原本虛報(bào)了的20個(gè)小時(shí)的項(xiàng)目變成了為期7周的冒險(xiǎn)，期間我享受免費(fèi)午餐，每天開車50英里，并翻看電子郵件。

當(dāng)我最終完成項(xiàng)目時(shí)，我在GitHub上將它發(fā)送給了團(tuán)隊(duì)。

在不久之后，我收到了邀請(qǐng)，整個(gè)團(tuán)隊(duì)會(huì)用Google Hangout開視頻會(huì)議對(duì)我的代碼進(jìn)行Code Review。

我花了一個(gè)多月的時(shí)間來寫一個(gè)靜態(tài)HTML頁面，而現(xiàn)在整個(gè)團(tuán)隊(duì)都要評(píng)價(jià)我的工作？

那個(gè)什么，我要為自己說句話，這個(gè)頁面也包含一些JavaScript交互，是響應(yīng)式的，還包括CSS動(dòng)畫......好吧我真的覺得自己像個(gè)來冒名頂替的。

當(dāng)然，視頻會(huì)議的時(shí)間又重新安排了幾次。當(dāng)它終于發(fā)生時(shí)，我和我的工作已經(jīng)不是會(huì)議的主題了。他們都坐在紐約某個(gè)地方的同一個(gè)房間里，像一個(gè)緊密團(tuán)結(jié)的團(tuán)體一樣聊了一會(huì)兒。事實(shí)上，他們所說的關(guān)于我做的項(xiàng)目的所有內(nèi)容只有：

• 人1：嘿，有人在做這個(gè)贊助頁面嗎？
• 人2：是的，我認(rèn)為已經(jīng)完成了。
• 人1：太好了，我今晚合并吧。

那天晚上回家的時(shí)候，我意識(shí)到自己正面臨另一個(gè)挑戰(zhàn)。我在這家公司工作了7個(gè)星期，而我的原始報(bào)價(jià)為1,500美元。這相當(dāng)于每年11,100美元或每周214美元。或者直接說，每小時(shí)5.35美元。

這幾乎還不夠我付油錢的。所以，我給他們發(fā)了一張發(fā)票，我按照原來的每小時(shí)費(fèi)率給他們報(bào)了7個(gè)星期，總額達(dá)18,000美元。我當(dāng)然感到羞恥，但我還能怎么辦呢？

就像我預(yù)期的那樣，我沒有收到回復(fù)。如果所有大公司都有什么相同之處，那就是他們并不急于按時(shí)支付賬單。這么簡(jiǎn)單的工作要價(jià)這么多，我覺得自己像一個(gè)騙子，但話又說回來了，我又不是來做慈善的。我每天開車50英里來做這項(xiàng)工作，如果工作沒有完成，那不是因?yàn)槲也幌搿＿@是因?yàn)樗麄兓貜?fù)太緩慢了。

接下來的一周我得到了回復(fù)。這是一封來自經(jīng)理的冷郵件，他把我每天的工作日分成不同的時(shí)間段。然后他把我工作的那部分時(shí)間高亮了，每天標(biāo)記一個(gè)小時(shí)的午休時(shí)間。最后他用我們商定的小時(shí)費(fèi)率做了一些計(jì)算。

顯然，我算錯(cuò)了。我錯(cuò)誤估算了總數(shù)。調(diào)整后，他們欠我的總金額是21,000美元。

請(qǐng)確認(rèn)重新調(diào)整后的小時(shí)數(shù)，以便財(cái)務(wù)可以給您寫個(gè)支票。

我很快回復(fù)了確認(rèn)。

原文：https://idiallo.com/blog/18000-dollars-static-web-page

作者簡(jiǎn)介：Ibrahim Diallo，具有多年開發(fā)經(jīng)驗(yàn)的軟件工程師。

本文為 CSDN 翻譯