`
zendj
  • 浏览: 122223 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

JS脚本defer的作用

阅读更多

JS脚本defer的作用

摘自:安安的BLOG

<script src="../cgi-bin/delscript.js" defer></script>
中的defer作用是文档加载完毕了再执行脚本,这样回避免找不到对象的问题---有点问题


<button id="myButton" onclick="alert('ok')">test</button>
<script>
myButton.click();
</script>



<script>
myButton.click();
</script>
<button id="myButton" onclick="alert('ok')">test</button>



<script defer>
function document.body.onload() {
alert(document.body.offsetHeight);
}
</script>


加上 defer 等于在页面完全在入后再执行,相当于 window.onload ,但应用上比 window.onload 更灵活!

defer是脚本程序强大功能中的一个“无名英雄”。它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。
--但是 文档加载完毕了再执行脚本

最后请注意两点:
1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。
2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

一个常用的优化性能的方法是:当脚本不需要立即运行时,在<SCRIPT>标签中设置“defer”属性。 (立即脚本没有被包含在一个function块中,因此会在加载过程中执行。) 设置“defer”属性后,IE就不必等待该脚本装载和执行完毕。这样页面加载会更快。一般来说,这也表明立即脚本最好放在function块中,并在 document或者body对象的onload 句柄中处理该函数。在有一些脚本需要依赖用户操作而执行时----例如点击按钮,或者移动鼠标到某个区域----使用该属性非常有用。但当有一些脚本需要在页面加载过程中或加载完成后执行,使用defer属性得到的好处就不太大。

分享到:
评论

相关推荐

    JS脚本defer的作用示例介绍

    总结来说,defer属性是JavaScript脚本加载和执行中一个非常有用的特性,尤其在处理页面加载性能优化时。开发者应该根据实际需求合理使用defer属性,并注意避免在defer脚本中使用document.write和立即执行的全局变量...

    Script中defer的作用

    总的来说,`defer`属性是JavaScript中一种优化页面加载的重要工具,它允许脚本在不阻塞DOM构建的情况下延迟执行,并按照指定顺序运行。合理利用`defer`,可以提升用户体验,尤其是对于大型应用程序和资源密集型网站...

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探

    引入JavaScript脚本代码到HTML文档中

    这篇博客“引入JavaScript脚本代码到HTML文档中”将探讨如何将JS代码整合到HTML页面,以便实现网页的交互功能。 首先,JavaScript的引入方式主要有三种:内联方式、内部脚本方式和外部脚本方式。 1. 内联方式:这...

    深入理解javascript中defer的作用

    JavaScript中的`defer`属性是一个用于`&lt;script&gt;`标签的关键特性,尤其在优化页面加载性能和控制脚本执行顺序方面起到重要作用。它主要适用于外部脚本(即通过`src`属性引用的JavaScript文件),而非内联脚本。下面将...

    JS脚本运行缺少对象

    标题与描述:“JS脚本运行缺少对象”,这一问题在网页开发和维护中较为常见,主要表现为JavaScript脚本在执行过程中因找不到预期的对象而引发错误。这种情况不仅会影响网页的正常加载和功能实现,还可能导致用户体验...

    JS script脚本中async和defer区别详解

    总结,`async`和`defer`属性为JavaScript脚本的加载提供了灵活性。`async`适合那些不依赖其他脚本且不需要特定执行顺序的资源,而`defer`则适用于需要按顺序执行且不阻塞页面渲染的脚本。理解这两个属性的差异可以...

    如何让动态插入的javascript脚本代码跑起来

    本文将详细介绍如何让动态插入的JavaScript脚本代码正确运行,并探讨其中的一些关键点。 首先,我们来看一下动态插入脚本的两种常见方式: 1. 直接插入`&lt;script&gt;`标签 这是最直观的方法,通过JavaScript创建一个...

    javascript脚本压缩工具

    JavaScript脚本压缩工具是一种用于优化和减小程序大小的实用程序,尤其在Web开发中非常常见。JavaScript代码在未经压缩的情况下可能会包含许多空格、换行符、注释以及可选的逗号,这些都会增加文件的加载时间和网络...

    js的[defer]和[async]属性

    理解并正确使用defer和async属性,能够帮助开发者更有效地控制页面中JavaScript脚本的加载和执行时机,从而优化页面加载性能,提升用户体验。在实际开发中,我们应当根据不同的应用场景选择合适的属性,或通过测试来...

    Defer-JS:将脚本的加载推迟到页面加载完成后

    延迟JS 将脚本的加载推迟到页面完成加载之后。 将脚本放在页面底部、使用 defer 属性... 只需将脚本从 defer.js 文件中复制出来,并将其放置在结束正文标记之前的脚本标记中(当然,将您的脚本添加到数组并删除注释)。

    关于Javascript中defer和async的区别总结

    没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。 [removed][removed] 有 async,加载和...

    PyPI 官网下载 | dash_defer_js_import-0.0.2.tar.gz

    dash_defer_js_import通过延迟非关键JavaScript文件的加载,使得主页面能更快地呈现给用户,然后再在后台加载这些脚本,从而优化用户体验。 使用dash_defer_js_import时,开发者需要识别哪些JavaScript文件是非关键...

    浅谈HTML5 defer和async的区别

    HTML5的`&lt;script&gt;`元素提供了两个可选的属性,`defer`和`async`,它们主要用于控制外部JavaScript脚本的加载和执行方式。这两者的设计目标都是为了优化页面加载性能,避免因为脚本的执行阻塞页面的渲染。 1. **没有...

    async与defer的区别

    形象的描述了async与defer的区别,...defer是延迟执行,在浏览器看起来的效果像是将脚本放在了 body后面一样(虽然按规范应该是在 DOMContentLoaded事件前,但实际上不同浏览器的优化效果不一样,也有可能在它后面)

    06-defer和async.md

    - `&lt;script defer src="xxx.js"&gt;`属性也会使得JavaScript文件并行下载,但不同的是,下载完成后它不会暂停HTML文档的解析,会等待整个HTML文档解析完成后才执行JavaScript文件。这样可以保证脚本在文档DOM完全构建...

Global site tag (gtag.js) - Google Analytics