# 面試問題準備

https://ithelp.ithome.com.tw/articles/10256018?sc=rss.qu

〔JS基礎觀念〕
---

變數有效範圍與var/let/const差異
函式與函式的作用域
Hoisting提升是什麼?
Closure閉包是什麼?
Callback 回呼是什麼、Callback Hell是什麼以及為何會產生?
JS 事件傳遞機制:捕獲跟冒泡
this 指向、如何強制綁定this (call/apply/bind差異)
Event Loop
同步與非同步、promise是什麼?

〔其他網路基礎觀念〕
---
**Q: http協定是什麼?**
A: https://hackmd.io/@Heidi-Liu/note-net101

---

**Q: cookie/local Storage 如何運作?**
A:
client 儲存資料的方式有三種： cookie 、Local Storage 及 Session Storage。
cookie：是一個小型文字檔，容量只有 4k 因此實作上僅會放入 id 便於回傳 server 端提取相對應的資料（類似通行證的概念），像是廣告追蹤、購物車、登入等。
Local Storage & Session Storage：是 html5 提供的方法，兩個的差別在於資料儲存的時間性，相對於 cookie 是比較推薦的方法，打開開發者工具 Application 就可以看到資料，要特別注意的是只能儲存「字串」，所以通常會將陣列使用 JSON.stringfy() 存取，再透過 JSON.parse() 轉陣列使用

---
**Q: MVC是什麼? MVVM又是什麼?**

A:
MVC 是在 View 上綁定 Model，然後 Controller 負責處理界面整個提交請求，並且一遍遍地刷新整個 View。這種機制。所以 MVC 的標誌是 “基礎、單向綁定、一遍遍刷新 UI”。

MVVM 是UI 模板上各種控件直接跟 VM 層的屬性綁定，使得 VM 屬性改變時自動更新 UI 控件，反之 UI 控件的值改變時又自動更新 VM 屬性。這樣編程的方式就不是去一大堆控件事件處理，而是寫少量的 VM 屬性更改行爲代碼。開發精力絕大部分都放在業務與 UI 的綁定上，而並不需要研究控件內部機制。

---

Q: Restful API是什麼?

REST的全名為Representational State Transfer( 表現層狀態轉移)，REST並不是獨特的技術規範，而是一種軟體架構的風格。
遵循REST架構所設計的API便被稱為REST API，而實作REST架構的Web服務則稱為RESTful Web服務。

---

**Q: SPA是什麼?**

A: SPA 指的是單頁式應用（Single Page Application）

---

Client端跟Server端資料如何傳遞、輸入網址後頁面是怎麼render出來的?

〔版本控制〕
---
知道如何使用Git、如何push/pull、怎麼切分支。我會在最下方資源推薦區附上推薦的Github學習資源，想加強Github能力的人可以參考。

〔打包工具〕
---
稍微理解Gulp/webpack打包工具是什麼、為什麼要用、基礎使用方式

〔設計能力〕
---
有些工作會需要前端工程師自己畫設計稿，所以如果能有基礎瞭解如何用adobe XD/ Photoshop繪製設計稿，或是使用Figma（現在業界的主流），在求職的路上會有更多機會。不過如果不喜歡設計，或像我一樣認清自己設計能力不夠，也可以果斷放棄這一塊，多加強ＪＳ基礎知識、框架跟網路基礎概念，並找分工明確的公司投遞履歷。

https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_objects1


4. 現階段會不會強迫你學後端?


https://github.com/lydiahallie/javascript-questions

https://github.com/ganqqwerty/123-Essential-JavaScript-Interview-Questions

https://www.frontendinterviewhandbook.com/zh/html-questions/

https://github.com/markyun/My-blog/tree/master/Front-end-Developer-Questions/Questions-and-Answers

https://github.com/haizlin/fe-interview

https://www.indeed.com/career-advice/interviewing/top-interview-questions-and-answers?from=careeradvice-US#Q4

https://medium.com/hulis-blog/interview-prepare-b815d938f0de

是怎樣分配薪水呢？底薪是多少？

https://github.com/febobo/web-interview

https://tigercosmos.xyz/post/2023/02/software-engineer/software-engineer-grow-up-1/?fbclid=IwAR2Ox0avv2FMZkhLs6ea4TPtDXV0TCGx4Um1b0_neMW41ipjf79F4mEA2aQ

**如何理解浏览器的同源策略，它有什麼作用？如何解決跨域问题？**

**前端可以採取以下措施來預防 XSS 攻擊：**

輸入驗證：確保輸入的數據符合預期的格式和類型，可以使用正則表達式或其他驗證庫來實現。

轉義特殊字符：將輸入數據中的特殊字符轉義，例如 < 轉義成 &lt;，> 轉義成 &gt; 等等。可以使用現有的轉義函數庫，例如 htmlspecialchars 或 escape 等等。

Content Security Policy (CSP)：在 HTTP 響應頭中設置 CSP 標頭，限制頁面載入的資源。例如禁止載入外部腳本、限制內嵌腳本等等。

Sanitize：過濾輸入數據中的危險 HTML 標籤和屬性，例如 <script>、onclick 等等。可以使用現有的過濾庫，例如 DOMPurify 等等。

---

**什麼是虛擬DOM（Virtual DOM）？它有什麼作用？和真實的DOM有什麼區別？**

