1.前後端數據傳輸——JSON
本來用XML傳輸數據
<student>
<name>deng</name>
<age>40</age>
</student>
數據庫的基礎格式也是XML
現在改爲對象的形式，即JSON
{
"name" : "deng",
"age" : 40
}
通常對象的屬性名可加或不加雙引號，但爲了將JSON與對象區別，要求JSON屬性必須加雙引號
- 傳輸形式——字符串
‘{"name" : "deng","age" : 40}’
- 靜態類JSON的方法
（1）JSON.stringgify(obj)
將對象轉換爲字符串的形式，給對象屬性和整體加引號
obj = {
name : "deng",
age : 40
}
JSON.stringgify(obj);
// 轉換爲 ‘{"name" : "deng","age" : 40}’
（2）JSON.parse(obj)
將後端傳來的字符串形式JSON轉換爲對象格式
HTML和CSS是同時加載的 DOM樹要先解析完再加載資源 DOM——深度優先，將一條枝幹識別後再識別另一條枝幹 深度優先和廣度優先
<img>標籤先被掛在DOM樹上，圖片資源後來再加載 然後再加載cssTree最後 組合成渲染樹renderTree = domTree + cssTree
DOM優化前提：要儘量減少節點的增加刪除或一次修改完（減少reflow重排——DOM節點的增刪改查、節點的寬高變化、求尺寸的offsetWidth，因爲要求尺寸要在渲染頁面的過程中）
repaint 重繪：只改變局部的，比如改變字體顏色、背景顏色
2.異步加載JS
- defer異步加載
要等到dom文檔全部解析完纔會被執行，只有IE能用，也可以將代碼寫到內部。 - async異步加載
加載完就執行（異步執行，不影響dom樹加載），只能加載外部腳本，不能把JS寫在script標籤裏
標籤中的屬性名和屬性值相同時可以省略屬性值，比如
<sript src = "a.js" async></sript>
- 創建script插入到DOM中，加載完畢後callback（最常用，且功能強大）
<script type = "text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
// 加上源屬性，開始異步下載tools.js
script.src = "tools.js";
// 將標籤置於頁面中，可以執行tools.js
document.head.appendChild(script);
//此時若要執行tool.js中的函數test()
//test();
//將會報錯沒有test()這個函數
//因爲在異步下載tools.js時，會繼續執行接下來的語句，但是下載的比執行的慢
//若是將函數改成定時器作用下的
//setTimeout(test(), 1000);讓其在下載完JS後再執行
//使用onload函數判斷是否加載完畢（除了IE）
script.onload = function() {
test();
}
</script>
- IE中特有的異步加載方法
狀態碼 script.readyState = “loaded” 或 “complete”
狀態碼改變時觸發onreadystatechange方法
script.onreadystatechange = function() {
if(script.readyState == "complete" || script.readyState == "loaded") {
test();
}
}
控制檯中的Network菜單下是所有下載的資源
回調函數callback：當滿足一定條件才調用的函數（比如事件處理函數）
3.JS加載時間線
- 創建document對象，解析web頁面。解析HTML元素和他們的文本內容後添加Element對象，這一階段
document.readyState = "loading";
<body>
<div></div>
<script type = "text/javascript">
console.log(document.readyState);
</script>
</body>
// script標籤是DOM樹中最後執行的，此時樹還沒加載完畢
// 因此輸出 loading
- 遇到link外部css，創建線程異步加載，並繼續解析文檔。
- 遇到script外部JS，並且沒有設置async、defer，瀏覽器加載並阻塞，等待js加載完成並執行
- 遇到script外部js，並設置async、defer，瀏覽器創建線程加載，並繼續解析文檔。對於async屬性的腳本，腳本加載完成後立即執行（異步禁止使用document.write）；
遇到document.write時，在異步情況下會消除文檔流 - 遇到img等，先正常解析dom結構，然後瀏覽器異步加載src，並繼續解析文檔；
- 當文檔解析完成，
document.readyState = 'interactive'。 - 文檔解析完成後（DOM樹），所有設置有defer的腳本會按照順序執行（與6同時執行）；（注意與async不同，但同樣禁止document.write）
- document對象觸發
DOMContentLoaded事件（只在addEventListener上綁定，這是jQuery中封裝的事件觸發函數所用的方法），這也標誌着程序執行從同步腳本執行階段，轉化爲事件驅動階段；
**重點：**相比於document.onload要等到全部資源加載完成後執行，可以在DOM樹解析完時觸發（但此時script標籤還沒有加載完），因此這個DOMContentLoaded事件更加快，效率更高。（window.onload效率最低）
<script type = "text/javascript">
document.addEventListener("DOMContentLoaded", functiong() {
//DOM樹解析完要觸發的函數
}, false);
</script>
- 當所有async的腳本加載完成並執行後、IMG等加載完成後，
document.readyState = "complete"，window對象觸發load事件；
<body>
<div></div>
<script type = "text/javascript">
console.log(document.readyState);
// 當文檔加載狀態改變時就會觸發 onreadystatechange函數
document.onreadystatechange = function() {
console.log(document.readyState);
}
</script>
</body>
//輸出 loading interactive complete
- 從此，以異步響應方式處理用戶輸入、網絡事件等。