延迟加载就是等页面加载完成之后再加载 JavaScript 文件。 js 延迟加载有助于提高页面加载速度。

一般有以下几种方式:

  • defer 属性: 给 js 脚本添加 defer 属性,这个属性会让脚本的加载与文档的解析同步解析,然后在文档解析完成后再执行这个脚本文件,这样的话就能使页面的渲染不被阻塞。多个设置了 defer 属性的脚本按规范来说最后是顺序执行的,但是在一些浏览器中可能不是这样。
  • async 属性: 给 js 脚本添加 async 属性,这个属性会使脚本异步加载,不会阻塞页面的解析过程,但是当脚本加载完成后立即执行 js 脚本,这个时候如果文档没有解析完成的话同样会阻塞。多个 async 属性的脚本的执行顺序是不可预测的,一般不会按照代码的顺序依次执行。
  • 动态创建 DOM 方式: 动态创建 DOM 标签的方式,可以对文档的加载事件进行监听,当文档加载完成后再动态的创建 script 标签来引入 js 脚本。
  • 使用 setTimeout 延迟方法: 设置一个定时器来延迟加载js脚本文件
  • 让 JS 最后加载: 将 js 脚本放在文档的底部,来使 js 脚本尽可能的在最后来加载执行。

JavaScript脚本延迟加载的方式有哪些?的更多相关文章

  1. JavaScript脚本的两种放置方式

    JavaScript脚本的两种放置方式 1在body里用 script标签引用 2 直接写在<script></script>标签之中

  2. javascript 的加载方式

    本文总结一下浏览器在 javascript 的加载方式. 关键词:异步加载(async loading),延迟加载(lazy loading),延迟执行(lazy execution),async 属 ...

  3. JavaScript脚本语言基础(四)

    导读: JavaScript和DOM DOM文档对象常用方法和属性 DOW文档对象运用 JSON数据交换格式 正则表达式 1.JavaScript和DOM [返回] 文档对象模型(Document O ...

  4. JavaScript脚本语言基础(一)

    导读: JavaScript代码嵌入HTML文档 JavaScript代码运行方式 第一个实例 JavaScript的三种对话框 定义JavaScript变量 JavaScript运算符和操作符 Ja ...

  5. JavaScript脚本语言基础(三)

    导读: 数学对象(Math) 数组对象(Array) 字符串对象(String) 日期对象(Date) js对象是属性和方法的集合.JavaScript中的所有事物都是对象,如:字符串.数值.数组.函 ...

  6. java ScriptEngine 使用 (支持JavaScript脚本,eval()函数等)

    Java SE 6最引人注目的新功能之一就是内嵌了脚本支持.在默认情况下,Java SE 6只支持JavaScript,但这并不以为着Java SE 6只能支持JavaScript.在Java SE ...

  7. SpiderMonkey-让你的C++程序支持JavaScript脚本

    译序 有些网友对为什么D2JSP能执行JavaScript脚本程序感到奇怪,因此我翻译了这篇文章,原文在这里.这篇教程手把手教你怎样利用SpiderMonkey创建一个能执行JavaScript脚本的 ...

  8. 关于模板中的动态取值 ---反射与javascript脚本编译

    在项目中经常遇到一个问题,打印word或者打印excel的时候,我们经常使用一对一的赋值或者批量替换的方式来对模板进行修改. 但是现在遇到两种场景: 1.取值是通过自定以方法进行取值的. 如:一个销售 ...

  9. 在WebBrowser中执行javascript脚本的几种方法整理(execScript/InvokeScript/NavigateScript) 附完整源码

    [实例简介] 涵盖了几种常用的 webBrowser执行javascript的方法,详见示例截图以及代码 [实例截图] [核心代码] execScript方式: 1 2 3 4 5 6 7 8 9 1 ...

随机推荐

  1. 华为交换机配置ACL详细步骤

    ACL 介绍 #2000-2999普通ACL,根据源IP过滤 #3000-3999高级ACL,根据源目的端口和源目的地址等过滤 #4000-4999二层ACL,根据源目的MAC等过滤 配置举例: 拒绝 ...

  2. Linux特殊权限之suid、sgid、sbit权限

    文件权限管理之特殊命令 一:特殊权限 昨天所学的Linux基本权限为为9个:分别是rwx rwx rwx.但有时会发现系统中会有一些特殊的权限位符号: 例如: Linux系统一共有12个特殊权限符: ...

  3. 用两行代码实现重试功能,spring-retry真是简单而优雅

    背景 最近做的一个需求,需要调用第三方接口.正常情况下,接口的响应是符合要求的,只有在网络抖动等极少数的情况下,会存在超时情况.因为是小概率事件,所以一次超时之后,进行一次重试操作应该就可以了.重试很 ...

  4. IBM QRadar Advisor 安全限制绕过漏洞

    受影响系统:IBM QRadar Advisor 1.0.0 -2.4.0描述:CVE(CAN) ID: CVE-2019-4556 IBM QRadar Advisor是一套安全威胁分析解决方案. ...

  5. Java基础——final、static关键字

    final关键字是最终的意思,可以修饰成员方法.成员变量.类 特点: 1.修饰方法:表示该方法是最终方法,不能被重写 2.修饰变量:表示变量是常量,不能再次被赋值 3.修饰类:表示类是最终类,不能被继 ...

  6. CentOS停更;阿里发布全新操作系统(Anolis OS)

    镜像下载.域名解析.时间同步请点击阿里云开源镜像站 Linux系统对于Java程序员来说,就好比"乞丐手里的碗",任何业务都离不开他的身影,因为服务端的广泛使用,也因此衍生出了各种 ...

  7. k8s遇到invalid type for io.k8s.api.core.v1.PodSpec.containers

    报错 error: error validating "taskcenter-v4-deployment.yaml": error validating data: Validat ...

  8. OpenCV开发笔记(七十四):OpenCV3.4.1+ffmpeg3.4.8交叉编译移植到海思平台Hi35xx平台

    前言   移植opencv到海思平台,opencv支持对视频进行解码,需要对应的ffmpeg支持.   Ffmpeg的移植   Ffmpeg的移植请参考之前的文章:<FFmpeg开发笔记(十): ...

  9. 『现学现忘』Docker基础 — 35、实战:自定义CentOS镜像

    目录 1.前提说明 2.编写Dockerfile文件 3.构建镜像 4.运行镜像 5.列出镜像的变更历史 1)目标:自定义镜像wokong_centos. 2)所用到的保留字指令: FROM:基础镜像 ...

  10. mq 的缺点?

    (1)系统可用性降低 系统引入的外部依赖越多,越容易挂掉,本来你就是 A 系统调用 BCD 三个系统的接口就好了,人 ABCD 四个系统好好的,没啥问题,你偏加个 MQ 进来,万一MQ 挂了咋整?MQ ...