Javascript在网页页面加载时的执行顺序

最新推荐文章于 2021-06-04 10:13:32 发布

chenjian198819

最新推荐文章于 2021-06-04 10:13:32 发布

阅读量1.1k

点赞数

分类专栏： javascript 文章标签： javascript xhtml function xmlhttprequest 文档浏览器

本文链接：https://blog.csdn.net/chenjian198819/article/details/6660230

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在javascript中if和for循环是没有块级作用域的，就是if和for里面的变量，外面可以访问的到，但是函数还是不行。

开发中应该使用第二种，简洁，可读性好，带来封装的感觉。

一、在HTML中嵌入Javasript的方法

直接在Javascript代码放在标记对<script>和</script>之间
由<script />标记的src属性制定外部的js文件
放在事件处理程序中，比如：<p onclick="alert('我是由onclick事件执行的Javascript')">点击我</p>
作为URL的主体，这个URL使用特殊的Javascript：协议，比如：<a href="javascript:alert('我是由javascript:协议执行的javascript')">点击我</a>
利用javascript本身的document.write()方法写入新的javascript代码
利用Ajax异步获取javascript代码，然后执行

第3种和第4种方法写入的Javascript需要触发才能执行，所以除非特别设置，否则页面加载时不会执行。

二、Javascript在页面的执行顺序

页面上的Javascript代码是HTML文档的一部分，所以Javascript在页面装载时执行的顺序就是其引入标记<script />的出现顺序， <script />标记里面的或者通过src引入的外部JS，都是按照其语句出现的顺序执行，而且执行过程是文档装载的一部分。
每个脚本定义的全局变量和函数，都可以被后面执行的脚本所调用。

变量的调用，必须是前面已经声明，否则获取的变量值是undefined。

<script type="text/javscrpt">//<![CDATA[
alert(tmp);  
				//输出 undefined
var tmp = 1;
alert(tmp);  
				//输出 1
//]]></script>

同一段脚本，函数定义可以出现在函数调用的后面，但是如果是分别在两段代码，且函数调用在第一段代码中，则会报函数未定义错误。

<script type="text/javscrpt">//<![CDATA[
aa();            
				//浏览器报错
//]]></script>
<script type="text/javscrpt">//<![CDATA[
aa();			
				//输出 1 
function aa(){alert(1);}
//]]></script>

document.write()会把输出写入到脚本文档所在的位置，浏览器解析完documemt.write()所在文档内容后，继续解析document.write()输出的内容，然后在继续解析HTML文档。
```
<script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript" src="test.js"><\/script>');
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('<\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>
```
test.js的内容是：
```
var tmpStr = 1;
    alert(tmpStr);
```
- 在Firefox和Opera中的弹出值的顺序是：1、2、我是1、3
- 在IE中弹出值的顺序是：2、1、3，同时浏览器报错：tmpStr未定义
- 就是在ie中src="test.js"文件还没有加载完酒开始执行后面的代码了，所以会出现错误
- 因为到了客户端，JS代码是在一个页面的，src的也加载到了一个页面。不会分开在2个页面
原因可能是IE在document.write时，并未等待加载SRC中的Javascript代码完毕后，才执行下一行，所以导致2先弹出，并且执行到document.write(’document.write("我是" + tmpStr)’)调用tmpStr时，tmpStr并未定义，从而报错。

解决这个问题，可以利用HTML解析是解析完一个HTML标签，再执行下一个的原理，把代码拆分来实现：
```
<script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript" src="test.js"><\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    document.write('<script type="text/javascript">');
    document.write('alert(2);')
    document.write('alert("我是" + tmpStr);');
    document.write('<\/script>');
    //]]></script>
  <script type="text/javascript">//<![CDATA[
    alert(3);
    //]]></script>
```
这样IE下和其他浏览器输出值的顺序都是一直的了：1、2、我是1、3。

三、如何改变Javascript在页面的执行顺序

利用onload


   
   
    
    window.onload事件，是指当页面上的所有内容加载完成之后(包括图片等内容)才执行相应的js事件，而document.ready指的是必要的文档对象准备完成后，即可执行相应的js事件。后者这也是我们经常使用的方式，因为很多时候我们并不需要等网页中的所有内容加载完才执行相应的js事件。


   
   
    
    
浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后. 
    
    所以如果某个图片或者其他资源加载很长时间, 访问者就会看到一个不完整的页面, 甚至在图片加载之前就执行了需要依赖动态添加的元素的脚本而导致脚本错误.
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">动态创建的div</div>"; } 
解决办法就是等DOM被解析后, 在图像和外部资源加载之前执行我们的函数.在jQuery中让这一实现变得可行: 
    
    window.onload执行在document.ready之后。
    
    
 
    
    以下代码是这两种方式的写法：
    
    //window.onload
$(window).load(function() {
    alert("the whole page loaded");
});
//document.ready
$(document).ready(function() {
    alert("dom is ready");
});

```
   
   
    
     
   
   
```

<script type="text/javascript">//<![CDATA[
window.onload = f;
function f(){alert(1);}
alert(2);
//]]></script><body>
  <p>
   This is my XHTML page.
  </p>
 </body>输出值顺序是 2-->、This is my XHTML page.-->1。

<script type="text/javascript">//<![CDATA[
window.onload = f();
function f(){alert(1);}
alert(2);
//]]></script><body>
  <p>
   This is my XHTML page.
  </p>
 </body>1-->This is my XHTML page。

需要注意的是，如果存在多个winodws.onload的话，只有最有一个生效，解决这个办法是：

window.onload = function(){f();f1();f2();.....}

利用2级DOM事件类型

if(document.addEventListener){
window.addEventListener('load',f,false);
window.addEventListener('load',f1,false);
...
}else{
window.attachEvent('onload',f);
window.attachEvent('onload',f1);
...
}

但window.onload 不能同时加载多个函数。 
比如; 

   
   
    
    
     
     
      
      Java代码 
      
       
      
      
     
     
    
    
    
    function t(){   
  alert("t")   
}   
function b(){   
  alert("b")   
}   
window.onload =t ;   
window.onload =b ;  
   
   
function t(){
  alert("t")
}
function b(){
  alert("b")
}
window.onload =t ;
window.onload =b ;


后面会把前面的覆盖。 
上面代码只会输出 b ；

IE中可以利用deferdefer作用是把代码加载下来，并不立即执行，等文档装载完毕之后再执行，有点类似onload，但是没有onload那样的局限性，可以重复使用，但是只在IE中有效，所以上面的例子可以修改成为

<script type="text/javascript">//<![CDATA[
document.write('<script type="text/javascript" src="test.js"><\/script>');
document.write('<script type="text/javascript" defer="defer">');
document.write('alert(2);')
document.write('alert("我是" + tmpStr);');
document.write('<\/script>');
//]]></script>
<script type="text/javascript">//<![CDATA[
alert(3);
//]]></script>

这样IE就不报错了，输出值的顺序变成：1、3、2、我是1

利用Ajax。
因为xmlhttpRequest能判断外部文档加载的状态，所以能够改变代码的加载顺序。

chenjian198819

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript在网页页面加载时的执行顺序

一、在HTML中嵌入Javasript的方法直接在Javascript代码放在标记对和之间由标记的src属性制定外部的js文件放在事件处理程序中，比如：点击我作为URL的主体，这个URL使用特殊的Javascript：协议，比如：点击我利用javascript
复制链接

扫一扫

专栏目录