js、css 参考文件下载方法
js、css引用文件的下载方式
一、测试(chrome):
1、直接使用<script...>、<link...>标签来混合引入脚本文件和css文件,
<script async src="1.js"></script> <link rel="stylesheet" href="a.css"> <script async src="2.js"></script> <link rel="stylesheet" href="b.css"> <script async src="3.js"></script>
所有文件异步并行下载,asyn属性的有无不影响下载。html下载完成后(css、js还未下载)即触发DOMContentLoaded事件。
2、通过如下document.write的方式加入脚本,并与<link...>标签混杂:
<script>document.write('<script src="1.js"></scr'+'ipt>');</script> <link rel="stylesheet" href="a.css"> <script>document.write('<script src="2.js"></scr'+'ipt>');</script> <link rel="stylesheet" href="b.css"> <script>document.write('<script src="3.js"></scr'+'ipt>');</script>
则:A、首先第一个css文件之前的js文件与所有的css文件并行下载。B、在全部css文件下载完成之后,第一个css文件之后的所有js文件串行下载,所有head中的css、js下载完毕后触发DOMContentLoaded事件。
即a.css、b.css、1.js并行下载,而2.js、3.js在所有css文件下载完毕之后串行下载。
3、通过如下document.write的方式加入脚本,且script加上async属性,并与<link...>标签混杂:
<script>document.write('<script async src="1.js"></scr'+'ipt>');</script> <link rel="stylesheet" href="a.css"> <script>document.write('<script async src="2.js"></scr'+'ipt>');</script> <link rel="stylesheet" href="b.css"> <script>document.write('<script async src="3.js"></scr'+'ipt>');</script>
则:A、首先第一个css文件之前的js文件与所有的css文件并行下载,css全部下载完毕后触发DOMContentLoaded事件。B、在css文件全部下载完成之后,第一个css文件之后所有js文件并行下载。
即a.css、b.css、1.js并行下载,而2.js、3.js在所有css文件下载完毕之后并行下载(异步)。
4、通过如下appendChild的方式加入脚本,并与<link...>标签混杂:
<script type="text/javascript"> function _appendJs(v) { var gumAppscript = document.createElement("script"); gumAppscript.src = v + ".js"; document.head.appendChild(gumAppscript); } </script> <script>_appendJs(1)</script> <link rel="stylesheet" rel="stylesheet" href="a.css"> <script>_appendJs(2)</script> <link rel="stylesheet" rel="stylesheet" href="b.css"> <script>_appendJs(3)</script>
则:下载过程与上述第3种基本一样,即appendChild添加script默认为async下载。
5、上述下载过程,在head内与在body内的过程一样(执行过程另论)。
二、推测:
1、一旦有css文件引用开始后,后续的document.write添加script变成串行下载。
2、DOMContentLoaded事件触发时机,第1种方式最快,第3、4种方法次之,第2种最慢。
3、appendChild添加script标签,与document.write添加async的script,下载基本一致。
4、就文件下载过程而言,在head内与在body内的过程一样。
推荐阅读
-
从远程 Windows 共享目录读取文件 + 解析后缀为 .mdb 的文件 - 两种下载文件的方法:jcifs、smbj
-
Java 8新特性探究(十三)JavaFX 8新特性以及开发2048游戏-JavaFX历史## 跟java在服务器端和web端成绩相比,桌面一直是java的软肋,于是Sun公司在2008年推出JavaFX,弥补桌面软件的缺陷,请看下图JavaFX一路走过来的改进 从上图看出,一开始推出时候,开发者需使用一种名为JavaFX Script的静态的、声明式的编程语言来开发JavaFX应用程序。因为JavaFX Script将会被编译为Java bytecode,程序员可以使用Java代码代替。 JavaFX 2.0之后的版本摒弃了JavaFX Script语言,而作为一个Java API来使用。因此使用JavaFX平台实现的应用程序将直接通过标准Java代码来实现。 JavaFX 2.0 包含非常丰富的 UI 控件、图形和多媒体特性用于简化可视化应用的开发,WebView可直接在应用中嵌入网页;另外 2.0 版本允许使用 FXML 进行 UI 定义,这是一个脚本化基于 XML 的标识语言。 从JDK 7u6开始,JavaFx就与JDK捆绑在一起了,JavaFX团队称,下一个版本将是8.0,目前所有的工作都已经围绕8.0库进行。这是因为JavaFX将捆绑在Java 8中,因此该团队决定跳过几个版本号,迎头赶上Java 8。 ##JavaFx8的新特性 ## ###全新现代主题:Modena 新的Modena主题来替换原来的Caspian主题。不过在Application的start方法中,可以通过setUserAgentStylesheet(STYLESHEET_CASPIAN)来继续使用Caspian主题。 参考http://fxexperience.com/2013/03/modena-theme-update/ ###JavaFX 3D 在JavaFX8中提供了3D图像处理API,包括Shape3D (Box, Cylinder, MeshView, Sphere子类),SubScene, Material, PickResult, LightBase (AmbientLight 和PointLight子类),SceneAntialiasing等。Camera类也得到了更新。从JavaDoc中可以找到更多信息。 ###富文本 强化了富文本的支持 ###TreeTableView ###日期控件DatePicker 增加日期控件 ###用于 CSS 结构的公共 API
-
两种实现JavaScript动态加载CSS文件的方法解析
-
使用JavaScript动态添加CSS样式表文件的方法
-
使用Nginx将.js和.css文件转换为纯文本类型
-
多种使用原生JS设置CSS样式的方法
-
如何处理Nginx反向代理后网页JS/CSS文件加载问题?
-
在HTML里如何引用并运用外部JS文件中的函数与方法
-
四种简单易懂的方法:用HTML、CSS和JS制作轮播图
-
在HTML中轻松运用JavaScript:外链与内联方法总结 - 我们的建议:优先选择外部文件导入方式来实现JS脚本