验证a 、b两点疑惑：

a.<script src="./main.js"></script>中的window.onload是在html全部加载完了才执行，还是其在html中所处位置之前的加载完就执行？

b. <script src="./main.js"></script>中window.onload有和没有 的区别是什么？

结论：

a.

answer：在html全部加载完了才执行。

b.

answer：区别就是，window.onload是html页面的所有文档都加载完毕后，执行window.onload里的内容。因而加了window.onload的main.js不论在html的哪个位置引入，均不会出现html元素找不到的错误 。   没有window.onload的js文件，需要在其所关联html的那部分代码后面引入，方可，否则，会出现html元素找不到的错误 。

以下为验证全过程：

代码结构预览

main.js  :

window.onload=function(){

    var app=new Vue({

        el:"#app-4", 

        data:{

            todos:[{

                text:"first one"

            },{

                text:"second one"

            },{

                text:"third one"

            }]

        }

    })

    alert("app did!")

}

index.html  :

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <script src="./main.js"></script>

        <a href="./vue.js"></a>

    </head>

<body>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div> 

    </body>

</html>

执行过程（按chrome中真实的执行顺序罗列）

1.

2.

说明：是先走到main.js里的window.onload，之后再显示出html的其余部分。

========================================================================================================

//现在将html的<script src="./main.js"></script>代码位置稍作调整,为谨慎起见，增加一行<div>html中Dom的加载。。。</div>

index.html  :

<!DOCTYPE html>

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <a href="./vue.js"></a>

    </head>

    <body>

        <div>html中Dom的加载。。。</div>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div>

        <script src="./main.js"></script>

    </body>

</html>

1.

2.

说明：有window.onload的main.js在哪里引入都一样。【注意:均不会出现html元素找不到的错误】

=========================================================================

以上说述，是main.js中有window.onload时。

=========================================================================

//                                                                现在,将window.onload去掉!!!

=========================================================================

以下所述，是main.js中没有window.onload时。

=========================================================================

 

main.js  :

// window.onload=function(){ 

    var app=new Vue({

        el:"#app-4", 

        data:{

            todos:[{

                text:"first one"

            },{

                text:"second one"

            },{

                text:"third one"

            }]

        }

    })

    alert("app did!")

// }

index.html :

<!DOCTYPE html>

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <script src="./main.js"></script>

        <a href="./vue.js"></a>

</head>

    <body>

        <div>html中Dom的加载。。。</div>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div>    

    </body>

</html>

1.

2.

说明：先加载的main.js中的内容，此时html并没有加载完（后面需要显示的内容还没有加载）【注意:此时，出现html元素找不到的错误（2.图）】

=============================================================

//将index.html中的<script src="./main.js"></script>代码位置稍作调整

index.html :

<!DOCTYPE html>

<html>

    <head>

        <title>xx</title>

        <script src="./vue.js"></script>

        <a href="./vue.js"></a>

    </head>

    <body>

        <div>html中Dom的加载。。。</div>

        <div id="app-4">

            <ol>

                <li v-for="todo in todos">{{todo.text}}</li>

            </ol>

        </div>

        <script src="./main.js"></script>       

    </body>

</html>

1.

2.

说明：html加载完（后面需要显示的内容还没有加载），之后加载main.js中的内容【此时，与有window.onload时的场景下，呈现顺序一致】

window.onload在文档加载完成后执行的更多相关文章

  1. 基于DOMContentLoaded实现文档加载完成后执行的方法

    我们有时可能需要一些在页面加载完成之后执行的方法,其实js原生就提供了onload方法,所以我们最简单的办法就是直接给onload赋值一个函数,在页面加载完成之后就会自动执行 widnow.onloa ...

  2. js 文档加载完成之后执行 备用

    //文档加载完成之后执行 (function(){ var _globeCallback; window.$$ = function(callback){ _globeCallback = callb ...

  3. js中defer实现等文档加载完在执行脚本

    我们可以使用defer来实现类似window.onload的功能: <script src="../CGI-bin/delscript.js" defer></s ...

  4. jQuery在HTML文档加载完毕后自动执行某个事件；

    原来onchange=“fucntionname(parms)”: <select name="country" id="selCountries_{$sn}&qu ...

  5. html文档加载顺序简单理解

    html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  6. document.write ： 什么是在html输出中使用，什么是文档加载后使用？

    理解:您只能在 HTML 输出中使用 document.write.如果您在文档加载后使用该方法,会覆盖整个文档. Javascript中只能在 HTML 输出流中使用 document.write, ...

  7. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  8. 原生JS与jQuery文档加载完毕的写法

    HTML是有执行顺序的,默认是自上而下执行.所以当我们的js代码在html代码下边的时候,可以正常执行,而当我们的js代码在html代码上边的时候,可以就无法正常执行了,这时,我们需要在文档加载完毕的 ...

  9. window.onload和jquery等待加载的区别

    1.区别 window.onload是等待页面所有文档,图片等元素都加载完成再进行操作,是javascript原生语法. jquery是等待页面文档加载完成时,就进行操作. $(function(){ ...

随机推荐

  1. MySQL优化/面试，看这一篇就够了

    原文链接:http://www.zhenganwen.top/articles/2018/12/25/1565048860202.html 作者:Anwen~链接:https://www.nowcod ...

  2. s3c2440裸机-清bss原理及实现

    1.清bss的引入(为什么要清bss) 我们先举个例子: #include "s3c2440_soc.h" #include "uart.h" char g_C ...

  3. web测试点集合

    转自:https://blog.csdn.net/yuki_ying/article/details/54946541 web测试点一 .界面检查 进入一个页面测试,首先是检查title,页面排版,字 ...

  4. 关于tomcat对编码不正确的url参数报错的解决

    按照规范,url参数必须使用限定字符,其它字符需要进行编码,用像js的encodeurlcomponent函数. 在IE和360浏览器的兼容模式,不会自动对url的参数进行编码,会导致tomcat报错 ...

  5. 邹传伟:对人民银行DC/EP的初步分析

    http://opinion.caixin.com/2019-11-01/101477903.html [财新网](专栏作家 邹传伟)2019年10月24日,习总书记在中央政治局第十八次集体学习中指出 ...

  6. 洛谷 UVA10226 Hardwood Species

    洛谷 UVA10226 Hardwood Species 洛谷评测传送门 题目描述 PDF 输入格式 输出格式 输入输出样例 输入 #1复制 输出 #1复制 题目翻译: 给定若干字符串,输出格式为:( ...

  7. R期望

    斐波那契数列--九九乘法表 # 1. 打印斐波那契数列 kl<-c(1,1) for (i in 1:8){ kl[i+2]<-kl[i]+kl[i+1] } kl # 10. 打印九九乘 ...

  8. JSON对象转JAVA对象--com.alibaba.fastjson.JSONObject

    打印结果:

  9. 基于V7的新版RL-USB和RL-FlashFS的NAND完整解决方案，实现更简单，用户仅需初始化FMC

    说明: 1.新版方案更加好用,不管用户使用的那家NAND,用户要做的仅仅是初始化FMC,其它读写API,擦写均衡,坏块管理,ECC校验和掉电保护都不用操心了. 2.新版RL-USB相比老版本功能强劲了 ...

  10. 如何完成述职报告或年终总结PPT

    对于我们 打工仔 职场人士来说,年有年度总结,月有月度报告,指不定有些小伙伴还会有周报和日报,不仅枯燥,而且浪费时间,头都要炸了 ,简直太有趣了呢. 所以,如何准确快速的写完述职报告呢? 这是个好问题 ...