Javascript 的加载方式大概有以下几种
加载方式一
<script src='http://l.me/1.js'></script>
加载方式二
document.write('<script src="http://l.me/1.js"><\/script>');
加载方式三
var s = document.createElement('script');
s.setAttribute('src', 'http://l.me/1.js');
document.head.appendChild(s);
加载方式四
<script src='http://l.me/1.js' defer='defer'></script>
经过测试发现:
onload时间不变,domready时间, 方案三、四比一、二短很多;
原因分析:
方式一,浏览器遇到script标签是,会去请求资源,请求完之后再执行,在此期间block了对此元素后面dom元素的渲染,所以domready时间拉长了。
方式二,原因同方式一,之所以会这样是因为document.write出来的元素也会被即刻渲染,即浏览器输出之后就当作dom元素去处理。
方式三,是常用的动态加载方式,这种做法彻底将加载JS移出文档加载流,实现异步加载。有些人可能会顾虑这样加载会不会影响浏览器对该文件的缓存,其实不会的,因为浏览器缓存是针对请求的,而不是针对请求是怎么来的,就跟ajax请求也会被缓存一个道理。
方法四,添加异步属性,也就是defer,好处在于加载的时候不会block后面的元素,但是目前只有 Internet Explorer 支持 defer 属性。
测试代码如下:
<html>
<head><title>test document.write</title>
<script>
var G_top = +new Date;
</script>
</head>
<body>
<script src='http://l.me/1.js'></script>
<script>
//document.write('<script src="http://l.me/1.js"><\/script>');
/*
var s = document.createElement('script');
s.setAttribute('src', 'http://l.me/1.js');
document.head.appendChild(s);
*/
window.addEventListener('DOMContentLoaded', function (){alert(+new Date - G_top)});
</script>
</body>
</html>
分享到:
相关推荐
springloaded springboot 热加载
springloaded spring-boot 热加载
加载 img 加载图像后调用回调。 安装 使用: component install staygrimm/img-loaded 使用: var loaded = require ( 'staygrimm/img-loaded' ) ; 使用 : npm install img-loaded 用法 加载(图像,回调) ...
JavaScript is all like "You images done yet or what?" imagesloaded.desandro.com Detect when images have been loaded.
Last Loaded 点阵图纸.DBKLast Loaded 点阵图纸.DBK
LOADED
springloaded-1.2.6.RELEASE.jar
我们可以对加载的 JS 对象使用 onload 来判断(js.onload),此方法 Firefox2、Firefox3、Safari3.1+、Opera9.6+ 浏览器都能很好的支持,但 IE6、IE7 却不支持。曲线救国 —— IE6、IE7 我们可以使用 js....
加载了dom 检查DOM是否已像一样加载与DOMContentLoaded不同,这在加载DOM之后包含在内时也适用。安装$ npm install dom-loaded用法import domLoaded from 'dom-loaded' ;await domLoaded ;console . log ( 'The DOM ...
qt编译连接MYSQL出现QMYSQL driver not loaded 基本成为普遍现象,网络上大多数解决方案是重新编译驱动,亲身证实是可行方案之一。这里给出更简单的办法,适用于ubuntu,直接安装该deb包,就可以了。ubuntu16.04和...
工作原理基于jdk代理方式,实现JVM的Instrumentation进行premain或agentmain代理加载以及TransformerManager的transform方法进行翻译,对增加的class进行listener,对已有class文件内容变化lastModified进行实时...
Last Loaded 仿真原理图.pdsbak
Last Loaded huzhi.DBK
Last Loaded 我设计的万年历.DBK
springloaded-1.2.4.RELEAS
Navicat 远程连接 Oracle 时提示oracle library is not loaded 所需文件
springloaded-1.2.5.RELEASE.jar 可实现java 程序的热部署
runtime error R6002 -floating point support not loaded 将未出现过该错误的电脑中Keil的\ARM\ARMCC\bin\armlink.exe复制,覆盖掉报错电脑中的Keil安装目录下\ARM\ARMCC\bin\armlink.exe即可。每天出现该报错,...
异步加载器JS和CSS文件 安装 wget https://raw.githubusercontent.com/vistoyn/loadjs/master/index.js -O ldjs.js 包括: [removed][removed] $ load(arr,message,deftype) 从Arr异步加载js和CSS文件 arr-...
提高开发效率的利器,实现热加载,通过简单配置即可在eclipse或其他开发工具中实现热加载,尤其是对web开发,不用每次改动就手动重启服务器才能看到效果,使用这个工具包能实现即改即看到效果!