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

1 Like 0 留言 1652 瀏覽

鐵人賽 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 星巴哥技術週刊

3 Like 0 留言 3577 瀏覽

鐵人賽 Modern Web DAY 15

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

技術 Day15 X Tree Shaking

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

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

3 Like 0 留言 3082 瀏覽

鐵人賽 Modern Web DAY 14

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

技術 Day014 X Code Splitting & Dynamic Import

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

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

3 Like 0 留言 3442 瀏覽

鐵人賽 Modern Web DAY 13

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

技術 Day13 X CSS GPU Acceleration

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

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

1 Like 1 留言 2923 瀏覽

鐵人賽 Modern Web DAY 12

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

技術 Day12 X Writing High Performance CSS

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

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

2 Like 0 留言 5329 瀏覽

鐵人賽 Modern Web DAY 11

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

技術 Day11 X Lazy Loading

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

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

4 Like 0 留言 6311 瀏覽

鐵人賽 Modern Web DAY 10

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

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

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

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

3 Like 0 留言 2803 瀏覽

鐵人賽 Modern Web DAY 9

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

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

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

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

3 Like 0 留言 4160 瀏覽

鐵人賽 Modern Web DAY 8

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

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

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

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

2 Like 3 留言 3891 瀏覽

鐵人賽 Modern Web DAY 7

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

技術 Day07 X Image Sprites

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

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

6 Like 2 留言 7006 瀏覽

鐵人賽 Modern Web DAY 6

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

技術 Day06 X 圖片最佳化

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

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

2 Like 0 留言 3228 瀏覽

鐵人賽 Modern Web DAY 5

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

技術 Day05 X Code Minimize & Uglify

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

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

4 Like 0 留言 4117 瀏覽

鐵人賽 Modern Web DAY 4

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

技術 Day04 X Core Web Vital & RAIL Model

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

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

2 Like 2 留言 5600 瀏覽

鐵人賽 Modern Web DAY 3

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

技術 Day03 X Performance Analyzers feat. Lighthouse-CI

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

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

5 Like 0 留言 5598 瀏覽

鐵人賽 Modern Web DAY 2

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

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

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

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

0 Like 0 留言 1828 瀏覽

鐵人賽 Software Development DAY 16

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

技術 DAY16 MongoDB Explain 與 Index 建議

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

阿派 ‧ 2021-09-16

6 Like 1 留言 6758 瀏覽

鐵人賽 Modern Web DAY 1

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

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

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

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

0 Like 0 留言 3953 瀏覽

鐵人賽 Software Development DAY 15

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

技術 DAY15 MongoDB Explain 效能分析工具

DAY15 MongoDB Explain 效能分析工具針對資料庫內的資料進行查詢、新增、刪修都需要迅速地找到該筆資料，因此建立索引很重要。至於要如何評估指令...

阿派 ‧ 2021-09-15

0 Like 0 留言 2210 瀏覽

技術 CSS Animation 使 Mobile 網頁崩潰！? 效能優化篇(2) - 查看網頁效能並發現問題～

崩潰之後面對的是遲鈍上一章我們解決了網頁崩潰問題,接下來發現網頁中的動畫在電腦上順利執行,IPhone上執行起來有點鈍,而在部分入門型Android上非常Lag...

Ami ‧ 2021-07-16

0 Like 0 留言 2502 瀏覽

技術 CSS Animation 使 Mobile 網頁崩潰！? 效能優化篇(1) - 避免過長的背景圖～

崩潰的起因- 開發時期,我在網頁內放置了一段 CSS Animation的動畫,這個功能在電腦上執行一切正常,直到網頁被改成RWD版本,悲劇就發生了.....某...

Ami ‧ 2021-07-16

4 Like 1 留言 17991 瀏覽

鐵人賽 Modern Web DAY 30

你所不知道的各種前端 Debug 技巧系列第 30 篇

達標好文技術 [Day 30] Tips for Lazy Loading Images

Lazy loading 是廣為人知的網頁優化技巧，尤其應用在圖片上時能夠大幅減少效能和流量的浪費，目前也有許多圖片 Lazy loading 的套件可以使用，...

shizuku ‧ 2020-10-13 ‧團隊Outcome First

1 Like 1 留言 1782 瀏覽

鐵人賽 Modern Web DAY 25

