浏览器的渲染和操作顺序如下:
- html解析完毕
- 外部脚本和样式表加载完毕
- 脚本在文档内解析并执行
- html dom完全构造起来
- 图片和外部内容加载
(以上内容来源于<精通javascript>一书)
对于外部js文件来说,先加载外部js文件,然后执行js代码,DOM加载并不能保证在其执行前加载完毕。
而行内js,由于按照顺序执行,在js代码执行时,位于行内js之前的元素,其对应的dom节点都可以建立起来。比如
<ul>
<li><a href="javascript:;" class="js-sysAnnouncement">系统公告</a></li>
<script>
.....
</script>
</ul>
则在js之前的li元素所对应的dom节点已经加载完毕。
-----------------------------------------------------------------------------------------------
前几天遇到一个问题:load和ready 哪个先执行?
针对这个问题我自己研究学习了一下DOM文档的加载步骤:
1.首先浏览器会解析静态的html结构 比如 head body footer等html标签
2.当html结构加载完成我们需要渲染页面使其美观,因此此时需要加载 各种样式表文件。
3.然后再解析并执行js或者其他脚本代码。
4.构造html DOM对象,也就是 ready 操作
5.加载html和css中引用的外部资源文件。
6.页面加载完成(load操作),js进行一些事件的绑定和处理。
通过这个执行顺序我们知道 ready与load的区别在于资源文件的加载。ready构建了基本的DOM结构,而load是构建了js事件的绑定以及操作。所以页面在加载时需要先加载CSS样式表后加载解析并执行js等脚本,所以我们对页面进行优化是,css文件越早加载越好。js资源当道dom的底部最晚加载越好。