相关文章
详解JS异步加载的三种方式
2024-12-28 05:45

一:同步加载

我们平时使用的最多的一种方式。

同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止后续的解析,只有当当前加载完成,才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为,就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处,这样尽可能减少页面阻塞。

二:异步加载

异步加载又叫非阻塞加载,浏览器在下载执行js的同时,还会继续进行后续页面的处理。主要有三种方式。

方法一:也叫script DOM Element

但是这种加载方式执行完之前会阻止onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。

方法二:onload时的异步加载

这种方法只是把插入script的方法放在一个函数里面,然后放在window的onload方法里面执行,这样就解决了阻塞onload事件触发的问题。

注:DOMContentLoaded与load的区别。前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。

方法三:其他方法

由于Javascript的动态性,还有很多异步加载方法: XHR Injection、 XHR eval、 script In Iframe、 script defer属性、 document.write(script tag)。

XHR Injection(XHR 注入):通过XMLHttpRequest来获取Javascript,然后创建一个script元素插入到DOM结构中。ajax请求成功后设置script.text为请求成功后返回的responseText。

script In Irame:在父窗口插入一个iframe元素,然后再iframe中执行加载JS的操作。

GMail Mobile:业内JS内容被注释,所以不会执行,在需要的时候,获取script中的text内容去掉注释,调用eval()执行。

    HTML5新属性:async和defer属性

defer属性:IE4.0就出现。defer属声明脚本中将不会有document.write和dom修改。浏览器会并行下载其他有defer属性的script。而不会阻塞页面后续处理。注:所有的defer脚本必须保证按顺序执行的。

async属性:Html5新属性。脚本将在下载后尽快执行,作用同defer,但是不能保证脚本按顺序执行。他们将在onload事件之前完成。

Firefox 3.6、Opera 10.5、IE 9和最新的Chrome和Safari都支持async属性。可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。

没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有async属性,那么script将被异步下载并执行,同时浏览器继续后续的处理。

总结: 对于支持HTML5的浏览器,实现JS的异步加载只需要在script元素中加上async属性,为了兼容老版本的IE还需加上defer属性;对于不支持Html5的浏览器(IE可以用defer实现),可以采用以上几种方法实现。原理基本上都是向DOM中写入script或者通过eval函数执行JS代码,你可以把它放在匿名函数中执行,也可以在onload中执行,也可以通过XHR注入实现,也可以创建一个iframe元素,然后在iframe中执行插入JS代码。

三:延迟加载

有些JS代码在某些情况在需要使用,并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。将JS切分成许多模块,页面初始化时只加载需要立即执行的JS,然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。
JS的加载分为两个部分:下载和执行。异步加载只是解决了下载的问题,但是代码在下载完成后就会立即执行,在执行过程中浏览器处于阻塞状态,响应不了任何需求。

解决思路:为了解决JS延迟加载的问题,可以利用异步加载缓存起来,但不立即执行,需要的时候在执行。如何进行缓存呢?将JS内容作为Image或者Object对象加载缓存起来,所以不会立即执行,然后在第一次需要的时候在执行。

    1:模拟较长的下载时间:

    利用thread让其sleep一段时间在执行下载操作。

    2:模拟较长的JS代码执行时间

    这段代码将使JS执行5秒才完成!

JS延迟加载机制(LazyLoad):简单来说,就是在浏览器滚动到某个位置在触发相关的函数,实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢?可以通过一个定时器来实现,通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。

    以上就是本篇文章【详解JS异步加载的三种方式】的全部内容了,欢迎阅览 ! 文章地址:http://sjzytwl.xhstdz.com/news/12467.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://sjzytwl.xhstdz.com/mobile/ , 查看更多   
最新文章
【原】十大公认性能最强的手机排行手机排行「【原】十大公认性能最强的手机排行」
在当今的手机市场中,各大品牌纷纷推出具有各种特色的手机,以满足不同用户的需求。在这篇文章中,我们将为大家介绍十大公认性能
10款冬天温暖实用礼物攻略:精致实用数码礼物,适合送男女朋友好物手机云台「10款冬天温暖实用礼物攻略:精致实用数码礼物,适合送男女朋友好物」
​​今天这篇攻略是各种数码礼物,有便宜一些的,也有一些稍微贵一些的,想要挑选一些比较适合送男女朋友的实用礼物的话,可以看
那双腿真好看,像一双筷子一样直。我手机「那双腿真好看,像一双筷子一样直。」
1. 这脚油门加的刚才和同事逛街,见一美女,身材好,腿修长,我忍不住夸:“那双腿真好看,像一双筷子一样直。”同事脱口而出:
近视眼挑手机屏幕,究竟是选LCD还是OLED?手机怎么选「近视眼挑手机屏幕,究竟是选LCD还是OLED?」
最近有很个朋友正打算换机,于是他问到了笔者这里,希望我能推荐几款合适的LCD屏幕。我自己倒是很意外,没想到朋友还是LCD情怀党
苹果14传输到新手机,竟然这么简单我手机「苹果14传输到新手机,竟然这么简单」
苹果的iPhone 14系列为用户带来了卓越的性能和丰富的功能。然而,当您升级到新手机时,如何将旧手机的数据传输到新手机成为一个
郑在玹//课上玩手机被发现啦上课玩手机「郑在玹//课上玩手机被发现啦」
数学课……“唉,好烦哦,果然数学课最无聊了”你嘟囔着,左望右看着,嗯……趴到了一大片阿,我也困,想睡觉……可惜辽,数学老
手机摄影技巧手机摄影「手机摄影技巧」
手机摄影技巧:  1.了解摄影的基本元素光(顺光、侧光、顶光、逆光、黄金时段)   光是摄影的生命。有了光,万物才有了可以被
已预定x200 pro mini,分享下我的换机原因我手机「已预定x200 pro mini,分享下我的换机原因」
线下有优惠所以在线下订了,只能订512的,已经跟导购说要1t的了,到时如果没有1t的就再等等。为什么选这个机子?先说说我的用机
为什么你的外卖“烧钱”推广还是没单量?手机搜狐网「为什么你的外卖“烧钱”推广还是没单量?」
美团的竞价推广产品很多,到底我该怎么选推广产品?烧钱的速度很快,可是烧不出来几单,投入产出比极低?高度依赖推广,推广一停
相关文章