异步加载JS几种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。
(1)defer -- 仅支持IE
异步加载,但要等到dom文档全部解析完才会被执行。
也可将代码写入内部。
(2)async
异步加载,加载完即执行.
只能加载外部脚本,不能把JS写入内部。
(3) 创建script,插入到DOM中,加载完毕后callBack
function loadScript(url, callback) {
var script = document.createElement('script'); // 创建script标签
// 如果存在script状态码为IE
if (script.readyState) {//IE
script.onreadystatechange = function () {
if (script.readyState == 'complete' || script.readyState == 'loaded') {
script.onreadystatechange = null;
callback();
}
}
} else {//Firefox, Safari, Chrome, Opera
script.onload = function () {
rotate();
}
}
script.src = url;
document.head.appendChild(script);
}
异步加载JS几种方式的更多相关文章
- 点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- js异步加载的5种方式
方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...
- JavaScript异步加载的三种方式——async和defer、动态创建script
一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...
- js异步加载的3种方式(转载)
1.defer标签 只支持IE defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...
- 网页性能优化之异步加载js文件
一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...
- 异步加载js的三种方法
js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...
- JS异步加载的三种方案
js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...
- route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()
1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...
随机推荐
- 文件load事件:img、iframe
iframe的 load 事件 在所有为IFRAME动态添加onload监听事件的方法中,只有 使用事件监听方式为 IFRAME 的 onload 事件绑定处理函数,IE6.7.8才有效.所以为 IF ...
- ANR异常
ANR异常 一.简介 解决方法:别在主线程中写非常耗时的操作 二.代码实例 点击之后,不停点击,乱点 出现anr异常 代码 /anr/src/anr/MainActivity.java package ...
- centos 6 安装python2.7和pip
由于scrapy1.0的发布,想在Linux上测试,所以安装了centos6.6:但是它的python版本为2.6,很多东西都不支持,所以需要升级为2.7: 首先是在window7上安装虚拟机,然后安 ...
- List和数组的相互转化
一.数组转化为list:Arrays.aslist(arr); public static void main(String[] args) { String[] arr={"apple&q ...
- 51NOD-1960-数学/贪心
1960 范德蒙矩阵 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注 LYK最近在研究范德蒙矩阵与矩阵乘法,一个范德蒙矩阵的形式如下: 它想通过构 ...
- nyoj998——欧拉+折半查找
Sum 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 给你一个数N,使得在1~N之间能够找到x使得x满足gcd( x , N ) >= M, 求解gcd( ...
- nyoj最少乘法次数——快速幂思想
最少乘法次数 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 给你一个非零整数,让你求这个数的n次方,每次相乘的结果可以在后面使用,求至少需要多少次乘.如24:2*2 ...
- js生成中文二维码
http://www.cnblogs.com/xcsn/archive/2013/08/14/3258035.html http://www.jb51.net/article/64928.htm 使用 ...
- Mysql 表锁定的问题
下面的几个语句查询到,但如何定位到对应的进程,还需要学习这些表的结构. select * from information_schema.innodb_trx ## 当前运行的所有事务select * ...
- UML_04_时序图
一.前言 时序图建模工具,推荐一个工具 https://www.zenuml.com/ 时序图是一种强调消息时序的交互图,他由对象(Object).消息(Message).生命线(Lifeline) ...