- 盒子水平垂直居中的方法
- 兩個盒子左右排列,實現(xiàn)左邊盒子固定寬度,右邊盒子自適應有幾種方法
- 標準盒模型和怪異盒模型
- 從瀏覽器地址欄輸入 url 到請求返回發(fā)生了什么
- css命名規(guī)范和作用域
- js有哪些數(shù)據(jù)類型凯傲,有什么區(qū)別
- 檢測數(shù)據(jù)類型的方法
- 原型和原型鏈
- 數(shù)組常用方法有用過哪些,區(qū)別
- 如果找到一個數(shù)組中出現(xiàn)次數(shù)最多的數(shù)字的下標
- cookie嗦篱、localStorage 和 sessionStorage
- js 事件循環(huán)
- 常見狀態(tài)碼
- 跨域怎么解決
- 怎樣配置反向代理冰单,還有其他方法嗎?
- 請求頭和響應頭有哪些
- 響應頭中 access-control-allow-credentials: true 代表什么
- 如何讓token 24小時自動過期
- 防抖和節(jié)流的原理及實際應用場景
- Hash 和 History 路由的區(qū)別和優(yōu)缺點灸促?
- SSR 技術(shù)和 SPA 技術(shù)的各自的優(yōu)缺點是什么诫欠?
- 雙向數(shù)據(jù)綁定原理、v-if/v-show浴栽、生命周期荒叼、父子通訊、data為什么是函數(shù)典鸡、插槽被廓、key、watch...
- 最近碰到的難點萝玷,如何解決的
- nextTick原理
- this指向
- 怎樣做緩存
- 上傳圖片怎樣做壓縮處理
- Git代碼回滾
- axios怎么做請求攔截
- 閉包及應用場景
- VUE做過哪些優(yōu)化
編碼階段
盡量減少data中的數(shù)據(jù)嫁乘,data中的數(shù)據(jù)都會增加getter和setter,會收集對應的watcher
v-if和v-for不能連用
如果需要使用v-for給每項元素綁定事件時使用事件代理
SPA 頁面采用keep-alive緩存組件
在更多的情況下球碉,使用v-if替代v-show
key保證唯一
使用路由懶加載蜓斧、異步組件
防抖、節(jié)流
第三方模塊按需導入
長列表滾動到可視區(qū)域動態(tài)加載
圖片懶加載
SEO優(yōu)化
預渲染
服務端渲染SSR
打包優(yōu)化
壓縮代碼
Tree Shaking/Scope Hoisting
使用cdn加載第三方模塊
多線程打包happypack
splitChunks抽離公共文件
sourceMap優(yōu)化
用戶體驗
骨架屏
PWA
還可以使用緩存(客戶端緩存睁冬、服務端緩存)優(yōu)化挎春、服務端開啟gzip壓縮等。
- Proxy 與 Object.defineProperty
33.常用請求方式和區(qū)別
- 前端性能優(yōu)化
1. 瀏覽器緩存
2. 防抖豆拨、節(jié)流
3. 資源懶加載直奋、預加載
4.開啟Nginx gzip壓縮
三個方面來說明前端性能優(yōu)化
一: webapck優(yōu)化與開啟gzip壓縮
1.babel-loader用 include 或 exclude 來幫我們避免不必要的轉(zhuǎn)譯,不轉(zhuǎn)譯node_moudules中的js文件
其次在緩存當前轉(zhuǎn)譯的js文件施禾,設(shè)置loader: 'babel-loader?cacheDirectory=true'
2.文件采用按需加載等等
3.具體的做法非常簡單脚线,只需要你在你的 request headers 中加上這么一句:
accept-encoding:gzip
4.圖片優(yōu)化,采用svg圖片或者字體圖標
5.瀏覽器緩存機制拾积,它又分為強緩存和協(xié)商緩存
二:本地存儲——從 Cookie 到 Web Storage殉挽、IndexedDB
說明一下SessionStorage和localStorage還有cookie的區(qū)別和優(yōu)缺點
三:代碼優(yōu)化
1.事件代理
2.事件的節(jié)流和防抖
3.頁面的回流和重繪
4.EventLoop事件循環(huán)機制
5.代碼優(yōu)化等等
- rem與em的區(qū)別
- 小程序鑒權(quán)
- 職業(yè)規(guī)劃
- 你有什么想問我的
- 平時使用圖片的格式以及它們的區(qū)別
- Webpack
- 箭頭函數(shù)
- vue3.0