<script>标签的加载解析执行

转自原文 <script>标签的加载解析执行

看了很多网上的文章,都是大同小异。总结一下。内部原理还没有搞清楚,有机会再学习。

一、<script>标签的加载解析执行顺序

html页面中的<script>标签中的内容(直接写入或者引用外部文件都一样)是以顺序加载执行的,每个<script>标记内容可以当成一个独立的块,同步的情况下一个块加载解析然后执行完后才加载下一块。当然这时也会阻塞其他页面元素的加载。所以网上说的变量调用:

<script type="text/javascript">//<![CDATA[

alert(tmp); //输出 undefined

var tmp = ‘111‘;

alert(tmp); //输出 111

//]]>

</script>

还有函数调用:

<script type="text/javascript">//<![CDATA[

test(); //浏览器报错

//]]>

</script>

<script type="text/javascript">//<![CDATA[

test(); //输出 fun!

function test(){alert(‘fun!‘);}

//]]>

</script>

其实很简单,对于变量,在一个作用域中在变量声明前面使用变量,本来就是undifined(解析过程中已经知道有这个变量, 但没赋值,等到执行才赋值)。对于函数,同一块中可以,因为解析的时候已经知道有那个函数了,但是分在不同块中,当test 调用时,下面声明test函数的内容根本还没被加载进来,所以调用出错。

二、document.write ()问题

本来这样不就挺好吗。但是来个document.write就坑爹了。先摘一段网上的话::“输出写入到脚本文档所在的位置,浏览器解析完documemt.write()所在文档内容后,继续解析document.write()输出的内容,然后在继续解析HTML文档”。

测试过,在一个<script>标记中通过document.write()输出的内容会依次插到该标记的后面(动态加载)。但插入内容没有解析和执行, 解析执行还是按文档顺序下来,等到执行完documemt.write()所在的script标记的内容后再解析执行。但是这仅限于document.write 方式没有写入可引用的外部文件并且引入文件内不包含document.write时的情况。

关于引入外部文件与外部文件包含document.write参考自http://w3help.org/zh-cn/causes/BX9014

例子见参考,内容大概就是:第一,当document.write方式引入的外部文件里面包含document.write写入流,IE 是在当前 SCRIPT 标记内所有的 document.write 向文档中输出内容完成后,再处理以 document.write 方式引入的 JS 文件内的 document.write 写入流。对于其他浏览器,则根据代码执行顺序依次处理 document.write 方式写入的内容(但测试过,外部文件中除document.write外的内容对于ie和firefox一样,是等到当前 SCRIPT 标记执行结束后才执行的)。第二,当使用 document.write 方式写入可引用的外部JavaScript 内容后,非 IE Opera 浏览器并不会立即更新 DOM 树。

对于第二点,我觉得恰好可以解释网上所说的一个问题(没有debug,原因最后说明),问题如下


<script type="text/javascript">//<![CDATA[
        document.write(‘<script type="text/javascript" src="test.js"><\/script>‘);

   document.write(‘<script type="text/javascript">‘);

    document.write(‘alert("222");‘)

    document.write(‘alert("变量保存值" + tmpStr);‘);

    document.write(‘<\/script>‘);        //]]>

</script>
    <script type="text/javascript">//<![CDATA[
        alert("333");        //]]>

 </script>

test.js的内容是:

    var tmpStr = ‘111‘;        alert(tmpStr);
  • 在Firefox和Opera中的弹出值的顺序是:111、222、变量保存值111、333
  • 在IE中弹出值的顺序是:222、111、333, 同时浏览器报错:tmpStr未定义

原因可能是IE在document.write时,并未等待加载SRC中的Javascript代码完毕后,才执行下一行,所以导致222先弹出,并且执行到document.write(‘document.write(“变量保存值” + tmpStr)’)调用tmpStr时,tmpStr并未定义,从而报错。



但是我觉得原因不是这个,原因应该就是其他浏览器没有立即更新dom树。IE会在document.write(‘<script type="text/javascript" src="test.js"><\/script>‘)后更新dom树,此时dom树中引用test文件的<script>节点已存在,后续插入的<script>节点都会被插入在正在执行的<script>的后面,也就是引入test文件的<script>节点的前面。所以执行alert时test内容还没执行。而其他浏览器是当<script>的内容执行完毕后再更新dom树,所以document.write写入的内容是以顺序添加到包含他们的<script>后面的。当然这只是我个人理解,如果错误还请看到的人指出。

最后一个问题,对于使用document.write时出现的firefox和IE间的处理不一致,当我firefox用debug设断点调试(一步一步跳)时竟然变得跟IE一致了。像上面那个例子firefox断点调试时竟然tempStr也是notdefined,引入的文件没有跳进去。js我也是学得不久有懂的请赐教。

