前后端分離已成為互聯網項目開發的業界標準使用方式，通過nginx+tomcat的方式（也可以中間加一個nodejs）有效的進行解耦，并且前后端分離會為以后的大型分布式架構、彈性計算架構、微服務架構、多端化服務（多種客戶端，例如：瀏覽器，車載終端，安卓，IOS等等）打下堅實的基礎。這個步驟是系統架構從猿進化成人的必經之路。

核心思想：前端html頁面通過ajax調用后端的restuful api接口并使用json數據進行交互。

在互聯網架構中，

web服務器：一般指像nginx，apache這類的服務器，他們一般只能解析靜態資源。

應用服務器：一般指像tomcat，jetty，resin這類的服務器可以解析動態資源也可以解析靜態資源，但解析靜態資源的能力沒有web服務器好。

一般都是只有web服務器才能被外網訪問，應用服務器只能內網訪問。

以前的JavaWeb項目大多數都是java程序員又當爹又當媽，又搞前端（ajax/jquery/js/html/css等等），又搞后端（java/mysql/oracle等等）。

隨著時代的發展，漸漸的許多大中小公司開始把前后端的界限分的越來越明確，前端工程師只管前端的事情，后端工程師只管后端的事情。正所謂術業有專攻。

對于后端java工程師：

把精力放在java基礎，設計模式，jvm原理，spring+springmvc原理及源碼，linux，mysql事務隔離與鎖機制，mongodb，http/tcp，多線程，分布式架構（dubbo，dubbox，spring cloud），彈性計算架構，微服務架構（springboot+zookeeper+docker+jenkins），java性能優化，以及相關的項目管理等等。

后端追求的是：三高（高并發，高可用，高性能），安全，存儲，業務等等。

對于前端工程師：

把精力放在html5，css3，jquery，angularjs，bootstrap，reactjs，vuejs，webpack，less/sass，gulp，nodejs，Google V8引擎，javascript多線程，模塊化，面向切面編程，設計模式，瀏覽器兼容性，性能優化等等。

前端追求的是：頁面表現，速度流暢，兼容性，用戶體驗等等。

通常我們的JavaWeb項目都是使用了若干后臺框架，springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。大多數項目在java后端都是分了三層，控制層（controller/action），業務層（service/manage），持久層（dao）?？刂茖迂撠熃邮諈?，調用相關業務層，封裝數據，以及路由&渲染到jsp頁面。然后jsp頁面上使用各種標簽（jstl/el/struts標簽等）或者手寫java表達式（<%=%>）將后臺的數據展現出來，玩的是MVC那套思路。緊接著系統發布，你需要用maven或者eclipse等工具把你的代碼打成一個war包，然后把這個war包發布到你的生產環境下的web容器（tomcat/jboss/weblogic/websphere/jetty/resin）里，對吧？發布完了之后，你要啟動你的web容器，開始提供服務，這時候你通過配置域名，dns等等相關，你的網站就可以訪問了。這樣一來，你的前后端代碼全都在那個war包里了，包括你的js，css，圖片，各種第三方的庫。

在瀏覽器中輸入你的網站域名（www.xxx.com），之后發生了什么？瀏覽器通過域名，再通過dns服務器找到你的服務器外網ip,將http請求發送到你的服務器，在tcp3次握手之后（http下面是tcp/ip），通過tcp協議開始傳輸數據，你的服務器得到請求后，開始提供服務，接收參數，之后返回你的應答給瀏覽器，瀏覽器再通過content-type來解析你返回的內容，呈現給用戶。

我們先假設你的首頁中有100張圖片，此時，用戶的看似一次http請求，其實并不是一次，用戶在第一次訪問的時候，瀏覽器中不會有緩存，你的100張圖片，瀏覽器要連著請求100次http請求（有人會跟我說http長連短連的問題，不在這里討論），你的服務器接收這些請求，都需要耗費內存去創建socket來玩tcp傳輸（消耗你服務器上的計算資源）。這樣的話，你的服務器的壓力會非常大，因為頁面中的所有請求都是只請求到你這臺服務器上，如果1個人還好，如果10000個人并發訪問呢（先不聊服務器集群，這里就說是單實例服務器），那你的服務器能扛住多少個tcp連接？你的帶寬有多大？你的服務器的內存有多大？你的硬盤是高性能的嗎？你能抗住多少IO？你給web服務器分的內存有多大？會不會宕機？

