script defer(JS异步加载的几种方式)
本文目录
- JS异步加载的几种方式
- 关于script中alter弹出警告对话框之后,其确定按钮怎么链接到其他页面
- 怎样用JS控制一个按钮的可用次数
- 求js 变量锁
- js的defer=“defer“是什么意思
- JS 如何传递对象参数
- js调用中的defer=“defer“ 的作用是什么
JS异步加载的几种方式
异步加载又叫非阻塞加载,浏览器在下载执行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为请求成功后返回的resp***eText。
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):简单来说,就是在浏览器滚动到某个位置在触发相关的函数,实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢?可以通过一个定时器来实现,通过比较某一时刻页面目标节点位置和浏览器滚动条高度来判断是否需要执行函数。
关于script中alter弹出警告对话框之后,其确定按钮怎么链接到其他页面
使用用localhost.href=URL!
Resp***e.Write("《script defer》
alert(’未能获取用户名,请重新**’);
localhost.href=’你要跳转的页面’
《/script》");
怎样用JS控制一个按钮的可用次数
《script defer="defer"》
var x=0;
function checkRight(){
x=x+1;
document.getElementById(’dianjicishu’).innerHTML = x;
}
《/script》
求js 变量锁
1、 JS 没有变量锁
2、 JS 是单线程的,但是 setTimeout 或者 setInterval 会导致异步执行
3、 HTML 的标签里,《script defer》 也可以导致脚本异步执行
4、 NodeJS 里,很多函数都是异步的
记得不要将异步和多线程混淆起来。
如果查不到原因,请上代码。
以上,请采纳,请给分。
js的defer=“defer“是什么意思
《script defer="defer" src="JavaScript.js" type="text/javascript"/》
这段JS代码在设定了defer="defer",就会在所有的html代码执行玩以后在执行。其实最长用的是defer="true"
JS 如何传递对象参数
《html》
《head》《/head》
《script》
function check(val)
{
alert(document.getElementById(val).value);
}
《/script》
《/head》
《body》
《input name="textfield" type="text" value="888" id="test"》
《/body》
《script》
check("test");
《/script》
《/html》
这样是可以的,你那样在还没有运行到《input name="textfield" type="text" value="888" id="test"》 时就调用check肯定获取不到对象啊
或者这样
《html》
《head》《/head》
《script defer》
function check(val)
{
alert(document.getElementById(val).value);
}
check("test");
《/script》
《/head》
《body》
《input name="textfield" type="text" value="888" id="test"》
《/body》
《/html》
加上defer表示加载完文档以后才开始执行js
js调用中的defer=“defer“ 的作用是什么
常规调用方法 从来没有在script标签中加如果 defer 属性defer的意思是等页面中的标签加载完后在加载引入的js脚本,但defer也有弊端,在 标签中加入后 所引入的脚本就不能写document.write(),因为这样会直接输出效果;还有就是立即执行的脚本不能加入 defer="defer",(但默认defer是false,可以加默认属性);但火狐浏览器是不支持这个脚本属性; chrome浏览器应该是支持的,但chrome浏览器不像IE浏览器按顺序执行,在chrome中两个脚本,下面脚本借用上面脚本,会出现下面可能先执行,上面还没有加载完。 解决方法: 把js脚本放到页面最底部。