目錄
JSON簡介
異步加載JS
js加載時間線
網頁渲染的過程
JSON是一種傳輸資料的格式
（以對象為樣闆，本質上就是對象，但用途有差別，對象就是本地用的，json是用來傳輸的）
JSON.parse(); string -> json
JSON.stringify(); json -> string
過去傳輸資料的格式：Xml （ 可以自定義标簽）
HTML 不可以自定義标簽
現在傳輸資料的格式：json （對象）。差別：json屬性名必須加雙引号，但是對象沒有這個強制規定。
前端與背景之間傳輸的資料是字元串格式的。如：'{"name" : "deng","age" : 123}'
e.g:
前端往後端傳資料時：
var obj = {
"name" : "abc",
"age" : 123
}
JSON.stringify(obj) ======> "{"name" : "abc","age" : 123}"
前端接收到後端傳過來的資料str="{"name" : "abc","age" : 123}"時：
JSON.parse(str) =======> Object {name:"abc",age:123}
異步加載JS
js加載的缺點：加載工具方法沒必要阻塞文檔，過多加載js會影響頁面效率，一旦網速不好，那麼整個網站将等待js加載而不進行後續渲染工作。有些工具方法需要按需加載，用到再加載，不用不加載。
同步加載如：<head>
<script type="text/javascript" src="tools.js"> </script>
</head>
javascript異步加載的三種方案：
1、defer異步加載，但要等到dom文檔全部解析完時才會被執行。隻有IE能用，也可以将代碼寫到内部。不阻塞頁面。
<head>
<script type="text/javascript" src="tools.js" defer="defer">内部可以寫js代碼</script>
</head>
2、async異步加載，加載完就異步執行，async隻能加載外部腳本，不能把js寫在script标簽裡。W3C标準方法，非IE浏覽器和高版本IE浏覽器可用，不阻塞頁面。
<head>
<script type="text/javascript" src="tools.js" async="async">内部不可以寫js代碼</script>
</head>
3、建立script，插入到DOM中，加載完畢後callBack。可以按需加載（最常用）
<body>
<script type="text/javascript">
var script = document.createElement('script');
script.type = "text/javascript";
script.src = "tools.js";//此時開始異步加載tools.js資源，但是不執行該js内的語言
document.head.appendChild(script);//此時才執行，是以可以通過控制這句指令，來按需使用。
script.onload = function(){ // safari chrome firefox opera可以用 IE的script标簽沒有load事件
some function in tools.js
}
IE中使用script.readyState loading---->complete/loaded
script.onreadystatechange = function(){
if(script.readState == 'complete" || script.readyState == "loaded"){some function}
}
</script>
</body>
封裝：
function loadScript(url,callback){
var script = document.createElement('script');
script.type = "text/javascript";
if(script.readyState){
script.onreadystatechange = function(){
if(script.readyState == 'complete' || script.readyState == 'loaded'){
callback();
}
}
}else{
script.onload = function(){
callback();
}
}
script.src = url;
document.appendChild(script);
}
loadScript('demo.js',function(){
test();
});//傳入的第二個參數是一個函數引用，這樣可以防止未定義函數名報錯。實作按需加載。
或使用如下：
js加載時間線
1、建立Document對象，開始解析web頁面。解析HTML元素和他們的文本内容後添加Element對象和Text節點到文檔中。這個階段document.readyState='loading'。
2、遇到link外部css，建立線程加載，并繼續解析文檔。
3、遇到script外部js，并且沒有設定async、defer，（同步加載）浏覽器加載，并阻塞，等待js加載完成并執行該腳本，然後繼續解析文檔。
4、遇到script外部js，并且設定有async、defer，浏覽器建立線程加載，并繼續解析文檔，對于async屬性的腳本，腳本加載完成後立即執行。（異步腳本中禁止使用document.write()，此時會消除之前的文檔流）
5、遇到img等，先正常解析dom結構，然後浏覽器異步加載src，并繼續解析文檔。
6、當文檔解析完成，document.readyState= ‘interactive’。
7、文檔解析完成後，所有設定有defer的腳本會按照順序執行。（注意與async的不同，但同樣禁止使用document.write()）
8、document對象觸發DOMContentLoaded事件(該事件隻能在addEventListener上綁定)，這也标志着程式執行從同步腳本執行階段，轉化為事件驅動階段。
9、當所有async的腳本加載完成并執行後、img等加載完成後，document.readyState = 'complete'，window對象觸發load事件。
10、從此，以異步相應方式處理使用者輸入、網絡事件等。
注：
文檔解析完成的狀态變化：1、document.readyState= ‘interactive’；2、document對象觸發DOMContentLoaded事件
文檔加載完成的狀态變化：1、document.readyState = 'complete'；2、window對象觸發load事件
網頁渲染的過程：
1、DOM節點解析：找到HTML元素，并按照深度優先原則，繪制DOM樹。遇到img等有src資源的元素，先不下載下傳資源。
2、異步下載下傳資源同時發生
3、根據CSS元素生成CSS樹（深度優先原則）
4、CSS樹和DOM樹拼在一起形成randerTree
5、渲染引擎按照randerTree開始渲染界面
DOM優化：盡量減少DOM節點的增删改查、DOM節點的寬高變化，位置變化，字型寬高重設，display none-->block，offsetWidth offsetLeft ,以減少randerTree重建（reflow），俗稱重排或重構。程式設計要盡量避免重排。
重繪（repaint）,浪費的效率少。如：更改背景顔色，字型顔色。
今日良言：一個人能夠同時保有兩種截然相反的觀念，還能正常行事，這是第一等智慧的标志。----菲茨傑拉德（Fitzgerald）
![Ajax——模闆引擎[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)