JavaScript 脚本延迟加载的6种方式
myzbx 2025-09-09 07:24 6 浏览
首先我们先了解下什么是延迟加载，延迟加载就是等页面加载完成之后再加载 JavaScript 文件，他所带来的好处是载有助于提高页面加载速度。
一般有以下几种方式：
1:defer 属性：给 js 脚本添加 defer 属性，这个属性会让脚本的加载与文档的解析同步解析，然后在文档解析完成后再执行这个脚本文件，这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的，但是在一些浏览器中可能不是这样。
2:使用 setTimeout 延迟方法：设置一个定时器来延迟加载 js 脚本文件
3:动态创建 DOM 方式：动态创建 DOM 标签的方式，可以对文档的加载
4:事件进行监听，当文档加载完成后再动态的创建 script 标签来引入js 脚本。
5:async 属性：给 js 脚本添加 async 属性，这个属性会使脚本异步加载，不会阻塞页面的解析过程，但是当脚本加载完成后立即执行 js脚本，这个时候如果文档没有解析完成的话同样会阻塞。多个 async属性的脚本的执行顺序是不可预测的，一般不会按照代码的顺序依次执行。
6:让 JS 最后加载：将 js 脚本放在文档的底部，来使 js 脚本尽可能的在最后来加载执行。
相关推荐
- 前端工程师养成计划 专区_前端工程师技能要求
-
前端工程师必修课本课程从最基本的概念开始讲起，步步深入，带领大家学习HTML、CSS样式基础知识，了解各种常用标签的意义以及基本用法，后半部分讲解CSS样式代码添加，为后面的案例课程打下基础。本课程让...
- 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
-
因为Diff算法，计算的就是虚拟DOM的差异，所以先铺垫一点点虚拟DOM，了解一下其结构，再来一层层揭开Diff算法的面纱，深入浅出，助你彻底弄懂Diff算法原理认识虚拟DOM虚拟...
- css 布局简述_css布局的几种方式
-
本篇简单介绍了css布局体系。包括Flowlayout、display、floats、positionFlowlayout(NormalFlow)CSSFormattingContext...
- dart系列之:HTML的专属领域，除了javascript之外，dart也可以
-
简介虽然dart可以同时用作客户端和服务器端，但是基本上dart还是用做flutter开发的基本语言而使用的。除了andorid和ios之外，web就是最常见和通用的平台了,dart也提供了对HTML...
- 原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
-
我们在日常编码的时候，隐藏一个dom元素有很多种方式，今天我们来盘点一下隐藏dom元素有哪些方式，最后一种，你绝对没有用过。display:none作为经常用来隐藏元素的css属性，di...
- JavaScript精通到深入_javascript进阶书籍推荐
-
前几天教大家从入门到精通，当然仅靠那一篇文章是不足以带领大家精通JavaScript的，今天给大家带来第二讲！BOM和DOM简介BOM，BrowserObjectModel,浏览器对象模型。BO...
- 巧克力:从一朵花开始的华丽变身_巧克力花束教程视频
-
世界上几乎所有的巧克力产品，都出自四五家大公司大型工厂里的流水线。然而，“手工制作巧克力”正在成为一种潮流，吸引着越来越多的人沉醉其中。这些娇嫩的花朵，是你吃过的每一块巧克力的开始。可可花直接生长在...
- browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
-
browser-use可以识别网页中可交互DOM内容，并能与之进行交互。本文将详细介绍browser-use实现这一核心功能的技术细节。一、可交互元素识别browser-use是通过DOMS...
- HTML DOM Progress 对象_html中的对象
-
Progress对象Progress对象是HTML5新增的。Progress对象表示一个HTML<progress>元素。<progress>元素表示任务...
- HTML DOM Script 对象_html document对象
-
Script对象Script对象表示一个HTML<script>元素。访问Script对象您可以使用getElementById()来访问<scrip...
- 虚拟DOM真的比操作原生DOM快吗?前端大神提供4个参考观点!收藏
-
尤雨溪：https://www.zhihu.com/question/31809713/answer/53544875VirtualDOM真的比操作原生DOM快吗？1.原生DOM操作v...
- 前沿|一种新的植入药物或可将HIV的预防时间持续一年
-
国外已经批准了一种叫做Truvada(中文名：特鲁瓦达)的药物用于HIV感染的暴露前预防。但是由于该药需要每天服用，因此有些人可能无法坚持，从而使得该药的预防效果降低。最近一项新的研究或许可以改变这种...
- 轻量级埋点sdk搭建，便捷更全面_埋点工具
-
引言借助埋点监控sdk,我们可以统计用户的点击，页面pv、uv，脚本错误、dom上报等关键信息等。一：项目初始化1.技术栈Tsrollup打包工具2.搭建项目npminit-ytsc--in...
- China's Humanoid Robotics Race Heats Up as Tesla's Optimus Hits a Wall
-
TMTPOST--Tesla'sonce-hypedhumanoidrobotproject,Optimus,hashitasnag.Partsprocurementhas...
- 单机训练速度提升640倍!独家解读快手商业广告模型GPU训练平台Persia
-
【导读】：近期，快手宣布将在2020年春节前实现3亿DAU，快手商业化营收步伐也随之加速。快手从2018年“商业化元年”开始推行个性化的广告推荐。截止5月底，快手DAU已经突破2亿。随着用户和使用时长...
- 一周热门
- 最近发表
-
- 前端工程师养成计划 专区_前端工程师技能要求
- 深入浅出虚拟 DOM 和 Diff 算法，及 Vue2 与 Vue3 中的区别
- css 布局简述_css布局的几种方式
- dart系列之:HTML的专属领域，除了javascript之外，dart也可以
- 原来隐藏一个DOM元素可以有这么多种方式，最后一种你肯定不知道
- JavaScript精通到深入_javascript进阶书籍推荐
- 巧克力:从一朵花开始的华丽变身_巧克力花束教程视频
- browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解
- HTML DOM Progress 对象_html中的对象
- HTML DOM Script 对象_html document对象
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)