iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

3 Like 8 留言 365 瀏覽

鐵人賽 Modern Web DAY 30

今晚，我想來點 Web 前端效能優化大補帖！系列第 30 篇

技術 Day30 X 系列文總結

這是我第三年參加鐵人賽，每一次來到第 30 天，都有種如釋重負的感覺，不過同時也會感到一些遺憾，因為總是沒能把自己在開賽前預期的內容好好呈現出來。不論是主題內...

莫力全 Kyle Mo ‧ 2021-10-15 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 250 瀏覽

鐵人賽 Modern Web DAY 29

今晚，我想來點 Web 前端效能優化大補帖！系列第 29 篇

技術 Day29 X 面對高流量，前端可以做些什麼？

在現今的 Web 應用中，要建構一個穩定的大型系統，能夠處理 High Concurrency 的流量是一個不可或缺的條件，尤其是在服務的熱門時段，例如優惠活...

莫力全 Kyle Mo ‧ 2021-10-14 ‧團隊StarBugs 星巴哥技術週刊

2 Like 0 留言 256 瀏覽

鐵人賽 Modern Web DAY 28

今晚，我想來點 Web 前端效能優化大補帖！系列第 28 篇

技術 Day28 X Runtime Performance Debugging

提到 Web 前端的效能優化，有許多的技巧是聚焦在如何減少頁面的「載入時間 Loading Time」，例如 Code Splitting 透過減少需要載入的...

莫力全 Kyle Mo ‧ 2021-10-13 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 304 瀏覽

鐵人賽 Modern Web DAY 26

今晚，我想來點 Web 前端效能優化大補帖！系列第 26 篇

技術 Day26 X Memory Management In JavaScript

如果你是寫 C/C++ 的開發者，應該對記憶體管理並不陌生，如果你是後端開發者，應該會常常注意伺服器有沒有發生 Memory Leak 與 Memory 使用...

莫力全 Kyle Mo ‧ 2021-10-11 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 253 瀏覽

鐵人賽 Modern Web DAY 25

今晚，我想來點 Web 前端效能優化大補帖！系列第 25 篇

技術 Day25 X ESR: Rendering On The Edge

基本上 CDN 是現在的 Web 應用不可或缺的技術，當對被 CDN 加速過的域名發出請求時，CDN 會自動將 request 導到地理位置離使用者較近或是流...

莫力全 Kyle Mo ‧ 2021-10-10 ‧團隊StarBugs 星巴哥技術週刊

2 Like 0 留言 210 瀏覽

鐵人賽 Modern Web DAY 24

今晚，我想來點 Web 前端效能優化大補帖！系列第 24 篇

技術 Day24 X Web Rendering Architectures

今天開始正式進入系列文的最後一個章節 - Framework, Architecture and Memory Management，探索前端架構與底層實作對...

莫力全 Kyle Mo ‧ 2021-10-09 ‧團隊StarBugs 星巴哥技術週刊

2 Like 0 留言 233 瀏覽

鐵人賽 Modern Web DAY 23

今晚，我想來點 Web 前端效能優化大補帖！系列第 23 篇

技術 Day23 X WebAssembly

也許你早就聽過 WebAssembly 這個詞，傳說中它可以讓 C, C++, Rust 等系統語言的程式碼在瀏覽器上執行，解決 JS 的效能已經快要逼近極限...

莫力全 Kyle Mo ‧ 2021-10-08 ‧團隊StarBugs 星巴哥技術週刊

1 Like 2 留言 245 瀏覽

鐵人賽 Modern Web DAY 22

今晚，我想來點 Web 前端效能優化大補帖！系列第 22 篇

技術 Day22 X Web Workers

身為前端開發者，整日與 JavaScript 這門程式語言打交道，應該都知道它是一個 single-threaded 的程式語言，剛開始會覺得有點詫異，現在的...

莫力全 Kyle Mo ‧ 2021-10-07 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 397 瀏覽

鐵人賽 Modern Web DAY 21

今晚，我想來點 Web 前端效能優化大補帖！系列第 21 篇

技術 Day21 X Upgrade Your HTTP Connection

