PWA學習筆記-1:cache、workbox基本使用

PWA 學習筆記-1:Cache、Workbox 基本使用

本篇大綱:前言:PWA會是未來趨勢啊、推薦3篇優質教學文、關於「存到快取(cache)」的就我所知、實作:註冊sw.js、如何查看是否成功註冊、sw.js實作:寫一份sw.js檔、實作:用workbox建立sw.js、實測:頁面載入速度有比較快嗎?

Google Material Design 表單標籤效果

Google Material Design 表單標籤效果

自從 Google 設計了 Material Desgin 後,表單 label 跟 input 的結合方式讓很多人「致敬」。最近想用 Netflix 追劇,在註冊的時候,就發現他們的表單就是用了一樣的效果,連 Netflix 都在用了,看來是個好設計,就決定自己來寫一個。

medium 漸進式圖片

像 Medium 的漸近式圖片加載

本篇大綱:圖片延遲載入的3種方式、Medium漸進式載入的3個步驟、Medium漸進式載入,實作程式碼部份、實測頁面讀取時間。實際把頁面用pindom去測試後,頁面讀取時間真的加快了。下面這張是一般直接讀取圖片的數據,4.57秒,下面這張是用了延遲載入後的數據,降到2.02秒。

performance api

用 Performance API 檢測檔案讀取時間

上次遇到官網的讀取時間很耗了很久,但從 Network 也沒看出是哪一支檔案造成的情形。當時一位後端就在問說前端有沒有辦法用 JS 看頁面的效能狀況?今天原本是在查別的資料,一個巧合就看到側邊的推薦文章寫了一個 Performance API,在 Google 大神的指引下,找到了這篇:Performance API