你所不知道的各種前端 Debug 技巧系列第 25 篇

技術 [Day 25] Performance - Analyze Runtime Activities

在 Performance 面板中，為了讓開發者方便優化網頁效能，會盡可能把瀏覽器運作的過程分類為各種 Activities，開發者找出造成效能瓶頸的 Acti...

shizuku ‧ 2020-10-08 ‧團隊Outcome First

1 Like 0 留言 2685 瀏覽

鐵人賽 Modern Web DAY 24

你所不知道的各種前端 Debug 技巧系列第 24 篇

技術 [Day 24] Performance - Analyze Memory

有時候網頁會越跑越慢，到底發生了甚麼事情呢？概覽拖慢網頁效能的原因除了 JavaScript、Rendering 外，還有個可能就是用了過多的記憶體，尤...

shizuku ‧ 2020-10-07 ‧團隊Outcome First

3 Like 0 留言 3074 瀏覽

鐵人賽 Modern Web DAY 20

你所不知道的各種前端 Debug 技巧系列第 20 篇

技術 [Day 20] Performance - Critical Rendering Path

瀏覽器在繪製出整個頁面前大概經過了哪些步驟呢？什麼原因會阻止瀏覽器繪製頁面？概覽理解瀏覽器如何運作是網頁效能優化最重要的基礎，從接收到 HTML、CSS...

shizuku ‧ 2020-10-03 ‧團隊Outcome First

0 Like 0 留言 1597 瀏覽

鐵人賽 AI & Data DAY 17

看圖說故事，讓 Neo4j 重新詮釋你的資料庫系列第 17 篇

技術 Neo4j 資料庫查詢效能優化 - 起始點

上一篇文章介紹了在 Neo4j 檢視並優化執行計畫，今天會延伸這個主題，做更深入的分享。在簡單的查詢中，交給 Neo4j 決定即可；但是在非常龐大的資料庫，或是...

蛋踢球 ‧ 2020-10-02

3 Like 1 留言 3577 瀏覽

鐵人賽 Modern Web DAY 18

你所不知道的各種前端 Debug 技巧系列第 18 篇

技術 [Day 18] Performance - Overview

前端可不是功能需求都完成了就完事，Load 超慢、動畫卡卡的、點擊按鈕過了一秒才有反應等等都會讓使用者默默在心中給網站體驗扣分，尤其是第一次瀏覽時更可能直接關...

shizuku ‧ 2020-10-01 ‧團隊Outcome First

0 Like 0 留言 1569 瀏覽

鐵人賽 AI & Data DAY 16

看圖說故事，讓 Neo4j 重新詮釋你的資料庫系列第 16 篇

技術 Neo4j 資料庫查詢效能優化 - 執行計畫

在上一篇文章中，介紹了在 Neo4j 建立索引和約束，來增加查詢效率或確保資料的完整、一致性，那麼說到效率，我們怎麼知道查詢的效率好壞呢？今天要介紹的是如何讓...

蛋踢球 ‧ 2020-10-01

0 Like 0 留言 1437 瀏覽

鐵人賽 Software Development DAY 8

前端工程師不能不知道的生產力工具系列第 8 篇

技術 [Day08] 瀏覽器開發工具 - 效能篇(下)

昨天主要介紹使用 Lighthouse 幫助我們從使用者的角度來發現問題與提供解決方式。今天則是要以程式的角度，以 Performance 面板裡的 Timel...

Yuri Tsai ‧ 2020-09-23

1 Like 1 留言 3332 瀏覽

鐵人賽 Software Development DAY 7

前端工程師不能不知道的生產力工具系列第 7 篇

技術 [Day07] 瀏覽器開發工具 - 效能篇(上)

完成除錯後，接著就要幫我們開發的頁面進行效能上的檢測和優化。在現在各種裝置的普及，前端應用也愈多樣複雜，使用者對於速度也就愈要求。為了提升使用者的體驗，開發者...

Yuri Tsai ‧ 2020-09-22

0 Like 0 留言 4337 瀏覽

技術影響Query Optimizer產生執行計畫的關鍵(統計值)

什麼是統計值 SQL Server的QO(Query Optimizer)透過cost-based model來選擇一個最合適計畫(估算成本最低)來執行查詢...

石頭 ‧ 2020-04-19