其实就是简单的利用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,所有内容(包括图片等)加载完后执行。
分享到:
相关推荐
总的来说,`defer`属性是JavaScript中一种优化页面加载的重要工具,它允许脚本在不阻塞DOM构建的情况下延迟执行,并按照指定顺序运行。合理利用`defer`,可以提升用户体验,尤其是对于大型应用程序和资源密集型网站...
JS中defer和async属性是HTML文档加载和执行外部JavaScript文件时的重要关键字,它们指示浏览器如何处理脚本与页面内容的加载顺序和执行时机。了解这两个属性对于编写高性能的网页至关重要。 首先,我们需要了解...
JavaScript中的`defer`属性是一个用于`<script>`标签的关键特性,尤其在优化页面加载性能和控制脚本执行顺序方面起到重要作用。它主要适用于外部脚本(即通过`src`属性引用的JavaScript文件),而非内联脚本。下面将...
JS脚本中的defer属性是一个非常有用的功能,尤其在处理页面加载和执行脚本的过程中。这个属性指示浏览器在HTML文档完全解析完毕后再执行脚本,这样可以避免脚本执行过程中因找不到对象而导致的错误。本文将详细介绍...
将`defer`属性添加到`<script>`标签,如`<script defer="defer" src="Jquery/DatePicker/WdatePicker.js" type="text/javascript"></script>`,可以确保这个脚本在DOM解析完成后执行,从而避免了与未加载元素的冲突...
defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。然而,以defer为例,一些细节问题可能开发者却并不一定...
- `<script defer src="xxx.js">`属性也会使得JavaScript文件并行下载,但不同的是,下载完成后它不会暂停HTML文档的解析,会等待整个HTML文档解析完成后才执行JavaScript文件。这样可以保证脚本在文档DOM完全构建...
在JavaScript的世界里,`async` 和 `defer` 是两个在`<script>`标签中用于控制脚本加载和执行方式的关键属性。它们主要用来解决脚本阻塞页面渲染的问题,确保网页的加载性能和用户体验。下面将详细讲解这两个属性的...
这些属性为开发者提供了更多的控制,使得JavaScript的加载和执行更加灵活,避免了因脚本加载导致的页面渲染延迟。 1. **没有defer或async属性**: 当`<script>`标签没有这两个属性时,浏览器会立即下载脚本,并在...
HTML5的`<script>`元素提供了两个可选的属性,`defer`和`async`,它们主要用于控制外部JavaScript脚本的加载和执行方式。这两者的设计目标都是为了优化页面加载性能,避免因为脚本的执行阻塞页面的渲染。 1. **没有...
HTML5的`<script>`元素引入了两个重要的属性:`async`和`defer`,这两个属性主要用于异步加载JavaScript文件,以减少页面加载时的阻塞,提高用户体验。在过去,开发者通常需要通过复杂的JavaScript技巧来实现类似的...
JavaScript中的`defer`属性是一种延迟加载机制,它允许开发者控制脚本执行的时机,以便优化网页性能。在HTML文档解析到`<script>`标签时,通常会暂停文档的解析,执行脚本,然后继续解析。这可能导致页面加载变慢,...
在HTML中,`<script>`标签通常用来引入JavaScript文件,但在实际应用中,为了优化页面加载性能,我们有时会使用`defer`和`async`属性。这两个属性都是用来控制脚本的加载和执行方式。 **1. defer属性** `defer`属性...
总之,虽然Vue不像Svelte那样直接提供defer transition功能,但我们可以通过巧妙地组合Vue的`transition-group`组件和JavaScript钩子,以及自定义CSS和JavaScript动画,来实现类似的效果。这个过程可能比Svelte的...
1. 使用`<script>`标签的`async`和`defer`属性:这两个属性可以在不使用额外的JavaScript库或API的情况下实现异步加载。`async`属性使脚本并行加载,不保证执行顺序;`defer`属性则保证脚本在DOM解析完成后、...
通过添加`async`或`defer`属性,可以实现非阻塞加载。例如: ```html <script async src="path/to/your/script.js"> ``` `async`属性使得脚本在可用时立即加载,但不保证执行顺序。`defer`属性则确保脚本在文档...
首先如果大家对JS动态加载有不理解的地方可以参阅: javascript动态加载实现方法 动态加载JS文件的三种方法 如何你的 script 上没有任何 异步,阻塞 等标注: ...但是defer属性在各个浏览器中支持程度有点不同,就是