Js文件异步加载

浏览器中渲染引擎与Js脚本引擎是互斥的，在浏览器开始渲染页面时，如果遇到<script>标签，会停止渲染当前页面，也就是说在脚本加载与执行的过程中会阻塞页面的渲染，在网速较差的环境下可能会出现浏览器页面假死的情况，这也就是尽量将<script>文件放置于<body>后的原因，Js文件异步加载就是使浏览器加载外部Js脚本文件时不阻塞渲染线程，这称为非阻塞模式加载，当然加载完成之后解析执行Js脚本时必须与渲染引擎互斥，解析执行Js脚本的时机取决于异步加载Js的方式。

defer

defer是早期IE支持的属性，目前主流浏览器都已经支持，该属性会使浏览器开启一个线程去加载Js并且会在DOM结构解析完成之后再执行。

  • defer只适用于外联脚本。
  • 如果有多个声明了defer的脚本，则会按顺序下载和执行。
  • defer脚本会在onDOMContentLoaded之前执行，当然同样也就在onload事件之前执行。
<!-- 兼容性 https://caniuse.com/#feat=script-defer -->

<script type="text/javascript" defer="defer" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>

async

HTML5为<script>元素定义了async属性，目前主流浏览器都已经支持，该属性会使浏览器开启一个线程去加载Js并且会在下载完后立即执行。

  • async只适用于外联脚本。
  • 如果有多个声明了async的脚本，其下载和执行也是异步的，不能确保彼此的先后顺序。
  • async会在onload事件之前执行，但并不能确保与DOMContentLoaded的执行先后顺序。
<!-- 兼容性 https://caniuse.com/#feat=script-async -->

<script type="text/javascript" async="async" src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>

Script DOM Element

Script DOM Element的方式即动态插入一个<script>标签来加载外部Js脚本文件，将其作为onload事件的回调函数，即在页面加载完成后再执行，这样就不会阻塞渲染线程。

window.onload = function(){

    var script= document.createElement('script');

    script.type = 'text/javascript';

    script.src ="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js";

    var body= document.getElementsByTagName('body')[0];

    body.appendChild(script);

}

每日一题

https://github.com/WindrunnerMax/EveryDay

参考

https://segmentfault.com/a/1190000006778717

https://www.cnblogs.com/jiasm/p/7683930.html

https://blog.csdn.net/zyj0209/article/details/79698430

https://blog.csdn.net/qq_41245969/article/details/82428464

Js文件异步加载的更多相关文章

  1. js的异步加载你真的懂吗

    面试高频之js的异步加载 讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ?  1  ,  创建document对象, 开始解析页面,    ...

  2. 动态加载JS文件，并根据JS文件的加载状态来执行自己的回调函数

    动态加载JS文件,并根据JS文件的加载状态来执行自己的回调函数, 在很多场景下,我们需要在动态加载JS文件的时候,根据加载的状态来进行后续的操作,需要在JS加载成功后,执行另一方法,这个方法是依托在加 ...

  3. js文件 与 css文件 异步加载

    使用lazyload 异步加载css js 文件. 提升页面初始化的速度,减少卡顿时间 , 下面是 使用方法 与 lazyload.js 源码 (中文注释) 调用方法后. 会追加到 head 标签末尾 ...

  4. Vue中结合Flask与Node.JS的异步加载功能实现文章的分页效果

    你好!欢迎阅读我的博文,你可以跳转到我的个人博客网站,会有更好的排版效果和功能. 此外,本篇博文为本人Pushy原创,如需转载请注明出处:http://blog.pushy.site/posts/15 ...

  5. 高性能js之js文件的加载与解析

    随着网站的发展,现在的网页已经离不开js,经常一个页面会引入大量的js.那么该如何合理的加载这些js? head标签中引入js文件可能是最常见的一种方式,但是这样会造成一个问题.因为j可以说是浏览器中 ...

  6. js滚动异步加载数据的思路

    <body> <div style="width:200px; height:1000px; border:1px solid red;" id="to ...

  7. 解决JS文件页面加载时的阻塞

    关于页面加载时的时间消费,许多书中都做出了介绍,也提出了很多种方法.本文章就详细介绍XHR注入. 概述:JS分拆的方法 1.XHR注入:就是用ajax异步请求同域包含脚本的文件,然后将返回的字符串转化 ...

  8. frames的对象兼容性获取以及跨域实现数据交换（js文件的加载判断）

    1.document.frames()与document.frames[]的区别 <html> <body> <iframe id="ifr_1" n ...

  9. welcome-file-list设置问题之css，js文件无法加载

    web.xml里的welcome-file-list里设置默认访问页面为/html/index.html 但是在访问时,页面CSS都没加载. 正常输入网址却没问题.用/html/index.jsp也没 ...

  10. JS文件中加载jquery.js

    原文链接:http://blog.csdn.net/whatday/article/details/39553451 最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他J ...

