第十三屆 冠軍

web
今晚,我想來點 Web 前端效能優化大補帖!
莫力全 Kyle Mo

系列文章

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