Js延迟加载的方式有哪些？defer和async的区别是什么？

JavaScript013

Js延迟加载的方式有哪些？defer和async的区别是什么？,第1张

J s延迟加载的方式有哪些？

给javascript标签添加 defer和async属性。

defer和async的区别是什么？

1、defer和async都是使script异步加载的意思，当都没有设置这个属性的时候，html的加载会被阻塞等着script加载完成和执行完成后再渲染页面。

2、当设置了async时，异步加载，一旦加载完成则阻塞html渲染，进行执行，而且如果有多个script标签则谁先加载完，谁先执行。

3、当设置了defer时，异步加载，不会阻塞html，待html渲染完毕后再进行script执行。

注意：ie只支持defer

本文介绍了如何延迟javascript代码的加载，加快网页的访问速度。

当一个网站有很多js代码要加载，js代码放置的位置在一定程度上将会影像网页的加载速度，为了让我们的网页加载速度更快，本文总结了一下几个注意点：

1、延迟加载js代码

复制代码

代码如下:

<script

type=”text/javascript”

src=”"

id=”my”></script>

<script

type=”text/javascript”>

setTimeout(“document.getElementById(‘my').src='include/php100.php'

“,3000)//延时3秒

</script>

这样通过延迟加载js代码，给网页加载留出更多的时间！

2、js最后加载方案一

在需要插入JS的地方插入以下代码:

程序代码

复制代码

代码如下:

<span

id=”L4EVER”>LOADING…</span>

当然,那个LOADING…你可以换成自己喜欢的小图片.看起来很有AJAX效果呢.

然后在页面最底端插入:

程序代码

复制代码

代码如下:

<span

id=”AD_L4EVER”>你的JS代码在这里!</span

>

<script>L4EVER.innerHTML=AD_L4EVER.innerHTMLAD_L4EVER.innerHTML=”"</script>

3、让JS最后加载方案二

这个牵涉到网页的加载顺序问题，例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行javascript的代码~~~

所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。

解决办法：换一个js包含的方式，让javascript加载速度倍增。

把通常加载方式：

<script src="xxxx.js"></script>

改变成：

<script type="text/javascript">document.write("<scr"+"ipt src=\"xxx.js\"></sc"+"ript>")

</script>

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。