花了一天还没搞明白,真不知道去抠这些问题有没有价值,觉得还是少用document.write吧。

时间: 2024-08-07 00:16:57

<script>标签的加载解析执行的相关文章

动态script标签同步加载 ps:无打包编译,静态实现静态资源入口动态配置,无编译打包静态资源添加版本号

/**功能:创建动态标签加载css ,js文件,重点是js文件,利用onloading加递归实现动态标签的同步加载用法:在html文件body底部script内部声明并调用下列函数,obj中写要加载的文件信息注意,由于css是后来加载的,所以页面会存在无样式的页面骨架闪烁问题,可以在头部head标签里加个body{opacity:0},在css文件中再改为body{opacity:1} */ function noAsyncScriptTag() { var obj = { pubPath: "

加载和执行

有阻塞的脚本   js脚本阻塞原因? 大多数浏览器使用单一进程处理用户界面更新(页面解析,页面渲染,用户交互)和JavaScript脚本代码执行.所以同一时刻只能做其中一件事.这样做是显而易见的,因为脚本代码很可能包含了dom处理的代码. 反应到代码上就是,当script标签出现时,无论代码是内嵌还是通过外链加载,都需要等待js代码加载(内部代码就直接读取)并执行完成,才能继续解析渲染页面. 注释:外部脚步有两个例外: 如果 async="async":脚本加载完成可用后,会相对于页面

javacript加载和执行

写在前面 JavaScript在浏览器中的性能,可认为是开发者所要面对的最重要的可用性的问题,此问题因JavaScript的阻塞特征而复杂,也就是说JavaScript运行时其他的事情不能被浏览器处理,事实上,大多数浏览器使用单进程处理UI更新和JavaScript运行等多个任务,而同一时间只能有一个任务被执行.JavaScript运行了多长时间,那么浏览器空闲下来响应用户输入之前的等待时间就有多长. 从基本层面说,这就意味着<script>标签的出现使整个页面因脚本解析.运行出现等待.不论实

高性能JavaScript (笔记一:加载和执行)

1.JavaScript的阻塞特性: 当浏览器执行JavaScript代码时,不能同时做其他任何事情: IE8.Firefox3.5.Safari4和Chrome2都允许并行下载JavaScript文件,这样<script>标签在加载外部资源的时候,不会阻塞其他<script>标签的加载,但还是会阻塞其他资源的加载: 推荐将所有<script>标签尽可能放到<body>标签的底部,尽量减少对整个页面加载的影响. 减少外链脚本的数量将会改善性能,加载单个100

重操JS旧业第一弹:Script与JS加载

不管js被包装成什么样子,最终交给浏览器执行的js都是原生的,都离不开原生js的原理. Script标签纸html中用来加载js的标签,我们知道js可以是来自外部,本地,或者内部一段代码,在这里只讨论来自外部的加载,对于一个随时进行网络数据交换的浏览器而言,网络请求必然是异步执行的,自然的js文件一般来说异步执行比较好,不容易造成UI卡顿,但是Script标签默认加载js是同步,阻塞式的,也就是说默认情况下浏览器按照从上至下,从左自右的方式解释执行脚本,对于同步请求js文件会造成js文件下载完成

javascript页面加载完执行事件

<script type="text/javascript" language="JavaScript"> //: 判断网页是否加载完成 document.onreadystatechange = function () { if(document.readyState=="complete") { alert('ok'); } } </script> javascript页面加载完执行事件

JavaScript 的性能优化:加载和执行

随着 Web2.0 技术的不断推广,越来越多的应用使用 JavaScript 技术在客户端进行处理,从而使 JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其他任何事情.本文详细介绍了如何正确的加载和执行 JavaScript 代码,从而提高其在浏览器中的性能. 概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必

对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析

最近在研究HTML页面中JavaScript的执行顺序问题.在JavaScript中,定义一个方法或者函数有很多方式,最常见的有2中,function语句式与函数直接量方式. 对于function语句式,解释器会优先解释.即加载了这个js文件后,会扫描一下所有的js代码,然后把该优先执行的东西先执行了,然后再从上到下按顺序执行.所以,定义的代码可以在执行的代码后边.就跟C#中的方法定义一样.解释器已经记住了这个方法,知道在内存中的哪里,用的时候直接去取就行了. C#语言是,对象中的属性与方法具有

怎么样加快JavaScript加载和执行效率

概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载和执行脚本时出现阻塞的原因在于,脚本可能会改变页面或 JavaScript 的命名空间,它们对后面页面内容造成影响.一个典型的例子就是在页面中使用document.write(). JavaScript 代码内嵌示例 <html> <head> <title>Source