`
berrywu
  • 浏览: 127857 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

JS属性defer的好处

阅读更多

其实就是简单的利用defer属性,让浏览器读JS脚本的时候完全不等脚本开始读就开始读下面的图片啊,html代码了。然后让js脚本自己在那里慢慢读取完以后再执行。

给外链的js脚本添加defer="true",像下面这个这样就可以了:

<script defer="true" src="JavaScript.js" type="text/javascript"/>

特别是比较大的脚本,提高整个网页的载入速度是非常明显的。


注意defer="true"还可以用作defer="defer",似乎使用defer="defer"比较普遍,我查看一个微软的文档,好像XTHML格式的网页用defer="true"比较恰当。

另外注意,defer="true"这个东西不要在脚本程序段中调用document.write命令,因为将产生直接输出效果

如果不显式声明 defer ,则其默认值 是false

 

defer 和onload的执行顺序的问题

<script language="JavaScript" type="text/javascript" defer="defer"> alert('defer里的内111容') </script> <script language = 'javascript' type='text/javascript'> alert('普通的script'); window.onload = function(){alert('onload里的script')}; </script> <body> ################################################################################################################################################################################################### <br> <script language = 'javascript' type='text/javascript'> alert('页面的script'); </script> ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ ◎◎◎◎◎◎◎◎◎◎◎◎◎ </body> 

 

结论:

 普通的,边解释,边执行。
 DEFER,网页脚本代码加载完后执行。
 ONLOAD,所有内容(包括图片等)加载完后执行。

 

分享到:
评论

相关推荐

    Script中defer的作用

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

    js的[defer]和[async]属性

    JS中defer和async属性是HTML文档加载和执行外部JavaScript文件时的重要关键字,它们指示浏览器如何处理脚本与页面内容的加载顺序和执行时机。了解这两个属性对于编写高性能的网页至关重要。 首先,我们需要了解...

    深入理解javascript中defer的作用

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

    JS脚本defer的作用示例介绍

    JS脚本中的defer属性是一个非常有用的功能,尤其在处理页面加载和执行脚本的过程中。这个属性指示浏览器在HTML文档完全解析完毕后再执行脚本,这样可以避免脚本执行过程中因找不到对象而导致的错误。本文将详细介绍...

    defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法

    将`defer`属性添加到`&lt;script&gt;`标签,如`&lt;script defer="defer" src="Jquery/DatePicker/WdatePicker.js" type="text/javascript"&gt;&lt;/script&gt;`,可以确保这个脚本在DOM解析完成后执行,从而避免了与未加载元素的冲突...

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

    defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。然而,以defer为例,一些细节问题可能开发者却并不一定...

    06-defer和async.md

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

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

    在JavaScript的世界里,`async` 和 `defer` 是两个在`&lt;script&gt;`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题,确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...

    JS中script标签defer和async属性的区别详解

    这些属性为开发者提供了更多的控制,使得JavaScript的加载和执行更加灵活,避免了因脚本加载导致的页面渲染延迟。 1. **没有defer或async属性**: 当`&lt;script&gt;`标签没有这两个属性时,浏览器会立即下载脚本,并在...

    浅谈HTML5 defer和async的区别

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

    HTML5 script元素async、defer异步加载使用介绍

    HTML5的`&lt;script&gt;`元素引入了两个重要的属性:`async`和`defer`,这两个属性主要用于异步加载JavaScript文件,以减少页面加载时的阻塞,提高用户体验。在过去,开发者通常需要通过复杂的JavaScript技巧来实现类似的...

    javascript延时加载之defer测试

    JavaScript中的`defer`属性是一种延迟加载机制,它允许开发者控制脚本执行的时机,以便优化网页性能。在HTML文档解析到`&lt;script&gt;`标签时,通常会暂停文档的解析,执行脚本,然后继续解析。这可能导致页面加载变慢,...

    浅析script标签中的defer与async属性

    在HTML中,`&lt;script&gt;`标签通常用来引入JavaScript文件,但在实际应用中,为了优化页面加载性能,我们有时会使用`defer`和`async`属性。这两个属性都是用来控制脚本的加载和执行方式。 **1. defer属性** `defer`属性...

    【JavaScript源代码】如何在Vue中实现Svelte的Defer Transition.docx

    总之,虽然Vue不像Svelte那样直接提供defer transition功能,但我们可以通过巧妙地组合Vue的`transition-group`组件和JavaScript钩子,以及自定义CSS和JavaScript动画,来实现类似的效果。这个过程可能比Svelte的...

    动态加载外部JS文件

    1. 使用`&lt;script&gt;`标签的`async`和`defer`属性:这两个属性可以在不使用额外的JavaScript库或API的情况下实现异步加载。`async`属性使脚本并行加载,不保证执行顺序;`defer`属性则保证脚本在DOM解析完成后、...

    javascript函数动态加载javascript文件

    通过添加`async`或`defer`属性,可以实现非阻塞加载。例如: ```html &lt;script async src="path/to/your/script.js"&gt; ``` `async`属性使得脚本在可用时立即加载,但不保证执行顺序。`defer`属性则确保脚本在文档...

    javascript按顺序加载运行js方法

    首先如果大家对JS动态加载有不理解的地方可以参阅: javascript动态加载实现方法 动态加载JS文件的三种方法 如何你的 script 上没有任何 异步,阻塞 等标注: ...但是defer属性在各个浏览器中支持程度有点不同,就是

Global site tag (gtag.js) - Google Analytics