1.資料決議
將不能被直接使用的資料，通過某種方法轉變為可以直接使用的資料的程序，稱為資料決議
最常見的資料決議就是將字串資料決議為物件資料
代碼示例如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>資料決議</title>
<style>
span{display: inline-block; width: 90px;}
.submit{
margin: 5px 50px;
padding: 2px 5px 2px 5px;
height: 30px;
width: 70px;
letter-spacing: 1px;
text-align: center;
}
input{height: 20px;margin: 3px 0px;}
button{width: 90px;height: 30px;letter-spacing: 3px;margin: 5px 40px;}
</style>
</head>
<body>
<form action="">
<span>Name:</span><input name="userName" type="text"/><br/>
<span>Age:</span><input name="age" type="text"><br/>
<span>Sex:</span><input name="sex" type="text"><br/>
<span>Nationality:</span><input name="nation" type="text"><br/>
<input type="submit" value="https://www.cnblogs.com/husa/p/Submit">
<!-- <input type="button" value="https://www.cnblogs.com/husa/p/Submit">--> <!--不具有提交資訊的功能！-->
<!-- <button type="submit" value="">Submit</button>--> <!--有提交資訊的功能！-->
</form>
<button>資料決議</button>
<script>
var btn=document.querySelector('button');
btn.onclick=function () {
var getStr=document.location.search; //獲取當前網頁地址中的查詢資訊
console.log(getStr);
var getArr=getStr.slice(1).split('&'); //將字串截取后指定分隔符切片，回傳值為陣列
console.log(getArr);
var resObj={};
for (var i=0;i<getArr.length;i++){
var getObj=getArr[i].split('='); //將陣列中的每一個元素，通過分隔符再次分別拆分成陣列
console.log(getObj);
resObj[getObj[0]]=getObj[1]; //向物件中寫入屬性和屬性值，即鍵值對
}
console.log(resObj);
var resObjKsArr=Object.keys(resObj); //獲取物件的全部屬性，回傳值為陣列
console.log(resObjKsArr);
return resObj;
}
</script>
</body>
</html>
知識碎片：
① <input>標簽的name屬性作用：
name屬性規定<input>標簽的名稱
用于在js中參考元素，或提交表單后參考表單資料
只有設定了 name屬性的表單元素，才能在提交表單時傳遞元素的Value值
② <input type='submit'>與<button>的區別
<input type='submit'>與<button type="submit">具有相同作用
<button>應用場景更多，可實作更多復雜的功能和效果
<input type='submit'>通常作為表單提交按鈕的習慣性用法
③ 獲取當前HTML的URL內提交資訊
④ 字串、陣列、物件之間轉換
split，根據指定的符號將字串進行分割，分割后的所有子字串整合成為一個陣列回傳
join，將陣列轉換為字串，默認用逗號隔開
點號和中括號運算子都可以用于為物件屬性賦值，當屬性不存在時添加屬性，當屬性存在時修改屬性
2.JavaScript引擎
JavaScript引擎由兩部分構成：渲染引擎、js解釋器
渲染引擎作用：
① 決議代碼：將HTML代碼決議為DOM樹
② 物件合成：CSS和DOM合成一顆渲染樹
③ 布局：計算出渲染樹的布局
④ 繪制：將渲染樹繪制到螢屏
注意，上述四個步驟不一定嚴格按照順序執行
JavaScript解釋器：
能夠將 js代碼解釋成可以在網頁中實作的工具
3.頁面加載優化
① defer延遲
defer屬性規定應該等待所有HTML檔案加載完成后，再判斷 js腳本是否執行
避免因外部檔案過大或者網路卡頓造成的檔案阻塞
defer屬性僅適用于外部腳本
書寫格式：<script src="https://www.cnblogs.com/husa/p/test_script .js" defer></script>
② async異步
<script>標簽中的 js腳本默認是在DOM加載程序中同步執行的，通過 async屬性可以改變腳本的執行方式
設定 async屬性后，DOM加載與 js腳本加載異步執行，即同時進行
async優點：避免了因DOM檔案過大導致的“檔案加載阻塞”
async缺點：無法確定 js腳本到底何時執行（完成），且async屬性僅對外部 js腳本生效
書寫格式：<script src="https://www.cnblogs.com/husa/p/test_script .js" async ></script>
兩種方式的應用：
如果 async=“async”，外部js腳本相對于頁面其余部分異步執行
如果不使用 async且 defer=“defer”，外部 js腳本將在頁面完成決議時執行
如果 async與 defer都不使用，則在瀏覽器決議頁面之前，立即讀取并執行外部 js腳本
通常在優化頁面加載時 async使用較多，但如果外部js腳本不影響檔案內容，可以使用 defer以便加快處理檔案的速度
note：defer與 async都是一個布爾屬性，因此，“元素節點 .defer || async”的回傳值為 true || false
4.瀏覽器性能優化
① reflow（回流），當頁面中的部分或者全部元素改變寬度和高度、位置發生變化、洗掉或者增加元素、某個(些)元素隱藏或顯示時，這時頁面的重新加載稱為回流
② repaint（重繪），當頁面中的可見性發生變化時，我們說頁面發生了重繪，比如背景顏色、文字顏色等
③ 回流必將引起重繪，重繪不一定引起回流
由此可知，重繪的代價是高昂的，因為瀏覽器必須驗證DOM樹上其他節點元素的可見性
回流更是瀏覽器性能的關鍵，因為其變化涉及到部分頁面甚至整個頁面的布局，一個元素的回流會導致其所有子元素以及DOM中緊隨其后的祖先元素的回流
如果減少重繪和回流，提高瀏覽器性能？
① 不要一項一項的去改變樣式，盡可能一次性寫完，中間不被打斷
② 讀寫 DOM盡量放在一起
③ 使用檔案碎片，var temp=document.createDocumentfFragment();
創建檔案碎片充當臨時容器，減少 js和HTML之間的互動，示例如下：
temp .appendChild( creatNewElem1 );
temp .appendChild( creatNewElem2 );
temp .appendChild( creatNewElem3 );
document .body .apependChild( temp );
④ 使用 fixed或 absolute可以減少回流和重繪
⑤ 把發生重繪的代碼推遲到下一次重繪發生時一起執行
window.requestAnimationFrame( function(){
for( var i=0; i<div.length; i++){
div[i].style.backgroundColor='red';
}
};);
5.window.history物件
表示整個瀏覽器的頁面堆疊物件
（堆疊為水杯容器，后進先出；堆為管道容器，先進先出）
物件中提供了一些屬性和方法幫助更好地控制整個瀏覽器中頁面的訪問
① window .history .back(); 跳轉到堆疊中的上一個頁面
② window .history .forward(); 跳轉到堆疊中的下一個頁面
③ window .history .go(num); 跳轉到堆疊中的指定頁面（當前頁num=0）
④ window .history .length；堆疊中頁面的數量
note：通過window .history物件中提供方法進行頁面跳轉并不會向堆疊中添加新的頁面
而通過 window.location.href或者 <a>標簽進行的跳轉，則會向堆疊中添加新的頁面
在指定位置添加頁面（內容）時，會將該位置之后的頁面（內容）退堆疊
6.函式的“道岔”
語法：函式 .call（函式的呼叫者，函式引數1，函式引數2，...）;
函式 .apply（函式的呼叫者，[函式引數1，函式引數2，...]）;
函式的呼叫者是 call和 apply的第一個引數，而后的引數是執行函式需要的引數
call和 apply都是window提供的，能夠改變函式的實際呼叫者，也就是函式中 this的指向
call和 apply的第一個引數必須寫（可以為 null/none），而其余引數可以不寫
call() 方法傳引數時，用逗號分隔每個引數；而apply() 方法傳引數時，采用陣列的形式傳遞
7.閉包
很多時候，需要在函式外讀取函式內部的區域變數，但正常情況下在 js中是不允許的，
而通過閉包方式將函式內部的區域變數傳遞到函式外部
所謂閉包就是在函式內部再封裝一個讀取區域變數的函式，并將這個內部函式作為回傳值供外部呼叫
閉包的主要用途：
① 通過閉包，在函式外部讀取函式內區域變數的值
② 讓區域變數始終生存在記憶體當中，避免被垃圾回識訓制殺死
閉包的注意事項：
① 由于閉包會使函式中的變數被保存在記憶體中，記憶體消耗過大，所以不能濫用，否則會造成網頁的性能問題，在IE中可能導致記憶體泄漏
解決方法：在結束函式之前，將不使用的區域變數全部洗掉
② 閉包會在父函式外部改變父函式內部變數的值，一定不要隨意改變父函式內部變數的值
如果把父函式當做物件(Object)，那么閉包就好比是物件的公用方法(Public Method)，而內部變數就是物件的私有屬性(PrivateValue)
③ 由于閉包的實際呼叫者都是 window，因此所有閉包中的 this均指向了 window
如果一定要在函式中通過 this呼叫函式中的變數，可以使用 call或 apply變更閉包中 this的指向
8.this用法小結
① this在正常函式中，誰呼叫的函式，this指向誰
② this在閉包中，閉包中的this指向 window
③ 間隔呼叫和延遲呼叫，setInterval和 setTimeout中的 this指向 window
④ 事件中的 this
HTML中，this指向 window
DOM0中，指向系結該事件的元素
DOM2中，IE環境 this指向window，非IE環境 this指向系結該事件的元素
⑤ 自執行函式，this指向 window，自執行函式語法：( function(){ 函式體 }() );
⑥ call()和 apply()方法，this指向方法中的第一個引數
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/931.html
標籤：JavaScript
上一篇：Chrome影片除錯最佳實踐
下一篇：CSS常考知識點