验证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. python之os模块（os.path）

    我们在做自动化测试的时候,可能会遇到一些需要处理文件一些需求,那么我们可以通过直接写文件的目录进行操作,当然作为一名自动化测试工程师,怎么可能用这种方法?python中自带的有OS,我们可以通过os模 ...

  2. 编辑器之神vim的一些常用快捷键整理

    yy:复制 光标所在的这一行 4yy:复制 光标所在行开始向下的4行 p:粘贴 dd:剪切(删除) 光标所在的这一行 4dd:剪切(删除) 光标所在行向下的4行 D:从当前的光标开始向后剪切,一直到行 ...

  3. 如何在Mac上识别和删除损坏的字体

    字体看起来像无害的文件,而且大多数时候都是这样.但是,就像任何计算机文件一样,字体可能会损坏或损坏.发生这种情况时,它们可能会导致文档或应用程序出现问题.在Mac上使用“ 字体簿”来验证已安装的字体, ...

  4. 【RTOS】基于V7开发板的最新版uCOS-III V3.07.03程序模板，含MDK和IAR，支持uC/Probe，与之前版本变化较大

    模板下载: 链接:https://pan.baidu.com/s/1_4z_Lg51jMT87RrRM6Qs3g   提取码:2gns 对MDK的AC6也做了支持:https://www.cnblog ...

  5. Gradle如何在任务失败后继续构建

    如果我们运行Gradle构建并且其中一项任务失败,则整个构建将立即停止.因此,我们可以快速反馈构建状态.如果我们不想这样做,并且希望Gradle执行所有任务,即使某些任务可能失败了,我们也可以使用命令 ...

  6. ASP.NET Core部署系列一：发布到IIS上

    前言: 当构建一个ASP.NET Core应用程序并且计划将其运行在IIS中时,你会发现Core应用程序和之前版本的ASP.NET程序在IIS中的运行方式是完全不一样的.与ASP.NET时代不同,AS ...

  7. Initialize a Property After Creating an Object 创建对象后初始化属性 （XPO）

    In this lesson, you will learn how to set the default value for a particular property of a business ...

  8. CAD转DXF怎么转换?教你三种转换方法

    CAD图纸在我们日常生活中都是可见到的,因为CAD图纸文件的格式是多样的,在工作中就需要经常将CAD的格式进行转换.那CAD转DXF怎么转换呢?这个问题很多的小伙伴们都遇到过,下面小编就来教大家三种转 ...

  9. JS基础语法---JSON格式的数据

         1. 对象: 有属性和方法,特指的某个事物     对象: 一组无序属性的集合的键值对,属性的值可以是任意的类型   2.JSON格式的数据:一般都是成对的,是键值对,     json也是 ...

  10. 对vue-cli各个目录的理解 和 在 vue 中使用json-server

    看了几章书,看到了vue模板,看不下去哦,就找了一个B站的vue视频来看,下面进行总结. 学习一个语言,框架,CRUD..先学会. 重点就是最为常用的几个语句.学得不多,感慨挺多.. 前提:下载好vu ...