🌳 文章標題：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…

循序漸進學習 CSS 排版指令的網站（有中文）

英文版： http://goo.gl/GcEPU
繁中版： http://goo.gl/g3JuY2
#CSS
本文FB網址： https://goo.gl/GJpBKJ

CSS 在網頁設計中，可以用來「排版」、「顯示動畫」、「滑鼠移入移出動畫」等特效。特別是現在筆電、平板、手機螢幕尺寸各個不同的情況下，CSS 更是肩負起「版面自動調整（Responsive Design，又稱「自適應設計」）」的重責大任。在內容不改變的條件下，如何將版面、照片，重排縮放至每種螢幕尺寸都能舒適閱讀，更是目前網頁程式設計師的一大挑戰。而這一切，都可以靠 CSS 來完成。CSS 在網頁程式設計的重要性，自是不可言喻！

有人曾經跟我抱怨，CSS 語法艱澀難學。的確，它的一些語法邏輯，跟常見的程式語言有點不一樣。想要學會 CSS，得確實掌握「Selector」這個概念。但市面上的書籍，都是一股腦將一大堆 Selector 洋洋灑灑列出來，光看眼睛都花了，怎麼能靜下心來學習呢？

今天介紹的這個網站，可以確實幫您學會 CSS！首先，它有英、簡中、繁中...等 13 種語言版本，我看過繁中版了，翻譯得很好！閱讀上毫無困難！此外，它是用「下一頁」、「下一頁」...的方式進行整個課程。每一頁的課程都限定在特定主題，讓你不至於因為資料過多而分神。所以特別推薦給想學 CSS 排版的朋友。

這個網頁的缺點，就是它只講 CSS 排版。「CSS 屬性」這部分並沒有細講。但 CSS 最不好懂、用在 Responsive Design 上最多的，也是排版指令。所以掌握 CSS 排版指令，您大概也克服掉六成以上的難關了。

如果您真的對 CSS 很有興趣，想把它的一切「吃乾抹淨」，推薦一本最近剛出的好書：「CSS：The Missing Manual國際中文版 第四版」（博客來網址： http://goo.gl/BKoM1x ）。裡面全方位包含了 CSS 的每個細節，是本還不錯的好書。

今天推薦的內容還喜歡嗎？喜歡的話還請不吝按讚鼓勵一下喔！加點意見、轉發到自己的 Facebook 上，久而久之更能讓您成為這方面的「意見領袖」。有任何疑問，歡迎在本篇下方留言（本篇FB網址： https://goo.gl/GJpBKJ ），我會盡快回覆您的！

[海量影片] 想體驗一下被免費教學影片淹沒的快感嗎？「Derek Banas」這個 YouTube 影音教學頻道 600+ 支影片滿足你！

https://goo.gl/yhCPvl
#eLearning #FreeTrainingVideo

好的！我第一次看到這個 YouTube 影音教學頻道，噴出口的第一句就是：「你 XX 的太閒了啊！」（稱讚意味，默默收藏）

這位 Derek 老兄不知道是繼承了億萬遺產，還是因為興趣使然才猛力做教學影片的？您點進去看，從程式語言、網頁設計、電子電路、資料庫、手機 App、軟體工程、電腦繪圖...甚至於低卡飲食、如何減重、銷售技巧、行銷手法...每樣都有教學影片！您若進去看過他的頻道播放清單，您就會同意我說的話（記得點擊最下方那個「載入更多影片」按鈕，才能完整欣賞到該位老兄的豐功偉業）。

總而言之（丸尾推眼鏡）～～ 喜歡免費教學影片的人有福了！建議您直接訂閱該頻道，或者將我提供的網址加入最愛，然後每天找個三、五片來虐自己...呃...是進修自己一下，包準您程式設計進步的幅度比別人大喔！

咳咳～只丟一個連結就放生可愛的粉絲們，並非我的作風。所以我把他「與程式設計有關」的影片，分門別類地幫大家整理在下面。如果您只對某個領域有興趣，那就看我提供的清單吧！我還幫你把學習順序大致排好了喔！看到我這麼努力還不趕快把「讚」按下去！... XD （無誤）

一：快速學習系列（總計：x39）
> Learn in One Video (x39) - https://goo.gl/fnDxlo
==> 這個系列設計成「學一種語言最多不超過 90 分鐘」，適合業務、PM，或只想懂皮毛就好的人看。

