Javascript 中的defer属性分析及应用实例
当前位置:点晴教程→知识管理交流
→『 技术文档交流 』
[p]文档上说defer中的代码不立即执行,页面会继续载入,那defer中的代码具体在什么时候执行呢?在全部javascript代码载入之后?页面载入之后?onload之前还是之后?[/p]
[p]答案是:[/p]
[p]并不是说在网页载入时不执行,可以在网页写一个script.然后定义它,但是在载入时它还是执行了,[br]后来在找其它的东东时发现,因为它不有个子, 不知它是如何用,[br]原来它是在你的网页已截入完成后,你想动态添加一个新的<script>时用的,如果你只是object.innerhtml = "<script" + ">"..."";[br]那么当你调用你这个新定义的东东就会出错,说还未定义,当你在上面的代码加入defer时那么你就能成功调用它,[br]在下面的代码中你可以试下把它去掉, defer>";,那么你就会发现问题![br][br]<script>[br]function insertscript(){[br]var shtml="
";[br]var sscript="<script defer>";[br]sscript = sscript + "function go2(){ alert('hello from inserted script.') }";[br]sscript = sscript + "";[br]scriptdiv.innerhtml = shtml + sscript;[br]} [br]</script>[br][br][br][br][/p] [p]//defer属性指示该段脚本不会改变文档的内容。在文档完全显示之前,js解释器不执行这段代码。[br]具体到这个例子,因为js不允许动态生成js代码,所以去掉defer后产生的代码会被认为是非法的。加上defer后的代码,会被解释器认为是载入页面的时候跳过去的,可以执行。[/p] [p]<script src="../js/script.js" defer></script>[br]中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题[/p] [p][br]<script>[br]mybutton.click();[br]</script>[br][br]<script>[br]mybutton.click();[br]</script>[br][/p] [p]<script defer>[br]function document.body.onload() {[br]alert(document.body.offsetheight);[br]}[br]</script>[/p] [p]加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活![/p] [p]defer是脚本程序强大功能中的一个“无名英雄”。它告诉浏览器script段包含了无需立即执行的代码,并且,与src属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。[br]--但是 文档加载完毕了再执行脚本[/p] [p]最后请注意两点:[br]1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。[br]2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。[/p] [p]一个常用的优化性能的方法是:当脚本不需要立即运行时,在<script>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后,ie就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说,这也表明立即脚本最好放在function块中,并在document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮,或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行,使用defer属性得到的好处就不太大。[/p] 该文章在 2010/7/22 23:01:32 编辑过 |
关键字查询
相关文章
正在查询... |