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