前端面试总结(六)
目錄
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无法上网:代理服务器出现问
- 下一篇: 工作流经典资料收集
