前言：前端網頁編寫完成部署後，生產環境上的網頁訪問速度讓人不太滿意，有時候基本會延遲好幾秒載入頁面，查詢了相關資料，整理出本篇文章。

網頁效能分析

首先需要對目標網頁進行效能分析，找到相應的待優化項
網頁端谷歌效能分析工具
谷歌瀏覽器外掛：PageSpeed Insights、Lighthouse。

Nginx傳輸時壓縮文字

使用Nginx反向代理時，可以使用gzip壓縮傳輸檔案到瀏覽器，可以大大提高效能

修改Nginx的配置檔案：

    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 9;
    gzip_types text/plain application/x-javascript application/javascript application/json application/x-font-woff text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary off;
    gzip_disable "MSIE [1-6]\.";
 

消除渲染阻塞資源

指令碼（Script）載入
載入頁面時，是按照HTML的程式碼順序載入的，當頭部中引用了指令碼或者樣式表時，會優先載入這些資源然後再渲染頁面，導致頁面展示速度降低，將指令碼改為非同步或者改為頁面渲染完成後再載入，可以加快頁面渲染速度。

<!-- 若指令碼之間沒有依賴關係可以使用該標籤 -->
<script type="text/javascript" src="demo.js" async></script>
<script type="text/javascript" src="test.js" async></script
 
>

<!-- 若指令碼之間有依賴關係可以使用該標籤 -->
<script type="text/javascript" src="demo1.js" defer></script>
<script type="text/javascript" src="demo2.js" defer></script>

1. async
   設定async使script指令碼非同步載入並在允許的情況下執行，多指令碼先載入完先執行，因此有依賴關係時使用該標籤可能出錯。

2. defer
   若script標籤設定了該屬性，則瀏覽器會非同步的下載該檔案且不會影響到後續DOM的渲染；
   若有多個設定了defer的script標籤存在，則會按照順序執行所有的script；
   defer指令碼會在文件渲染完畢後，DOMContentLoaded事件呼叫前執行。

樣式表（CSS）載入
樣式表可以分為重要部分和不重要部分，重要部分可以在頭部使用<style>標籤，在HTML中直接編寫；不重要部分可以使用media屬性編寫想要規則。

使用瀏覽器快取

在首次載入頁面後，再次載入時，HTTP請求可以附帶資源的相關資訊，當HTTP響應中顯示資源資訊，可以對比出資源是否變更，若無變更則可以在瀏覽器快取中獲取相關資源。

本地壓縮檔案

將外部指令碼（js）和樣式表（css）壓縮成min形式，清除空白字元等。

waiting（TTFB）時間過長

DNS解析網址耗時

訪問的為網址而不是IP時，需要DNS解析，耗時較長
127.0.0.1無需解析，localhost還要本地DNS解析，所有127.0.0.1會更快

連線資料庫等耗時

查詢資料庫耗時

前端頻繁查詢資料庫不僅會降低頁面的訪問速度，也會增大資料庫訪問量，增加伺服器後端的負載，拖慢訪問速度，所以在後端的資料庫查詢中最好增加資料庫訪問資料的快取，快取資料可以使用spring中的cache內容，使用@EnableCaching在springboot主類中開啟快取功能，使用@CacheConfig、@Cacheable、@CachePut、@CacheEvict等註解新增查詢方法的結果快取。