前端優化

習題預習

1. 什麼是前端優化？為什麼它很重要？
2. 討論如何最小化 CSS 和 JavaScript 文件大小以提高頁面加載速度。
3. 說明如何使用快取和瀏覽器存儲來加速頁面載入並降低服務器負載。
4. 怎麼做才能優化圖像，進而降低頁面載入時間？
5. 討論如何減少 HTTP 請求以加快頁面載入時間。

說明知識

前端優化（Front-End Optimization，FEO）是指對網站前端內容進行優化，以提高網站的性能和用戶體驗。與後端優化（Back-End Optimization，BEO）不同，前端優化主要關注網站瀏覽器端的性能表現，即網站展示給用戶的內容。

例子:

1. 壓縮文件大小：將 CSS、JavaScript 和圖片等文件進行壓縮，以減小文件大小。這樣可以讓網站更快地加載，提高網站速度和性能。
2. 合併文件：將多個 CSS 和 JavaScript 文件合併成一個文件，以減少 HTTP 請求次數，從而提高網站加載速度和性能。
3. 圖片懶加載：延遲加載網站上的圖片，直到用戶滾動到該圖片所在的位置。這樣可以減少不必要的資源請求，提高網站頁面加載速度。
4. 前端緩存：使用瀏覽器緩存來存儲已訪問過的網頁和資源，以便下次快速加載。這樣可以加快頁面加載速度和減少對服務器的請求次數。
5. 去除不必要的代碼： 移除網站上不必要的代碼，減少頁面的大小和請求次數，從而提高網站速度。

這些前端優化技術可以幫助網站提高性能和用戶體驗，更快地加載網頁和減少瀏覽器請求次數，從而提高網站的質量和實用性。

彙總重點

1. 優化網站架構：確保網站的HTML、CSS、JavaScript等程式碼結構簡潔、明確，適合搜索引擎抓取收錄，提高網站的速度和表現。

2. 減少HTTP請求：透過壓縮CSS、JavaScript、圖片等資源大小，避免過多HTTP請求，減少網頁的下載時間，提高網站的速度。

3. 優化圖片：使用合適的圖片格式、壓縮算法，減少圖片大小，提高圖片加載速度，減少網頁加載時間。

4. 適當使用CDN加速：透過CDN（Content Delivery Network）加速加載網頁的靜態資源，降低網站的延遲時間，提升網站的速度和性能。

5. 優化JavaScript代碼：針對前端JavaScript代碼進行一些優化手段，如減少重複代碼、避免使用全局變量、使用緩存機制等，提高JavaScript代碼的運行性能。

6. 利用緩存機制：利用瀏覽器緩存機制，將網站的資源暫存到本地，減少了網站的HTTP請求量和載入時間，從而提高網站的速度。

7. 使用DNS Prefetching：預瀏覽DNS將在用戶訪問單一網頁之前預先解析該網頁中用到的外部資源，從而加快網站的加載速度。

8. 適當使用瀏覽器線程：瀏覽器的線程有限，利用節點，避免運行太多線程，減少網站的負載加速載入時間。

知識測驗

1. 如何最小化網站的載入時間？

答案：使用圖片壓縮技術可以減少圖片的大小、避免不必要的請求，優化CSS和JavaScript代碼以減少載入時間，開啟快取機制，以及使用CDN（內容交付網路）等方法可以減少網站的載入時間。

2. 如何優化使用者交互的速度？

答案：優化JavaScript代碼、減少HTTP請求、使用CSS Sprite技術、優化CSS設計、使用延遲加載技術和提高瀏覽器渲染速度等方法可以優化使用者交互的速度。

3. 如何減少圖片載入時間？

答案：使用圖片壓縮技術可以減少圖片的大小、使用Lazy Load延遲載入技術可以減少頁面圖片的載入時間、使用CSS Sprite技術可以減少不必要的圖片請求、使用CDN（內容交付網路）等方法可以減少圖片載入時間。

4. 如何減少HTTP請求？

答案：合併CSS、JavaScript文件、使用圖片合併技術、避免外部實體引用、使用CDN等方法可以減少HTTP請求。

5. 如何減少首次載入時間？

答案：最小化CSS和JavaScript代碼、使用延遲加載技術、使用Lazy Load延遲載入技術、使用CDN加速、使用本地存儲等方法可以減少首次載入時間。