自幹 React Img LazyLoad 元件

為什麼要使用圖片 LazyLoad? 1. 減少頻寬浪費 圖片與影片是網站中最吃資源的元素之一,尤其在行動網路環境下,過度 PreLoad 預載會導致頻寬浪費。LazyLoad 可延遲非可視範圍內的圖片載入,只在使用者滑動到該區域時才載入圖片。 2. 提升首次載入速度 圖片載入不只是下載,還會耗用瀏覽器 CPU 解析與渲染時間。 LazyLoad 可避免瀏覽器在首次載入時就忙著處理整頁圖片,提升 First Paint 時間,讓內容更快顯示。

Firebase Storage 入門

關於 Firebase Firebase 是 google 的雲端資料庫平台,提供了很多 APP、WEB 所需要的後端功能,如果只是小專案完全可以用 Firebase 雲端來取代我們 local 安裝操作 DB 的需求。 其他介紹就不多闡述啦,因為這篇筆記不講 Cloud Firestore 和 Realtime Database ,而是單純以

JavaScript Spread Operator 與 Array.concat 的比較

前言 在 JavaScript 開發中,陣列操作是不可或缺的一環,而「陣列合併」更是經常出現的需求。在幾年前我寫過筆記 https://tech.simonallen.app/es6-spread-operator-array/,但進入現職公司後,我反而看到的都是 concat()。 其實不論是在資料處理、狀態更新,還是函式參數傳遞時,我們都會面臨選擇:該用 concat() 方法,還是使用語法更簡潔的

React v14 和 v16 Style 行內樣式的雷

昨天在公司遇到 React Style 行內樣式的雷,害我 dubug 了老半天。 是這樣的我們公司有兩個 B2C 的網站平台長得很像,差異只在顏色與風格不同,一個網站前端是 React v14,另一個相對新是用 React v16,而兩個網站很多功能都要一樣,所以一個前端元件寫好後要想辦法讓 React 的 14 版和 16 版共用,

Episode

00:00:00 00:00:00