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内的过程一样。

转载于:https://www.cnblogs.com/hz-blog/p/5562886.html

js、css引用文件的下载方式相关推荐

python博客下载本地文件_解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了...
1.今天网上下载一个博客项目,发现本地访问,js,css加载不了. 我想应该是项目上线的安全措施,但是我想调试项目.找到方法如下在settings.py里面编辑添加 STATICFILES_DIR ...
CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...
使用yuicompressor 压缩js, CSS
前言保持web页面的轻量级,提高网页工程设计提升web应用程序的性能永远是一个主要策略.但是,还是有一些其他的辅助策略提升系统系统,像压缩代码, HTTP压缩传输和使用CSS 精灵等. 压缩代码, ...
Grunt的配置及使用（压缩合并js/css）
Grunt的配置及使用(压缩合并js/css) 安装前提是你已经安装了nodejs和npm. 你能够在 nodejs.org 下载安装包安装.也能够通过包管理器(比方在 Mac 上用 homebre ...
程序员520❤七夕情人节表白代码Html+Js+Css花瓣相册网页模板❤程序员表白必备
❉ 520程序员求婚Html+Js+Css花瓣相册❤ (爱心3D动画,自定义文字)/ 程序员表白必备一年一度的/520情人节/七夕情人节/生日礼物/告白师妹/程序员表白, 非常经典的程序员式的表达爱 ...
HTML+JS+CSS+xml快速入门
一. HTML 1.HTML是什么 HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,由开发者编写的HTML文件会在浏览器中被加载和解析,然后通过一个页面表 ...
web项目引入PDF.js并添加水印禁止下载
目录 web项目引入PDF.js并添加水印禁止下载下载并引入PDF.js实现预览动态预览PDF文件隐藏打开.下载.打印等功能禁止键盘组合按键下载或另存为禁用鼠标操作添加全局水印 PDF文件 ...
使用 YUI Compressor 批量压缩JS/CSS
官方网址:http://developer.yahoo.com/yui/compressor/ 安装包下载地址:https://github.com/yui/yuicompressor/downloa ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...

js、css引用文件的下载方式

js、css引用文件的下载方式相关推荐

最新文章

热门文章