前端面试总结（六）
目錄
async/await和promise的區別
promise實現多請求并發
computed原理
computed和watch哪個支持異步
前端加密方法
MD5加密
vue-element-admin 導出excel
防抖和節流區別和應用場景
一、防抖 （多次觸發 只執行最后一次，重在清零）
1. 防抖的應用場景
2. 防抖的實現思路
一、節流 （規定時間內 只觸發一次，重在加鎖）
1. 節流的應用場景
2. 節流的實現思路
總結 (簡要答案)
頁面優化的方法
頁面加載渲染：
1.css放在最上面，javascript放在最下面。
2.減少重繪和回流。
重繪
回流
3.減少DOM元素的數量和深度。
4.圖片懶加載
5.預加載
渲染完成后的頁面交互優化
防抖和節流
網絡加載
1.減少http請求，合理設置http緩存。
2.避免頁面中空的href和src
3.使用異步JavaScript資源async和defer
4.為HTML指定Cache-Control或Expires.
ps：小知識?
首頁加載白屏什么原因 怎么處理：
答案一：
答案二：
解決方案
vue同頁面跳轉不刷新
方案一：給router-view添加唯一key
方案二：監控$route中的數據變化
方案三：通過beforeRouteUpdate獲取路由變化
小程序數據緩存機制
小程序數據緩存相關知識
參數
保存數據緩存
?獲取數據緩存
?示例：在onLoad中存入并獲取
注意??：
微信小程序如何刷新當前頁面或者刷新上一個頁面
async/await和promise的區別
async?它就是?Generator?函數的語法糖
參考參考??async函數實現多個請求處理_山海入夢的博客-CSDN博客_async 請求
ES6 async 函數_w3cschool
promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果。從語法上說，Promise是一個對象，從它可以獲取異步操作的消息。Promise 提供統一的 API，各種異步操作都可以用同樣的方法進行處理。
promise實現多請求并發
promise.all里面最多只能放10個請求
使用promise實現多請求并發_小約翰倉鼠的博客-CSDN博客_promise并發請求
computed原理
computed 本質是一個惰性求值的觀察者。
computed 內部實現了一個惰性的 watcher,也就是 computed watcher,computed watcher 不會立刻求值,同時持有一個 dep 實例。
其內部通過 this.dirty 屬性標記計算屬性是否需要重新求值。
當 computed 的依賴狀態發生改變時,就會通知這個惰性的 watcher,
computed watcher 通過 this.dep.subs.length 判斷有沒有訂閱者,
有的話,會重新計算,然后對比新舊值,如果變化了,會重新渲染。 (Vue 想確保不僅僅是計算屬性依賴的值發生變化，而是當計算屬性最終計算的值發生變化時才會觸發渲染 watcher 重新渲染，本質上是一種優化。)
沒有的話,僅僅把 this.dirty = true。 (當計算屬性依賴于其他數據時，屬性并不會立即重新計算，只有之后 其他地方需要讀取屬性 的時候，它才會真正計算，即具備 lazy（懶計算）特性。比如這個屬性并沒有被其他地方用到，就不會重新去計算它)
computed和watch哪個支持異步
watch
詳細請看??watch跟computed的區別_前端開發小司機的博客-CSDN博客_watch和computed的區別
前端加密方法
1、明文保存；2、對稱加密算法來保存；3、MD5、SHA1等單向HASH算法；4、PBKDF2算法；5、bcrypt、scrypt等算法。
具體請看??密碼加密的方式有哪些？-常見問題-PHP中文網
MD5加密
md5 加密: 用戶注冊時將加密后的密碼發送給后端存儲 當登陸的時候,再將加密后的密碼和數據庫中加密的密碼相匹配。 此加密無須解密實在需要解密 ，請看專家教你簡單又輕松的MD5解密方法，一看就會_哈客部落的博客-CSDN博客_md5解密?
md5的在vue中的用法:
1.安裝。
2.使用。
（1）項目中引入md5模塊。
import md5 from “js-md5”（2）在main.js里面將md5轉換為vue原型
import md5 from "js-md5" Vue.prototype.$md5=md53.示例
<input type="number" v-model="value">console.log("加密密碼："+ this.$md5(this.value))原文鏈接?vue 前端常用加密處理 md5 加密_船長在船上的博客-CSDN博客_前端md5解密
vue-element-admin 導出excel
這個好像vue-element-admin有自帶的一個方法
參考 參考?vue-element-admin 導出excel_小堅果_的博客-CSDN博客
防抖和節流區別和應用場景
一、防抖 （多次觸發 只執行最后一次，重在清零）
防抖策略（debounce）是當事件被觸發后，延遲n秒后再執行回調，如果在這n秒內事件又被觸發，則重新計時。
作用： 高頻率觸發的事件，在指定的單位時間內，只響應最后一次，如果在指定的時間內再次觸發，則重新計算時間。
1. 防抖的應用場景
- 登錄、發短信等按鈕避免用戶點擊太快，以致于發送了多次請求，需要防抖
- 調整瀏覽器窗口大小時，resize 次數過于頻繁，造成計算過多，此時需要一次到位，就用到了防抖
- 文本編輯器實時保存，當無任何更改操作一秒后進行保存
2. 防抖的實現思路
?
實現代碼：
應用示例：
一、節流 （規定時間內 只觸發一次，重在加鎖）
?節流策略（throttle），控制事件發生的頻率，如控制為1s發生一次，甚至1分鐘發生一次。與服務端(server)及網關(gateway)控制的限流 (Rate Limit) 類似。
作用： 高頻率觸發的事件,在指定的單位時間內，只響應第一次。
1. 節流的應用場景
- 鼠標連續不斷地觸發某事件（如點擊），單位時間內只觸發一次；
- 監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷。例如：懶加載；
- 瀏覽器播放事件，每個一秒計算一次進度信息等
2. 節流的實現思路
實現代碼：
// 方式1: 使用時間戳function throttle1(fn, wait) {let time = 0;return function() {let _this = this;let args = arguments;let now = Date.now()if(now - time > wait) {fn.apply(_this, args);time = now;}}}// 方式2: 使用定時器function thorttle2(fn, wait) {let timer;return function () {let _this = this;let args = arguments;if(!timer) {timer = setTimeout(function(){timer = null;fn.apply(_this, args)}, wait)}}}
應用示例：
總結 (簡要答案)
- 防抖：防止抖動，單位時間內事件觸發會被重置，避免事件被誤傷觸發多次。代碼實現重在清零 clearTimeout。防抖可以比作等電梯，只要有一個人進來，就需要再等一會兒。業務場景有避免登錄按鈕多次點擊的重復提交。
- 節流：控制流量，單位時間內事件只能觸發一次，與服務器端的限流 (Rate Limit) 類似。代碼實現重在開鎖關鎖 timer=timeout; timer=null。節流可以比作過紅綠燈，每等一個紅燈時間就可以過一批。
頁面優化的方法
頁面加載渲染：
1.css放在最上面，javascript放在最下面。
2.減少重繪和回流。
重繪
重繪：元素樣式的改變（但寬高、大小、位置等不變）
如：outline、visibility、color、background-color等
只改變自身樣式，不會影響到其他元素
回流
回流：元素的大小或者位置發生改變（當頁面布局和幾何信息發生改變的時候），觸發了重新布局導致渲染樹重新計算布局和渲染
如添加或刪除可見的DOM元素；元素的位置發生變化；元素的尺寸發生變化、內容發生變化（如文本變化或圖片被另一個不同尺寸的圖片所代替）；頁面一開始渲染的時候（無法避免）；
因為回流是根據視口大小來計算元素的位置和大小的，所以瀏覽器窗口尺寸變化也會引起回流
注意：回流一定會觸發重繪，而重繪不一定會回流
3.減少DOM元素的數量和深度。
4.圖片懶加載
5.預加載
渲染完成后的頁面交互優化
防抖和節流
網絡加載
1.減少http請求，合理設置http緩存。
2.避免頁面中空的href和src
3.使用異步JavaScript資源async和defer
4.為HTML指定Cache-Control或Expires.
ps：小知識?
前端模塊化：
根據需要和不同規則，代碼分別寫在不同文件里，這些文件都有自己的作用域。、
css模塊化的優點：
方便代碼的復用，避免命名沖突，層級結構更加清晰
原文鏈接?前端頁面優化方法_小齊睡不夠的博客-CSDN博客_前端頁面優化
首頁加載白屏什么原因 怎么處理：
答案一：
定位問題：
1、先確保網絡連接通暢。
2、查看網絡url地址是否輸入有誤。
3、打開控制臺查看報錯信息。
4、查看接口訪問是否有請求。
5、查看路由是否有path或者name的錯誤，導致加載了不存在的頁面。
可能原因：
1）URL網址無效或含有中文字符；
2）JS封裝代碼有問題；
3）緩存導致白屏；
4）硬件內存不足、進程崩潰；
答案二：
當前很多頁面都使用前端模板進行數據渲染，那么在糟糕的網速情況下，一進去頁面，看到的不是白屏就是 loading，這稱為白屏問題。
此問題發生的原因基本可以歸結為網速跟靜態資源
1、css文件加載需要一些時間，在加載的過程中頁面是空白的。 解決：可以考慮將css代碼前置和內聯。
2、首屏無實際的數據內容，等待異步加載數據再渲染頁面導致白屏。 解決：在首屏直接同步渲染html，后續的滾屏等再采用異步請求數據和渲染html。
3、首屏內聯js的執行會阻塞頁面的渲染。 解決：盡量不在首屏html代碼中放置內聯腳本。
解決方案
根本原因是客戶端渲染的無力，因此最簡單的方法是在服務器端，使用模板引擎渲染所有頁面。同時
減少文件加載體積，如html壓縮，js壓縮
加快js執行速度 比如常見的無限滾動的頁面，可以使用js先渲染一個屏幕范圍內的東西
提供一些友好的交互，比如提供一些假的滾動條
使用本地存儲處理靜態文件。
原文鏈接??首頁白屏解決與優化方案 - sunidol - 博客園
vue同頁面跳轉不刷新
方案一：給router-view添加唯一key
增加一個不同:key值，這樣vue就會識別這是不同的<router-view>了。
原理：Vue 會復用相同組件, 即 /aaa/1 =>>> /aaa/2 或者 /bbb?id=1 =>>> /bbb?id=2 這類鏈接跳轉時,?將不再執行created, mounted之類的鉤子
設置 router-view 的 key 屬性值為 $route.fullPath后，就會比較完整路徑，path和參數都會進行比較，地址發生改變時（包括參數改變），就會重新渲染頁面，組件被強制不復用, 相關鉤子加載順序為:
beforeRouteUpdate => created => mounted
方案二：監控$route中的數據變化
對router進行監控，當router發生變化時，執行初始化界面方法
//監聽函數 watch: {'$route' () {this.initData();//我的初始化方法}},方案三：通過beforeRouteUpdate獲取路由變化
beforeRouteUpdate路由更新之前，通過this.$route.query獲取的參數存在滯后性，通過to.query拿到的是最新的
beforeRouteUpdate(to, from, next) {//路由更新前，重新發請求this.getData(to.query.id)next()}小程序數據緩存機制
localStorage localStorage.setItem("key",JSON.stringify({test:123})) - 你如何測試localStorage的大小？ https://www.cnblogs.com/djjlovedjj/p/11202195.html 數據大小5M左右 永久存儲 sessionStorage 瀏覽器關閉的時候自動銷毀 cookies 1. cookies可以控制失效時間 2. 會隨著請求發送到后臺 4KB 左右小程序數據緩存相關知識
數據緩存：緩存數據，從而在小程序退出后再次打開時，可以從緩存中讀取上次保存的數據，常用的數據緩存API如下表所示：
- wx.setStorage(Object object) 存儲=> 如果存儲復雜類型，不需要序列化字符串=》直接存
- wx.getStorage(Object object) 獲取
- wx.removeStorage(Object object) 刪除
- wx.setStorageSync(Object object) 存儲=> wx.setStorage 的同步版本
- wx.getStorageSync(Object object) 獲取=> wx.getStorage 的同步版本
- wx.removeStorage(Object object) 刪除=> wx.removeStorage 的同步版本
參數
詳細參數請見
wx.setStorage(Object object) | 微信開放文檔
保存數據緩存
// 保存數據緩存 wx.setStorage({key: 'key', // 本地緩存中指定的keydata: 'value', // 需要存儲的內容（支持對象或字符串）success: res => {}, // 接口調用成功的回調函數 fail: res => {} // 接口調用失敗的回調函數 })?獲取數據緩存
// 獲取數據緩存 wx.getStorage({key: 'key', // 本地緩存中指定的 keysuccess: res => { // 接口調用成功的回調函數console.log(res.data)}, fail: res => {} // 接口調用失敗的回調函數 })?示例：在onLoad中存入并獲取
// pages/test/test.js Page({onLoad: function(options) {// 保存數據緩存wx.setStorage({key: 'key', // 本地緩存中指定的keydata: 'value', // 需要存儲的內容（支持對象或字符串）success: res => {// 獲取數據緩存wx.getStorage({key: 'key', // 本地緩存中指定的 keysuccess: res => { // 接口調用成功的回調函數console.log(res.data)},fail: res => { } // 接口調用失敗的回調函數})}, // 接口調用成功的回調函數fail: res => {} // 接口調用失敗的回調函數})} })注意??：
- 將數據存儲在本地緩存中指定的 key 中。會覆蓋掉原來該 key 對應的內容。除非用戶主動刪除或因存儲空間原因被系統清理，否則數據都一直可用。
- 單個 key 允許存儲的最大數據長度為 1MB，所有數據存儲上限為 10MB。
- 需要存儲的內容。只支持原生類型、Date、及能夠通過JSON.stringify序列化的對象。
原文鏈接? ?小程序數據緩存機制應用_流楚丶格念的博客-CSDN博客_微信小程序緩存機制
鏈接二?小程序 - 數據緩存_Yolo416的博客-CSDN博客
微信小程序如何刷新當前頁面或者刷新上一個頁面
刷新當前頁面
const pages = getCurrentPages() //聲明一個pages使用getCurrentPages方法 const perpage = pages[pages.length - 1] //聲明一個當前頁面 perpage.onLoad() //執行刷新?刷新上一個頁面
//獲取頁碼數進行刷新，跟當前頁面的刷新的方式是一樣的 var pages = getCurrentPages() pages[pages.length -2 ].onload()原文鏈接?微信小程序如何刷新當前頁面或者刷新上一個頁面_程序員里的戰斗機的博客-CSDN博客_小程序刷新當前頁面
?更全面的在這里?微信小程序----返回上一頁刷新或當前頁刷新_Rattenking的博客-CSDN博客_微信小程序 返回上一頁并刷新
總結
- 上一篇： windows无法上网：代理服务器出现问
- 下一篇： 工作流经典资料收集