其實很多的效能優化技巧都擁有「用了不一定會讓效能變得比較快，就算有可能也是使用者難以感知的微幅進步，甚至如果使用不當會讓網頁效能變的更差」的特性。不過對於...

莫力全 Kyle Mo ‧ 2021-10-06 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 263 瀏覽

鐵人賽 Modern Web DAY 20

今晚，我想來點 Web 前端效能優化大補帖！系列第 20 篇

技術 Day20 X CDN

CDN 這個名詞在前面的篇章應該出現過蠻多次的，一直感到困惑的朋友們不用擔心，今天終於要來好好介紹它了！什麼是 CDN ? CDN 的全名為 Conten...

莫力全 Kyle Mo ‧ 2021-10-05 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 221 瀏覽

鐵人賽 Modern Web DAY 19

今晚，我想來點 Web 前端效能優化大補帖！系列第 19 篇

技術 Day19 X Application Shell Architecture

昨天介紹 Service Workers 後我們知道它是 PWA 的要素之一，且也是讓 Web App 實現離線瀏覽的關鍵技術。今天我們將延伸昨天的知識，介紹...

莫力全 Kyle Mo ‧ 2021-10-04 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 214 瀏覽

鐵人賽 Modern Web DAY 18

今晚，我想來點 Web 前端效能優化大補帖！系列第 18 篇

技術 Day18 X Service Workers Cache

如果你聽過 PWA，那麼對今天的主題ㄧ定不陌生，因為今天要講的 Service Worker 就是 PWA 的一個重要元件。不過 PWA 這個主題本身就已經足...

莫力全 Kyle Mo ‧ 2021-10-03 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 285 瀏覽

鐵人賽 Modern Web DAY 17

今晚，我想來點 Web 前端效能優化大補帖！系列第 17 篇

技術 Day17 X 初探快取＆ HTTP Caching

今天即將進入 Caching & Networking 章節的第一天，快取，是一個非常重要的技術，不論是前端還是後端，甚至是再更底層的系統開發，都ㄧ定...

莫力全 Kyle Mo ‧ 2021-10-02 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 211 瀏覽

鐵人賽 Modern Web DAY 16

今晚，我想來點 Web 前端效能優化大補帖！系列第 16 篇

技術 Day16 X Polyfill-less Bundling Script & File Compression

今天是 Build Optimizations 主題的最後一篇了，到目前為止我們已經認識了 Code Splitting, Dynamic Import 還有...

莫力全 Kyle Mo ‧ 2021-10-01 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 266 瀏覽

鐵人賽 Modern Web DAY 15

今晚，我想來點 Web 前端效能優化大補帖！系列第 15 篇

技術 Day15 X Tree Shaking

在昨天我們學會了 code splitting 與 dynamic import 的技巧，讓程式在打包時可以形成好幾個 bundle chunks，並在真的需...

莫力全 Kyle Mo ‧ 2021-09-30 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 305 瀏覽

鐵人賽 Modern Web DAY 14

今晚，我想來點 Web 前端效能優化大補帖！系列第 14 篇

技術 Day014 X Code Splitting & Dynamic Import

Code Splitting 是一個非常重要的觀念，現代網頁程式漸漸走向使用框架以模組化方式來開發，通常會透過如 webpack 等 bundler 來 ug...

莫力全 Kyle Mo ‧ 2021-09-29 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 324 瀏覽

鐵人賽 Modern Web DAY 13

今晚，我想來點 Web 前端效能優化大補帖！系列第 13 篇

技術 Day13 X CSS GPU Acceleration

其實今天的主題應該算是昨天 High Performance CSS 的延伸。大家應該都有遇過網頁的動畫有點不順暢甚至卡頓的經驗吧？是不是覺得很煩人呢？就算...

莫力全 Kyle Mo ‧ 2021-09-28 ‧團隊StarBugs 星巴哥技術週刊

0 Like 1 留言 334 瀏覽

鐵人賽 Modern Web DAY 12

今晚，我想來點 Web 前端效能優化大補帖！系列第 12 篇

技術 Day12 X Writing High Performance CSS