随机推荐

  1. 2023第十四届极客大挑战 — WEB WP

    说明:由于是从docx直接导入,因此鉴于docx的识别,文章有些图片里面有红色下划线,但不影响! 属实懒了!直接导入了...哈哈.凑合看吧!实在太多了.... EzHttp Post传参 查看源码 访 ...

  2. [转帖]聊聊redis的slowlog与latency monitor

    https://www.jianshu.com/p/95a9ce63ddb2 序 本文主要研究一下redis的slowlog与latency monitor slowlog redis在2.2.12版 ...

  3. [转帖]Difference between localhost and 127.0.0.1?

    https://www.tutorialspoint.com/difference-between-localhost-and-127-0-0-1#:~:text=The%20most%20signi ...

  4. [转帖]redis缓存命中率介绍

    缓存命中率的介绍 命中:可以直接通过缓存获取到需要的数据. 不命中:无法直接通过缓存获取到想要的数据,需要再次查询数据库或者执行其它的操作.原因可能是由于缓存中根本不存在,或者缓存已经过期. 通常来讲 ...

  5. [转帖]signal 11 (SIGSEGV)错误排查

    https://www.jianshu.com/p/a4250c72d391 jni调试最蛋疼的就是signal 11 (SIGSEGV), code 1 (SEGV_MAPERR), fault a ...

  6. 基于OpenJDK部署clickhouse-local镜像的快捷方法

    基于OpenJDK部署clickhouse-local镜像的快捷方法 摘要 前期搭建了一套基于OpenJDK的Clickhouse的服务端的镜像 可以简单使用dbeaver进行连接与使用. 后来发现需 ...

  7. [转帖]kingbase（人大金仓）的一些常用表操作语句

    包括 1)创建表 2)删除表 3)加字段 4)字段换名 5)字段改类型 6)字段添加注释 7)修改字段为自增类型 8)增加主键 9)查看模式下的表 一.创建和删除表 DROP TABLE IF EXI ...

  8. [转帖] Jmeter学习笔记（七）——监听器元件之察看结果树

    https://www.cnblogs.com/pachongshangdexuebi/p/11507289.html 在jmeter中,如果我们需要查看请求结果就需要添加查看结果树,这个监听器元件有 ...

  9. [转帖]【测试】 FIO：ceph/磁盘IO测试工具 fio（iodepth深度）

    目录 随看随用 NAS文件系统测试 块系统测试 FIO用法 FIO介绍 FIO 工具常用参数: FIO结果说明 I/O 的重放('录'下实际工况的IO,用fio'重放') fio工作参数可以写入配置文 ...

  10. [百度贴吧]部分CPU的SPEC2006int 结果

    这些测试成绩基本上是本人自己测试的结果.下表中有来自spec官网的两个成绩,因为测试年份较早,系统环境和编译器都较老,测试成绩本人实测的还差,所以仅作为参考.部分测试启用了自动并行和附加的优化库,是为 ...