利用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 >


 

目录
相关文章
|
5天前
|
存储 JavaScript 前端开发
使用JavaScript构建动态交互式网页:从基础到实践
【10月更文挑战第12天】使用JavaScript构建动态交互式网页:从基础到实践
22 1
|
28天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
1月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
9天前
|
存储 JavaScript 前端开发
【JavaScript】网页交互的灵魂舞者
本文介绍了 JavaScript 的三种引入方式(行内、内部、外部)和基础语法,包括变量、数据类型、运算符、数组、函数和对象等内容。同时,文章还详细讲解了 jQuery 的基本语法和常用方法,如 `text()`、`html()`、`val()`、`attr()` 和 `css()` 等,以及如何插入和删除元素。通过示例代码和图解,帮助读者更好地理解和应用这些知识。
9 1
【JavaScript】网页交互的灵魂舞者
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
15天前
|
Web App开发 缓存 前端开发
前端RAG:使用Transformers.js手搓纯网页版RAG(二)- 基于qwen1.5-0.5B
本文继续探讨了RAG的后半部分,通过在浏览器中运行qwen1.5-0.5B模型实现了增强搜索全流程。然而,由于浏览器与模型性能限制,该方案更适合研究、离线及高隐私场景。文章提供了完整的前端代码,让读者能够动手尝试。此外,详细介绍了代码框架、知识库准备、模型初始化及问答实现等步骤,并展示了实际运行效果。受限于当前技术,除非在离线或高隐私环境下,网页大模型的应用仍需进一步优化。
|
15天前
|
存储 自然语言处理 文字识别
纯前端RAG:使用Transformers.js实现纯网页版RAG(一)
本文将分两部分教大家如何在网页中实现一个RAG系统,本文聚焦于深度搜索功能。通过浏览器端本地执行模型,可实现文本相似度计算和问答匹配,无需依赖服务器。RAG搜索基于高维向量空间,即使不完全匹配也能找到意义相近的结果。文中详细介绍了如何构建知识库、初始化配置、向量存储及相似度计算,并展示了实际应用效果。适用于列表搜索、功能导航、文档查询及表单填写等多种场景。
|
28天前
|
JavaScript 前端开发
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
用JavaScript编程控制网页上checkbox选择状态:全选、全部取消、反选
|
1月前
|
JavaScript 前端开发
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
【原创】用JavaScript动态获取网页中缩放图片的长度、宽度和显示比例
|
1月前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。