javascript异步加载，时间线

什么是异步加载？
我们知道JavaScript的单线程的，这与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？
所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。
这种模式的好处是实现起来比较简单，执行环境相对单纯；坏处是只要有一个任务耗时很长，后面的任务都必须排队等着，会拖延整个程序的执行。常见的浏览器无响应（假死），往往就是因为某一段Javascript代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。

什么时候需要异步：
1，在可能发生等待的情况, 2，等待过程中不能像alert一样阻塞程序的时候
因此，所有的“等待的情况”都需要异步
一句话总结就是需要等待但是又不能阻塞程序的时候需要使用异步

时间线在js中占很重要的地位：优化DOM、逻辑正确时输出的为什么是undefind，很有可能都是时间线在作祟
什么是时间线？
1，创建一个document对象然后开始解析页面，解析上面的元素对象和文本节点，
2，遇到外部css，会创建另外创建一个线程加载，两个互不干扰继续解析
3，遇到外部的JavaScript文件，并且这个JS文件没有设置async,defer属性，浏览器会被这个JS文件阻塞，需得等这个JS文件加载完成并执行，才会在继续解析下面的内容。相反遇见设置了这两个属性那么浏览器在解析的时候就会在创建一个线程单独加载它，和其他的内容一起解析，对于async属性的脚本，脚本加载完成后立即执行。
4，遇见img这类有图片超链接这样的元素，先正常解析，然后里面的内容浏览器会异步加载。
5，文档完成后，那些设置有defer脚本的内容按照顺序正常执行。
6，这些都解析完成了，document对象会触发事件，这个时候浏览器执行解析脚本的阶段换成了事件驱动当所有async的脚本的加载完成并执行后、img等加载完成后，页面所以的内容解析完成，里面的内容图片也加载完成。
7，这个时候浏览器的网页就可以用了。