利用defer关键字让网页中的javascript推迟执行

简介: 我们有时候会在网页中的段中看到defer关键字,那么它到底是派什么用处呢? defer从字面意思上来看就是延迟,推迟的意思。它的目的在于: 让浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析, 等到全部页面下载完成后执行JS脚本。

我们有时候会在网页中的<script>段中看到defer关键字,那么它到底是派什么用处呢?

defer从字面意思上来看就是延迟,推迟的意思。它的目的在于:

让浏览器在下载脚本的时候就不必立即对其进行处理,而是继续对页面进行下载和解析,

等到全部页面下载完成后执行JS脚本。这样做有时候能够提高下载的性能。

那么defer的应用有什么呢?

 

我们经常会用innerHTML来动态给DOM元素加载JS,比如:
object.innerHTML = "<script" + ">"..."</script" + ">";
但是当你调用你这个新定义的动态JS经常会出错,说还未定义,

解决方法是给<script>加上defer。


在下面的代码中你可以试下把 defer去掉程序就会出错:

< HTML >
    
img_405b18b4b6584ae338e0f6ecaf736533.gifimg_1c53668bcee393edac0d7b3b3daff1ae.gif
< SCRIPT >
img_2887d91d0594ef8793c1db92b8a1d545.gifimg_7a2b9a960ee9a98bfd25d306d55009f8.gif    
function insertScript(){
        
var sHTML = "<input type=button onclick=myAlert()" + " value='Click Me'><BR>";
        
var sScript="<SCRIPT defer>";
        sScript 
= sScript + "function myAlert() { alert('Hello Javascript!') }";
        sScript 
= sScript + "
</ SCRIPT" + " > ";
        ScriptDiv.innerHTML = sHTML + sScript;
    } 
</ SCRIPT >

< BODY  onload ="insertScript();" >
< DIV  ID ="ScriptDiv" ></ DIV >
</ BODY >

</ HTML >


 

目录
相关文章
|
11月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
370 56
|
10月前
|
Web App开发 数据采集 JavaScript
动态网页爬取:Python如何获取JS加载的数据?
动态网页爬取:Python如何获取JS加载的数据?
1501 58
|
7月前
|
编解码 JavaScript 前端开发
如何在网页播放英文的m3u8文件(基于Javascript搭建的在线网页工具)
什么是m3u8?又该如何在网页中高效、便捷地播放英文的m3u8文件呢?今天这篇文章就带你一起了解,并推荐一种基于Javascript搭建的在线网页工具,让你轻松解决播放问题。
2006 0
|
10月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容?
Python爬虫如何获取JavaScript动态渲染后的网页内容?
|
监控 JavaScript 前端开发
确定使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript
【10月更文挑战第24天】选择使用 `defer` 属性还是 `async` 属性来异步加载 JavaScript 是一个需要综合考虑多个因素的决策。需要根据脚本之间的依赖关系、页面加载性能要求、脚本的功能和重要性等因素来进行权衡。在实际应用中,需要通过测试和验证来确定最适合的加载方式,以提供更好的用户体验和页面性能。
282 56
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
722 5
|
JavaScript 前端开发 安全
ECMAScript 6(以下简称 ES6)的出现为 JavaScript 带来了许多新的特性和改进,其中 let 和 const 是两个非常重要的关键字。
ES6 引入了 `let` 和 `const` 关键字,为 JavaScript 的变量管理带来了革新。`let` 提供了块级作用域和暂存死区特性,避免变量污染,增强代码可读性和安全性;`const` 用于声明不可重新赋值的常量,但允许对象和数组的内部修改。两者在循环、函数内部及复杂项目中广泛应用,有助于实现不可变数据结构,提升代码质量。
221 5
|
前端开发 JavaScript 开发者
除了 async/await 关键字,还有哪些方式可以在 JavaScript 中实现异步编程?
【10月更文挑战第30天】这些异步编程方式在不同的场景和需求下各有优劣,开发者可以根据具体的项目情况选择合适的方式来实现异步编程,以达到高效、可读和易于维护的代码效果。
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
241 2

热门文章

最新文章