DOM css js 执行顺序
DOM、CSS、JS的执行顺序
- js放在head中会立即执行，会阻塞后续的资源下载与执行。因为js有可能会修改dom，如果不阻塞后续的资源下载，dom的操作顺序不可控。
2.js的执行依赖前面的样式。即只有前面的样式css全部下载完成后才会执行js，但是此时外链css和外链js是并行下载的。
3.js放在body的最后面，可以避免资源阻塞，同时使静态的html页面迅速显示。
4.外链的js如果含有defer="true"属性，将会并行加载js，到页面全部加载完成后才会执行，会按顺序执行。
5.外链的js如果含有async="true"属性，将不会依赖于任何js和css的执行，此js下载完成后立刻执行，不保证按照书写的顺序执行。因为async="true"属性会告诉浏览器，js不会修改dom和样式，故不必依赖其它的js和css。
6.html需要等header中所有的js和css加载完成后才会开始绘制。
7.html不需要等待放在body最后的js下载执行就会开始绘制(同第3点)。
8.css需要分块，首页的css独立，其余的css需要动态加载，因为html的绘制会被css阻塞，这样可以减少首次进入时的白屏时间。
DOM 加载 和 Javascript 的加载与执行顺序
谈谈 <script> 标签以及其加载顺序问题，包含 defer & async
只要执行script,html就会停止渲染，除此之外也可以清晰的看出他们之间的加载关系。
- 所有 <script> 标签引进的 JavaScript 会按照他们引入的顺序依次被解析，在没有使用 defer 或者 async 的情况下，只有在解析完前面 <script> 元素中的代码之后，才会开始解析后面 <script> 元素中的代码。
- 由于浏览器会先解析完不使用 defer 属性的 <script> 元素中的代码，然后再解析后面的内容，所以一般应该把 <script> 元素放在页面最后，即主要内容后面， </body> 标签前面。
- 使用 defer 属性可以让脚本在文档完全呈现之后再执行,延迟脚本总是按照指定它们的顺序执行。
- 使用 async 属性可以表示当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。