虛擬DOM（Virtual DOM）是一個概念，它是一個以 JavaScript 物件（Object）的形式表示真實的DOM樹狀結構的一個抽象概念，作用在於提高網頁應用的效率，避免因為直接操作真實的DOM而導致的性能瓶頸。

當在Vue或React等前端框架中更新畫面時，不會直接操作真實的DOM，而是先操作虛擬DOM。當虛擬DOM更新完畢後，比對虛擬DOM與真實的DOM的差異，然後只對真實DOM中需要更新的部分進行更新，這樣可以節省大量的計算和操作時間。

真實的DOM和虛擬DOM的區別在於：

1. 真實的DOM是瀏覽器中的一個實際的物件，它的操作會引發瀏覽器的重新渲染
虛擬DOM是一個JavaScript物件，它的操作不會引發瀏覽器的重新渲染。
2. 真實的DOM的更新成本很高
而虛擬DOM可以快速比對需要更新的部分，只對需要更新的部分進行操作，提高了效率。
3. 真實的DOM操作很容易導致內存洩漏等問題，而虛擬DOM操作可以更好地管理內存。

---

**什麼是MVC、MVP和MVVM模式？它们之间有什麼區別？**

MVC、MVP和MVVM都是前端框架常用的架構模式，共同目標都是將應用程式分成不同的模組，讓程式設計更具有可維護性、可擴展性和可讀性。

1. MVC模式代表模型-視圖-控制器模式。
模型（Model）是應用程式的數據模型，負責數據的存儲和讀取
視圖（View）是應用程式的介面模組，負責顯示數據和接受用戶輸入
控制器（Controller）是應用程式的邏輯模組，負責控制模型和視圖之間的互動和調用。

2. MVP模式代表模型-視圖-著作權人模式。
MVP與MVC很相似，但控制器被改為了著作權人（Presenter），著作權人負責處理用戶輸入、更新視圖和操作模型。

3. MVVM模式代表模型-視圖-ViewModel模式。MVVM與MVP非常相似，但著作權人（Presenter）被改為了ViewModel。ViewModel負責將模型（Model）的數據轉換為視圖（View）可用的數據格式，同時監聽模型的變化，當模型發生變化時，更新視圖。

總體而言，MVC、MVP和MVVM都是為了實現解耦、單一職責原則和可測試性而存在的。
MVC和MVP比較適合傳統的Web開發
MVVM則更適合單頁應用（SPA）和基於組件的前端開發。

---

**你對JavaScript 中的 this 理解如何？如何手动改变它的上下文？**

---
**什麼是CSS 預處理器？請舉例一下你熟悉的CSS 預處理器及其使用。**

CSS预处理器是一种将类似CSS的语言扩展为更具表现力、更易于维护的语言的工具。它们允许使用变量、嵌套规则、函数、操作符等高级功能，以及其他有助于编写CSS的功能。一些流行的CSS预处理器包括Sass、Less和Stylus。

使用CSS预处理器可以带来以下好处：

更高效的CSS编写：CSS预处理器支持嵌套和变量等功能，可以使CSS编写更加高效和易于维护。

更好的代码重用：CSS预处理器允许使用mixin（类似于函数）来生成CSS代码块，可以帮助代码重用和减少代码量。

更容易的维护：使用CSS预处理器可以将重复的代码块提取为单独的样式模块，可以更容易地维护和更新代码。

更好的可读性：通过使用CSS预处理器中的嵌套语法，可以使CSS代码更加易于阅读和理解。

兼容性：CSS预处理器可以生成普通的CSS代码，因此可以与所有现代浏览器和设备兼容。

总的来说，CSS预处理器可以帮助开发者更高效、更快速地编写CSS，并提供更好的代码组织和维护。

---

**你如何優化網站性能？請列舉你的方法。**

1. 压缩和缩小文件：压缩CSS、JavaScript和HTML文件以减少文件大小，从而提高页面加载速度。

2. 优化图片：使用适当的图片格式、压缩图片大小、使用懒加载等方法来优化图片加载速度。

3. 减少HTTP请求：减少页面的HTTP请求次数可以大幅度提高页面加载速度。可以通过合并CSS和JavaScript文件、使用CSS Sprites等方法来减少HTTP请求。

4. 优化CSS和JavaScript：优化CSS和JavaScript代码，删除不必要的代码、减小代码大小、使用异步加载等方法来提高页面加载速度。

5. 延迟加载：使用延迟加载来加载不必要的资源，例如延迟加载JavaScript和CSS文件、使用按需加载等方法。

6. 服务器优化：使用更快的服务器、优化服务器设置、使用CDN等方法来提高页面响应速度和数据传输速度。

7. HTML优化：优化HTML代码、删除不必要的标签和属性、减小文件大小、使用压缩等方法来提高页面加载速度。

8. 去除阻塞渲染：通过避免阻塞渲染来提高页面加载速度，例如将JavaScript代码放在页面底部、避免使用同步加载等方法。

9.测试和监测：使用网站性能测试工具、监测工具等方法来测试和监测网站性能，及时发现和解决性能问题。

10. 使用缓存：通过使用缓存，可以减少页面的请求次数，从而提高页面加载速度。使用浏览器缓存和CDN缓存可以进一步提高缓存效果。
---

你使用過哪些前端開發工具？你最常用哪些工具？

https://ithelp.ithome.com.tw/articles/10311275