方案1：$(document).ready

点评：

1、需要引用jquery

2、兼容所有浏览器。

方案2：<script>标签的async="async"属性

async的定义和用法(是HTML5的属性)

async 属性规定一旦脚本可用，则会异步执行。

点评：

1、HTML5中新增的属性，Chrome、FF、IE9&IE9+均支持（IE6~8不支持）。此外，这种方法不能保证脚本按顺序执行。

2、async 属性仅适用于外部脚本（只有在使用 src 属性时）。

方案3：<script>标签的defer="defer"属性

defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。

有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。

如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。

点评：兼容所有浏览器。此外，这种方法可以确保所有设置defer属性的脚本按顺序执行。

方案4：动态创建<script>标签

示例：

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            (function(){
                var s = document.createElement('script');
                s.type = 'text/javascript';
                s.src = "http://code.jquery.com/jquery-1.7.2.min.js";
                var tmp = document.getElementsByTagName('script')[0];
                tmp.parentNode.insertBefore(s, tmp);
            })();
        </script>
    </head>
    <body>
    </body>
</html>
点评：兼容所有浏览器。
方案5：加载es6模块的时候设置type=module
异步加载不会造成阻塞浏览器，页面渲染完再执行，可以同时加上async属性，异步执行脚本。

js异步加载的5种方式的更多相关文章

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

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

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

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

  3. js异步加载的3种方式（转载）

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

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

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

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

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

  6. js异步加载的三种解决方案

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...

  7. js页面加载的几种方式的速度： window.onload、 $(window).load、 $(function(){}）、 $(document).ready(function () {})、onload=‘asd（）’

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

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

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

  9. js 异步加载的方式

    js 异步加载的方式 渲染引擎遇到 script 标签会停下来,等到执行完脚本,继续向下渲染 defer 是“渲染完再执行”,async 是“下载完就执行”,defer 如果有多个脚本,会按照在页面中 ...

随机推荐

  1. call与apply简单介绍

    var pet={ word:'...', speak:function(say){ console.log(say+' '+this.word) } } //pet.speak('speak')// ...

  2. Java并发编程中的相关注解

    引自:http://www.cnblogs.com/phoebus0501/archive/2011/02/21/1960077.html Java并发编程中,用到了一些专门为并发编程准备的 Anno ...

  3. 2013年第四届蓝桥杯JavaB组省赛试题解析

    题目及解析如下: 题目大致介绍: 第一题到第四题是结果填空,方法不限只要得到最后结果就行 第五题和第六题是代码填空题,主要考察算法基本功和编程基本功 第七题到第十题是编程题,要求编程解决问题 第一题 ...

  4. sqlserver 导入导出

    待写 excel 导入 数字日期等导入为文本,在excel设置类型为文本再导入即可. Excel数字.文本混合列导入SQL Server出现的问题&解决办法 Excel文件: 序号 姓名 内部 ...

  5. 按键显示按键编码 keycode

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. Xcode OpenGL ES Frame Capture的使用

    一.使用背景 近期在Xcode中使用OpenGL ES 2.0实现一些效果,刚开始存在一些性能问题(CPU和GPU),幸运的是Xcode中自带了免费的性能工具Instruments,其中包含OpenG ...

  7. 35. Oracle监听器启动出错：本地计算机上的OracleOraDb11g_home1TNSListener服务启动后又停止了解决方案

    一.原因分析 你安装oracle的时候是连网的,那么listener.ora文件里的HOST=网络给你分配的IP地址,而在你断网的时候就会出现这样的情况. 三.解决办法 方法一:监听器 通过liste ...

  8. Lua脚本语法说明(转)

    Lua脚本语法说明(增加lua5.1部份特性) Lua 的语法比较简单,学习起来也比较省力,但功能却并不弱. 所以,我只简单的归纳一下Lua的一些语法规则,使用起来方便好查就可以了.估计看完了,就懂得 ...

  9. 根据svm将视频帧转换为img

    # -*- coding: utf-8 -*- """ Created on Mon Oct 1 09:32:37 2018 @author: Manuel " ...

  10. Django--views(视图层)

    路径匹配后-----传给视图函数 一.视图函数 视图层,熟练掌握两个对象即可:请求对象(request)和响应对象(HttpResponse) 一个视图函数,简称视图,是一个简单的Python 函数, ...