這就是為什么，越是大中型的web應用，他們越是要解耦。

理論上你可以把你的數據庫+應用服務+消息隊列+緩存+用戶上傳的文件+日志+等等都扔在一臺服務器上，你也不用玩什么服務治理，也不用做什么性能監控，什么報警機制等等。但是這樣把雞蛋都放在一個籃子里，隱患非常大。如果因為一個子應用的內存不穩定導致整個服務器內存溢出而hung住，那你的整個網站就掛掉了。

JSP的痛點：

以前的javaWeb項目大多數使用jsp作為頁面層展示數據給用戶，因為流量不高，因此也沒有那么苛刻的性能要求，但現在是大數據時代，對于互聯網項目的性能要求是越來越高。

1.動態資源和靜態資源全部耦合在一起，服務器壓力大，因為服務器會收到各種http請求，例如css的http請求，js的，圖片的等等。一旦服務器出現狀況，前后臺一起玩完，用戶體驗極差。

2.UI出好設計圖后，前端工程師只負責將設計圖切成html，需要由java工程師來將html套成jsp頁面，出錯率較高，修改問題時需要雙方協同開發，效率低下。

3.jsp必須要在支持java的web服務器里運行（例如tomcat，jetty，resin等），無法使用nginx等（nginx據說單實例http并發高達5w，這個優勢要用上），性能提不上來。

4.第一次請求jsp，必須要在web服務器中編譯成servlet，第一次運行會較慢。

5.每次請求jsp都是訪問servlet再用輸出流輸出的html頁面，效率沒有直接使用html高。

6.jsp內有較多標簽和表達式，前端工程師在修改頁面時會遇到很多痛點。

7.如果jsp中的內容很多，頁面響應會很慢，因為是同步加載。

8.需要前端工程師使用java的ide（例如eclipse），以及需要配置各種后端的開發環境，你們有考慮過前端工程師的感受嗎。

基于上述的一些痛點，我們應該把整個項目實現前后端真正的解耦！

前后分離的優勢：

1.可以實現真正的前后端解耦，前端服務器使用nginx。

前端/WEB服務器放的是css，js，圖片等等一系列靜態資源（甚至你還可以css，js，圖片等資源放到特定的文件服務器，例如阿里云的oss，并使用cdn加速），前端服務器負責控制頁面引用&跳轉&路由，前端頁面異步調用后端的接口，后端/應用服務器使用tomcat（把tomcat想象成一個數據提供者），加快整體響應速度。

（這里需要使用一些前端工程化的框架比如nodejs，react，router，react，redux，webpack）

2.發現bug，可以快速定位是誰的問題，不會出現互相踢皮球的現象。

頁面邏輯，跳轉錯誤，瀏覽器兼容性問題，腳本錯誤，頁面樣式等問題，全部由前端工程師來負責。

接口數據出錯，數據沒有提交成功，應答超時等問題，全部由后端工程師來解決。

雙方互不干擾，前端與后端是相親相愛的一家人。

3.在大并發情況下，可以同時水平擴展前后端服務器，比如淘寶的一個首頁就需要2000+臺前端服務器做集群來抗住日均多少億+的日均pv。

4.減少后端服務器的并發/負載壓力

除了接口以外的其他所有http請求全部轉移到前端nginx上，接口的請求調用tomcat，參考nginx反向代理tomcat。

且除了第一次頁面請求外，瀏覽器會大量調用本地緩存。

5.即使后端服務暫時超時或者宕機了，前端頁面也會正常訪問，只不過數據刷不出來而已。

6.也許你也需要有微信相關的輕應用，那樣你的接口完全可以共用，如果也有app相關的服務，

那么只要通過一些代碼重構，也可以大量復用接口，提升效率。（多端應用）

7.頁面顯示的東西再多也不怕，因為是異步加載。

8.nginx支持頁面熱部署，不用重啟服務器，前端升級更無縫。

9.增加代碼的維護性&易讀性（前后端耦在一起的代碼讀起來相當費勁）。

10.提升開發效率，因為可以前后端并行開發，而不是像以前的強依賴。

