[TOC]
* * * * *
### 動態`js`
~~~
var script=document.createElement('script'),
content='function say() { console.log("I am fine.") }',
scriptText=document.createTextNode(content);
script.type='text/javascript'; // 這一步可以省略
script.appendChild(scriptText) // 或者設置script的src屬性
document.body.appendChild(script)
這種方式加載的代碼會在全局作用域中執行，
且腳本加載后將立即執行，和在全局作用域執行 eval() 函數一樣
~~~
### 動態樣式 `css`
~~~
內聯腳本
var link=document.createElement('style');
link.rel='stylesheet';
link.href='url';
document.head.appendChild(link );
外聯腳本
var style=document.createElement('style'),
cssContent=document.createTextNode('p{ color: green; }');
style.appendChild(cssContent);
document.head.appendChild(style);
~~~
* * * * *
### `js`腳本的加載機制
1. 如果script標簽沒有defer或者async屬性，那么腳本的解析執行順序就和引入的順序一致，一個接著一個，不會同時去解析執行多個或者順序有變化；
2. defer屬性，相當于告訴瀏覽器，立即下載，但是延遲執行,延遲到 `DOMContentLoaded` 前后執行有個不可控因素是，如果有多個延時腳本的話，不能保證執行順序，所以最好是有一個延時腳本就夠了
3. 異步async屬性，相當于告訴瀏覽器，立即加載（異步），不要阻塞DOM渲染，加載完成后就立即執行；這個不能保證執行順序，可能有個加載完成的早，那就會立即執行。
~~~
DOM文檔加載的步驟為：
1. 解析HTML結構。
2. 加載外部腳本和樣式表文件。
3. 解析并執行腳本代碼。
4. DOM樹構建完成。//DOMContentLoaded
5. 加載圖片等外部文件。
6. 頁面加載完畢。//load
~~~
* * * * *
