多个相同script引用探索
1、页面直接就有,或者document.write页面加载同步输出
其实就是当script是页面初始加载的一部分的情况,script是同步的,只有在上一个加载并执行完才会进行下一个script加载。
当然,可手动设置异步:async="async",页面加完,循序依次执行
<script src="http://localhost:8083/-0test/test.js?1"></script>
<script src="http://localhost:8083/-0test/test.js?2"></script>
<script src="http://localhost:8083/-0test/test.js?3"></script>
<script src="http://localhost:8083/-0test/test.js?4"></script>
<script src="http://localhost:8083/-0test/test.js?5"></script>
<script src="http://localhost:8083/-0test/test.js?6"></script>
2、页面中只有js增加的script,或是说是页面加载好后再js增加script
js全部执行完后,并且script已全部成功添加,新增的script才会执行,并且依次顺序执行。
所有ie也是如此
html文件
<div id="info"></div>
<script>
var s = document.createElement('script');
s.src = 'http://localhost:8083/-0test/test.js?5';
document.body.appendChild(s);
var s = document.createElement('script');
s.src = 'http://localhost:8083/-0test/test.js?6';
document.body.appendChild(s);
</script>
test.js文件
var s = document.getElementsByTagName('script');
s = s[s.length - 1];
document.getElementById('info').innerHTML +='<p>'+ s.src;
输出
http://localhost:8083/-0test/test.js?6
http://localhost:8083/-0test/test.js?6
3、js同时增加多个script,页面中已存在其它script
这种情况比较复杂,而且一般不会发生
只有在所有页面中的script加载并执行完后,新增的script才会执行,并且依次顺序执行。
但,确实是在?2位置被增加的,也就是说,document.body.appendChild并没有什么特殊情况,依然与文档加载同步进行,加载到哪里便在哪处理。
ie全系列(此时最高为11)中有些无规律,也许是appendChild先执行,也许是文档中存在的先执行,但肯定是?2之后。
html文件
<div id="info"></div>
<script src="http://localhost:8083/-0test/test.js?1"></script>
<script src="http://localhost:8083/-0test/test.js?2"></script>
<p>一点内容</p>
<script>
var s = document.createElement('script');
s.src = 'http://localhost:8083/-0test/test.js?5';
document.body.appendChild(s);
var s = document.createElement('script');
s.src = 'http://localhost:8083/-0test/test.js?6';
document.body.appendChild(s);
</script>
<script src="http://localhost:8083/-0test/test.js?3"></script>
<script src="http://localhost:8083/-0test/test.js?4"></script>
<script src="http://localhost:8083/-0test/test.js?7"></script>
<p>一点内容2</p>
test.js文件 同上
输出
http://localhost:8083/-0test/test.js?1
http://localhost:8083/-0test/test.js?2
一点内容
http://localhost:8083/-0test/test.js?3
http://localhost:8083/-0test/test.js?4
http://localhost:8083/-0test/test.js?7
一点内容2
http://localhost:8083/-0test/test.js?7
http://localhost:8083/-0test/test.js?7
多个相同script引用探索的更多相关文章
- .Net Core 项目中的包引用探索(使用VSCode)
本文组织有点乱,先说结论吧: 1 在 project.json 文件中声明包引用. 而不是像以前那样可以直接引用 dll. 2 使用 dotnet restore 命令后,nuget 会把声明的依赖项 ...
- 脚本引用中的defer和async的用法和区别
之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本 ...
- Bootstrap引用
<!--设置移动设置页面标准--> <meta name="viewport" content="width=device-width,i ...
- MVC模式下My97DatePicker日期控件引用注意事项
My97DatePicker日期控件之前在用webform模式开发的时候,只要 <script language="javascript" type="text/j ...
- javascript学习笔记(一):基础、输出、注释、引用、变量、数据类型
javascript脚本必须位于<script></script>之间,<script>标签可以位于<head>中,也可以位于<body>中 ...
- ASP.NET中母版页引用外部js或css文件无效,提示对象未定义解决方法
最近做网站用了一个js+css实现的带有二级菜单的导航条,在母版页创建好后,子页面调用出现了许多奇怪的问题,多方查证后的最终解决方案和大家分享下.... 1.路径问题 如果是一个单独的aspx页面调用 ...
- js script type 部分属性值分析
1. text/javascript: (1)<script type="text/javascript" src="Js/jquery-1.10.2.min.js ...
- vue 引用其他组件
1.在components 目录下新建Test.vue 文件 <template> <div class="test"> <h1>{{ msg ...
- vue 不用npm下载安装包 该如何引用js
公司电脑不让用npm ,vue的项目要使用moment.js, 用了各种script 引用,总是报错 正确的方式应该为: import {moment} from ‘moment.js ’ 不可以全 ...
随机推荐
- 推荐安卓开发神器(里面有各种UI特效和实例)
网上有很多开源的安卓类库很好用,对于刚学习安卓的童鞋亦或者老鸟都是很好的学习对象. 我平时有关注开源代码的习惯,这么多年也搜集了不少精彩的源码. 到后来发现自己手机里装的都是几百个demo app,删 ...
- 【JavaScript】JavaScript中的Timer是怎么工作的( setTimeout,setInterval)
原文(http://www.yeeyan.org/articles/view/luosheng/24380) 作为入门者来说,了解JavaScript中timer的工作方式是很重要的.通常它们的表现行 ...
- 教程:如何减小iOS应用程序的大小?
本文译自:Reducing the size of my App Q: 怎样才能让我的程序安装包小一点,让程序的下载和安装更快速? A: 本文收集了一些减小程序安装包大小的相关技巧(当第一次下载和安装 ...
- spring security源码分析之core包
Spring Security是一个能够为基于Spring的企业应用系统提供声明式的安全访问控制解决方案的安全框架.它提供了一组可以在Spring应用上下文中配置的Bean,充分利用了Spring I ...
- javascript函数中的实例对象、类对象、局部变量(局部函数)
定义 function Person(national,age) { this.age = age; //实例对象,每个示例不同 Person.national = national; //类对象,所 ...
- 如何使用nodejs发邮件
昨天就开始想使用nodemailer来实现一个发送邮件的功能,不过发现了很多个坑,网上给的资料也很杂很乱,所以决定写一篇真正能用的来帮助大家减少弯路 首先,我们先来看下代码,如上所示. 步骤: 1.下 ...
- GridView格式化
<asp:TemplateColumn HeaderText="进出境运输方式"> <ItemTemplate> <%# Eval(" ...
- 如何写出好的Java代码?
1. 优雅需要付出代价.从短期利益来看,对某个问题提出优雅的解决方法,似乎可能花你更多的时间.但当它终于能够正确执行并可轻易套用于新案例中,不需要花上数以时计,甚至以天计或以月计的辛苦代价时,你会看得 ...
- batchExportPNG.py不是我的代码
#coding=gbk#@author lifc,20140806#批量制作输出专题图import arcpy,os,time,math #testpath=raw_input("testp ...
- 【阿里云产品公测】ACE安装wordpress博客图文教程
作者:阿里云用户51干警网 阿里云ace搭建wordpress图文教程 按照大大说的,wordpress确实能够轻松创建,只有几步. 我想说,小白的世界技术大大还是不了解.想当初我了解一下怎么 ...