CSS 是前端開發者不可不學的技術之一，沒有了它就好像你做出來的網頁都沒有穿衣服一樣，有點羞於見人呀！? 但你有想過 CSS 如果亂寫也可能會影響到網頁的效能...

莫力全 Kyle Mo ‧ 2021-09-27 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 297 瀏覽

鐵人賽 Modern Web DAY 11

今晚，我想來點 Web 前端效能優化大補帖！系列第 11 篇

技術 Day11 X Lazy Loading

還記得昨天 Virtualized List 篇章開頭放的 Facebook demo 影片嗎？有沒有發現我們好像遺漏了什麼功能沒有說明？先問大家一個問題...

莫力全 Kyle Mo ‧ 2021-09-26 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 568 瀏覽

鐵人賽 Modern Web DAY 10

今晚，我想來點 Web 前端效能優化大補帖！系列第 10 篇

技術 Day10 X 實作一個簡單的 Virtualized List 吧！

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

莫力全 Kyle Mo ‧ 2021-09-25 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 317 瀏覽

鐵人賽 Modern Web DAY 9

今晚，我想來點 Web 前端效能優化大補帖！系列第 9 篇

技術 Day09 X Resource Hint & Non-Blocking Script Tag

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

莫力全 Kyle Mo ‧ 2021-09-24 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 384 瀏覽

鐵人賽 Modern Web DAY 8

今晚，我想來點 Web 前端效能優化大補帖！系列第 8 篇

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

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

莫力全 Kyle Mo ‧ 2021-09-23 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 344 瀏覽

鐵人賽 Modern Web DAY 7

今晚，我想來點 Web 前端效能優化大補帖！系列第 7 篇

技術 Day07 X Image Sprites

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

莫力全 Kyle Mo ‧ 2021-09-22 ‧團隊StarBugs 星巴哥技術週刊

2 Like 0 留言 738 瀏覽

鐵人賽 Modern Web DAY 6

今晚，我想來點 Web 前端效能優化大補帖！系列第 6 篇

技術 Day06 X 圖片最佳化

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

莫力全 Kyle Mo ‧ 2021-09-21 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 347 瀏覽

鐵人賽 Modern Web DAY 5

今晚，我想來點 Web 前端效能優化大補帖！系列第 5 篇

技術 Day05 X Code Minimize & Uglify

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

莫力全 Kyle Mo ‧ 2021-09-20 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 583 瀏覽

鐵人賽 Modern Web DAY 4

今晚，我想來點 Web 前端效能優化大補帖！系列第 4 篇

技術 Day04 X Core Web Vital & RAIL Model

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

莫力全 Kyle Mo ‧ 2021-09-19 ‧團隊StarBugs 星巴哥技術週刊

1 Like 2 留言 547 瀏覽

鐵人賽 Modern Web DAY 3

今晚，我想來點 Web 前端效能優化大補帖！系列第 3 篇

技術 Day03 X Performance Analyzers feat. Lighthouse-CI

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

莫力全 Kyle Mo ‧ 2021-09-18 ‧團隊StarBugs 星巴哥技術週刊

1 Like 0 留言 656 瀏覽

鐵人賽 Modern Web DAY 2

今晚，我想來點 Web 前端效能優化大補帖！系列第 2 篇

技術 Day02 X 為什麼要在前端做效能優化？

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

莫力全 Kyle Mo ‧ 2021-09-17 ‧團隊StarBugs 星巴哥技術週刊

0 Like 0 留言 119 瀏覽

鐵人賽 Software Development DAY 16

MongoDB披荊斬棘之路系列第 16 篇

技術 DAY16 MongoDB Explain 與 Index 建議

DAY16 MongoDB Explain 與 Index 建議 MongoDB explain - executionStats 這篇主要講解的是 Mongo...

阿派 ‧ 2021-09-16

2 Like 1 留言 1506 瀏覽

鐵人賽 Modern Web DAY 1

今晚，我想來點 Web 前端效能優化大補帖！系列第 1 篇

技術 Day 01 X 系列文大綱

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

莫力全 Kyle Mo ‧ 2021-09-16 ‧團隊StarBugs 星巴哥技術週刊