js延迟加载的六种方式

2023-11-02

1. defer 属性

HTML 4.01 为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性,等于告诉浏览器立即下载,但延迟执行标签定义了defer属性。

用途:表明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕之后再执行。

在<script>元素中设置defer属性,等于告诉浏览器立即下载,但延迟执行

说明:虽然<script>元素放在了<head>元素中,但包含的脚本将延迟浏览器遇到</html>标签后再执行。

HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中,延迟脚本并不一定会按照顺序执行。

defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的defer属性。

2. async 属性

HTML5 为<script>标签定义了async属性。与defer属性类似,都用于改变处理脚本的行为。同样,只适用于外部脚本文件。标签定义了async属性。与defer属性类似,都用于改变处理脚本的行为。同样,只适用于外部脚本文件

目的:不让页面等待脚本下载和执行,从而异步加载页面其他内容

异步脚本一定会在页面 load 事件前执行。

不能保证脚本会按顺序执行。

async和defer一样,都不会阻塞其他资源下载,所以不会影响页面的加载。

缺点:不能控制加载的顺序

3.动态创建DOM方式

4.使用jQuery的getScript()方法

5.使用setTimeout延迟方法的加载时间

延迟加载js代码,给网页加载留出更多时间

6.让JS最后加载

把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

例如引入外部js脚本文件时,如果放入html的head中,则页面加载前该js脚本就会被加载入页面,而放入body中,则会按照页面从上倒下的加载顺序来运行JavaScript的代码

所以我们可以把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度

3.上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。


 

这段代码意思等到整个文档加载完后,再加载外部文件“defer.js”。

使用此段代码的步骤:

1).复制上面代码

2).粘贴代码到HTML的标签前 (靠近HTML文件底部)

3).修改“defer.js”为你的外部JS文件名

4).确保你文件路径是正确的。例如:如果你仅输入“defer.js”,那么“defer.js”文件一定与HTML文件在同一文件夹下。


 

注意:

这段代码直到文档加载完才会加载指定的外部js文件。因此,不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码,另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码,应放在一个外部文件,然后再引进来。

在元素中设置defer属性,等于告诉浏览器立即下载,但延迟执行元素中设置defer属性,等于告诉浏览器立即下载,但延迟执行元素中设置defer属性,等于告诉浏览器立即下载,但延迟执行

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

