延迟加载就是等页面加载完成之后再加载 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. Laravel—数据库操作与Eloquent模型使用总结

    数据库操作 执行原生SQL //查询 $emp = DB::select('select * from employees where emp_no = 1'); $emp = DB::select( ...

  2. laravel7 验证器的使用

    $validator=\Validator::make($request->all(),[ 'username'=>'required', 'password'=>'required ...

  3. MySQL-DB-封装-简易版

    <?php class DB{ private $link; public function __construct($host,$user,$password,$dbname,$port) { ...

  4. tensorflow源码解析之framework-shape_inference

    目录 什么是形状推断 InferenceContext 关系图 涉及的文件 迭代记录 1. 什么是形状推断 前面我们讲到op的时候,提到了操作的注册器OpRegistry,并且提到,其中注册的数据是一 ...

  5. S5700上三层Vlan间隔离的例子

    转自:https://forum.huawei.com/enterprise/zh/forum.php?mod=viewthread&tid=247591 公司最近的无线覆盖做好了,但让人无语 ...

  6. MATLAB绘制一幅中国地图

    今天博主跟大家讲一下如何用MATLAB制作一幅中国地图,那废话不多说,我们先看一下最终效果吧. mercator墨卡托圆柱投影地图 lambert兰伯特圆锥投影地图 一张中国地图大概包括以下要素: 中 ...

  7. Chrome浏览器打开图标显示空白

    复制下面命令存到.bat 文件中,并允许bat文件 taskkill /f /im explorer.exeattrib -h -i %userprofile%\AppData\Local\IconC ...

  8. SpringBoot整合RabbitMQ-5.7-课堂笔记-02

  9. hashlib 模块 摘要算法

    应用于用户登陆,对密码进行加密操作, #文件操作 # hashlib 摘要算法 #md5 算法: 是32位的16进制组成的数字字符组成的字符串 #应用最广的摘要算法 #效率高,相对不复杂,如果只是传统 ...

  10. CF1545X Codeforces Round #732

    A. AquaMoon and Strange Sort 叉人题 如果数字各不相同,只需要统计每个数参与构成的逆序对总数,如果是奇数一定最终朝左,偶数朝右.无意义的数字交换对方向是没有影响的 继续考虑 ...