iT邦幫忙

2022 iThome 鐵人賽

DAY 20
0
Modern Web

擊敗前端面試大作戰!系列 第 20

[擊敗前端面試大作戰] 前端優化

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20221004/20148825GG6WjiFbX3.png

今天是擊敗前端面試大作戰的第二十篇了!!!!我們前面討論了 HTML/CSS、Javascript、React 和 Typescript,基本上主要面試會考到的地方都帶過了,接下來要討論的就是在構建一個網站後,怎麼去確保使用者的使用經驗是好的,像是我們都有遇過點開一個網頁然後畫面跑很久或是很當的情況,我們要怎麼去透過優化去增加使用者體驗,會是這系列文章的重點!!!

那這系列文章我會從前端的角度去討論怎麼優化網頁,總共會有四篇文章,第一篇我們會先來討論要用哪些指標來分析網頁的效能,然後會介紹常見的 core Web vital,然後第二篇會接續去講 image 的優化方法,第三篇會討論現今所流行 SSR 跟 CSR 的利與弊端,最後一篇會透過討論 React 框架的優化跟實作 dethrottle 和 debounce 來做結尾!讀者可以看到在優化的部分我們總共放了四篇的篇幅,因為這是我覺得前端面試最能加分的地方,前面講的東西很多東西都是底部的運作方式,像是 JS 的 event loop, react 的 reconciliation 等,在實際寫程式是並不會直接的遇到,通常是在面試時才會考到。但是前端優化的部分,不只在面試中會遇到,並且在工作時也實際上會遇到,因此這方面多專研的話,不管是對工作或是找工作都有很大的幫助!

這裡我會列出幾個我覺得很不錯的優化學習資源,有興趣的讀者可以去參考看看~

  1. patterns.dev
    第一篇時就有介紹到這個網站,他們的文章不管是優化或是 Design pattern 等其他主題都很值得一讀。其內容很精彩,但更厲害的是它有非常豐富的圖表,所以很適合跟我一樣懶得看字的人去學習!
  2. Kyle Mo 的效能系列文章
    我在第一篇也有介紹到他,他的這系列優化文章寫得非常的詳細,看完之後讓我覺得優化功力大增!

以上就是今天簡短的一個優化介紹,那我們就明天開始正式進入優化正文吧!明天見!


上一篇
[擊敗前端面試大作戰] Typescript narrowing and Type guard
下一篇
[擊敗前端面試大作戰] 來認識Core Web Vital 三劍客 和 lighthouse吧!
系列文
擊敗前端面試大作戰!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言