当用户开始访问，首先下载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. Linux查询已开启文件或已运行进程开启之文件fuser,lsof,pidof

    fuser:藉由文件(或文件系统)找出正在使用该文件的程序 [root@www ~]# fuser [-umv] [-k [i] [-signal]] file/dir 选项与参数: -u :除了进程 ...

  2. 如果以一个树状的形式返回一个UIView的所有子视图

    该方法也是从一个视频中看到,总觉得会有很大作用,故记录在这里. 它返回一个xml的字符串,用火狐浏览器或者其他可以格式化xml的工具打开,即可查看其层级关系. /** * 返回传入view的所有层级结 ...

  3. 机器学习算法与Python实践之（五）k均值聚类（k-means）

    机器学习算法与Python实践这个系列主要是参考<机器学习实战>这本书.因为自己想学习Python,然后也想对一些机器学习算法加深下了解,所以就想通过Python来实现几个比较常用的机器学 ...

  4. pandas数据处理基础——筛选指定行或者指定列的数据

    pandas主要的两个数据结构是:series(相当于一行或一列数据机构)和DataFrame(相当于多行多列的一个表格数据机构). 本文为了方便理解会与excel或者sql操作行或列来进行联想类比 ...

  5. tvtk管线技术、数据集与数据加载

    管线技术也称流水线技术(Pipeline)每个对象只实现相对简单的任务,整个管线进行复杂的可视化处理在tvtk中分为可视化管线和图形管线 可视化管线(Visualization Pipeline):将 ...

  6. Oracle表空间和表的常用操作指令

    查看端口号指令 netstat –a 设置: set pagesize 100; //设置每页显示的行数set linesize 200; //设置每页显示的字符数 空格也算col 列名A for a ...

  7. 【大前端攻城狮之路】JavaScript函数式编程

    转眼之间已入五月,自己毕业也马上有三年了.大学计算机系的同学大多都在北京混迹,大家为了升职加薪,娶媳妇买房,熬夜加班跟上线,出差pk脑残客户.同学聚会时有不少兄弟已经体重飙升,开始关注13号地铁线上铺 ...

  8. json的面向对象

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JNDI 使用

    J2EE技术规范(一)——JNDI 分类: java 基础2012-12-02 20:05 1539人阅读 评论(14) 收藏 举报 学习Java,我们首先要掌握的就是十三种技术规范,我们接下来就一步 ...

  10. Search in rotated array two

    description: Follow up for "Search in Rotated Sorted Array":What if duplicates are allowed ...