11.在nginx中部署證書，外網使用https訪問，并且只開放443和80端口，其他端口一律關閉（防止黑客端口掃描），內網使用http，性能和安全都有保障。

12.前端大量的組件代碼得以復用，組件化，提升開發效率，抽出來！

總結一下新的方式的請求步驟：

大量并發瀏覽器請求--->web服務器集群(nginx)--->應用服務器集群(tomcat)--->文件/數據庫/緩存/消息隊列服務器集群

同時又可以玩分模塊，還可以按業務拆成一個個的小集群，為后面的架構升級做準備。

擊上方 關注訂閱黑碼教主獲取更多精彩內容

性能之前端篇

循環優化

在多重嵌套循環的程序上，如果能分出出多個獨立循環也比嵌套在一個循環體內來的更有益。

優化循環的3種方式：減少每次迭代的開銷、減少迭代的次數或者重新設計應用程序。

在測試的時候僅可能模擬真實環境:如低端機器和低速網絡。

?

Ajax優化

對于連續頁面之間的差別很小的應用而言，使用Ajax技術能帶來顯著的改善。

?

減少重繪

在HTML頁面完成展現之后，動態改變頁面元素或調整CSS樣式都會引起瀏覽器重繪，性能的損耗直接取決于動態改變的范圍：如果只是改變一個元素的顏色之類的信息則只會重繪該元素；而如果是增刪節點或調整節點位置則會引起其兄弟節點也一并重繪。

減少重繪并不是說不要重繪，而是要注意重繪范圍：

1. 改動的DOM元素越深則影響越小，所以盡量深入節點改動；
2. 對某些DOM樣式有多重變動盡量合并到一起修改;

以改變一個<a>標簽的背景色、寬度和顏色為例。

<a href="javascript：void(0);" id="example">傳統的代碼</a> 
<script> 
 var example=document.getElementById("example"); 
 example.ondblclick=function() { 
 example.style.backgroundColor="red"; 
 example.style.width="200px"; 
 example.style.color="white"; 
 } 
</script> 

以上會執行3次重繪，而通過CSS代替javascript多次執行則只進行一次重繪。

<style> 
 .dblClick { 
 width: 200px; 
 background: red; 
 color: white; 
 } 
</style> 
<a href="javascript：;" id="example">CSS優化的代碼</a> 
<script> 
 var example=document.getElementById("example"); 
 example.ondblclick=function() { 
 example.className="dblClick"; 
 } 
</script>

避免腳本阻塞加載

當瀏覽器在解析常規的script標簽時，它需要等待script下載完畢，再解析執行，而后續的HTML代碼只能等待。CSS文件引入要放在頭部，因為這是HTML渲染必備元素。

?

為了避免阻塞加載，應把腳本放到文檔的末尾，而CSS是需要放在頭部的！

<head>
<link rel="stylesheet" href="common.css">
......
<script src="example.js"></script>
</body>

避免節點深層級嵌套

深層級嵌套的節點在初始化構建時往往需要更多的內存占用，并且在遍歷節點時也會更慢些，這與瀏覽器構建DOM文檔的機制有關。瀏覽器會把整個HTML文檔的結構存儲為DOM“樹”結構。當文檔節點的嵌套層次越深，構建的DOM樹層次也會越深。

如下代碼，完全能夠去掉

或其中一個標簽。<div>
 <span>
 <label>嵌套</label>
 </span>
</div>

頁面緩存

通常不設置緩存的情況下，每次刷新頁面都會重新讀取服務器的文件，而如果設置緩存之后，所有文件都可以從本地取得，這樣明顯極大提高了頁面效率。

我們可以通過設置頁面頭的expires來定義頁面過期時間，將過期時間定久一點就達到了“永久”緩存。

<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

當然，如果你的項目代碼有變更，因為客戶端緩存了文件就得不到最新的文件，勢必造成顯示錯誤?；谶@個問題的解決方案就是給鏈接文件加一個時間戳，如果時間戳有變化，瀏覽器會認為是新文件，就會向服務器請求最新文件。

<script src="example2014-6-17.js"></script>
//如果是JSP，可以用EL表達式來取時間戳信息，這樣管理更加方便
<script src="example${your time param}.js"></script>
//或者這樣的寫法更優秀：
<script src="example.js?time=2014-6-7"></script>
<script src="example.js?time=${your time param}"></script>

