iT邦幫忙

鐵人檔案

2021 iThome 鐵人賽
回列表
Modern Web

今晚,我想來點 Web 前端效能優化大補帖! 系列

之前在 Medium 寫了一篇「今晚,我想來點 Web 前端效能優化大補帖!」(https://reurl.cc/rgjg5O)

不過因為是屬於重點整理性質的文章,我沒有針對每個知識點做太多深入的解說,因此寫完後還是覺得自己遺漏了很多細節,礙於篇幅很多技術也沒有收錄進去。

經過思考後我認為鐵人賽是一個彌補自己遺憾的好機會!我預計把該篇文章的各個效能優化技術拉出來詳細介紹,某些主題更會搭配 Demo Code 讓讀者更容易吸收,也會加入更多我認為十分值得介紹之前卻沒有收錄到文章的優化技術,希望這次真的可以扛得起「Web 前端效能優化大補帖」這個主題名稱!

鐵人鍊成 | 共 30 篇文章 | 252 人訂閱 訂閱系列文 RSS系列文 團隊StarBugs 星巴哥技術週刊
DAY 1

達標好文 Day 01 X 系列文大綱

大家好,我是 Kyle,大家也可以叫我老莫,這次是連續第三年參加 iT 邦幫忙鐵人賽了,每次都說太累了明年絕對不比了,結果活動頁一出來還是覺得很熱血就又報名了...

DAY 2

Day02 X 為什麼要在前端做效能優化?

大家好!雖然今天是 Day 2,不過嚴格來說是系列文的第一天。今天要來談談「為什麼我們需要在前端做效能的優化?」,也許內容會比較乏味,然而在執行一件事情前先釐...

DAY 3

Day03 X Performance Analyzers feat. Lighthouse-CI

經過昨天,我們明白了效能對於前端應用的重要性,但是,我們要怎麼評估一個網站的效能呢?用感受的嗎?自己使用這個網站時還算順暢就定義為這是一個效能很好的網站嗎?當...

DAY 4

Day04 X Core Web Vital & RAIL Model

在昨天介紹網頁檢測工具時,我們看到它提供了一些看起來十分專業的 Metrics,不過光看文字還真的猜不出它們代表的是什麼意思 ? 今天第一個段落會介紹三個評...

DAY 5

Day05 X Code Minimize & Uglify

從今天開始終於要正式進入介紹前端效能優化各種技巧的章節了,如果到今天還願意繼續堅持看下去的讀者記得給自己一些掌聲 ? 如果對效能優化幾乎是零基礎的讀者也別擔心...

DAY 6

Day06 X 圖片最佳化

給你五秒鐘思考一下,你在日常生活中還有在使用沒有任何圖片,包括小小 的 Icon 也沒有的網站嗎?我想大多數人的答案都是否定的。現今的網頁應用免不了會需要載入...

DAY 7

Day07 X Image Sprites

經過昨天的一番折騰,我想讀者們都對基本的圖片優化稍有概念了,今天要介紹的優化技巧其實嚴格來說也算是圖片的優化範疇,但是跟優化圖片本身的大小無關,因此我選擇獨立...

DAY 8

Day08 X 瀏覽器架構演進史 & 渲染機制

「在未來,瀏覽器會變得越來越強,以後我們可以在瀏覽器做越來越多事。」 身為常與瀏覽器共舞的 Web 工程師,尤其是 Frontend Engineer,如...

DAY 9

Day09 X Resource Hint & Non-Blocking Script Tag

經過昨天的內容,讀者們應該對於網頁的渲染流程有大致的理解了。 我們再小小複習一下,大致上網頁的渲染流程為: 讀取 HTML 後生成 DOM Tree 讀取...

DAY 10

Day10 X 實作一個簡單的 Virtualized List 吧!

Facebook、Instagram 應該都是我們日常生活中非常依賴的社群媒體了,每天閒來無事就要滑滑動態,看看朋友最近發生了什麼事。不過你有沒有注意到一件事...