一、節流、防抖
1. 節流
- 概括：類似于一種閥門一樣的開關函數，也就是在函數執行一次后，某段時間內暫時失效，過了這段時間后在重新激活（類似于大招的冷卻時間）
-
使用場景：
- 保存、提交防重復點擊
- 輸入框input事件
function throttle(fn,delay){
let valid = true
return function() {
if(!valid){
return false
}
valid = false
setTimeout(() => {
fn()
valid = true;
}, delay)
}
}
function showTop () {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
console.log('滾動條位置：' + scrollTop);
}
window.onscroll = throttle(showTop,1000)
2. 防抖
概括：在第一次觸發事件時，不立即執行函數，而是給一個期限值。如果在期限值內沒有觸發該方法就執行，如果在該期限值內再次執行就重新開始計時
-
使用場景：
- 滾動條事件
- 拖拽效果
- 瀏覽器resize事件（瀏覽器尺寸縮放時執行的事件）
function debounce(fn,delay){ let timer = null //借助閉包 return function() { if(timer){ clearTimeout(timer) } timer = setTimeout(fn,delay) // 簡化寫法 } } // 然后是舊代碼 function showTop () { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; console.log('滾動條位置：' + scrollTop); } window.onscroll = debounce(showTop,1000)
二、回流、重繪
1. 回流
- 概括：當頁面進行加載的時候會重新對dom元素會進行渲染，渲染的過程成為回流
2. 重繪
- 概括：當回流的時候，會有部分失效的元素屬性（樣式）或者新改變的元素屬性（樣式）進行重新繪制到頁面中，這樣的過程成為重繪
三、宏任務、微任務
1. 宏任務
- 概括：是基于宿主環境進行執行的程序隊列，比如說綁定事件、setTimeout、setInterval、ajax
2. 微任務
- 概括：是基于js引擎進行執行的任務程序隊列，比如說Promise、async/await、Object.proxy
setTimeout(function(){
console.log('1');
});
new Promise(function(resolve){
console.log('2');
resolve();
}).then(function(){
console.log('3');
}).then(function(){
console.log('4')
});
console.log('5');
// 2 5 3 4 1
四、同步、異步
1. 同步
- 概括：因為js是單線程，根據js代碼執行順序從上至下依次執行稱為同步
consoled.log(0)
let str = 1
console.log(str)
console.log(2)
// 0 1 2
2. 異步
- 概括：當程序執行到異步代碼時，會將異步代碼放置異步池里面，而不會影響同步代碼的執行，類似于Java中的多線程
console.log(1)
setTimeout(() => {
console.log(2)
})
console.log(3)
// 1 3 2
3. 區別
- 同步 會阻塞后續代碼的執行，異步 不會阻塞后續代碼的執行
五、高內聚、低耦合
1. 高內聚
- 概括：一個模塊中，里面的多個元素之間的聯系越緊密，關聯程度越高，內聚性越高
2. 低耦合
- 概括：每個模板之前聯系越緊密關聯度越高，則獨立性越差，耦合性越高
六、閉包
- 概括：函數外部可以訪問函數內部的變量
-
原理：
- 觸發垃圾回收機制
- 將數據暫時儲存起來，如果需要使用再次調用，如不需要在銷毀
- 缺點：造成內存的占用，使用不當會造成內存泄漏
- 優點：可以在外部操作作用域中的變量，減少了變量污染，相當于聲明了一個全局的私有變量
七、原型鏈
- 概括：每個函數或者類都有一個屬性 prototype，可以通過prototype訪問到自己的原型對象，類實例化的對象也可以通過_ _ proto _ _訪問到原型對象，原型對象也有自己的原型對象，依次往上直到訪問到頂層，這樣的鏈式結構被稱為原型鏈
- 優點：實現類的繼承，可以將一些方法或者屬性儲存到里面，提高方法的擴展性
八、this指向
指向場景：
- 在函數內部指向 -- window
- 在定時器中指向 -- window
- 在對象中的函數指向 -- 對象
- 在事件函數中指向 -- 事件源
- 在構造函數中指向 -- 實例化對象
- 在constructor（構造方法）中指向 -- 實例化對象
- 在類中指向 -- 實例化對象
- 再箭頭函數中指向 -- 宿主對象（父級的指向）
改變指向：
-
call() 方法
概括：如果不傳參默認指向window
參數：
- 參數1：目標this指向
- 參數2+：之后的參數就是函數的形參
var obj= { name:"lixue", age:21 } function fn(x,y){ console.log(x+","+y); console.log(this); console.log(this.name); console.log(this.age); } fn.call(obj,"hh",20); // 此時this指向對象obj -
apply() 方法
概括：不傳參默認指向window
參數：
- 參數1：目標this指向
- 參數2：不管之后有幾個參數統一寫入數組
var obj= { name:"lixue", age:21 } function fn(x,y){ console.log(x+","+y); console.log(this); console.log(this.name); console.log(this.age); } fn.apply(obj,["hh",20]); // 此時this指向對象obj -
bind() 方法
概括：該方法會創建新函數改變新函數的this指向,不會改變原始函數的this指向
參數：
- 參數1：目標this指向
- 參數2+：之后的參數就是新函數的參數
// 此方法和以上兩種方法不同, bind方法會產生一個新的函數設置新函數中的this指向 function fn(){ // 此時this指向新函數 console.log(this); console.log(arguments); return "hahahahha"; } // 產生一個新的函數,此時this指向函數 var res = fn.bind("hello",10,20,30,40); res(); console.log(res); -
區別
- call方法和apply方法都是改變原有函數的this指向，而bind方法會生成一個新的函數改變新函數的this指向
- call方法的bind方法 參數2+ 都是以平鋪的方式進行傳參，二而apply方法將參數2+ 的多個參數合并成為一個數組
九、高并發
- 概括：指的是用戶因為請求次數過多，導致的服務器負載壓力過大
-
優化：
- 減少Http請求次數
- 服務器進行負載均衡操作，將一臺服務器的壓力分發到多臺服務器上，從而減少服務器壓力
- 整合前端資源，將資源進行壓縮
- css代碼壓縮
- html代碼壓縮
- js代碼壓縮
- css圖片使用精靈圖
- css圖片使用Base64格式編碼直接嵌入頁面
十、跨域
- 概括：由于受到瀏覽器同源策略的限制，不同協議、不同端口、不同域名的情況下不可以互相訪問，如互相訪問的情況下被稱為跨域
-
實現方法：
- JSONP：通過script標簽的src屬性不受同源策略的限制實現跨域（只能支持GET請求）
- CORS：通過后端進行配置 Access-Control-Allow-Origin 屬性，實現跨域
- Nginx：通過Nginx（中間件）將請求反向代理到指定的服務器，實現跨域
十一、localStorage、sessionStorage、cookie
1. loacalStorage
- 概括：主要要來本地儲存使用，用來解決cookie儲存空間不足問題
- 優點：比cookie儲存空間大，相當于在前端有個5M大小的數據庫，安全性比較高
- 缺點：兼容性不太好（IE8以上），瀏覽器隱私模式下不可以被讀取到
-
操作：
- 儲存數據：localstorage.setItem(key,value)
- 讀取數據：localStorage.getItem(key)
- 刪除數據：localStorage.removeItem(key)
- 修改數據：localStorage.setItem(新的鍵,新的值)
2. sessionStorage
- 概括：和localStorage同為本地儲存，但是sessionStorage是會話時效，一旦瀏覽器關閉將會清除數據
- 操作：和localStorage相同
3. cookie
- 概括：瀏覽器本地儲存數據，儲存大小約為4K
-
操作：
- 儲存：document.cookie='屬性=值';expires='時間字符串';
- 讀取：document.cookie
- 刪除：設置有效期過期
十二、棧和堆
1. 棧內存
- 概括：主要儲存一些基本數據類型和復雜數據類型的地址
- 基本數據類型：String、Number、Boolean、Undefined、Null
2. 堆內存
- 概括：主要儲存一些復雜數據類型，復雜數據類型通過棧內存中的地址訪問到堆內存中對應的數據
- 復雜數據類型：Function、Array、Object
- 如有概括錯誤，歡迎各位網友斧正??
- 敬請期待后續更新?