js延迟加载的六种方式 的相关文章

  • 使用 Angular 下载具有动态 src 的脚本

    Angular 提供了通过动态名称动态加载模板的方法ng include 该部分中的内联 JS 和 CSS 可以正常加载 但没有一个好的方法来下载带有动态 url 的脚本 我们需要下载脚本 相对于调用它们的 html 部分的路径 即我们有一
  • Google App Engine:修改云运行环境

    我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序 我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
  • 如何监听 jQuery AJAX 请求?

    以下两种实现 ajaxRequest 1 2 的方法应该是等效的 话说回来 为什么验证回调已执行的单元测试 3 在 1 中成功而在 2 中失败 我应该如何重写测试 3 来监视 2 中的成功回调 如果我尝试stub jQuery ajax使用
  • 可以使用 jQuery 或 Javascript 将图片的特定部分用作链接吗?

    我有这个想法 将图片 而不是文本 的各个部分链接到不同的页面或网站 并且我想在不实际创建不同的照片并将它们彼此靠近的情况下完成 这样看起来就像是一张完整的图片 这里有人知道如何使用 JavaScript 的变体 例如 jQuery 或纯 J
  • 文件上传控件 OnChange 事件 JQuery

    我正在尝试使用 AJAX JQUERY 和 Net HTTPHandler 构建页面来上传文件 如下所示http dotnet dzone com news async file upload jquery and http dotnet
  • 除了更改标题之外,如何在 Firefox 中强制另存为对话框?

    有没有办法在 ff 中强制打开 www example com example pdf 的另存为对话框 我无法更改标题 如果您可以将文件以 Base64 格式输出到客户端 则可以使用 data uri 进行下载 location href
  • Firefox 书签探索未超过 Javascript 的第一级

    我已经编写了一些代码来探索我的 Firefox 书签 但我只获得了第一级书签 即我没有获得文件夹中的链接 e g 搜索引擎 雅虎网站 谷歌网站 在此示例中 我只能访问 Search engines 和 google com 不能访问 yah
  • 提交表单并重定向页面

    我在 SO 上看到了很多与此相关的其他问题 但没有一个对我有用 我正在尝试提交POST表单 然后将用户重定向到另一个页面 但我无法同时实现这两种情况 我可以获取重定向或帖子 但不能同时获取两者 这是我现在所拥有的
  • Grails 在 javascript 内的 GSP 站点中使用 grails var

    我有一个在 GSP 文件中的 javascript 代码中使用 grails 变量值的问题 例如 我有一个会话值session getAttribute selectedValue 我想在 javascript 代码部分使用这个值 我现在的
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • Laravel 中只向登录用户显示按钮

    如果我以 John 身份登录 如何才能只显示 John 的红色按钮而不显示 Susan 的红色按钮 测试系统环境 Win10 Laravel5 4 Mysql5 7 19 table class table table responsive
  • 如何判断 jquery 对话框是否打开? [复制]

    这个问题在这里已经有答案了 寻找通用案例解决方案来确定当前是否打开任何 jquery 对话框 有多个 试过 ui dialog content dialog isOpen true ui dialog dialog isOpen true
  • 我可以使用 jQuery 打开下拉列表吗

    对于 HTML 中的下拉列表
  • 模块构建失败(来自 ./node_modules/babel-loader/lib/index.js)Vue Js

    我从 GitHub 下载了一个我和我的朋友正在开发的项目 但是当我尝试运行时 npm run serve 我收到这个错误 src main js 中的错误 Module build failed from node modules babe
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • Javascript转换时区问题

    我在转换当前时区的日期时间时遇到问题 我从服务器收到此日期字符串 格式为 2015 10 09T08 00 00 这是中部时间 但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时 它返回给我的信息如下 这是不
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • Javascript/Jquery:确定用户是否使用鼠标滚轮、滚动条或键盘滚动

    我正在尝试让用户界面正常工作 如果他们使用鼠标滚轮 我需要让它以一种方式滚动 如果他们使用滚动条 我需要让它以另一种方式滚动 如果他们使用键盘 我需要让它以另一种方式滚动 我相信滚轮和滚动条都充当鼠标事件 但是当单击滚动条时我无法让 jav
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • 5G时代三兄弟,NB-IoT到底有多牛逼

    5G时代的诱惑 犹如隔壁家厨房的气味 间歇性地飘过 刺激着大家的神经 然而对于工业而言 这个气味的信号实在是太微弱了 在2020年以前 5G的大规模应用 大家都不抱希望 没有设备制造商会认为5G能够迅速布置下去 即使是相关标准进展神速 6
  • fork函数讲解及代码分析

    fork 函数 fork 的基础知识 父进程通过调用fork函数来创建一个新的运行的子进程 父进程和子进程之间最大的区别就是PID不同 1 在父进程中 fork返回新创建子进程的PID 2 在子进程中 fork返回0 3 如果出现错误 fo
  • 自动控制原理(四)

    根轨迹分析法 概述 根轨迹的概念 根轨迹的绘制 基本规则和步骤 特征方程 确定根轨迹的方向 起点和终点 根轨迹的分支数 根轨迹的连续性和对称性 实轴上根轨迹的分布 根轨迹的渐近线 根轨迹的分离 会合点 根轨迹与虚轴的交点 根轨迹的入射角和出
  • 第十一章从零玩转系列之微信支付实战PC端我的订单接入退款取消接口

    一 前言 欢迎来到本期的博客 本期将会讲解如何接入微信支付的退款和取消订单接口 本篇文章将是PC端的最后一个文章啦 之后将会是UniApp的篇章感受移动端的诱惑吧 本次为前端知识点如果不懂前段可以去仓库直接copy出来使用 如果有什么问题可
  • android ----- goldfish内核编译

    学习总纲 Android10 硬件抽象层 HAL 概要介绍和学习计划 编译环境 android 版本 android 10 0 0 r41 架构 aosp x86 64 eng 内核分支 android goldfish 4 14 gchi
  • 反射相关

    转载请注明出处 亲class hello public static void main String args Class
  • warning C4819: 该文件包含不能在当前代码页(936)中表示的字符。请将该文件保存为 Unicode 格式以防止数据丢失...

    问题 Visual Studio 出现warning C4819 该文件包含不能在当前代码页 936 中表示的字符 请将该文件保存为 Unicode 格式以防止数据丢失 解决方案 1 修改字符编码格式 推荐 Visual Studio提供高
  • QT中使用嵌入窗口

    文章目录 需求 实现 1 在主界面中添加一个 treeWidget 2 响应树形控件点击事件 添加右侧布局 3 效果 4 改进 固定右侧布局的高度 多个右侧布局的切换 使用UI文件 第一种非常简单 添加新文件时 选择 Qt设计师界面类 第二
  • js 运算符

    JS 运算符 要进行各种各样的运算 就要使用不同的运算符号 1 算术运算符 A 10 20 A 10 20 A 10 20 A 10 20 1 取余运算符 两个数相除 取余数 A 10 3 A 1 如果余数不为0 则两个不能整除 A 10
  • linux的ping命令含义,Linux ping命令详解

    Linux系统的ping命令是常用的网络命令 它通常用来测试与目标主机的连通性 基于IMCP协议 常见命令参数 q 不显示任何传送封包的信息 只显示最后的结果 n 只输出数值 R 记录路由过程 c count 总次数 i 时间间隔 t 存活
  • 数字森林:无人机航测技术在林业调查中的应用

    林业调查是林业工作的基础 对于森林资源的管理 规划 保护 经济发展和农业种植等方面都具有重要的意义 传统林业调查主要依赖人工进行 存在工作效率低 数据精度低 数据分析困难 受地形限制 无法实时监测等缺陷 随着科技的不断发展 无人机作为一种高
  • Spring学习—Spring中定时器实现

    Spring学习 Spring中定时器实现 在一些工作需要使用到定时器 Spring很好的集成了定时器的功能 在Spring 中使用Quartz 本文介绍Spring3 0以后自主开发的定时任务工具 spring task 可以将它比作一个
  • 在程序里面执行system(“cd /某个目录“),为什么路径切换不成功?

    粉丝提问 彭老师 问下 在程序里面执行system cd 某个目录 这样会切换不成功 为啥呢 实例代码 粉丝的疑惑是明明第10行执行了cd media操作 为什么12行执行的pwd gt test2 txt 结果提示的仍然是当前目录 这是一
  • linux 配置多个tomcat同时运行

    1 Linux系统下怎样配置多个Tomcat同时运行呢 首先修改变量为第一个tomcat 然后修改第二个tomcat启动的脚本 工程1 tomcat1 export CATALINA BASE data server tomcat expo
  • 10003---BootStrap网格系统

    Bootstrap 提供了一套响应式 移动设备优先的流式网格系统 随着屏幕或视口 viewport 尺寸的增加 系统会自动分为最多12列 什么是网格 Grid 摘自维基百科 在平面设计中 网格是一种由一系列用于组织内容的相交的直线 垂直的
  • edgewin10无法安装_win10内置Edge浏览器遇到“您未安装FLASH控件”如何解决

    win10系统在使用Edge浏览器时可能会遇到 您未安装FLASH控件 的提示 如下图所示 这到底是怎么回事 一方面可能是你的电脑确实没有安装FLASH插件 另一方面可能是由于浏览器禁止的FLASH插件的运行 如果没安装就下载 要是还是无法
  • 快递100 java 示例API 返回结果乱码 之替代方案

    快递100官方给出的java 版示例API无法使用 返回结果全是乱码 只能自己写一个 采用httpClient 不采用官方给出的URL方式 返回结果编码方式为UTF 8 import java io InputStream import j
  • vue的v-if,v-show,动态组件,keep-alive

    v if 如果条件不成立 不会渲染当前指令所在节点的dom元素 如果需要频繁切换显示隐藏的元素 使用v if则会出现频繁新增删除节点 在性能上代价比较高 注意 最好不要v for和v if同时使用 v for会比v if的优先级高 如果连用
  • get/post请求常见content-type种类

    HTTP 请求分为三个部分 状态行 请求头 消息主体 在HTTP协议的消息头中 通常使用Content Type来表示传值的内容的格式 服务端根据Content Type字段对获取消息主体的编码方式对消息解析 get 方法中 通过param
  • js延迟加载的六种方式

    1 defer 属性 HTML 4 01 为