导航

html css javascript 加载的顺序

Posted on 2015-05-13 18:13  哈哈镜-力争上游  阅读(1378)  评论(0编辑  收藏  举报

html /css /javascript 这三者的加载顺序影响整个页面的加载速度。而加载速度的快慢直接影响pv(访问量),而且会影响经济收入。在大网站中,可能打开速度快一秒,一年能多带来上亿的收入。所以我们一定要重视。

一、总体原则

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

二、加载顺序

  如果结构是这样写的:

 

  首先会加载link里面的css文件。但是在这里要记住,css文件和image文件跟html代码是并行下载的。

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

  但是走到script ,加载js的时候就不同了。需要加载完整个js文件后,才会往下走代码。不会并行下载。所以,按上面图上的写法,加载link的时候也会在加载js。只有当js加载完后,才会构建body里的DOM树。这时注意的问题是,js代码运行时,

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

 

三、js文件的放置位置。

  1、放在head 中,在link标签上面。所以上面图中的放置是不正确的。正确放法是:

  2、放在body的最下面