壓縮合并文件

所有涉及到請求數據的文件盡量做壓縮，比如Javascript文件、css文件及圖片文件，特別是圖片文件，如果沒有高清晰要求，完全可以壓縮后再使用。

數量少體積大的文件要比數量多體積小的文件加載速度快，所以有時候可以考慮將多個js文件、多個css文件合并在一起。

除此之外減少HTML文檔大小還可以采取下面幾種方法：

1. 刪掉HTM文檔對執行結果無影響的空格空行和注釋
2. 避免Table布局
3. 使用HTML5 ### HTML+CSS3+Javascript各司其職 讓三元素各司其職才能做出高性能的網頁：HTML是頁面之本也是內容之源，有了它就能跟CSS和Javascript交互；CSS3可以說是展現大師，而且日漸強大的CSS能代替Javascript做很多動態的事情如漸變、移動等動態效果；Javascript是動態數據之王，舊瀏覽器依靠js來完成動態效果展現，但現在的CSS也能完成js的工作，所以盡量將工作交給css，這樣會獲得更好的性能。（這個說得有點大）

圖像合并實現CSS Sprites

圖像合并其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS 的“background-image”，“background- repeat”，“background-position”的組合進行背景定位，background-position可以用數字能精確的定位出背景圖片的位置。

一個頁面要用到多個圖標，完全可以將多個圖標合并成一個圖，然后只需要發一次圖片請求，通過css定位分割圖標即可。

避免使用Iframe

使用iframe并不會增加同域名下的并行下載數，瀏覽器對同域名的連接總是共享瀏覽器級別的連接池，在頁面加載過程中iframe元素還會阻塞父文檔onload事件的觸發。并且iframe是html標簽中最消耗資源的標簽，它的開銷比DIV、SCRIPT、STYLE等DOM高1~2個數量級。

避免onload事件被阻塞，可使用JavaScript動態的加載iframe元素或動態設置iframe的src屬性（但其僅在高級瀏覽器IE9及以上有效）。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

多域名請求

一般來說，瀏覽器對于相同域名的圖片，最多用2-4個線程并行下載（不同瀏覽器的并發下載數是不同的）。而相同域名的其他圖片，則要等到其他圖片下載完后才會開始下載。

有時候，圖片數據太多，一些公司的解決方法是將圖片數據分到多個域名的服務器上，這在一方面是將服務器的請求壓力分到多個硬件服務器上，另一方面，是利用了瀏覽器的特性。（大家可以去新浪、騰訊門戶網站查看，這些大型站點同一頁面加載的圖片可能由多個站點提供）

注：一個HTML請求的域名也不要太多（2~3個差不多），多了可能造成不同服務器連接時間差異，反而影響速度。

避免空鏈接屬性

如<img src=""><a href="">這樣的設置方式是非常不可取的，即使鏈接為空，在舊的瀏覽器也會以固定步驟發送請求信息。

另外<a href="#"></a>也不可取，最好的方式是在鏈接中加一個空的js代碼<a href="javascript：void();"></a>

使用圖像的BASE64編碼

base64是一串字符串，他可以代表一個圖片的所有信息，也就是可以通過

（S表示一串base64碼）來顯示圖片，這種方式不需要再向服務器發送請求，完全由瀏覽器解析成圖片。

目前高級瀏覽器都支持此功能，但要注意兩點：

1. 低版本瀏覽器（如IE7）不支持；
2. base64字符串長度隨圖片的大小及復雜度成正比，base64也像URL一樣，也有超出長度的情況（在IE8下很常見）。所以要根據情況來使用。

顯式設置圖片的寬高

如果HTML里的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成后再“回溯”該圖片并重新顯示，這會消耗額外時間。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

顯式指定文檔字符集

如果瀏覽器不能獲知頁面的編碼字符集，一般都會在執行腳本和渲染頁面前，把字節流緩存，然后再搜索可進行解析的字符集，或以默認的字符集來解析頁面代碼，這會導致消耗不必要的時間。

<iframe id="if"></iframe>
document.getElementById("if").setAttribute("src","url");

漸進式增強設計