二：網頁程式設計（總計：x219）
[前端網頁設計]（小計：x73）
> HTML Tutorial (x4) - https://goo.gl/pXT82h
> HTML Video Tutorial (x2) - https://goo.gl/KXZwtD
> CSS Tutorial (x7) - https://goo.gl/BaUdhp
> CSS Video Tutorial (x7) - https://goo.gl/O8DN8b
> JavaScript Tutorial (x8) - https://goo.gl/wpW0Vi
> JavaScript Video Tutorial (x11) - https://goo.gl/LONxOO
> CoffeeScript Tutorial (x2) - https://goo.gl/ADIvW6
> JQuery Video Tutorial (x9) - https://goo.gl/zRYIlv
> AngularJS Tutorial (x4) - https://goo.gl/WXfguL
> XML Tutorial (x4) - https://goo.gl/LAaFmd
> XML Video Tutorial (x7) - https://goo.gl/WH4Ajo
> AJAX Tutorial (x8) - https://goo.gl/nVItM9

[後端網頁設計]（小計：x59）
> PHP Tutorial (x12) - https://goo.gl/7RIa3s
> PHP Video Tutorial (x24) - https://goo.gl/UBdzty
> PHP Security (x6) - https://goo.gl/WjQonR
> NodeJS Tutorial (x12) - https://goo.gl/fzVKZf
> Ruby on Rails Tutorial (x5) - https://goo.gl/dFh0AQ

[網頁程式設計其它]（小計：x11）
> 介面設計 How to Layout a Website (x5) - https://goo.gl/9YInAR
> Web Services Tutorial (x6) - https://goo.gl/nr7Yj9

[無痛架站]（小計：x76）
> Wordpress Tutorial (x16) - https://goo.gl/X3qNyA
> Wordpress Theme Tutorial (x60) - https://goo.gl/Ac9V4C

三：程式語言（總計：x156）
[一般程式語言]（小計：x149）
> C Video Tutorial (x16) - https://goo.gl/wQgJVK
> Java Video Tutorial (x95) - https://goo.gl/TcVfGp
> Java Algorithms (x17) - https://goo.gl/uAQzcC
> Python Tutorial (x9) - https://goo.gl/2c0Ynj
> Python 2.7 Tutorial (x18) - https://goo.gl/yTcJSF
> 組合語言 Assembly Language (x4) - https://goo.gl/PXYlyx

[程式語言相關技巧]（小計：x7）
> 正規表示式 Regex Tutorial (x7) - https://goo.gl/x81Khr

四：資料庫（總計 x14）
[SQL]（小計：x10）
> SQL Tutorial (x6) - https://goo.gl/YClykN
> SQLite 3 Tutorial (x4) - https://goo.gl/8yHyLP

[NoSQL]（小計：x4）
> MongoDB Tutorial (x4) - https://goo.gl/QJfHnv

五：手機 App 程式設計（總計：x100）
[iOS]（小計：x4）
> Objective C Tutorial (x4) - https://goo.gl/GswBRH
[Android]（小計：x96）
> How to Make Android Apps (x29) - https://goo.gl/DjgL2R
> Android Development for Beginners (x25) - https://goo.gl/LvVODL
> Android Development Tutorial (x42) - https://goo.gl/jm1U5J

六：嵌入式系統（總計：x4）
> 電子電路 Electronics Tutorial (x4) - https://goo.gl/u1Ue0Y

七：軟體工程（總計：x65）
> 物件導向設計 Object Oriented Design (x11) - https://goo.gl/XTcjaa
> UML 2.0 Tutorial (x9) - https://goo.gl/ZF4Coq
> Design Patterns Video Tutorial (x27) - https://goo.gl/znWcZ9
> 重構 Code Refactoring (x18) - https://goo.gl/rNNpUY

八：軟體開發工具（總計：x4）
> Git Video Tutorial (x4) - https://goo.gl/lwtZfF

如果您覺得這個頻道太讚了！或覺得我整理順序、縮網址、算影片數目，搞了三個多小時沒功勞也有苦勞，那就麻煩您按讚鼓勵一下小弟吧！當然更歡迎您轉發給 Facebook 上的朋友，讓他們也感受一下什麼是「倒抽一口涼氣」... XD。有任何不瞭解的，歡迎在下方留言一起討論喔！