[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
~~~
* * * * *