多个相同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 ’ 不可以全 ...
随机推荐
- 如何理解js
1.js/dom功能 2.performance 3.code organization 4.tools and flow 如何理解js代码,代码即业务. 如何快速理解代码业务.
- iOS开发——高级UI之OC篇&UIdatePicker&UIPickerView简单使用
UIdatePicker&UIPickerView简单使用 /***************************************************************** ...
- 压缩工具和整盘备份工具dd
一.使用gzip压缩文件 gzip是GNU zip的缩写. [命令格式] gzip [option] filename [常用选项] c:压缩后将结果输出到标准输出,并保留原始文件. d:解压缩文件. ...
- Debian的定时执行命令Crontab
转载:http://i.592.net/?post=276 Debian的定时执行命令Crontab,这个相当于Windows的计划任务 想要让Debian定时执行命令就得靠crontab了! ...
- A Simple Problem with Integers 多树状数组分割,区间修改,单点求职。 hdu 4267
A Simple Problem with Integers Time Limit: 5000/1500 MS (Java/Others) Memory Limit: 32768/32768 K ...
- 【Python千问 1】Python核心编程(第二版)导读
第一章 欢迎来到Python世界 什么是Python Python的起源 Python的特点 下载Python 安装Python 运行Python Python文档 比较Python(与其它语言的比较 ...
- 【Android Api 翻译1】Android Texting(2)Testing Fundamentals 测试基础篇
Testing Fundamentals The Android testing framework, an integral part of the development environment, ...
- iOS 10 的一些资料整理
文/判若两人丶(简书作者)原文链接:http://www.jianshu.com/p/0cc7aad638d9 1.iOS 10 隐私权限设置 iOS 10 开始对隐私权限更加严格,如果你不设置就会直 ...
- leetcode 题解:Remove Duplicates from Sorted Array II(已排序数组去三次及以上重复元素)
题目: Follow up for "Remove Duplicates":What if duplicates are allowed at most twice? For ex ...
- [置顶] 《算法导论》习题解答搬运&&学习笔记 索引目录
开始学习<算法导论>了,虽然是本大部头,可能很难一下子看完,我还是会慢慢地研究的. 课后的习题和思考有些是很有挑战性的题目,我等蒻菜很难独立解决. 然后发现了Google上有挺全的algo ...