iT邦幫忙

performance相關文章
共有 51 則文章
鐵人賽 Modern Web DAY 30

技術 Day30 X 系列文總結

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

鐵人賽 Modern Web DAY 29

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

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

鐵人賽 Modern Web DAY 28

技術 Day28 X Runtime Performance Debugging

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

鐵人賽 Modern Web DAY 26

技術 Day26 X Memory Management In JavaScript

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

鐵人賽 Modern Web DAY 25

技術 Day25 X ESR: Rendering On The Edge

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

鐵人賽 Modern Web DAY 24

技術 Day24 X Web Rendering Architectures

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

鐵人賽 Modern Web DAY 23

技術 Day23 X WebAssembly

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

鐵人賽 Modern Web DAY 22

技術 Day22 X Web Workers

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

鐵人賽 Modern Web DAY 21

技術 Day21 X Upgrade Your HTTP Connection

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

鐵人賽 Modern Web DAY 20

技術 Day20 X CDN

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

鐵人賽 Modern Web DAY 19

技術 Day19 X Application Shell Architecture

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

鐵人賽 Modern Web DAY 18

技術 Day18 X Service Workers Cache

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

鐵人賽 Modern Web DAY 17

技術 Day17 X 初探快取 & HTTP Caching

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

鐵人賽 Modern Web DAY 16

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

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

鐵人賽 Modern Web DAY 15

技術 Day15 X Tree Shaking

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

鐵人賽 Modern Web DAY 14

技術 Day014 X Code Splitting & Dynamic Import

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

鐵人賽 Modern Web DAY 13

技術 Day13 X CSS GPU Acceleration

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

鐵人賽 Modern Web DAY 12

技術 Day12 X Writing High Performance CSS

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

鐵人賽 Modern Web DAY 11

技術 Day11 X Lazy Loading

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

鐵人賽 Modern Web DAY 10

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

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

鐵人賽 Modern Web DAY 9

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

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

鐵人賽 Modern Web DAY 8

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

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

鐵人賽 Modern Web DAY 7

技術 Day07 X Image Sprites

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

鐵人賽 Modern Web DAY 6

技術 Day06 X 圖片最佳化

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

鐵人賽 Modern Web DAY 5

技術 Day05 X Code Minimize & Uglify

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

鐵人賽 Modern Web DAY 4

技術 Day04 X Core Web Vital & RAIL Model

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

鐵人賽 Modern Web DAY 3

技術 Day03 X Performance Analyzers feat. Lighthouse-CI

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

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Software Development DAY 16
MongoDB披荊斬棘之路 系列 第 16

技術 DAY16 MongoDB Explain 與 Index 建議

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

鐵人賽 Modern Web DAY 1

技術 Day 01 X 系列文大綱

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