摘自:安安的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属性得到的好处就不太大。
分享到:
相关推荐
总结来说,defer属性是JavaScript脚本加载和执行中一个非常有用的特性,尤其在处理页面加载性能优化时。开发者应该根据实际需求合理使用defer属性,并注意避免在defer脚本中使用document.write和立即执行的全局变量...
总的来说,`defer`属性是JavaScript中一种优化页面加载的重要工具,它允许脚本在不阻塞DOM构建的情况下延迟执行,并按照指定顺序运行。合理利用`defer`,可以提升用户体验,尤其是对于大型应用程序和资源密集型网站...
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。...在《浏览器环境下JavaScript脚本加载与执行探
这篇博客“引入JavaScript脚本代码到HTML文档中”将探讨如何将JS代码整合到HTML页面,以便实现网页的交互功能。 首先,JavaScript的引入方式主要有三种:内联方式、内部脚本方式和外部脚本方式。 1. 内联方式:这...
JavaScript中的`defer`属性是一个用于`<script>`标签的关键特性,尤其在优化页面加载性能和控制脚本执行顺序方面起到重要作用。它主要适用于外部脚本(即通过`src`属性引用的JavaScript文件),而非内联脚本。下面将...
标题与描述:“JS脚本运行缺少对象”,这一问题在网页开发和维护中较为常见,主要表现为JavaScript脚本在执行过程中因找不到预期的对象而引发错误。这种情况不仅会影响网页的正常加载和功能实现,还可能导致用户体验...
总结,`async`和`defer`属性为JavaScript脚本的加载提供了灵活性。`async`适合那些不依赖其他脚本且不需要特定执行顺序的资源,而`defer`则适用于需要按顺序执行且不阻塞页面渲染的脚本。理解这两个属性的差异可以...
本文将详细介绍如何让动态插入的JavaScript脚本代码正确运行,并探讨其中的一些关键点。 首先,我们来看一下动态插入脚本的两种常见方式: 1. 直接插入`<script>`标签 这是最直观的方法,通过JavaScript创建一个...
JavaScript脚本压缩工具是一种用于优化和减小程序大小的实用程序,尤其在Web开发中非常常见。JavaScript代码在未经压缩的情况下可能会包含许多空格、换行符、注释以及可选的逗号,这些都会增加文件的加载时间和网络...
理解并正确使用defer和async属性,能够帮助开发者更有效地控制页面中JavaScript脚本的加载和执行时机,从而优化页面加载性能,提升用户体验。在实际开发中,我们应当根据不同的应用场景选择合适的属性,或通过测试来...
延迟JS 将脚本的加载推迟到页面完成加载之后。 将脚本放在页面底部、使用 defer 属性... 只需将脚本从 defer.js 文件中复制出来,并将其放置在结束正文标记之前的脚本标记中(当然,将您的脚本添加到数组并删除注释)。
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。 [removed][removed] 有 async,加载和...
dash_defer_js_import通过延迟非关键JavaScript文件的加载,使得主页面能更快地呈现给用户,然后再在后台加载这些脚本,从而优化用户体验。 使用dash_defer_js_import时,开发者需要识别哪些JavaScript文件是非关键...
HTML5的`<script>`元素提供了两个可选的属性,`defer`和`async`,它们主要用于控制外部JavaScript脚本的加载和执行方式。这两者的设计目标都是为了优化页面加载性能,避免因为脚本的执行阻塞页面的渲染。 1. **没有...
形象的描述了async与defer的区别,...defer是延迟执行,在浏览器看起来的效果像是将脚本放在了 body后面一样(虽然按规范应该是在 DOMContentLoaded事件前,但实际上不同浏览器的优化效果不一样,也有可能在它后面)
- `<script defer src="xxx.js">`属性也会使得JavaScript文件并行下载,但不同的是,下载完成后它不会暂停HTML文档的解析,会等待整个HTML文档解析完成后才执行JavaScript文件。这样可以保证脚本在文档DOM完全构建...