題目來源：牛客網
自我介紹
動態參數解析的解決方案
對于動態部分使用…args進行接受，可以把動態部分提取成數組
前端安全問題
CDN劫持
內容安全策略CSP
安全沙箱
Iframe
跨站腳本攻擊XSS
攻擊者通過在目標網站上注入惡意腳本，使之在用戶的瀏覽器上運行
跨站請求偽造CSRF
誘導用戶進入第三方網站，在第三方網站向被攻擊網站發送跨站請求，通過用戶的注冊憑證，繞過后臺的用戶驗證
點擊劫持
HTTP嚴格傳輸安全
數據校驗在前端還是后端
都需要，前端為了體驗，后端為了安全
websocket使用過程中存在的問題
- 連接的建立與保持
- 錯誤處理與短線重連
- 性能優化與拓展性
echarts的適配性問題
性能優化
瀏覽器
- 減少HTTP請求
- 設置瀏覽器緩存策略
- 合理添加加載動畫
資源
- 靜態資源CDN
- 靜態資源單獨域名
- GZIP壓縮
- 服務端渲染
- CSS放在頭部、JS放在底部
圖片
- 字體圖標代替圖片圖標
- 精靈圖
- 圖片懶加載
- 圖片預加載
- 使用PNG格式圖片
- 小于10k的圖片轉為base64格式
代碼
- 慎用全局變量
- 緩存全局變量
- 減少回流與重繪
- 節流+防抖
- 少用閉包
- 減少數據讀取次數
- 文檔碎片優化節點
- 減少判斷層級
- 字面量與構造式
方案
- 長列表優化
- web worker
- 避免iframe
打包
- 減少代碼體積
- 按需加載
緩存策略
緩存分為強緩存和若緩存。其中強緩存包括Expires和Cache-Control，主要是在過期策略生效時應用的緩存。弱緩存包括Last-Modified和ETag，是在協商策略后應用的緩存。強弱緩存之間的主要區別在于獲取資源時是否會發送請求
nextTick的原理
因為Vue采用的異步更新策略，當監聽到數據發生變化的時候不會立即去更新DOM，而是開啟一個任務隊列，并緩存在同一事件循環中發生的所有數據變化，減少DOM操作的次數。nextTick接受一個回調函數作為參數，并將這個回調函數延遲到DOM更新后執行
Vuex的響應式原理
Vue2在組件和實例初始化的時候，會將data里的數據進行數據劫持。被劫持過后的數據會有兩個屬性，分別是getter和setter
Vue3使用的是ES6中的代理和反射，代理用來攔截對象中任意屬性的變化，而反射用于對源對象的屬性進行操作
原型在vue中的應用
vue-router的核心
核心是路由隱射，將URL路徑隱射到Vue組件上
vue提升渲染性能的工作
前端的項目架構分類
微前端的實現方式
- Nginx路由轉發：通過Nginx配置反向代理來實現不同路徑映射到不同應用
- Iframe嵌套：父應用單獨是一個頁面，每個子應用有一個Iframe包裹，父子通過Message進行通信
- WebComponents: 每個子應用需要采用純WebComponents技術編寫組件
- 組合式應用路由分發：每個子應用獨立構建和部署，運行時由父應用進行路由管理
)
)
的方法)