漸進式增強設計的通俗解釋就是：首先寫一段滿足所有瀏覽器的基本樣式，再在后面針對不同高級瀏覽器編寫更漂亮的樣式

如下代碼，所有瀏覽器都支持background-color: #2067f5;滿足了瀏覽器基本現實需求，而后面的background-image: -webkit-gradient等則為不同高級瀏覽器使用，只要瀏覽器識別就能執行這段代碼（不識別，CSS也不會報錯只會直接忽略）。

<div class="someClass"></div> 
.someClass 
{ width: 100px; 
 height: 100px; 
 background-color: #2067f5; 
 background-image: -webkit-gradient(linear, left top, left bottom, from(#2067f5), 
to(#154096)); 
 background-image: -webkit-linear-gradient(top, #2067f5, #154096); 
 background-image: -moz-linear-gradient(top, #2067f5, #154096); 
 background-image: -ms-linear-gradient(top, #2067f5, #154096); 
 background-image: -o-linear-gradient(top, #2067f5, #154096); 
 background-image: linear-gradient(to bottom, #2067f5, #154096); 
}

懶加載與預加載

預加載和懶加載，是一種改善用戶體驗的策略，它實際上并不能提高程序性能，但是卻可以明顯改善用戶體驗或減輕服務器壓力。

預加載表示當前用戶在請求到需要的數據之后，頁面自動預加載下一次用戶可能要看的數據，這樣用戶下一次操作的時候就立刻呈現，依次類推。

懶加載表示用戶請求什么再顯示什么，如果一個請求要響應的時間非常長，就不推薦懶加載。

Flush機制

當一個頁面非常大，內容非常多，可以采用flush的形式分部分返回給頁面，這樣能告訴用戶我正在工作，顯示一部分內容比白屏等很長時間要好得多。在Java Web技術中，實現Flush非常簡單，只要調用 HttpServletResponse.getWriter輸出流的flush方法，就可以將已經完成加載的內容寫回給客戶端。

這種方式只適用于返回數據特別多、請求時間特別長的情況，常規數據還是用正常的實時全部返回最佳。這種實現方式實際會增加瀏覽器渲染時間和用戶整體等待時間，但從用戶體驗上會更加優秀。

性能之服務器優化

CDN機制

所謂的CDN，就是一種內容分發網絡，它采用智能路由和流量管理技術，及時發現能夠給訪問者提供最快響應的加速節點，并將訪問者的請求導向到該加速節點，由該加速節點提供內容服務。

通俗點說，你在成都（瀏覽器）購買了北京賣家（服務器）的產品，北京賣家通過快遞（CDN服務）寄送包裹，從北京到成都可以走路、坐汽車、火車或飛機，而采用CND的快遞會選擇飛機直達，因為這種寄送方式最快。

當然使用CDN有兩個注意事項：

1. CDN加速服務很貴，如果你覺得你的網站值得加速，可以選擇購買；
2. CDN不適合局域性網站，比如你的網站只有某一個片區訪問或者局域網訪問，因為區域性網絡本來就很近，無需CDN加速。

HTTP協議的合理使用

瀏覽器緩存帶來的性能提升已經眾人皆知了，而很多人卻并不知道瀏覽器的緩存過期時間、緩存刪除、什么頁面可以緩存等，都可以由我們程序員來控制，只要您熟悉HTTP協議，就可以輕松的控制瀏覽器。

動靜分離

所謂的動靜分離，就是將Web應用程序中靜態和動態的內容分別放在不同的Web服務器上，有針對性的處理動態和靜態內容，從而達到性能的提升。我們知道如果一個HTML有多個域名請求數據文件會提高

Tomcat服務器在處理靜態和并發問題上比較弱，所以事先動靜分離的方式一般會用Apache+Tomcat、Nginx+Tomcat等。

以Apache+Tomcat為例，其運行機理是：頁面請求首先給Apache，然后Apache分析請求信息是靜態還是動態，靜態則本機處理，動態則交給Tomcat做處理。

這其實是負載均衡的雛形，這樣的實現不用讓開發人員做任何特殊開發，一個

交給服務器即可，至于這個文件是從Apache還是從Tomcat取得，開發人員完全無需關注。

HTTP持久連接

持久連接（Keep-Alive）也叫做長連接，它是一種TCP的連接方式，連接會被瀏覽器和服務器所緩存，在下次連接同一服務器時，緩存的連接被重新使用。HTTP無狀態性表示了它不屬于長連接，但HTTP/1.1提供了對長連接的支持（不過這必須依賴瀏覽器和服務器雙方均支持長連接功能才行），最常見的HTTP長連接例子是“斷點下載”。

瀏覽器在請求的頭部添加 Connection:Keep-Alive，以此告訴服務器“我支持長連接，你支持的話就和我建立長連接吧”，而倘若服務器的確支持長連接，那么就在響應頭部添加“Connection:Keep-Alive”，從而告訴瀏覽器“我的確也支持，那我們建立長連接吧”。服務器還可以通過Keep-Alive:timeout=..., max=...的頭部告訴瀏覽器長連接失效時間。

配置長連接通常是要服務器支持設置，有測試數據顯示，使用長連接和不使用長連接的性能對比，對于Tomcat配置的maxKeepAliveRequests為50來說，效率竟然提升了將近5倍。

GZIP壓縮技術

HTTP協議支持GZIP的壓縮格式，當服務器返回的HTML信息報頭中包含Content-Encoding:gzip，它就告訴瀏覽器，這個響應的返回數據已經壓縮成GZIP格式，瀏覽器獲得數據后要進行解壓縮操作，一定程度上減輕了服務器傳輸數據的壓力。

很多服務器已經支持通過配置來自動將HTML信息壓縮成GZIP，比如tomcat、又比如很火的Nginx。如果無法配置服務器級別的GZIP壓縮機制，可以改為程序壓縮。

// 監視對 gzipCategory 文件夾的請求
 @WebFilter(urlPatterns={ "/gzipCategory/*" }) 
 public class GZIPFilter implements Filter { 
 @Override 
 public void doFilter(ServletRequest request, ServletResponse response, 
 FilterChain chain) throws IOException, ServletException { 
 String parameter=request.getParameter("gzip"); 
 // 判斷是否包含了 Accept-Encoding 請求頭部
 HttpServletRequest s=(HttpServletRequest)request; 
 String header=s.getHeader("Accept-Encoding"); 
 //"1".equals(parameter) 只是為了控制，如果傳入 gzip=1，才執行壓縮，目的是測試用
 if ("1".equals(parameter) && header !=null && header.toLowerCase().contains("gzip")) { 
 HttpServletResponse resp=(HttpServletResponse) response; 
 final ByteArrayOutputStream buffer=new ByteArrayOutputStream(); 
 HttpServletResponseWrapper hsrw=new HttpServletResponseWrapper( 
 resp) { 
 @Override 
 public PrintWriter getWriter() throws IOException { 
 return new PrintWriter(new OutputStreamWriter(buffer, 
 getCharacterEncoding())); 
 } 
 @Override 
 public ServletOutputStream getOutputStream() throws IOException { 
 return new ServletOutputStream() { 
 @Override 
 public void write(int b) throws IOException { 
 buffer.write(b); 
 } 
 }; 
 } 
 }; 
 chain.doFilter(request, hsrw); 
 byte[] gzipData=gzip(buffer.toByteArray()); 
 resp.addHeader("Content-Encoding", "gzip"); 
 resp.setContentLength(gzipData.length); 
 ServletOutputStream output=response.getOutputStream(); 
 output.write(gzipData); 
 output.flush(); 
 } else { 
 chain.doFilter(request, response); 
 } 
 } 
 // 用 GZIP 壓縮字節數組
 private byte[] gzip(byte[] data) { 
 ByteArrayOutputStream byteOutput=new ByteArrayOutputStream(10240); 
 GZIPOutputStream output=null; 
 try { 
 output=new GZIPOutputStream(byteOutput); 
 output.write(data); 
 } catch (IOException e) { 
 } finally { 
 try { 
 output.close(); 
 } catch (IOException e) { 
 } 
 } 
 return byteOutput.toByteArray(); 
 } 
……
 }

如果你覺得本篇還不錯，請點贊關注！

文字由黑碼教主創作，配圖源于網絡，版權歸原作者所有,如有侵權聯系刪除！

你有更好的網站性能優化方案嗎？

歡迎留言分享。