javascript比較時間大小的八卦，Yahoo名人娛樂都在討論

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

容易犯下的 10 種網頁設計錯誤
（兼談「響應式設計（Responsive Design）」）

本篇告訴大家您不該犯的 10 種網頁設計錯誤。包括：

1. 您選用的字型很難閱讀
2. 您的標題字型太過「搞怪」，以至於難以閱讀
3. 沒有適當留白
4. 您的文章又臭又長（沒有適當分段）
5. 全部使用黑底白字來呈現文字
6. 開啟就會自動播放的影片或音樂
7. 還在使用 Flash
8. 把重要連結藏在下拉式功能表內（使用者要去「拉」才能發現）
9. 沒把「可點選」的連結，用清晰易懂的方式表現出來
10. 沒使用「響應式設計」

原文：
http://www.geniusstartup.com/website-usability/

其中第十項要跟大家介紹一下，否則大家不知道我在說什麼。所謂「響應式設計」，原文叫「Responsive Design」。中國大陸那邊翻譯成「自適應設計」。以語意來說，中國那邊的翻譯比較貼近原意。但是唸起來有點容易「咬到舌頭」的感覺。所以我還是用台灣這邊的翻譯「響應式設計」，作為「Responsive Design」的中文名稱。

所謂「響應式設計」，是最近很流行的一種網頁設計方法。它強調的東西只有一個：「相同的網站，在不同的設備（手機、桌機）上，要能呈現最佳的版型，供讀者閱讀」。您可以點擊 Time 的首頁：

http://www.time.com

然後把瀏覽器的外框縮小。有沒有發現它隨著外框大小不同，一直套用不同的「最佳版型」，來適應你的外框啊？這就是 Responsive Design。現在手機瀏覽當道，您的網站沒有 Responsive Design 是會被唾棄的喔！

關於 Responsive Design，可以開一門 24 小時的課程來談。不過得學會 HTML5/CSS3/JavaScript 三大神功才成。所以等大家的程度都差不多了，我會開門課談這個東西的。

希望今天的文章對大家有用！

----

原文已經提早刊載于 Google+ 秘密社團「紀老師網頁程式設計」。歡迎申請加入：
https://plus.google.com/communities/100793154849235819235
（審核時間：24 小時以內）