整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          你了解大型網站的頁面靜態化嗎?

          迎關注頭條號:老顧聊技術

          精品原創技術分享,知識的組裝工


          目錄

          1. 前言
          2. 方案一:網頁靜態HTML化
          3. 偽靜態
          4. 布局樣式模板化
          5. 應用層nginx
          6. 分發層nginx

          前言

          我們小伙伴們在訪問淘寶、網易等大型網站時有沒有考慮到,網站首頁、商品詳情頁以及新聞詳情頁面是如何處理的?怎么能夠支撐這么大流量的訪問呢?

          很多小伙伴們就會提出他們都采用了靜態化的方案,這樣用戶請求直接獲取靜態數據html,就不需要訪問數據庫了,性能就會大大提高;而且提高網站SEO優化。那今天老顧就帶著大家聊一下靜態化。把老顧之前工作場景中靜態化方案遇到的問題,以及如何演變的,分享給小伙伴。

          關于相關的靜態文件的CDN技術,老顧就不在這邊講了。這個大型網站肯定都會用到的,什么是CDN,小伙伴們可以在網上查詢看一下,比較簡單;我們這邊注重看技術方案。

          方案一:網頁靜態HTML化

          這個方案是老顧最早使用的方案,我們就拿CMS系統舉例,類似網易的新聞網站;核心流程圖

          上圖的核心思想:

          1)管理后臺調用新聞服務創建文章成功后,發送消息到消息隊列

          2)靜態服務監聽消息,把文章靜態化,也就是生成html文件

          3)在靜態服務器上面安裝一個文件同步工具,此工具的功能可以做到只同步有變動的文件,即做增量同步(老顧用久沒用了,忘了工具的名稱)

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

          這樣的話就達到了,用戶訪問一些變化不大的頁面時,是直接訪問的html文件,直接在web服務器那邊直接返回,不需要在訪問數據庫了,系統吞吐量比較高。

          這個方案的問題:

          1、網頁布局樣式僵化,無法修改

          如果產品經理覺得新聞詳情頁面的布局要調整一下,現在的不夠美觀,或者加個其他模塊,那就坑爹了,我們需要把所有的已經靜態html化的文章全部重新靜態化。這個是不現實的,因為像網易這么大的體量,新聞量是很大的,會被搞死。

          2、頁面會出現暫時間不一致

          會出現用戶剛剛再看最新的新聞,刷新一下又不存在了。這個是因為同步工具在同步到web服務器是要有時間的,同步到web服務器A上面了,但web服務器B還沒有來得及同步。用戶在訪問的時候通過nginx進行負載均衡,隨機把請求分配給web服務器的導致的。當然可以調整nginx負載均衡策略去解決。

          3、Html文件太多,無法維護

          這個是很明顯的問題,html文件會越來越多,對存儲空間要求很大,而且每臺web服務器都一樣,浪費磁盤空間;將來遷移維護也會帶來很大的麻煩。

          4、同步工具的不穩定

          因為文件一旦多之后,同步工具穩定性就出現了問題

          這個方案應該是比較傳統的(不推薦)

          方案二:偽靜態化

          什么是偽靜態?

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

          之所以是偽靜態其實也是需要動態處理的。

          針對方案一上面問題,方案進一步的演化,如下圖

          此方案的核心思想

          1)管理后臺調用新聞服務創建文章成功后,發送消息到消息隊列

          2)緩存服務監聽消息,把文章內容緩存到緩存服務器上面

          3)用戶發起請求,web服務器根據id,直接查詢緩存服務器

          4)獲取數據返回給用戶

          此方案就解決了方案一的一個大問題,就是html文件多的問題,因為不需要生成html,而且用緩存的方式,解決不需要訪問數據庫,提升系統吞吐量。

          不過此方案的問題:

          1、網頁布局樣式維護成本比較高,因為此方案照樣是把所有的內容放到了緩存中,如果需要修改布局,需要重新設置緩存。

          2、分布式緩存壓力比較大,一旦緩存故障就導致所有請求會查詢數據庫,導致系統崩潰

          還有個小問題,就是實時數據處理,就是頁面中如價格,庫存需要到后臺讀取的。當然小伙伴也許就會說,也可以處理啊,用戶把商品內容請求到后,然后在用瀏覽器發送異步的ajax請求獲得商品數量就好了啊。這樣就是無形的增加了一次請求。(此問題可以忽略)

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

          方案三:布局樣式模板化

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

          如下圖:

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

          我們主要看的是上面怎么會有兩層ngnix,分發層和應用層,這個是什么意思?

          應用層nginx

          老顧先介紹一下應用層nginx是什么意思?nginx一般被用做負載均衡,其實nginx還有很多的功能,尤其他的openresty擴展 + lua腳本語言結合起來可以完成很多功能,小伙伴可以理解為lua腳本語言就是類似java語言,可以動態處理業務,如:本地緩存處理,遠程http訪問,訪問redis等。

          應用層nginx就是利用了http模板 + 緩存通過lua腳本完成的網頁渲染

          http模板

          1)應用層nginx通過lua腳本語言先獲取本地商品數據,然后和http模板進行渲染,形成最終商品詳情頁返回給用戶

          2)如果應用層nginx本地的緩存沒有此商品數據,就通過lua腳本發起http請求訪問web服務器,獲取商品數據。

          3)web服務器會向redis或本機的ehcache請求商品數據(這里涉及三級緩存概念),如果存在此商品數據,直接返回給用戶;如果不存在則請求微服務訪問數據庫

          這個思路就是通過http模板,解決了方案二中的布局樣式的問題,如果需要調整布局,只要改一下模板就行了,非常方便也解決了實時性問題。這邊涉及到的nginx本地緩存其實就是為了保證不需要訪問數據庫,提升系統吞吐量。小伙伴只要了解一下思路,如果不了解openresty和lua可以自行上網了解,也可以聯系老顧。

          分發層ngnix

          為什么上面還有一層分發層呢?這個是因為大型網站的商品數太多了,應用層nginx的本地緩存是有限的,不可能把所有的商品數據緩存在同一個服務器的本地緩存;一臺應用層nginx只能緩存部分商品數據,說到這里小伙伴是不是應該就知道為什么了吧?就是利用hash一致性算法,根據商品id路由分發到同一個應用層ngnix服務器。

          分發層ngnix的作用就是hash策略的負載均衡,保證了商品id路由到固定的應用層服務器。

          三級緩存保證了系統的穩定性,即使redis緩存崩潰,還有其他2個緩存保障。

          總結:

          1. 方案三是比較完整的方案,很多大廠都在使用,能夠承受億級流量,但系統比較復雜。
          2. 如果對實時性要求不高,布局樣式調整不頻繁,可以考慮方案二,系統比較簡單

          -End-

          如有收獲,請幫忙轉發,您的鼓勵是作者最大的動力,謝謝!

          10幾年的經驗實戰分享

          相關微服務,分布式,高并發,高可用,企業實戰,干貨等原創文章正在路上

          歡迎關注頭條號:老顧聊技術

          精品原創技術分享,知識的組裝工

          推薦閱讀

          1、你知道如何保障生產端100%消息投遞成功嗎?

          2、你知道如何更新緩存嗎?如何保證緩存和數據庫雙寫一致性?

          3、你知道怎么解決DB讀寫分離,導致數據不一致問題嗎?

          4、DB讀寫分離情況下,如何解決緩存和數據庫不一致性問題?

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

          6、如何利用鎖,防止緩存擊穿?重構思想的重要性

          7、海量訂單產生的業務高峰期,如何避免消息的重復消費?

          周給大家推薦了 Typora,作為一款純粹的 Markdown 應用來說,它的各種功能和細節可以說已經相當極致,然而,Ulysses用戶表示:我們想要的不僅僅是 Markdown。

          是的,Markdown 還可以變成「Markdown + 文檔管理」、「Markdown + 靜態網頁生成」,而今天給大家推薦的一款由國內開發者制作的 MWeb,就是「Markdown + 文檔管理 + 靜態網頁生成」的集大成者。

          讓我們一筆帶過它的 Markdown 屬性吧

          世上 Markdown 應用千萬種,Markdown 語法卻還是那么一套(當然嚴謹的說還是有一些衍生的啦)。MWeb 除了支持所有的 Markdown 基本語法外,還支持大量 Markdown 擴展語法,如 Table、TOC、MathJax、Fenced code block、任務列表(Task lists)、順序圖和流程圖、Footnote 等。

          如果大家還不熟悉 Markdown 語法,可以來這里學習一下。說好的一筆帶過,就只給大家演示一下 MWeb 的特色功能——流程圖。

          兩種管理模式:外部文檔 & 文檔庫

          MWeb 提供了兩種文件管理模式:外部文檔模式(左)、文檔庫模式(右)。乍一看兩個好像沒什么區別呀,好了,讓我們來看一下實質:

          • 外部文檔模式:有點像 Sublime 中的文件夾側邊欄,這里你可以對應硬盤上某個路徑的文件或文件夾,以樹狀的模式進入 MWeb 中管理;
          • 文檔庫模式:每個「文件夾」和你硬盤中的路徑并不是對應的,這些「文件夾」實質上是分類,就像 Evernote 中你可以手動添加的筆記本一樣。

          用作者自己的話來說,外部文檔模式是基于文件的管理方式,非常利于同步和協作;而文檔庫模式則用于記筆記和靜態網站、博客生成。實際使用時兩者最大的不同之一就是:文檔庫模式下你可以直接從外部拖入一張圖片并顯示實時預覽,而外部文檔模式只會將圖片顯示為 Markdown 的語法。

          用文檔庫模式來記筆記、生成博客

          盡管官方沒有顯式地說明,但從各種功能引導上來說,文檔庫模式顯然是 MWeb 主推的使用方式。沒錯,在文檔庫模式下,MWeb 其實就成了一個沒有標簽系統的 Evernote,你完全可以使用它來記錄自己的筆記。

          而生成靜態網頁就是比較高級的功能了,如果你整理好文檔之間的結構,完全可以直接生成一個較為復雜的有子頁面的博客,雙擊目錄,點擊「Build Site」-> 「Preview Site」,就可以在本地生成一個靜態的頁面了。通過一些復雜的設置,如引入 Disqus 等,還可以直接為您的博客添加評論系統。

          不過想讓博客真的發布到網絡上,還是需要一些額外的工作的,這里就不具體展開了,感興趣的同學可以查閱官方的文檔操作。你也可以通過綁定 Wordpress、Evernote、Blogger 等服務,一鍵將內容發布上去。

          界面可定制性強

          之前的截圖相信大家也看到了,MWeb 提供了明/暗兩種模式,每個模式下還有 5 套不同的主題配色,你還可以自己微調字體、行距等其它選項。

          此外,MWeb 還提供了豐富的窗口模式,可以通過「Command + 數字」快捷切換。最常規的就是有一欄/二欄/三欄的窗口模式切換。此外,和大多數 Markdown 軟件不同,MWeb 默認是不顯示預覽窗口的,你可以通過「Command + 4」切換到「Editor & Preview Panes」,這時的視圖比較類似于 Mou、Typora 等軟件,但編輯區和預覽區實際上是兩個不同的窗口,可以分別拖動。

          MWeb 在 Mac App Store 上售價 68 元,對于想找比 Mou、Typora這樣純粹的 Markdown 工具高級一些、卻又不像Ulysses那么高級的用戶來說,MWeb 是一個很有性價比的選擇。此外,官方也提供了 MWeb Lite 版本,這個版本在編輯等功能上沒有區別,只是限制了文檔庫中的文檔數、可引入文件夾數等,同樣在 Mac App Store 可免費下載。

          【評論送碼】在文末評論說說你試用 MWeb Lite 免費版的感想建議,或是你使用 Markdown 的心得體驗,就有機會獲得由開發者@oulvhai提供的 MWeb 兌換碼,共 3 枚,本周五(14號)從評論隨機挑選 3 位朋友送出。

          態網頁與動態網頁之間的區別

          什么是靜態網頁

          所謂”靜態”指的是網頁內容”固定不變”,當瀏覽者通過互聯網的HTTP協議向Web服務器請求替換網頁內容時,服務器僅僅是將原來已經設計好的靜態HTML文檔傳送給用戶的流量器,其頁面的內容使用僅僅是標準的HTML代碼,靜態網頁文件通常以htm、html等為后綴名。

          什么是動態網頁

          所謂”動態”,并不是指在網頁中放幾個帶動畫的GIF或者SWF圖片和動畫,而是指用戶在瀏覽此網頁時,可以根據本身的需求在網頁中進行操作,而網頁根據用戶的輸入,能夠產生相應的結果來響應用戶,那樣的網頁才叫動態網頁,動態網頁文件通常以.asp、.php等為后綴。

          靜態網頁與動態網頁的區別

          1、編程技術不同

          很多人容易將動態網頁與頁面的動態內容混為一談,其實,動態網頁與網頁中的動態內容,如flash動畫、滾動字幕等并沒有直接關系。所謂的動態網頁是指利用HTML程序語言、其他高級程序設計語言和數據庫技術編程生成的網頁。靜態網頁是指利用HTML程序語言編程生成的網頁,隨著HTML代碼的生成,頁面內容和顯示效果不會再在發生改變,除非修改代碼。而動態網頁不容,頁面代碼雖然不發生變化,但顯示的內容可以根據數據庫操作的結果發生改變。

          2、被搜索引擎收錄的狀況不同

          由于編程技術不容,靜態網頁是純粹HTML格式的網頁,頁面內容穩定,不論是網頁是否被訪問,頁面都被保存在網站服務器上,很容易被搜索引擎收錄。而動態網頁的內容是當用戶點擊請求時才從數據庫中調出返回給用戶一個網頁的內容,并不是存放在服務器上的獨立文件,相比較于靜態網頁而言,動態網頁很難被搜索引擎收錄。

          3、用戶訪問速度不同

          用戶訪問動態網頁時,網頁在獲得搜索指令后經過數據庫的調查匹配,再將與指令相符的內容傳遞給服務器,通過服務器的編譯將網頁編譯成標準的HTML代碼,從而傳遞給用戶瀏覽器,多個讀取過程大大降低了用戶的訪問速度。而靜態網頁不同,由于網頁內容直接存取在服務器上,省去了服務器的編譯過程,用戶訪問網頁速度很快。

          4、制作和后期維護工作量不同

          動態網頁的設計以數據庫技術為基礎,可以實現多種功能,降低了網站維護的工作量。而靜態網頁由于沒有數據庫的支持,網頁內容更改時需要直接修改代碼,在網站內容制作和維護中,所需的工作量更大。

          動態網頁與靜態網頁各有特點,網站設計師在網頁設計時,主要根據網站的功能需求和網站內容多少選擇不同網頁。如,網站包含信息量太大時,就需要選擇動態網頁,反之,則選擇靜態網頁。


          GDCA(數安時代)擁有國內自主簽發信鑒易 TrustAUTH SSL證書以及是國際多家知名品牌:GlobalSign、Symantec、GeoTrust SSL證書指定的國內代理商。為了讓國內更多的網站升級到安全的https加密傳輸協議。近日,GDCA推出多種國際知名SSL證書優惠活動,實現HTTPS加密并展示網站真實身份信息。詳情請資訊GDCA產品官網在線客服https://www.trustauth.cn/。

          文章轉載:https://www.trustauth.cn/news/wiki/15753.html


          主站蜘蛛池模板: 香蕉久久ac一区二区三区| 国产成人精品一区二三区熟女| 久久伊人精品一区二区三区 | 亚洲天堂一区二区| 亚洲av高清在线观看一区二区| 日韩免费视频一区二区| 中文字幕一区二区三区四区 | 日本成人一区二区| 精品一区二区三区无码免费直播 | 日本香蕉一区二区三区| 亚洲午夜在线一区| 国产免费一区二区视频| 3D动漫精品啪啪一区二区下载| 亚洲国产精品一区二区成人片国内 | 国产一区二区电影在线观看| 亚洲av片一区二区三区| 国产福利一区视频| 天堂成人一区二区三区| 精品人妻少妇一区二区三区不卡| 人妻AV一区二区三区精品| 中文字幕在线看视频一区二区三区| 精品少妇一区二区三区在线| 精品一区二区久久久久久久网站| 日本免费一区二区三区最新vr| 无码一区二区波多野结衣播放搜索| 无码丰满熟妇浪潮一区二区AV| 人妖在线精品一区二区三区| 日本韩国一区二区三区| 国产乱码精品一区二区三区麻豆 | 农村人乱弄一区二区| 日韩精品在线一区二区| 无码精品黑人一区二区三区| 91精品一区二区三区在线观看| 2020天堂中文字幕一区在线观 | 精品久久综合一区二区| 搜日本一区二区三区免费高清视频 | 春暖花开亚洲性无区一区二区| 日本精品一区二区三区视频| 大帝AV在线一区二区三区| 精品视频一区二区三区在线播放| 久久久99精品一区二区|