資訊專欄INFORMATION COLUMN
摘要：上面代碼優化后盡量使用局部變量緩存全局變量在實際開發中盡量使用局部變量緩存全局變量，因為，到一個函數多次訪問全局變量的時候，會出現一個作用域練查找的過程，全局作用域位置越深找到的時間就越久，因此這也會涉及到性能的執行速度問題。
本來想整理一篇完整的JavaScript優化知識點出來跟大家討論分享一下的，但是由于最近個人的時間比較少，所以先整理了兩個知識點，之后有時間了再繼續整理后面的。不喜歡勿噴，有錯誤的歡迎大佬指點。1.引用 script標簽的優化
2019/05/14/01:30
多數瀏覽器都是使用單一的進程來處理用戶界面（UI）和JavaScript腳本執行，所以同一時刻只能做一件事，因此就會造成瀏覽器的堵塞狀態，JavaScript腳本執行過程耗時越久，瀏覽器等待響應的時間就越長。（也就是說當頁面加載的時候，遇到script標簽的時候，頁面加載就會被終止，等到JavaScript腳本執行完畢后，再繼續加載頁面，這樣給用戶的體驗特別不會，很容易首次加載頁面的時候出現白屏狀態。）
優化方式傳統的方式
傳統的方式就是，把JavaScript的腳本放到head標簽之后
延遲JavaScript腳本執行
1.HTML4為script標簽擴展了一個Defer屬性，指定這個屬性的script標簽的腳本不會修改DOM，因此代碼能安全的延遲執行。加上這個屬性的script標簽的腳本可以放在DOM的任意位置，當瀏覽器加載到它是，它會被下載，但不會被執行，所以不能阻塞頁面的方面，它會等到頁面加載完成后，在windown的load()函數之后執行。
2.在H5的時候，script又擴展了一個async屬性，它與defer相同點就是都是采用并行下載，不會在下載的過程造成頁面的阻塞情況；不同點就是，它們的執行時機：async加載完之后，自動執行（也就是說，當加載到它的時候，瀏覽器可以繼續往下加載頁面，當它加載完之后，它就會自動執行，而不需要等到頁面加載完之后再執行，也不用頁面加載等它執行完再往后執行）；而dafer要等頁面加載完成后才會執行。
合拼JavaSript腳本
因為每個script標簽初始下載是=時都會阻塞頁面渲染，所以減少頁面包含的script標簽數量也有助于頁面加載性能的優化。（如果頁面有很多的script標簽，沒個script標簽都會發送一次http請求（http://tool.oschina.net/jscom...），從而浪費了很多沒必要的時間，我們可以通過某些在線工具將多個script標簽合拼成一個script標簽，最終頁面只引用了一個script，也就是只發送了一次http請求，這樣加載性能會比之前加載多個script標簽快）2.作用域/鏈的優化
2019/05/15/02:05
JavaScript的作用域同樣關系到性能的問題
在es6之前JavaScript沒有什么塊級作用域所說，只有全局作用域和函數作用域。（沒什么塊級作用域有時會給我們帶很多莫民奇妙的東西），例如：一個經典的面試題：
//結果輸出什么？
for(var i = 0; i<10;i++){
setTimeout(function () {
console.log(i)
},1000)
}
我們期望的結果是輸出0-9。但是結果拼不是我們想這樣，這玩（diao）意(mao)既然輸出十次10.為什么會這樣？因為當setTimeout執行的時候，for循環已經完成，已經變成了10。
怎樣解決？（在es6沒有到來之前，一般都是同閉包的方法把作用域緩存起來）
for(var i = 0; i<10;i++){
(function(i){
setTimeout(function () {
console.log(i)
},1000)
})(i)
}
//結果輸出為0-9
最后輸出的結果就跟我們期待的一樣了，但是上面使用了閉包，閉包也涉及到作用域鏈的性能問題；因為閉包的屬性包含了與執行環境作用域相同的對象的引用，因此導致閉包里面的變量沒辦法被銷毀，從而占用了更多的內存空間，也有可能導致內存泄漏問題，所以使用閉包時還是要謹慎，它關系到內存以及執行速度。
//上面代碼優化后
for(let i = 0; i<10;i++){
setTimeout(function () {
console.log(i)
},1000)
}
2.盡量使用局部變量緩存全局變量
在實際開發中盡量使用局部變量緩存全局變量，因為，到一個函數多次訪問全局變量的時候，會出現一個作用域練查找的過程，全局作用域位置越深找到的時間就越久，因此這也會涉及到性能的執行速度問題。例如：下面這段簡單的代碼，在瀏覽器打開執行看到還是挺快的，沒什么問題；但是，它三次引用了obj.name這個全局變量，在這個查找的過程中必須遍歷整個作用域鏈，直到找到為止（幸虧這個全局變量比較淺，幸虧，這段代碼只引用了三次；要這個全局變量在window對象上面呢，要是這個全局變量會被引用幾千萬次呢），然后我們可以將這個多次被引用的全局變量，用局部變量存起來，這樣無論這個全局變量被引用多次，它都只會查找一次。
let obj = {
name:"July"
}
function Person() {
console.log(obj.name +"去吃飯",obj.name +"去睡覺",obj.name +"去打籃球")
}
Person()
//改
let obj = {
name:"July"
}
function Person() {
let name = obj.name
console.log(name +"去吃飯",name +"去睡覺",name +"去打籃球")
}
Person()
3.盡量不要使用動態作用域，因為他們會改變執行環境的作用域鏈。比如with()語句和try{}catch(){}的catch(){}字句...,它們都會改變執行環境的作用域鏈。比如下面這段代碼：with會把一個包含了obj全部屬性的新的可變變量置于作用域鏈的頭部，使得訪問obj對象屬性速度非?？?，但是訪問局部變量則變慢了，因此還是盡量避免使用。
let obj = {
name:"July"
}
function Person() {
with(obj){
console.log(name +"去吃飯",name +"去睡覺",name +"去打籃球")
}
}
Person()
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109707.html
摘要：前言月份開始出沒社區，現在差不多月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了一般來說，差不多到了轉正的時候，會進行總結或者分享會議那么今天我就把看過的一些學習資源主要是博客，博文推薦分享給大家。 1.前言 6月份開始出沒社區，現在差不多9月了，按照工作的說法，就是差不多過了三個月的試用期，準備轉正了！一般來說，差不多到了轉正的時候，會進行總結或者分享會議！那么今天我就...
摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。 本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...
摘要：函數式編程術語大全函數式編程有許多優點，它也越來越流行了。然而，每個編程范式都有自己獨特的術語，函數式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應用場景之一，就是在的握手階段，客戶端服務端利用算法交換對稱密鑰。 1、JavaScript 函數式編程術語大全 函數式編程(FP)有許多優點，它也越來越流行了。然而，每個編程范式都有自己獨特的術語，函數式編程也不例外。...
摘要：函數式編程術語大全函數式編程有許多優點，它也越來越流行了。然而，每個編程范式都有自己獨特的術語，函數式編程也不例外。作用域有兩種類似全局作用域和局部作用域。目前最重要的應用場景之一，就是在的握手階段，客戶端服務端利用算法交換對稱密鑰。 1、JavaScript 函數式編程術語大全 函數式編程(FP)有許多優點，它也越來越流行了。然而，每個編程范式都有自己獨特的術語，函數式編程也不例外。...
閱讀 1802·2021-09-03 10:50
閱讀 1333·2019-08-30 15:55
閱讀 3373·2019-08-30 15:52
閱讀 1235·2019-08-30 15:44
閱讀 946·2019-08-30 15:44
閱讀 3322·2019-08-30 14:23
閱讀 3555·2019-08-28 17:51
閱讀 2296·2019-08-26 13:52
