Posts
All the articles I've posted.
瀏覽器上的合成動畫及非同合成動畫
Posted on:2023/04/13 09:17:00合成動畫和非合成動畫對於網頁性能有著不同的影響。在低階手機或執行效能較重任務時,非合成動畫可能會出現卡頓情況,增加頁面的 Cumulative Layout Shift (CLS),進而降低 Lighthouse Performance 的分數。為了避免這種情況,建議使用合成動畫來改變元素的位置、旋轉、縮放或透明度等屬性,並且不會觸發佈局和繪製階段。常用的合成動畫屬性包括 transform、opacity、filter、animation、transition、perspective 和 backface-visibility。此外,可以使用 will-change 屬性來提前告知瀏覽器將要改變的屬性,以減少重新觸發佈局和繪製階段,從而提高效能。然而,過度使用 will-change 屬性可能會降低瀏覽器效能,因此需要注意使用時機和移除不使用的情況。
magick - 非常實用的圖片轉檔工具
Posted on:2023/04/10 10:17:00這篇文章介紹了一個非常實用的圖片轉換和處理工具 magick,它可以幫助我們快速地將圖片轉換成不同的格式、壓縮圖片、調整大小、加上浮水印等。相較於線上轉換工具,使用 magick 可以更有效率地進行轉換,並提升工作效率。
多奇教育訓練 - 前端效能調校實戰:使用 Lighthouse 改善你的網站瀏覽體驗
Posted on:2023/04/09 08:00:00之前在工作上常常會被問到網站是否能加快速度,網路上資源實在是五花八門,看了各篇相關資訊後,覺得吸收度實在不佳,都是針對內文的項目一筆一筆做調整,但總體而言沒有一個完整的概念以及可以提出有依據的解決結果回報。
Intersection Observer - 換個方式來做滾動特效
Posted on:2023/04/07 13:17:00深入介紹了 Intersection Observer,透過這個 API,你可以輕鬆實現滾動相關效果,例如圖片延遲載入、無限滾動、元素淡入淡出等。如何使用 Intersection Observer 監測元素進入或離開視窗,觸發相對應的事件。除了提供基本的功能,API還支援多種參數調整,包括 root、rootMargin、threshold 等,使你更精準地控制元素的觸發時機。
EventSource - 實作一個 ChatGPT 打字機效果
Posted on:2023/04/07 09:17:00探索使用ChatGPT實現打字機效果的神奇之旅!發現透過 「EventSource」 實現 Server-Sent Events (SSE)技術,使瀏覽器和伺服器建立即時單向通信。不僅基於 Http 協議使用純文字傳遞,相比 Socket 更為簡便,且具備即時性、高相容性、網路斷開時可重新連接等優勢。深入了解客戶端和伺服器端的實現方式,並特別留意伺服器端的文字格式約定。透過 Node Express 實現伺服器端模擬,以文字內容創建引人入勝的演示效果。
在 Express 上接收 FormData 資料
Posted on:2023/03/09 09:50:00探索透過axios實現圖片上傳至express,再透過imgur API傳至imgur的流程。前端以FormData方式傳送圖片檔案,利用axios搭建API,展示單張圖片上傳的實例。後端利用multer套件處理express中的formData,支援多檔案上傳。文章提供完整前後端代碼和使用multer不同模式的示例,解決在處理express上的一些麻煩,為未來類似功能的開發提供了實用的參考和紀錄。深入了解圖片上傳流程,讓你輕鬆應對複雜的開發挑戰。
在 Android 上使用 Chrome DevTools
Posted on:2023/03/09 09:50:00學會在電腦和手機的 Chrome 上進行連接並啟用開發者工具進行前端除錯。文章詳細解說開啟 Android 開發人員選項和 USB 偵錯的步驟,包括Android不同版本的路徑。提供注意事項,例如開啟USB偵錯可能影響部分銀行APP和行動支付使用。教你如何連接電腦,並在Chrome或Edge中使用 chrome://inspect/#devices或 edge://inspect/#devices 檢查手機連線,允許授權後即可透過開發者工具進行偵錯。展示使用開發者工具元素 (element) 功能在手機上查看結果、CSS 樣式和即時調整切版,提高前端開發效率。
幾個常使用的前端 debug 方法
Posted on:2023/03/08 15:17:00深入解析前端開發中常用的debug方式,包括 console.log 系列的使用。詳細介紹中斷點 (Breakpoint) 的兩種方式:透過程式插入和瀏覽器工具中的 Sources 頁籤設定中斷點,並示範請求事件 (XHR) 的中斷點設定。讓開發者熟悉如何使用開發者工具來查看變數、程式狀態、執行流程,以及在不同情境下進行有效的除錯。提升前端開發效率,避免常見錯誤和意外狀況。