https://2020.stateofjs.com/zh-Hant/features/
👉 2020 JavaScript 使用大調查 👈
整體概要：
- 隨著工具、支援性日趨完整，對於 ES6 語法大多開發者已有一定掌握度
- TypeScript 是目前最主流的預處理
- 前端 JS 框架正向體驗排行：React, Vue, Svelte, LitElement, Preact
- 後端 JS 框架：Express 屹立不搖
- 最常使用的套件：axios, lodash, moment, data-fns, RxJS
- 主要的文字編輯器：VSCode, Vim, WebStorm
- 開發中主要使用的瀏覽器：Chrome, Firefox, Safari

最後：建立一個 JavaScript 應用程式越來越困難？Ｏ🙃

🌳 文章標題：Netflix Web 效能提升案例研究

Netflix 無疑是目前最受歡迎的串流網路電視提供業者，這篇文章描述了他們如何提升 Netflix 的使用者 Logout/Sign up , Landing Page 的效能，這篇文章主要關注在以下幾個部分

1. 載入和互動時間減少了50％ (針對 Netflix .com 的桌面 logged-out 網頁 )

裡面有提到他們是使用什麼工具來度量網頁效能 - 使用Chrome的DevTools和Lighthouse來模擬在3G連接上載入 log-out 頁面

解決方案 : 原本使用 React , 現在改用少於 300 行的 vanilla JavaScript 來取代

2. 通過從 React 和其他客戶端程式庫切換到vanilla JavaScript，JavaScript 套件大小減少了200kB。React仍在伺服器端使用。

有些前端程式採用 vanilla JavaScript ，有些則採用 Server side React ，這要看你如何 trade-off ，這篇文章有提到因為優化了使用者註冊頁面，提升了 Netflix 的使用者註冊率，想一下你是不是因為使用者註冊流程太過繁瑣或是緩慢而離開那個頁面？

3. 預取 HTML，CSS和JavaScript（React）可將未來瀏覽時間縮短30％

解決方案 - 內建的 瀏覽器 API 和 XHR prefetching. 但是內建的瀏覽器 API 只有部分瀏覽器有支援， XHR 支援度比較高

這裡面也有提到，雖然 Netflix 沒有在主頁上使用React，但他們為後續頁面預載入了它。

文章最後面的注釋也值得關注，提到了

1. 為何沒有使用 preact - Fast 3kB alternative to React with the same modern API.

2. 評估 Service Worker 做靜態資源的快取

3. 登陸網頁的 A/B testing - 要支援全世界 200 個以上的國家動態登入頁面 A/B testesting ... Orz

✍ 相關電子書與線上課程

1. 電子書 – Web Performance in Action http://bit.ly/2KdGtce

2. 對於 Server Side React 有興趣可以參考相關線上課程 - 使用 React 與 Redux 在伺服器端排版構圖 http://bit.ly/2KdXumA

3. vanilla JavaScript - Wes Bos免費 JavaScript 30 課程 http://bit.ly/2KdXLG8

https://medium.com/…/a-netflix-web-performance-case-study-c…