html css javascript 加载的顺序

一、总体原则

　　加载的总体原则是顺序加载，即从页面的head到body结束顺序加载。浏览器发送请求，服务器返回了这整个页面的代码。所以，下一步是对这个页面代码进行渲染。

二、加载顺序

　　css文件和image文件跟html代码是并行下载的。

　　也就是说，加载css文件的同时，html的DOM结构还在继续加载构建。在加载的过程中如果发现某个css或者img时，会发送一个请求，然后html继续构建，当服务器发送回数据来以后，添加到相应的dom树位置就好了。

　　但是走到script ，加载js的时候就不同了。需要加载完整个js文件后，才会往下走。不会并行下载。

　　为什么JS不能像CSS、image一样并行下载了？这里需要简单介绍一下浏览器构造页面的原理，当浏览器从服务器接收到了HTML文档，并把HTML在内存中转换成DOM树，在转换的过程中如果发现某个节点(node)上引用了CSS或者 IMAGE，就会再发1个request去请求CSS或image,然后继续执行下面的转换，而不需要等待request的返回，当request返回 后，只需要把返回的内容放入到DOM树中对应的位置就OK。但当引用了JS的时候，浏览器发送1个js request就会一直等待该request的返回。因为浏览器需要1个稳定的DOM树结构，而JS中很有可能有代码直接改变了DOM树结构，比如使用 document.write 或 appendChild,甚至是直接使用的location.href进行跳转，浏览器为了防止出现JS修改DOM树，需要重新构建DOM树的情况，所以 就会阻塞其他的下载和呈现.

　　DOM并没有加载在页面中，所以在js文件里要加入jQuery的$(document).ready(function(){}) 或window.onload 或者js文件里只有函数，否则会报错。

三、js文件的放置位置。

   1、放在底部，虽然放在底部照样会阻塞所有呈现，但不会阻塞资源下载。   

   2、如果嵌入JS放在head中，请把嵌入JS放在CSS前面。   

   3、使用defer   

   4、不要在嵌入的JS中调用运行时间较长的函数，如果一定要用，可以用setTimeout来调用

打赏

感谢支持与鼓励～