异步加载js的方式有哪些?_serein6的博客-程序员秘密

技术标签: es6  javascript  jquery  

1. onload时的异步加载

window.addEventLitener("load",loadHandler);
dunction loadHandler(){
    
	var gs = document.createElement("script");
	....
}

将script方法放在一个函数里面,然后在window的onload()方法里面执行

2. $(document).ready()

引入jquery

$(document).ready(function(){
    })

3.async

<script type="text/javascript" src="xxx.js" async></script>
  • async属性是HTML5新增属性,兼容性问题
  • async属性规定一旦脚本可用,则会异步执行
  • async属性仅适用于外部脚本
  • 不能保证脚本按顺序执行
  • 将在onload事件之前完成

4. defer

<script type="text/javascript" defer></script>
  • defer规定是否对脚本执行进行延迟,直到页面加载
  • 兼容所有浏览器
  • 如果脚本不会改变文档内容,可将defer属性加入到<script>标签中,以便加快处理文档的速度
  • 可以确保所有设置了defer属性的脚本按顺序执行

5. es6模块type="module"属性

<script type="module" src="xxx.js"></script>

浏览器对于带有type="module"的<script>,都是异步加载,不会造成堵塞浏览器,即等整个页面渲染完,再执行模块脚本,等同于打开的<script>标签的defer属性

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_44436509/article/details/108213503

智能推荐

【luogu1048】采药 [动规/01背包]_weixin_30379911的博客-程序员秘密

采药题目luoguP1048 杂 是一个裸的01背包f[v]表示不超过v的时间时最大价值 1 /* 2 id:gww 3 language: 4 啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊 5 */ 6 #include&lt;bits/stdc++.h&gt; 7 using namespace std; 8 const int N=100...

aws php 上传文件 限制大小_Web_php_include - 顾沐曦_weixin_39541767的博客-程序员秘密

Web_php_include思路审计代码&lt;?phpshow_source(__FILE__);echo $_GET['hello'];$page=$_GET['page'];while (strstr($page, "php://")) { $page=str_replace("php://", "", $page);}include($page);?...

【BZOJ】3922: Karin的弹幕_aocong4527的博客-程序员秘密

题意给定一个长度为\(n(1 \le n \le 70000)\)序列,\(m(1 \le m \le 70000)\)次操作:1. 对一段下标是等差数列的子序列求最大值;2. 单点修改。分析如果公差很大,那么速度是很快的。所以我们考虑阈值。题解设阈值\(k\)表示如果询问的公差小于等于\(k\)则用线段树求,否则暴力。则我们对阈值每一个公差\(i(1 \le i \le k...

linux有趣的小程序,Linux shell下30个有趣的命令和提示(推荐)_天天听讼的博客-程序员秘密

原标题:Linux shell下30个有趣的命令和提示(推荐)这些是我收集了多年的Linux shell的30个有趣的命令和提示。1. 监控命令(每2秒运行一次)watch "ls -larth"2. 使用一个端口杀死程序sudo fuser -k 8000/tcp3. 限制以下命令的内存使用ulimit -Sv 1000 # 1000 KBs = 1 MBulimit -Sv unlimited...

bzoj1260 [CQOI2007]涂色paint_bzoj 1260涂色 paint_wanherun的博客-程序员秘密

题目一道区间dp。套路f[i][j],来表示,考虑转移。首先很好想到的是,如果不改变颜色,f[i][j]=min(f[i][k],f[k+1][j])毫无疑问。那么如果要换颜色呢。显然此时转移要s[i]与s[j]相等(不然没意义),f[i][j]=f[p][q]+1,s[p]==s[q],然后各路dalao说f[i][j]=Min(f[i+1][j],f[i][j-1],f[i+1][j-1]+1)

计算机专业怎么发顶刊,计算机顶会和顶刊哪个难发,比如AI方向 - 学术会议 - 小木虫 - 学术 科研 互动社区..._李白涛的博客-程序员秘密

类别 期刊或论文评估分值理工医类 SCI JCR 1 区 ≧7JCR 2 区 5JCR 3 区 3其他 1中国计算机学会推荐的国际学术会议论文 A类 6B类 4C类 1人文社科类 SCISSCIA&HCI JCR 1 ...

随便推点

Elasticsearch——》kibana操作数据:查询、分页、排序、高亮_kibana 排序_小仙。的博客-程序员秘密

请参考:总结——》【Elasticsearch】Elasticsearch——》kibana操作索引:增删改查Elasticsearch——》kibana操作数据:增删改查

[转]想成为嵌入式程序员应知道的16个基本问题_weixin_33860528的博客-程序员秘密

这是嵌入式C程序员的基本知识。作者在Embedded Systems Programming杂志上发表了很多嵌入式系统开发方面的文章。  C语言测试是招聘嵌入式系统程序员过程中必须而且有效的方法。这些年,我既参加也组织了许多这种测试,在这过程中我意识到这些测试能为面试者和被面试者提供许多有用信息,此外,撇开面试的压力不谈,这种测试也是相当有趣的。  从被面试者的角度来讲,你能了解许多关于出题者...

原 mysql使用group by查询报错SELECT list is not in GROUP BY clause and contains nonaggregated column...解决方案_Java架构师Array的博客-程序员秘密

2019年06月19日 17:45:26爱学习的狮王阅读数 266收起所属专栏:mysql学习版权声明:本文为博主原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接和本声明。本文链接:https://blog.csdn.net/study_in/article/details/92625397MySQL5.7.5后only_full_group_by成...

程序员的效率,往往是由“编程能力”之外的东西决定的_架构师之路_的博客-程序员秘密

是否有过这样的困惑,很想潜心钻研技术,却不知道从哪里入手:看厚本的纸质书,没有大段的时间看英文官方文档,英语不过关搜网上技术文档,N个人说的都不一样参加技术大会,且不说贵...

模拟实现 JS 引擎:深入了解 JS机制 以及 Microtask and Macrotask_weixin_34308389的博客-程序员秘密

如果JavaScript是单线程的,那么我们如何像在Java中那样创建和运行线程?很简单,我们使用events或设定一段代码在给定时间执行,这种异步性在 JavaScript 中称为 event loop。在这篇文章中,主要想分析两个点:Javascript 中的 event loop 系统是如何工作;实现自定义 Javascript 引擎来解释 event loop 系统的工作原理...

华中科技大学计算机复试答案,华中科技大学计算机复试题目_weixin_39759441的博客-程序员秘密

==》08年的华科招收外校保送生上机试题:(1)输入一个十进制数,将其先转化为八进制数,然后再输出(2)用户输入一个文本名,编程实现输出文本中最长的一行和最短的一行。如果最长和最短的不止一行,请全部输出。(3)输入学生信息:学号,三门课程的成绩,学号为0时结束,将其存储在链表A中,从中找出分数大于平均分的学生,并将该学生信息按平均分降序排列存入到链表B中,最后输出链表B。==》08年的华科本校生保...

推荐文章

热门文章

相关标签