默认情况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几种方式的更多相关文章

  1. 点评js异步加载的4种方式

    主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...

  2. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  3. js异步加载的5种方式

    方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...

  4. JavaScript异步加载的三种方式——async和defer、动态创建script

    一.script标签的位置 传统的做法是:所有script元素都放在head元素中,必须等到全部js代码都被下载.解析.执行完毕后,才能开始呈现网页的内容(浏览器在遇到<body>标签时才 ...

  5. js异步加载的3种方式(转载)

    1.defer标签 只支持IE    defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...

  6. 网页性能优化之异步加载js文件

    一个网页的有很多地方可以进行性能优化,比较常见的一种方式就是异步加载js脚本文件.在谈异步加载之前,先来看看浏览器加载js文件的原理. 浏览器加载 JavaScript 脚本,主要通过<scri ...

  7. 异步加载js的三种方法

    js加载时间线 : 它是根据js出生的那一刻开始记录的一系列浏览器按照顺序做的事,形容的就是加载顺序,可以用来优化什么东西,理论基础,背下来. 1.创建Document对象,开始解析web页面.解析H ...

  8. JS异步加载的三种方案

    js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...

  9. route按需加载的3种方式:vue异步组件、es提案的import()、webpack的require.ensure()

    1. vue异步组件技术 vue-router配置路由,使用vue的异步组件技术,可以实现按需加载. 但是,这种情况下一个组件生成一个js文件.举例如下: { path: '/promisedemo' ...

随机推荐

  1. 微信公众平台开发(一) 配置接口与验证URL

    一.简介 微信公众平台是腾讯公司在微信的基础上新增的功能模块,通过这一平台,个人和企业都可以打造一个微信的公众号,并实现和特定群体的文字.图片.语音的全方位沟通.互动. 二.通讯机制 三.注册微信平台 ...

  2. STOMP协议规范【转】

    STOMP协议规范英文原文:http://stomp.github.io/stomp-specification-1.2.html STOMP协议规范译文原文:http://simlegate.com ...

  3. java:历史回顾

    1.String和StringBuffer区别 2.Runtime和System类,包括对象垃圾收集 Rumtime.gc() System.gc() 调用的其实就是Runtime的gc回收 3.da ...

  4. css3中自定义 placeholder 文本颜色

    对于 ie 浏览器我们可以通过自定义的 class 名称,直接修改 span 这个标签的样式.对于其他浏览器诸如谷歌和火狐就需要特殊处理了,不多说直接上代码: ::-webkit-input-plac ...

  5. iOS安全系列之 HTTPS 进阶

    上一篇<iOS安全系列之一:HTTPS>被CocoaChina转载,还顺便上了下头条: 打造安全的App!iOS安全系列之 HTTPS,高兴之余也有些诚惶诚恐,毕竟那篇文章只是介绍了比较偏 ...

  6. Highcharts 测量图;Highcharts 圆形进度条式测量图;Highcharts 时钟;Highcharts 双轴车速表;Highcharts 音量表(VU Meter)

    Highcharts 测量图 配置 chart.type 配置 配置 chart 的 type 为 'gauge' .chart.type 描述了图表类型.默认值为 "line". ...

  7. Ansible 小手册系列 十七(特性模块)

    异步操作和轮询 --- # Requires ansible 1.8+ - name: 'YUM - fire and forget task' yum: name=docker-io state=i ...

  8. 二十二、utl_inaddr(用于取得局域网或Internet环境中的主机名和IP地址)

    1.概述 作用:用于取得局域网或Internet环境中的主机名和IP地址. 2.包的组成 1).get_host_name作用:用于取得指定IP地址所对应的主机名语法:utl_inaddr.get_h ...

  9. LeetCode OJ:Maximal Square(最大矩形)

    Given a 2D binary matrix filled with 0's and 1's, find the largest square containing all 1's and ret ...

  10. 从userAgent判断浏览器是什么(chorme ie 火狐)浏览器类型检测、浏览器检测

    一.正确的方法: 通过navigator对象的userAgent属性来判断, 主要是判断userAgent 的信息里是否含有以下字段信息: js代码(非完整版) /************ navig ...