html,css,js加载顺序

一．js放在head中会当即执行，阻塞后续的资源下载与执行。由于js有可能会修改dom，若是不阻塞后续的资源下载，dom的操做顺序不可控。

正常的网页加载流程是这样的。

1. 浏览器一边下载HTML网页，一边开始解析
2. 解析过程当中，发现<script>标签
3. 暂停解析，网页渲染的控制权转交给JavaScript引擎32
4. 若是<script>标签引用了外部脚本，就下载该脚本，不然就直接执行
5. 执行完毕，控制权交还渲染引擎，恢复往下解析HTML网页

　　若是外部脚本加载时间很长（好比一直没法完成下载），就会形成网页长时间失去响应，浏览器就会呈现“假死”状态，这被称为“阻塞效应”。html须要等head中全部的js和css加载完成后才会开始绘制，可是html不须要等待放在body最后的js下载执行就会开始绘制,所以将js放在body的最后面，能够避免资源阻塞，同时使静态的html页面迅速显示。将脚本文件都放在网页尾部加载，还有一个好处。在DOM结构生成以前就调用DOM，JavaScript会报错，若是脚本都在网页尾部加载，就不存在这个问题，由于这时DOM确定已经生成了。

二．js的执行依赖前面的样式。即只有前面的样式所有下载完成后才会执行js，可是此时外链css和外链js是并行下载的。

　　css须要分块，首页的css独立，其他的css须要动态加载，由于html的绘制会被css阻塞，这样能够减小首次进入时的白屏时间。

三．外链的js若是含有defer="true"属性，将会并行加载js，到页面所有加载完成后才会执行，会按顺序执行。

　　defer属性的做用是，告诉浏览器，等到DOM加载完成后，再执行指定脚本。

1. 浏览器开始解析HTML网页
2. 解析过程当中，发现带有defer属性的script标签
3. 浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
4. 浏览器完成解析HTML网页，此时再执行下载的脚本

　　对于内置而不是链接外部脚本的script标签，以及动态生成的script标签，defer属性不起做用。

四．外链的js若是含有async="true"属性，将不会依赖于任何js和css的执行，此js下载完成后马上执行，不保证按照书写的顺序执行。由于async="true"属性会告诉浏览器，js不会修改dom和样式，故没必要依赖其它的js和css。　

　　async属性的做用是，使用另外一个进程下载脚本，下载时不会阻塞渲染。

1. 浏览器开始解析HTML网页
2. 解析过程当中，发现带有async属性的script标签
3. 浏览器继续往下解析HTML网页，同时并行下载script标签中的外部脚本
4. 脚本下载完成，浏览器暂停解析HTML网页，开始执行下载的脚本
5. 脚本执行完毕，浏览器恢复解析HTML网页

　　async属性能够保证脚本下载的同时，浏览器继续渲染。须要注意的是，一旦采用这个属性，就没法保证脚本的执行顺序。哪一个脚本先下载结束，就先执行那个脚本。另外，使用async属性的脚本文件中，不该该使用document.write方法。

　　通常来讲，若是脚本之间没有依赖关系，就使用async属性，若是脚本之间有依赖关系，就使用defer属性。若是同时使用async和defer属性，后者不起做用，浏览器行为由async属性决定。