活字格效能最佳化技巧(3):如何巧用CDN提升含頁面的訪問速度

葡萄城技術團隊發表於2023-04-10

本文由葡萄城技術團隊於部落格園原創並首發
轉載請註明出處:葡萄城官網,葡萄城為開發者提供專業的開發工具、解決方案和服務,賦能開發者。

 

上兩篇中我們分享瞭如何利用資料庫主鍵表格設定預設不載入資料來提升應用系統訪問的效能。在本篇中一起來看看如何在活字格中利用CDN技術來提升頁面的訪問速度。在此之前,先看看CDN是什麼、它產生的背景以及主要用來解決的問題。

CDN是Content Delivery Network的縮寫,即內容網路分發。其基本的原理是透過在現有的Internet中增加一層新的網路架構,將網站的內容釋出到最接近使用者的網路“邊緣”,使使用者可以就近取得所需內容的原則,提高使用者訪問網站的響應速度。基於以上原理,CDN可以明顯提高Internet網路中資訊流動的效率。從技術上全面解決由於網路頻寬小、使用者訪問量大、網點分佈不均等問題,提高使用者訪問網站的響應速度。(更多關於CDN的加速原理可以參考一文看懂CDN加速原理_xiangzhihong8的部落格-CSDN部落格_cdn原理圖

CDN 的主要好處是它能夠快速有效地交付內容。 CDN效能最佳化可以分為三類:

  1. 距離減少——減少客戶端和請求資料之間的物理距離
  2. 硬體/軟體最佳化——提高伺服器端基礎設施的效能,例如透過使用固態硬碟和高效的負載平衡
  3. 減少資料傳輸——採用技術來減少檔案大小,以便快速載入初始頁面

 

那麼利用企業級低程式碼開發平臺——活字格開發應用系統的時候,能不能使用CDN的技術?答案是肯定的。在此就藉助七牛雲來展示一下,如何巧用CDN技術來提升系統頁面訪問效率。

很多人會發現使用活字格做的應用系統在第一次開啟一個頁面的時候,會稍微慢一點,以後就會快很多?主要原因是因為JS檔案在第一次訪問時會需要將資源下載下來。如果資源所在的伺服器效能不好,那麼就需要比較多的時間來下載這些檔案。如果希望下載快一些,就需要把類似的檔案使用CDN技術放到離訪問站點更近的伺服器上。下面以七牛云為例來說明如何使用:
1. 選取的原則是什麼?
以活字格的Demo應用系統為例,詳見下圖:

 

 

在網頁上開啟這個應用,然後按一下鍵盤的F12


在瀏覽器中就可以看到如下所示的內容:

 

 

為了更方便的操作,請這樣設定一下

 

 

這樣,就可以進行全屏展示了。

 

 

接下來找到所有請求的詳細資訊,按照從大到小進行排序

 

 

為了讓訪問更加高效,挑選其中幾個比較大的檔案做CDN。如下圖所示,挑選前4個檔案。

 

 

透過右鍵【另存為】將檔案儲存下來。

 

 

至此,已經將需要做CDN的檔案下載下來啦。
2.建立七牛雲的儲存賬號,並申請空間
先到七牛雲官網:https://www.qiniu.com/註冊賬號,如下圖所示:

 

 

註冊完了之後需要先進行實名認證,可以根據需要選擇【申請個人認證】或【申請企業認證】,稽核透過之後就可以正式使用了。

 

 

進入【物件儲存】

 

 

點選【新建儲存空間】,起一個名字比如,test。
 

 

 

進入後點選【內容管理】

 

 

應用【上傳檔案】,將步驟1中選擇到的檔案上傳上去。

 

 

 

上傳之後的效果如下:

 

 

點選【複製外鏈】,並將這些外鏈儲存起來。

 

 

獲取到的外鏈如下:

 

 

至此 ,就完成七牛雲的設定以及相關檔案的儲存。
3.修改釋出後活字格應用的index.html檔案
活字格V5.0,釋出後index.html檔案儲存在:
C:\Program Files (x86)\ForguncyServer\Website\Resources
注意:

1. 不同版本的這個檔案的路徑不同,如果您是5.0.5.0,將下面路徑中的5.0.3.0換成5.0.5.0即可

 

為了避免異常,可提前將該檔案進行備份。
用記事本開啟index.html檔案,將上述提到的4個檔案搜尋出來,並使用七牛雲的連結進行替換。

 

 

並使用七牛雲的連線替換掉

 

 

確認修改完之後,儲存檔案,並在windows系統服務內重啟活字格服務。

 

 

重新開啟應用之後,會發現系統訪問的速度比之前快很多。當然除了文中提到的這些圖片,您也可以根據您的需要再選擇部分資源進行CDN加速。

更多參考:

1. 內容分發網路 CDN 是如何提高網頁載入時間的?  https://www.jianshu.com/p/6d5847f3c22d

2. 一文看懂CDN加速原理_xiangzhihong8的部落格-CSDN部落格_cdn原理圖

 

相關文章