验证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. mybatis报错: java.lang.IllegalArgumentException invalid comparison: java.util.Date and java.lang.String

    原因是在使用<if> 进行条件判断时, 将datetime类型的字段与 ' ' 进行了判断,导致的错误 解决, 只使用  <if test="createTime != n ...

  2. 文件迁移到FileTable中

    看此文档前,先参考一下文档 https://blog.csdn.net/downmoon/article/details/24374609 环境:阿里云ECS SQL Server 2017 + De ...

  3. Linux基础命令---ntpstat显示时间服务器同步

    ntpstat ntpstat指令用于显示本机上一次和服务器同步时间的情况. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.   1.语法 ntpstat   2 ...

  4. IDEA 工具自动生成JavaBean类

    1.先安装GsonFormat插件:File-->Setting-->Plugins-->GsonFormat-->OK 2.new 一个新的Class空文件,然后 Alt+I ...

  5. 《Web Development with Go》JWT认证满意版

    这个比昨晚的要满意, 认证放到中间件那里了. Mux使用的是gorilla, 中间件使用的是negroni, 启动是用的negroni.classic方法. package main import ( ...

  6. hibernate-positional-parameter-does-not-exist-1-in-query

    经过bug的排查,问题出在,scsj字段的赋值上; 通过字符串在数据库端生成即可:

  7. 使用ES6新特性async await进行异步处理

    我们往往在项目中会遇到这样的业务需求,就是首先先进行一个ajax请求,然后再进行下一个ajax请求,而下一个请求需要使用上一个请求得到的数据,请求少了还好说,如果多了,就要一层一层的嵌套,就好像有点c ...

  8. 易优CMS:arclist 文档列表

    arclist 文档列表(配合arcpagelist标签可实现ajax瀑布流分页)  [基础用法] 名称:arclist 功能:获取系统主从表模型(如:文章.软件.图集.产品等)的一列文档,也称自由列 ...

  9. Swoole Redis 连接池的实现

    概述 这是关于 Swoole 入门学习的第九篇文章:Swoole Redis 连接池的实现. 第八篇:Swoole MySQL 连接池的实现 第七篇:Swoole RPC 的实现 第六篇:Swoole ...

  10. HttpModules配置事项

    前沿:还是那句话 ASP.NET管道,浏览器 - isAPI32.dll - HttpModules - HttpHandler - 返回客户端Web.Config:<httpModules&g ...