JavaScript异步加载的三种方式——async和defer、动态创建script
一、script标签的位置
传统的做法是：所有script元素都放在head元素中，必须等到全部js代码都被下载、解析、执行完毕后，才能开始呈现网页的内容（浏览器在遇到<body>标签时才开始呈现内容），这在需要很多js代码的页面来说，会造成浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将是一片空白。因此。一般把script标签放在</body>标签前面。
二、嵌入脚本与外部脚本
尽可能使用外部脚本，理由如下：
(1)将所有js文件放在一个文件夹中，再不触及HTML代码的情况下编辑js文件，便于维护。
(2)浏览器可以根据具体的设置所有外部js文件，同一个文件只需下载一次，可以加快页面加载的速度。
三、async和defer
1、defer="defer"和async="true/false"
html4.0中定义了defer；html5.0中定义了async。
(1)没有defer或async，浏览器会立即加载并执行指定的JS脚本，也就是说，不等待后续载入的文档元素，读到JS脚本就加载并执行。
(2)有async，加载后续文档元素的过程将和JS的加载与执行并行进行（异步）。
(3)有defer，加载后续文档元素的过程将和JS的加载并行进行（异步），但JS的执行要在所有文档元素解析完成之后，DOMContentLoaded 事件触发之前完成。
2、defer和async的共同点：
(1)不会阻塞文档元素的加载。
(2)使用这两个属性的脚本中不能调用document.write方法。
(3)允许不定义属性值，仅仅使用属性名。
(4)只适用于外部脚本（虽然IE4-IE7还支持对嵌入脚本的defer属性，但在IE8及之后的版本就只支持外部脚本，对不支持的会直接忽略defer属性，因此把延迟脚本放在页面底部仍然是最佳选择）。
3、defer和async的不同点：
(1)每一个async属性的脚本一旦加载完毕就会立刻执行，一定会在window.onload之前执行，但可能在document的DOMContentLoaded之前或之后执行。不保证按照指定它们的顺序来执行，如果JS有依赖性就要注意了。指定异步脚本的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容，因此，建议异步脚本不要在加载期间修改DOM。
(2)每一个defer属性的脚本都是在文档元素完全载入后，一般会按照原本的顺序执行，同时一般会在document的DOMContentLoaded之前执行，相当于window.onload，但应用上比 window.onload 更灵活！实际上，defer 更接近于DomContentLoad。事实上，延迟脚本不一定会按顺序执行，也不一定会在DOMContentLoaded事件触发之前执行，因此最好只包含一个延迟脚本。
四、动态创建script
在没有定义defer和async之前，异步加载的方式是动态创建script，通过window.onload方法确保页面加载完毕再将script标签插入到DOM中。
- function addScriptTag(src){
- var script = document.createElement('script');
- script.setAttribute("type","text/javascript");
- script.src = src;
- document.body.appendChild(script);
- }
- window.onload = function(){
- addScriptTag("js/index.js");
JavaScript异步加载的三种方式——async和defer、动态创建script的更多相关文章
- JS异步加载的三种方式
js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...
- javascript异步加载的三种解决方案
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- 点评js异步加载的4种方式
主要介绍了点评js异步加载的4种方式,帮助大家更全面的了解js异步加载方式,感兴趣的小伙伴们可以参考一下 js异步加载的4种方式,点评开始. <!DOCTYPE html> <htm ...
- HBase协处理器加载的三种方式
本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...
- JS异步加载的三种方案
js加载的缺点:加载工具方法没必要阻塞文档,个别js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载. 一.def ...
- js异步加载的3种方式（转载）
1.defer标签 只支持IE defer属性的定义和用法: 属性规定是否对脚本执行进行延迟,直到页面加载为止.有的 javascript 脚本 document.write 方法来创建当前的文 ...
- js异步加载的三种解决方案
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
- js异步加载的5种方式
方案1:$(document).ready 点评: 1.需要引用jquery 2.兼容所有浏览器. 方案2:<script>标签的async="async"属性 asy ...
- 异步加载JS几种方式
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页 ...
随机推荐
- jmeter笔记（3）--响应结果中文乱码的解决方式
1.举例 新建HTTP请求访问百度首页,响应结果如下: 2.原因 Jmeter安装目录/bin/jmeter.properties中sampleresult.default.encoding默认为IS ...
- User-Agent 请求消息头
User-Agent User-Agent, 用户代理 请求消息头,其中包含了 客户机.客户端 的一些信息, 如 浏览器版本 和 类型, 操作系统的类型等. 具体解析 步骤, 推荐以下 博客文章 ...
- 微服务之路由网关—Nginx
Nginx 简介Nginx 是一款自由的.开源的.高性能的 HTTP 服务器和反向代理服务器,它具有有很多非常优越的特性: • 作为 Web 服务器: 相比 Apache , Nginx 使用更少的 ...
- LFYZ-OJ ID: 1026 数的计数（数的计算）NOIP2001
数的计算(数的计数) 题目描述 我们要求找出具有下列性质数的个数(包含输入的自然数n).先输入一个自然数n(n<=1000),然后对此自然数按照如下方法进行处理: 不作任何处理; 在它的左边加上 ...
- pymysql常见问题
1.Python中pymysql出现乱码的解决方法 一般来说,在使用mysql最麻烦的问题在于乱码. 查看mysql的编码: show variables like 'character_set_%' ...
- [物理学与PDEs]第5章第2节 变形的描述, 应变张量 2.1 变形梯度张量
$$\bex \rd{\bf y}={\bf F}\rd {\bf x}, \eex$$ 其中 ${\bf F}=\n_x{\bf y}=\sex{\cfrac{\p y_i}{\p x_j}}$ 为 ...
- TED学习笔记
20180621(如何做得更好) 多一些探索,询问,聆听,奋斗,成就自己,比一味的做事儿有效的多. 1.刻意让自己的生活在两个区域交替:(1)学习区Learning Zero (2)执行区Perfor ...
- 爬虫工程师JD归纳
核心能力归纳 负责:多平台信息的抓取,清洗和分析工作 要求: 熟悉常用开源爬虫框架,如 scrapy / pyspider 了解基于Cookie的登录原理,熟悉常用的信息抽取技术,如正则表达式.XP ...
- installshield中杀死某一个进程
///////////////////////////////////////////////// // Function prototypes. ////////////////////////// ...
- 【原创】Linux基础之后台运行
linux服务器通常都是远程登录的,执行命令或者脚本时,如果连接断掉(执行时间较长或者网络不稳定时),那么进程也就没了,这时只能重新连接重新执行,这时可以使用后台执行: 1 nohup 命令 nohu ...