Javascript 加载详解
2019独角兽企业重金招聘Python工程师标准>>>
<script src="http://yourdomain.com/script.js"></script>
2. 常见异步加载(Script DOM Element)
(function() { var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); })();
异步加载又叫非阻塞,浏览器在下载执行 js 同时,还会继续进行后续页面的处理。
(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })();
{var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s); })();
3. onload 时的异步加载
(function() { function async_load(){ var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'http://yourdomain.com/script.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x); } if (window.attachEvent) window.attachEvent('onload', async_load); else window.addEventListener('load', async_load, false); })();
4.异步加载的其它方法
- XHR Eval
- XHR Injection
- Script in Iframe
- Script Defer
- document.write Script Tag
- 还有一种方法是用 setTimeout 延迟0秒 与 其它方法组合。
var xhrObj = getXHRObject(); xhrObj.onreadystatechange = function() { if ( xhrObj.readyState != 4 ) return; eval(xhrObj.responseText); }; xhrObj.open('GET', 'A.js', true); xhrObj.send('');
var iframe = document.createElement('iframe'); document.body.appendChild(iframe); var doc = iframe.contentWindow.document; doc.open().write('<body onload="insertJS()">'); doc.close();
<script type="text/javascript"> /* var ... */ </script>
<script src="file.js" defer></script>
<script src="file.js" async></script>
- type 属性在HTML 4中是必须的,在HTML5中是可选的。
- async 属性是HTML5中新增的。
- 个别属性(xml:space)在HTML5中不支持。
- 没有 async 属性,script 将立即获取(下载)并执行,然后才继续后面的处理,这期间阻塞了浏览器的后续处理。
- 如果有 async 属性,那么 script 将被异步下载并执行,同时浏览器继续后续的处理。
- HTML4中就有了defer属性,它提示浏览器这个 script 不会产生任何文档元素(没有document.write),因此浏览器会继续后续处理和渲染。
- 如果没有 async 属性 但是有 defer 属性,那么script 将在页面parse之后执行。
- 如果同时设置了二者,那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理,而不是同步方式。
<head> <script src=“…”></script> </head>
- 阻止了后续的下载;
- 在IE 6-7 中 script 是顺序下载的,而不是现在的 “并行下载、顺序执行” 的方式;
- 在下载和解析执行阶段阻止渲染(rendering);
... <script src=“…”></script> </body>
- 不阻止其它下载;
- 在IE 6-7 中 script 是顺序下载的;
- 在下载和解析执行阶段阻止渲染(rendering);
var se = document.createElement ('script'); se.src = 'http://anydomain.com/A.js'; document.getElementsByTagName('head') [0].appendChild(se);
- 不阻止其它下载;
- 在所有浏览器中,script都是并行下载;
- 只在解析执行阶段阻止渲染(rendering);
var se = new Image(); se.onload = registerScript(); se.src = 'http://anydomain.com/A.js'; 把下载 js 与 解析执行 js 分离出来
- 不阻止其它下载;
- 在所有浏览器中,script都是并行下载;
- 不阻止渲染(rendering)直到真正需要时;
转载于:https://my.oschina.net/Lonniecode/blog/158497
Javascript 加载详解相关推荐
- Android Loader 异步加载详解二:探寻Loader内部机制
Android Loader 异步加载详解二:探寻Loader内部机制 转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/7025991 ...
- Android Loader 异步加载详解一:基础概念
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/70241844 本文出自[赵彦军的博客] Android Loader 异步加载详解 ...
- Tensorflow 2.x(keras)源码详解之第十章:keras中的模型保存与加载(详解Checkpointmd5模型序列化)
大家好,我是爱编程的喵喵.双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中.从事机器学习以及相关的前后端开发工作.曾在阿里云.科大讯飞.CCF等比赛获得多次Top名次.现 ...
- (10) Hibernate懒加载详解
懒加载为hibernate中比较常用的特性之一,下面我们详细来了解下懒加载的原理和注意事项 Load()方法的懒加载原理 在Hibernate中,查询方法有两个,分别是get()和load(),这两种 ...
- echars vue 添加数据没更新_vue在使用ECharts时的异步更新和数据加载详解
前言 最近在学习eCharts,学习到了异步更新和数据加载这一块,觉着有必要总结一下,方法以后的时候参考学习,在开始本文之前,对eCharts不熟悉的朋友们可以参考下这篇文章:下面话不多说了,来一起看 ...
- Linux内核如何加载固件,驱动是如何工作的_Linux设备驱动的固件加载详解
作为一个驱动作者, 你可能发现你面对一个设备必须在它能支持工作前下载固件到它里面. 硬件市场的许多地方的竞争是如此得强烈, 以至于甚至一点用作设备控制固件的 EEPROM 的成本制造商都不愿意花费. ...
- javascript BOM对象详解
javascript BOM对象详解 目标:本章节将分为9点详细介绍有关BOM对象的知识点 1.什么是BOM 2.BOM的构成 3.顶级对象window 4.window对象常见事件(页面加载事件和体 ...
- 网页javascript加载不出_写给初学者的JavaScript异步编程和背后思想
导读:对于接触JavaScript这门编程语言没有多久的本菜鸡而言,在相当长的一段时间内,我都完全无法理解这门语言中的异步编程,不明白什么叫异步编程以及为什么需要异步编程.为什么顺序执行程序就不行了呢 ...
- javaScript函数模块详解
javaScript函数模块详解 函数实际上是对象,每个函数都是Function类型的实例,而Function也有属性和方法,和其他引用类型一样 可以将函数名想象成指针,函数想象成对象 注意, ...
最新文章
- 【动态规划】硬币问题
- Windows 7 with SP1中英文原版MSDN下载汇总(全版本收录完毕)
- Python基础,Hello,world
- 数据库系统概论:第二章 关系数据库
- 5. 深入研究 UCenter API 之 MVC 网站下的用法(转载)
- Linux程序之触摸,linux 触摸屏驱动编写
- 迅速步入jQuery的殿堂
- java工程师面试经典题目整理
- 【kafka】kafka NoSuchElementException ArrayDeque getLast 压缩方式不同
- JavaScript获取本机浏览器UA助力Python爬取糗事百科首页
- MySQL→数据库、启动连接数据库、SQL→DDL数据定义语言及数据类型、DML数据操作语言、DQL数据查询语言、数据库约束→主键、唯一、非空、默认、外键、SQL、三大范式及一多关系、视图、内外连接
- 六石管理学:头目们为什么要忽略产品质量
- pc套件 无法连接pc CDC Comms Interface
- 数据新闻大趋势 释放可视化报道的力量------读后随笔
- vue老项目升级vue-cli3.0问题总结
- kvm直通sata_KVM虚拟化win10显卡直通一例
- C盘爆满上热搜,简单几招释放几十G空间,一下子就不红了
- Adobe Premiere Pro 2020 系统兼容性报告:不支持的视频驱动程序
- php 1 second,php中的会话机制(1)
- .netCHARTING报表图表控件详细介绍