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