「前端效能優化」前傳 | 前端效能優化

阿榮
發佈於前端
閱讀時間約 1 分鐘

為什麼要學前端效能優化?

有鑑於最近半年做的兩個專題,載入速度都好慢,需要等待過長的時間,才會成功呈現完整畫面,使用者體驗非常非常差,那我想面試時的 demo 效果也不會太好,趁現在有兩個大好的練習機會,速速把這個我一直很想嘗試的坑給補起來。而且學習優化效能,就可以知道什麼部分容易導致速度變慢,以後寫網頁就可以從源頭避免,預防勝於治療。

資源盤點

之前就有印象莫力全大大有寫「今晚,我想來點 Web 前端效能優化大補帖!」的系列文章,也有先把這本書買起來放 (終於可以把這頭猛獸從箱子裡解放拉)。會以這個 iT 系列文作為主要 guideline,AI 和 Google 輔助查詢了解不懂的內容。

目標成果

紀錄網站優化前後的數據,以及體感上使用的網站流暢度是否提升,並把數據變化放在 repo 的 readme 以及履歷中做為亮點。

主要放程式學習筆記,分享 Creative Coding 相關內容、作品
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
【前端基礎】為什麼前端要檢核表單內容?低成本優化前端使用者體驗在前端的開發中,除了切版與串 API 外,大部分的時間都在針對表單內容進行檢核、驗證、阻擋,一方面是讓使用者在操作頁面的過程中有良好的使用者體驗,不會因為一些例外狀況(Edge Case),例如:莫名其妙的 4xx 錯誤,導致使用者卡在某個操作流程中逃不出來,另一方面是讓傳遞到後端的資料更加正確⋯⋯
Thumbnail
avatar
Vivian Yeh
2024-02-08
前端工程師工作兩年心得,技能覆盤、願景規劃之前工作滿一年的時候有想過要寫個前端工作一年心得,但去年十月的時候手上正在開發一個時程很趕的專案,加上在寫 2022 年度的 ithome 鐵人賽,所以一直沒有時間來分享心得。 到了 2023 下半年時,自己有刻意放慢生活的節奏,終於有時間有紀錄轉職以來的歷程。
Thumbnail
avatar
Vivian Yeh
2023-11-28
[前端]Bootstrap5 客製化 (#1) 引入專案在專案建置的過程中引入 Bootstrap 並且客製化其樣式已是非常常見的事,並且隨著對 Bootstrap 以及 Sass 了解的加深,發現客製化的幅度可以非常的大跟彈性,因此想記錄這些研究與實作的過程,如果對你也有幫助,那就太好了。
Thumbnail
avatar
YJ
2023-10-16
【前端開發】TypeScript 是什麼?優化 JavaScript 開發體驗的程式語言自己在剛開始進入前端領域時,很剛好遇上需要使用 TypeScript 的案子,一開始都是跟著前輩怎麼寫就怎麼寫,不太有其他餘力來思考「為什麼」會需要寫這門程式語言,直到自己後來使用了 TypeScript 完整開發了電商的購物流程,才慢慢理解到使用 TypeScript 的好處與優勢。
Thumbnail
avatar
Vivian Yeh
2023-05-18
【前端開發】什麼是原子設計(Atomic Design)?優化網頁元件架構的設計原則前端工程師可能會隨著工作經驗的累積,而開始想要寫出更好的網頁架構,又或者是能有一套方法讓組織間的溝通、工作模式更加順暢。
Thumbnail
avatar
Vivian Yeh
2023-04-01
【前端開發】FP 基礎:純函式 & 柯里化Functional Programming 中文譯作函式程式設計,或是功能性程式設計,常簡稱為:FP,是一種透過使用純函式(Pure Funciton)進行軟體開發,且避免副作用的程式設計典範,比起宣告式的流程控制,在 FP 採用主要以表達式的方式撰寫程式碼。
Thumbnail
avatar
Vivian Yeh
2022-11-21
【前端課程】六角學院切版直播班值得推薦嗎?全勤實戰心得這一次再分享心得,主要是要跟大家聊聊,在結束 JavaScript 直播班後,我發現自己的切版技能跟不上實作功能的開發速度,於是又再投入了同樣是六角學院開的切版直播班之學習心得。
Thumbnail
avatar
Vivian Yeh
2021-08-26
【前端課程】六角學院JS直播班值回票價嗎?全勤實戰心得前陣子有讀者來信詢問我:「嗨!Vivian,我想要請問妳都是在哪裡學程式的呢?是實體課程嗎?」
Thumbnail
avatar
Vivian Yeh
2021-04-21
前端工程師都在忙些什麼?在一個風和日麗的下午,又一個JS模組/框架誕生了! 我為這個議題準備了大概兩天時間,我憑著記憶回溯過去十年到底前端圈發生什麼事,再花了不少時間去求證和紀錄分類,然而這個議題是在太大,我最後選擇了一個方向來撰寫這篇文章,不過有興趣的人,可以看看我的筆記- TLDR -
Thumbnail
avatar
金天
2020-11-22