前端工程
項目構建
-
理解npm、yarn依賴包管理的原理，兩者的區別
-
可以使用npm運行自定義腳本
-
理解Babel、ESLint、webpack等工具在項目中承擔的作用
Babel是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
ESLint實在JS代碼中識別和報告模式匹配的工具，目標是保證代碼的一致性和避免錯誤。
-
ESLint規則檢測原理，常用的ESLint配置
ESLint 的核心是由各種 rule 組成的集合
-
Babel的核心原理，可以自己編寫一個Babel插件
-
可以配置一種前端代碼兼容方案，如Polyfill
由於 Babel 假定你的代碼將在 ES5 環境中執行，因此使用的都是 ES5 函數。如果你所使用的運行環境 對 ES5 的支持有限或不支持，例如低版本的 IE，那麼就需要使用 @babel/polyfill 來滿足需求
-
Webpack的編譯原理、構建流程、熱更新原理，chunk、bundle和module的區別和應用
編譯原理
一切皆爲模塊，由於webpack只支持js文件，所以需要用loader 轉換爲webpack支持的模塊，其中plugin 用於擴張webpack 的功能，在webpack構建生命週期的過程中，在合適的時機做了合適的事情。
構建流程
- 初始化參數：從配置文件和Shell語句中讀取與合併參數，得出最終的參數；
- 開始編譯：用上一步得到的參數初始化Compiler對象，加載所有配置的插件，執行對象的
run方法開始執行編譯； - 確定入口：根據配置中的
entry找出所有的入口文件； - 編譯模塊：從入口文件出發，調用所有配置的Loader對模塊進行翻譯，再找出該模塊依賴的模塊，再遞歸本步驟直到所有入口依賴的文件都經過了本步驟的處理；
- 完成模塊編譯：在經過第4步使用Loader翻譯完所有模塊後，得到了每個模塊被翻譯後的最終內容以及它們之間的依賴關係；
- 輸出資源：根據入口和模塊之間的依賴關係，組裝成一個個包含多個模塊的Chunk，再把每個Chunk轉換成一個單獨的文件加入到輸出列表，這步是可以修改輸出內容的最後機會；
- 輸出完成：在確定好輸出內容後，根據配置確定輸出的路徑和文件名，把文件內容寫入到文件系統。
在整個構建流程中，Webpack會在恰當的時機執行Plugin裏定義的邏輯，從而完成Plugin插件的優化任務。
module
模塊，在Webpack中一切皆模塊，一個模塊即爲一個文件。Webpack會從Entry開始遞歸找出所有的依賴模塊
chunk
代碼塊，一個chunk由多個模塊組成，它用於代碼合併與分割
bundle
由許多不同的模塊生成，它包含已經經過加載和編譯過程的源文件的最終版本。可以和chunk長的一模一樣,但是大部分情況下他是多個chunk的集合
-
可熟練配置已有的loaders和plugins解決問題，可以自己編寫loaders和plugins
nginx
-
正向代理與反向代理的特點和實例
正向代理
意思時一個位於客戶端和原始服務器之間的服務器，爲了從原始服務器取得內容，客戶端向代理髮送一個請求並指定原始服務器，然後代理向原始服務器轉交請求並將獲得的內容返回給客服端。
實例：找到一個可以訪問國外網站的代理服務器，我們將請求發送給代理服務器，代理服務器去訪問國外的網站，然後將訪問到的數據傳遞給我們
特點：服務器只清楚請求來自哪個代理服務器，而不清楚來自哪個具體的客戶端，屏蔽或隱藏了真實客戶端信息。
反向代理
指以代理服務器來接受internet上的連接請求，然後將請求轉發給內部網絡的服務器，並將從服務器上得到的結果返回給客戶端。
實例：主要用於服務器集羣分佈式部署的情況下，反向代理隱藏了服務器的信息
-
可手動搭建一個簡單的nginx服務器
Nginx由內核和模塊組成，其中，內核的設計非常微小和簡介，完成的工作也非常簡單，僅僅通過配置文件將客戶端請求映射到一個location block，而在這個location中所配置的每個指令將會啓動不同的模塊去完成相應的工作。
-
熟練應用常用的nginx內置變量，掌握常用的匹配規則寫法
-
可以用nginx實現請求過濾、配置gzip、負載均衡等，並能解釋其內部原理
開發提速
-
熟練掌握一種接口管理、接口mock工具的使用，如yapi
-
掌握一種高效的日誌埋點方案，可快速使用日誌查詢工具定位線上問題
埋點，指的是針對特定用戶行爲或事件進行捕獲、處理和發送的相關技術及實施過程。技術實質是先監聽軟件運行過程中的事件，當需要關注的事件發生時進行判斷和捕獲。
-
理解TDD與BDD模式，至少會使用一種前端單元測試框架
TDD：測試驅動開發
BDD：行爲驅動開發，二者都是敏捷開發的一種技術
簡單來說就是，TDD就是像是我點擊了這個按鈕，我觸發什麼事件去執行。BDD就是說，我點擊這個按鈕我要展現出什麼效果來
版本控制
-
理解Git的核心原理、工作流程、和SVN的區別
Git是最先進的分佈式版本控制系統。根本上是一套內容尋址文件系統。核心在於工作區、暫存區、版本庫。
工作流程
初始化一個Git倉庫，使用git init命令
添加文件到Git倉庫，分兩步，git add <file>添加多個文件，git commit -m<message>
將工作區中的文件，先保存到暫存區，當執行commit時，將暫存區中的文件保存到版本庫中。
SVN是集中式的版本控制系統，版本庫是自重存放在中央服務器的。
-
熟練使用常規的Git命令、git rebase、git stash等進階命令
git stash # 暫存當前修改，將所有至爲HEAD狀態
git stash list # 查看所有暫存
git stash show -p stash@{0} # 參考第一次暫存
git stash apply stash@{0} # 應用第一次暫存
git stash pop 恢復工作現場並且將stash中的內容也刪除
-
可以快速解決線上分支回滾、線上分支錯誤合併等複雜問題
持續集成
-
理解CI/CD技術的意義，至少熟練掌握一種CI/CD工具的使用，如Jenkins
CI 持續集成是在源代碼變更後自動檢測、拉取、構建進行單元測試的過程。持續集成是啓動管道的環節。
CD 持續部署指整個流程鏈（管道），它自動檢測源代碼變更並通過構建、測試、打包等操作運行他們以生成可部署的版本
持續部署包括持續集成，持續測試和持續交付。
Jenkins是一個開源的、可擴展的持續集成交付部署的基於web界面的平臺。
-
可以獨立完成架構設計、技術選型、環境搭建、全流程開發、部署上線等一套完整的開發流程
性能優化
-
瞭解前端性能衡量指標、性能監控要點，掌握一種前端性能監控方案
可以使用window.performance API進行簡單的監控。
-
瞭解常見的Web、App性能優化方案
頁面級優化：
1.減少HTTP請求數：設置緩存，資源合併與壓縮、雪碧圖、inline images
2.外部腳本置底
3.懶加載JS
4.精簡JS和CSS
代碼級優化：
1.JS：減少DOM操作、避免使用eval，with、減少作用域鏈查找
2.css、html、image
3.合理使用CDN
4.避免使用iframe
-
SEO排名規則、SEO優化方案、前後端分離的SEO
規則
1、在title、description和keywords標籤中佈局關鍵詞：應在20字符內，描述小於100，關鍵詞控制在200字符內
2、在網站導航、欄目將名稱和文章標題等重要位置部署關鍵詞
3、在連接中部署關鍵詞
優化方案
1、網頁頭部meta優化：包含三大標籤title、keywords、description填寫正確內容
2、網站H標籤代碼優化：H1標籤只出現一次
3、a標籤優化
4、img標籤優化：上傳圖片一定填寫alt屬性
SEO本質是一個服務器向另一個服務器發起請求，解析請求內容。但一般來說搜索引擎是不回去執行請求到的js的。也就是說，如果一個單頁應用，html在服務器端還沒有渲染部分數據數據，在瀏覽器才渲染出數據，而搜索引擎請求到的html是沒有渲染數據的。 這樣就很不利於內容被搜索引擎搜索到。 所以服務端渲染就是儘量在服務器發送到瀏覽器前 頁面上就是有數據的。
-
SSR實現方案、優缺點、及其性能優化
-
Webpack的性能優化方案
-
Canvas性能優化方案
-
React、Vue等框架使用性能優化方案
前端安全
-
XSS工具的原理、分類、具體案例，前端如何防禦
原理：跨站腳本攻擊，通過web站點漏洞，向客戶端交付惡意腳本代碼，實現對客戶端攻擊目的。
分類：
1、存儲型（持久型）===> 將js腳本上傳至server，其他用戶訪問server時都會加載這個js。eg：論壇發帖。server沒有對帖子內哦那個進行過濾，導致上傳了一段js腳本
2、反射型（非持久） ===> client將惡意js發給server（可將js包含在get請求頭中），server再將這個js返回給client，client就能在瀏覽器中運行這個js了
3、DOM型（也屬於反射型） ===> 不必將js上傳至server就能在client執行
反射型 XSS 跟存儲型 XSS 的區別是：存儲型 XSS 的惡意代碼存在數據庫裏，反射型 XSS 的惡意代碼存在 URL 裏。
-
CSRF攻擊的原理、具體案例，前端如何防禦
原理：跨站請求僞造，攻擊者誘導受害者進入第三方網站，在第三方網站中，向被攻擊網站發送跨站請求。
防護策略：同源檢測、CSRF Token、分佈式校驗、雙重Cookie
-
HTTP劫持、頁面劫持的原理、防禦措施
HTTP劫持
在用戶的客戶端與其要訪問的服務器經過網絡協議協調後，二者之間建立了一條專用的數據通道，用戶端程序在系統中開放指定網絡端口用於接受數據報文，服務器端將全部數據按指定網絡協議規則進行分解打包，形成連續數據報文。
在用戶的瀏覽器連上被訪問的網站服務器，發送了HTTP請求後，運營商的路由器會首先收到此次HTTP請求，之後運營商路由器的旁路設備標記此TCP連接爲HTTP協議，之後可以搶在網站服務器返回數據之前發送HTTP協議的302代碼進行下載軟件的劫持，瀏覽器收到302代碼後就會跳轉到錯誤的軟件下載地址下載軟件了，隨後網站服務器的真正數據到達後反而會被丟棄。或者，旁路設備在標記此TCP連接爲HTTP協議後，直接返回修改後的HTML代碼，導致瀏覽器中被插入了運營商的廣告，隨後網站服務器的真正數據到達後最終也是被丟棄。
防禦措施
HTTPS