当用户开始访问，首先下载html资源和外部js资源，在chrome中显示的是html先下载，然后下载外部js，外部js的下载顺序安引用顺序，但是下载到达情况则视情况而定，接着才是图片和其他资源，但是要注意的是，js下载完成之后就开始执行了，也包括<script>块中的语句，此时页面可能还未开始渲染，所以会有白屏，就是js先执行了的原因，还有一点，外部js和<script>里的语句先执行的是外部js，这一点也可以从我们引用各种库的例子得到佐证。可以写一些简单的测试例子：

 <html>

     <head>

         <script type="text/javascript" src="http://localhost/everywhere.js"></script>

         <script type="text/javascript" src="http://localhost/test.js"></script>

         <script type="text/javascript">

         //ready(alert(document.getElementById("hehe")));

         //ready();

         alert("inner")

         alert(document.getElementById("hehe"));

         </script>

     </head>

     <body>

         <p id="hehe">test</p>

     </body>

 </html>

js1：

  alert("out");

  alert(document.getElementById("hehe"));

js2：

 alert("out2")；

通过测试可以很容易的理解其执行顺序。

html和js，外部js 的下载执行顺序的更多相关文章

  1. js 关于setTimeout和Promise执行顺序问题

    js 关于setTimeout和Promise执行顺序问题 异步 -- Promise和setTimeout 执行顺序   Promise 和 setTimeout 到底谁先执行 定时器的介绍 Jav ...

  2. wex5 实战 wex5与js的组件关系与执行顺序（父子与先后）

    初学wex5,先理理让人容易混淆的三个概念: 一 基本概念: 1 wex5组件,顾名思义,在编辑窗口右侧的组件集合里的,都是wex5基于开源自创的组件,并封装了一套自已的方法.目的是为了方便.相关方法 ...

  3. JS的预编译和执行顺序 详析

    原文:JS的预编译和执行顺序 详析 最近在复习javascript的事件处理时发现了一个问题,然后也是我来写javascript的预编译和执行顺序的问题   代码:   复制代码 代码一 <ht ...

  4. JS的预编译和执行顺序 详析(及全局与局部变量)

    最近在复习javascript的事件处理时发现了一个问题,于是总结一下:javascript的预编译和执行顺序的问题:   <html> <head> <title> ...

  5. js函数和变量的执行顺序【易错】

    js函数和变量的声明与执行顺序 一.函数执行顺序 1.正常顺序 function f(){ alert(2); } f(); //alert 2 所有浏览器都能测试通过. 2.倒序调用 f(); // ...

  6. JS day01——window对象、执行顺序、线程模型

    1.window对象 window对象表示当前浏览器的窗口,它是一个顶级对象,我们创建的所有对象.函数.变量都是window对象的成员. window对象自带了一些非常有用的方法.属性. window ...

  7. JS中同名函数有效执行顺序

    html中如果出现函数同名时:如果有多个外部引入的js文件,例如a.js和b.js(引入顺序假定是a.js,然后是b.js),同时html中本身也有内部的js.那么针对 出现函数名一样的情况时,无论他 ...

  8. JS 的预编译和执行顺序

    脚本执行js引擎做的工作: 语法分析 预编译 解释执行

  9. JS之预编译和执行顺序（全局和函数）

    预编译的两种情况 全局: 1.全局 直接是script标签中的代码,不包括函数执行 执行前: 1.首先生成一个GO(global object)对象,看不到,但是可以模拟出来用来分析 2.分析变量声明 ...

随机推荐

  1. DB Query Analyzer 6.02 is released, 71 articles concerned have been published

    DB Query Analyzer is presented by Master Genfeng, Ma from Chinese Mainland. It has English version n ...

  2. 【44】java大数值剖析

    基本的整数和浮点型精度不能满足需求,那么可以使用java.math中的两个类:BigInteger和BigDecimal. BigInteger和BigDecimal介绍: 这两个类可以处理包含任意长 ...

  3. imooc网的主体框架

    imooc网的主体框架,主要是里面的导航动画做的比较好,大家可以学习下. git地址:https://github.com/xiangzhihong/ImoocPro

  4. 开源项目AndroidReview学习小结（1）

    多看多学涨姿势 最近学习了一个开源项目,感觉收获颇多,这里做下简要的记录,首先感谢作者的开源.先看个大概图 感觉框架非常简单,界面也很一般,不过底层的处理的一些处理还是有很多可圈可点之处,代码的处理一 ...

  5. leetcode(57)- Implement strStr()

    题目: Implement strStr(). Returns the index of the first occurrence of needle in haystack, or -1 if ne ...

  6. Redis的集群配置

    如果我们redis的压力很大,如果我们的并发高到我们读数据和写数据都有了很大压力. 那么我们可能就需要把redis分开部署,并且配置为一个『主从』的状态. 在服务器上构筑Redis的集群配置: 1.切 ...

  7. unity 代码C#封装为dll

    1  Visual studio软件打开后创建一个项目 2并选择类库类型 3编写简单的代码看看效果(发现会报错),主要是没有添加类库,以及using UnityEngine;引用空间 4添加类库,引用 ...

  8. Java IO学习--(一)概述

    在这一小节,我会试着给出Java IO(java.io)包下所有类的概述.更具体地说,我会根据类的用途对类进行分组.这个分组将会使你在未来的工作中,进行类的用途判定时,或者是为某个特定用途选择类时变得 ...

  9. CSS3实现多样的边框效果

    半透明边框 实现效果: 实现代码: <div> 你能看到半透明的边框吗? </div> div { /* 关键代码 */ border: 10px solid rgba(255 ...

  10. java线程池原理

    在什么情况下使用线程池?     1.单个任务处理的时间比较短     2.将需处理的任务的数量大     使用线程池的好处:     1.减少在创建和销毁线程上所花的时间以及系统资源的开销     ...