3个文件,一个index.html如下

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js加载顺序</title>
</head>
<body>
显示内容不
<script src="a1.js" type="text/javascript"></script>
<script src="a2.js" type="text/javascript"></script>
</body>
</html>

a1.js如下

 // a1.js
/*
这里粘贴一本小说,目的让该文件变大,使得下载较慢。
*/
var a = 111;
var b = 222;

a2.js如下

 // a2.js
var c = a+b;
alert(c);
alert('ddd');

我将a1.js做到20m那么大,在谷歌浏览器下,测试,发现,a1不下载完,a2也就不执行。原来担忧,a1过大,没下载完,而a2已结下载完成,a2中要用到a1中的变量怎么办,现在明白了,如果a1没下载完成,那么a2是不会执行的。

同样,将html变成如下

<script src="a1.js" type="text/javascript"></script>
<script src="a2.js" type="text/javascript"></script>
这里显示内容

会发现,如果a1.js没有下载完成的话,浏览器里是不会显示

这里显示内容

的,也在按顺序等待~~和图片不是一回事,图片不会等待上面个先显示再显示下面的。而js会等待后再执行。

JavaScript加载次序问题的更多相关文章

  1. 怎么样加快JavaScript加载和执行效率

    概览 无论当前 JavaScript 代码是内嵌还是在外链文件中,页面的下载和渲染都必须停下来等待脚本执行完成.JavaScript 执行过程耗时越久,浏览器等待响应用户输入的时间就越长.浏览器在下载 ...

  2. javascript加载顺序

    javascript加载顺序 <script type="text/javascript" src="jquery.js"></script& ...

  3. JSBinding + SharpKit / JavaScript 加载流程

    首先,现在的方案是游戏启动就加载全部的 JavaScript 代码. 先看下 StreamingAssets/JavaScript/ 文件夹下的目录结构:

  4. Javascript加载速度慢解决办法

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢.解决办法:换一个js包含的方式,让javascript加载速度倍 ...

  5. javascript javascript加载类似星座、血型的函数

     javascript加载类似星座.血型的函数 //加载血型 function bloodtypelaod(constellation) { var obj = document.getElement ...

  6. 让javascript加载速度倍增的方法(解决JS加载速度慢的问题)

    通常我们的网站里面会加载一些js代码,统计啊,google广告啊,百度同盟啊,阿里妈妈广告代码啊,一堆,最后弄得页面加载速度很慢,很慢. 解决办法:换一个js包含的方式,让javascript加载速度 ...

  7. ArcGIS api for javascript——加载查询结果,悬停显示信息窗口

    转自原文 ArcGIS api for javascript——加载查询结果,悬停显示信息窗口 描述 本例在开始和地图交互前执行一个查询任务并加在查询结果.这允许用户鼠标悬停在任意郡县时立即见到Inf ...

  8. JS,Javascript加载与函数执行过程

    Js,Javascript加载与函数执行过程 test.html <!DOCTYPE HTML> <html lang="en"> <head> ...

  9. 加快JavaScript加载和执行效率

    JavaScript 在浏览器中的性能成为开发者所面临的最重要的可用性问题.而这个问题又因 JavaScript 的阻塞特性变的复杂,也就是说当浏览器在执行 JavaScript 代码时,不能同时做其 ...

随机推荐

  1. 架构师系列文:通过Spring Cloud组件Hystrix合并请求

    在前文里,我们讲述了通过Hystrix进行容错处理的方式,这里我们将讲述通过Hystrix合并请求的方式 哪怕一个URL请求调用的功能再简单,Web应用服务都至少会开启一个线程来提供服务,换句话说,有 ...

  2. CollapsingToolbarLayoutDemo【可折叠式标题栏,顺便带有CardView卡片式布局】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 CollapsingToolBarLayout是一个作用于ToolBar基础之上的布局,它也是由Design Support库提供的 ...

  3. Solr 16 - 增删改Solr中索引数据的几种方式 (在URL上或Web页面中操作)

    目录 1 添加/更新索引数据 1.1 JSON格式的操作 1.2 XML格式的操作 2 删除索引数据 2.1 删除符合特定条件的数据 2.2 删除指定ID的数据 2.3 删除全部索引数据 3 在doc ...

  4. 从PRISM开始学WPF(五)MVVM(一)ViewModel-更新至Prism7.1

    0x5 MVVM [7.1updated]截止到目前,我们看到7.1的更新主要在三个地方 PrismApplication ,并且不再使用Bootstrapper 更新了unity,现在使用prism ...

  5. git使用教程指南

    前言  Git是一个开源的分布式版本控制系统.其核心就在于版本控制.  在实际编码过程中,我们往往会忘记上次对文件的修改内容.若是刚刚修改的还好说,撤销操作即可.但若这是你昨天做的修改并关闭了IDE呢 ...

  6. 每周分享五个 PyCharm 使用技巧(一)

    PyCharm 是大多数 Python 开发者的首选 IDE,每天我们都在上面敲着熟悉的代码,写出一个又一个奇妙的功能. 一个每天都在使用的工具,如果能掌握一些高效的使用技巧,肯定会给我们的开发效率带 ...

  7. c#实战开发:以太坊Geth 命令发布智能合约 (五)

    Token的合约代码我们参考Token-Factory的代码. 打开  https://remix.ethereum.org/#optimize=false&version=soljson-v ...

  8. Django之模板系统

    变量的使用: def test(request): num=1 s='hello' li=[1,2,['a','b']] dic={'name':'w','age':1} se={1,2,3} tup ...

  9. TestLink-Windows安装教程

    TestLink-Windows安装教程 QQ群交流:585499566 一.这篇文章的目的 以后工作中要使用Testlink来管理测试的流程,需要在本地或者Testlink服务器上练习使用,在个人本 ...

  10. python datetime操作

    #datetime object转化为timestamp import datetime now = datetime.datetime.now() now_timestamp = time.mkti ...