在開發流程中我們會使用到不同的工具，在組建流程我們會使用到 Bundler 這個工具。 Ｗhat is bundler? Why we need bundler? 那先來 Javascript 的 Module 的歷史吧～ 會在這個過程中發現 bundle 是怎麼開始的～ A History of JavaScript Modules and Bundling In the Beginning, Multi-Page Websites With Global Scripts 當 user 訪問不同網頁路徑時，user 會向 server request 這一個網頁路徑的靜態語言（HTML+CSS+JS)，不同的路徑會有各自的程式碼。

如何使用 Chrome 開發人員工具效能面板來分析執行階段效能 image Chrome DevTools 的 Performance 面板記錄程式執行階段的所有行為，是解決程式效能問題的最佳方案。由四個子面板構成： 控制台（Controls）: 開啟記錄，停止記錄，配置記錄期間需要記錄的內容 概括（Overviews）: 頁面表現（行為）的一個概述 CPU(CPU Resources) NET

Each time you create an object, memory is allocated, but since memory is limited, V8 recycles the memory for you through garbage collection. Garbage Collector MarkingVisualizing the Marking Process Generational Heap layout Garbage Collectors: Minor GC (Scavenger) Garbage Collectors: Major GC (Full Mark-Compact)

https://ithelp.ithome.com.tw/articles/10279519 比較表 CSR SSR (混合式) SSG ISR 運作方式

:::info :::spoiler Reference 今晚，我想來點 Web 前端效能優化大補帖！ Day18 X Service Workers Cache ::: What is Service Worker 一種特別的 Web Worker

:::info :::spoiler Reference 今晚，我想來點 Web 前端效能優化大補帖！ Day18 X Service Workers Cache ::: Outline CachingRecap Cache Strategies

前端效能優化 Day19-20 D-19 Application Shell Architecture 什麼是 Application Shell Architecture (App Shell)？ image App Shell GOAL在網路環境較差 or 離線的情境下，仍能提供較為流暢的載入（用戶）體驗。 (like APP) IMPLEMENT

本章節重點 : Server 跟瀏覽器之間的 Cache 機制 => HTTP Caching 什麼是 Cache? image 提供一個暫存可能使用到資料的額外儲存空間 Cache 是避免 client 和 sever 提出請求的一種方式 Response 的再利用性（Reusability）: 瀏覽器可以在一段時間內重複使用已經快取的回應，而不需要再次向伺服器發送請求 適合被快取的資料

https://ithelp.ithome.com.tw/articles/10275720 Polyfill-less Bundling Script & File Compression 與 Build Optimizations 相關 過去同個主題的方法 Code Splitting Dynamic Import Tree Shaking

為什麼需要 Tree shaking 提取程式碼中使用到的部分，從而最小化 bundle 的大小，並避免不必要的載入。 學習了 code splitting 與 dynamic import 技巧，可將程式打包成多個 bundle chunks，並在需要時才載入對應的 chunks，從而優化效能與載入時間。 在開發專案中我們常需下載第三方套件以節省重複開發成本，但有時只需要套件模組中的特定幾個 function，而其他 function 幾乎不會使用。 所以如果載入整個套件模組來取得少數 function，會造成不必要的資源浪費。 Tree shaking 是解決此問題的方法，能夠精確地提取程式碼中使用到的部分，從而最小化 bundle 的大小，並避免不必要的載入。 什麼是 Tree Shaking? 在打包階段就可以分析哪些 code 或哪些 function 是用不到的，而把它們從最終的 bundle 中剔除。確保最後的 bundle 不會包含無用或多餘的程式碼與資源，減少 bundle size。

如何閱讀大型開源專案的程式碼 不要為了看程式碼而看程式碼解決遇到的問題 想了解整個 React 系統結構的想法 & 實踐過程🤔 前置了解 → 本文分享內容🥹 這個專案中可以分成幾個部分 之前的交互關係是什麼 clone → local build

Day08 X 瀏覽器架構演進史 & 渲染機制 第一部分會透過簡易系統架構的角度去看瀏覽器的演進，下列是三個必備的知識點：Program 程式：是工程師撰寫的程式碼的集合，例如 Line、 Chrome 就個別是 program。而他們的特點是還沒有被執行，因此也就還沒有被載入至記憶體中，而是存放在次級儲存裝置（例如：硬碟）中。 Process 程序（對岸用語為進程）：指被執行且載入記憶體的 program。 Process 也是 OS 分配資源的最小單位，可以從 OS 得到如 CPU Time、Memory…等資源，意思是這個 process 在運行時會消耗多少 CPU 與記憶體。 Thread 執行緒（對岸用語為線程）：存在於 process 裡面，而一個進程裡至少會有一個線程。 前面有說 process 是 OS 分配資源的最小單位，而 thread 則是作業系統能夠進行運算排程的最小單位，也就是說實際執行任務的並不是進程，而是進程中的線程。

12. Writing High Performance CSS 其實瀏覽器解析 CSS 的速度非常快 不能因為 CSS不會對性能產生「巨大」的影響，就自顧自的亂寫一通 效能優化是一段追求好還要更好的過程。 CSS Selector CSS Selector 的匹配原則是「從右向左進行的」 這個最右側的選擇器又被稱作「關鍵選擇器」。

隨著網路的普及和移動裝置的使用增加，前端效能優化的重要性也隨之提高。 前端效能優化的原因 使用者體驗: 速度快的網站能提供更好的使用者體驗。 轉換率: 加速網頁載入時間可以提高轉換率，對於商業網站來說，這可能意味著更多的銷售。 SEO: 搜尋引擎（例如Google）將網站效能視為其排名的因素之一。 成本節省: 優化資源可以降低伺服器的成本和帶寬。 :::warning keep it in mind：不是單純為了達成 SEO or 速度，目的都是提升 UX。只是我們藉由 SEO 分數及速度數值去衡量 UX :::

Comparision: git rebase, git rebase -i 1. git rebase <branch>: as an alternative to merging 2. git rebase -i <previousCommit>: as a cleanup tool git rebase <branch> 除了 merging之外的另一選擇 git merge 在協同開發時的問題 :arrow_up: 同時有很多branch，想要 update 到最新的版本的話，我們的 commit 紀錄會有很多是 merge

Topic 51 Pragmatic Starter Kit Intro Civilization advances by extending the number of important operations we can perform without thinking. We can’t afford to go through pages of instructions again and again for some common operation. Ex: Build and release procedure Testing Project paperwork ... (any other recurring task on the project)

Topic 48. The Essence of Agility Agile is an adjective: it’s how you do something. Agility is your style, not you. :::info Tip 83. Agile Is Not a Noun; Agile Is How You Do Things ::: We feel that many people have lost sight of the true meaning of agility, and we’d like to see folks return to the basics. Remember the values from the manifesto: Individuals and interactions over processes and tools

Topic 45. The Requirements Pit 需求坑 Perfection is achieved, not when there is nothing left to add but when there is nothing left to take away... :::info 這章節的工作內容看起來不是開發者．．．是ＵＩＵＸ跟ＰＭ ::: requirements gathering(需求收集) :Gathering implies that the requirements are already there. Requirements are buried deep beneath layers of assumptions, misconceptions, and politics or they even don’t really exist at all. No One Knows Exactly What They Want

Topic 43. Stay Safe Out There (security) Good fences make good neighbors. The other 90% When your code works, analyze and test the code further for ways it can go wrong, for example, passing in bad parameters. Security basic principles keep it simple and minimize attack surfaces 1. Minimize attack surface area