李威 さぽている

小说翻译,日语相关转移至http://blog.hjenglish.com/liwei

javascript代码的执行顺序

这个不弄明白,代码出问题了也不难以解决。
《learning Jquery 1.3》p15有一句  JavaScript code is generally run as soon as it is encountered in the browser
也就是说,浏览器遇到一个语句就立刻解析。貌似这个问题很快就解决了。

但javascript的写法相当多,譬如网上很多人讨论的$(document).ready(和<body onload= 执行先后问题
在p16中,提到onload    to run after the page is completely loaded.即onload在页面完全加载完之后执行
ready是firing once the DOM is loaded—without waiting for images 。ready在DOM加载完,图片未加载时执行。
也即ready在onload之前调用。

这里就涉及html页面的加载顺序问题。网上搜到2篇相关文章。
浏览器做了什么?
http://www.cnblogs.com/guilipan/archive/2010/01/06/1640145.html
Javascript在页面加载时的执行顺序
http://dancewithnet.com/2007/03/22/order-of-execution-of-javascript-on-web/

看完之后,比之前明白了些,但具体的关系还是没能理解。
一个html页面包括head和body两个部分,head部会调用外部CSS和JS文件,body部会调用图片,音视频等内容。
下载顺序是html ->CSS JS ->图片等。
解析顺序是html(内部是按序执行head->body)->DOM生成 ->ready执行 ->图片下载 ->body.onload

将以上两者结合,html ->head(CSS JS) ->body->DOM生成 ->ready执行 ->图片下载 ->body.onload
其中head和body部都可能包含js,按代码顺序执行。
这里就有一个疑问,浏览器会等待JS等文件下载完后,并顺序执行该JS后再继续执行之后的html代码么?
按想应该不会,不然JS文件过大,会影响html页面渲染的速度,两者应该是异步的。
但这个异步就会将之前总结的顺序搅乱。譬如onload都执行完了,包含ready的JS还没下完,此时会发生什么?
这里说得有问题,JS未下载完,onload是不会执行的。
有待继续总结……

posted on 2010-03-11 00:18 李威 阅读(468) 评论(0)  编辑  收藏


只有注册用户登录后才能发表评论。


网站导航: