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,原因最后说明),问题如下
document.write('<script type="text/javascript" src="test.js"><\/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吧。
转载于:https://www.cnblogs.com/plusice/archive/2012/08/26/2657201.html
script标签的加载解析执行相关推荐
- 浏览器加载解析渲染机制的全面解析
(注1:如果有问题欢迎留言探讨,一起学习!本文首发于我的简书,转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录.) 1. 简介 在前面一篇文章中,讲到了用户从输入url到看到页面的 ...
- 【SA8295P 源码分析】53 - mifs.build.tmpl 脚本详解:启动QNX procnto-smp-instr微内核、启动QNX串口终端shell、加载解析并执行ifs2_la.img
[SA8295P 源码分析]53 - mifs.build.tmpl 脚本详解:启动QNX procnto-smp-instr微内核.启动QNX串口终端shell.加载解析并执行ifs2_la.img ...
- 浏览器中Javascript的加载和执行
在刚学习Javascript时曾对该问题在小组内做个一次StudyReport,发现其中的基础还是值得分析的. 从标题分析,可以加个Javascript的加载和执行分为两个阶段:加载.执行.而加载即浏 ...
- JavaScript 的性能优化:加载和执行
概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...
- 高性能JavaScript-JS脚本加载与执行对性能的影响
在web产品优化准则中,很重要的一条是针对js脚本的加载和执行方式的优化.本篇文章简单描述一下其中的优化准则. 1. 脚本加载优化 1.1 脚本位置对性能的影响 优化页面加载性能的原则之一是将scri ...
- 浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
defer和async特性相信是很多JavaScript开发者"熟悉而又不熟悉"的两个特性,从字面上来看,二者的功能很好理解,分别是"延迟脚本"和"异 ...
- html标签 资源加载失败,前端资源加载失败优化
Web 项目上线后,开始开门迎客,等待着来自大江南北.有着各式各样网络状态的用户莅临.在千差万别的网络状态中,访问页面难免会遇到前端资源加载失败的情况,占比或许不高,但一遇到,轻则页面样式错乱,重则白 ...
- Hibernate懒加载解析
Hibernate懒加载解析 在Hibernate框架中,当我们要访问的数据量过大时,明显用缓存不太合适, 因为内存容量有限 ,为了减少并发量,减少系统资源的消耗,这时Hibernate用懒加载机制来 ...
- html 执行外部js的函数,javascript – Chrome扩展程序:加载并执行外部脚本
我无法在我的chrome扩展程序中加载和执行外部js-script.看起来和 this question一样,但我仍然无法弄清楚为什么它在我的情况下不起作用. 我的想法是,我希望在我的内容脚本中有一些 ...
最新文章
- Cocos2d-x 3.2 Lua演示样例FontTest(字体測试)
- 什么情况下可以不写PHP的结束标签“?”
- 备份oracle中的大表
- mysql查询当月数据_MySQL百万数据,你如何用分页来查询数据
- java 调试js_Java与JS代码调试技巧
- Bailian4143 和为给定数【排序+二分】
- 程序人生:不知道我讲了什么的回应稿
- 不读取nan行_一个参数一个Excel表,让你玩转Pandas中read_excel()表格读取!
- 全面的C#编码规范整理
- 银行卡号 归属地大全
- iOS:如何实现在文字上添加拼音
- 计算机音乐数字乐谱周杰伦,周杰伦的歌《安静》的数字乐谱是什么??
- 苹果亮度自动调节怎么关闭_Redmi K30 Pro自动亮度调节和iPhone基本一致,安卓手机的大进步...
- 书评第003篇:《0day安全:软件漏洞分析技术(第2版)》
- 扎克伯格----转自Jessica巨人
- 软件工程--团队答辩
- 嵌入式BootLoader技术内幕(一)
- opencv将Mat读入的图像的像素值打印在控制台上
- 模拟投票小程序C语言代码,微信小程序投票系统创建投票发布demo完整源码下载 一个很简单 - 下载 - 搜珍网...
- 关于WIN10开机无法输入密码的问题