异步加载JS

异步加载JSjs 的加载缺点 加载工具方法没必要阻塞文档 过多的 js 加载会影响页面效率 一旦网速不好 那么整个网站将等待 js 加载而不进行后续渲染等工作 有些工具方法需要按需加载 用到再加载 不用不加载 javascript 异步加载的三种方案 1 defer 异步加载 但要等到 dom 文档全部解析完才会被执行 只有 IE 能用 2 async 异步加载 加载完就执行 async 只能加载外部脚本 不能把 js

js的加载缺点:加载工具方法没必要阻塞文档,过多的js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作。

有些工具方法需要按需加载,用到再加载,不用不加载。

2.async 异步加载,加载完就执行,async只能加载外部脚本,不能把js写在script 标签里。

在这里插入图片描述
1.2 执行时也不阻塞页面

3.创建script,插入到DOM中,加载完毕后callBack,封装一个函数:

在这里插入图片描述
js加载时间线
1、创建Document对象,开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState = ‘loading’。

2、遇到link外部css,创建线程加载,并继续解析文档。

3、遇到script外部js,并且没有设置async、defer,浏览器加载,并阻塞,等待js加载完成并执行该脚本,然后继续解析文档。

4、遇到script外部js,并且设置有async、defer,浏览器创建线程加载,并继续解析文档。对于async属性的脚本,脚本加载完成后立即执行。(异步禁止使用document.write())

5、遇到img等,先正常解析dom结构,然后浏览器异步加载src,并继续解析文档。

6、当文档解析完成,document.readyState = ‘interactive’。

7、文档解析完成后,所有设置有defer的脚本会按照顺序执行。(注意与async的不同,但同样禁止使用document.write());

8、document对象触发DOMContentLoaded事件,这也标志着程序执行从同步脚本执行阶段,转化为事件驱动阶段。

9、当所有async的脚本加载完成并执行后、img等加载完成后,document.readyState = ‘complete’,window对象触发load事件。

10、从此,以异步响应方式处理用户输入、网络事件等。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/225381.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月17日 上午9:28
下一篇 2026年3月17日 上午9:28


相关推荐

  • threadlocal底层实现_ioc的底层实现原理

    threadlocal底层实现_ioc的底层实现原理ThreadLocal作用:提供线程内的局部变量,不同的线程之间不会相互干扰,这种变量在线程的生命周期内起作用,减少同一个线程内多个函数或组件之间一些公共变量传递的复杂性。package com.mupack;public class App{ private String content; public void setContent(String content) { this.content = content; } public Stri

    2022年8月8日
    5
  • python 数组反转

    python 数组反转python中有一个列表a=[1,2,3,4,5,6]如果想反转该数组怎么办呢?一行代码搞定-Python代码1a = a[::-1]

    2022年4月27日
    55
  • 操作系统中常用的进程调度算法有_调度算法有哪些

    操作系统中常用的进程调度算法有_调度算法有哪些1、先来先服务调度算法先来先服务(FCFS)调度算法是一种最简单的调度算法,该算法既可用于作业调度,也可用于进程调度。当在作业调度中采用该算法时,每次调度都是从后备作业队列中选择一个或多个最先进入该队列的作业,将它们调入内存,为它们分配资源、创建进程,然后放入就绪队列。在进程调度中采用FCFS算法时,则每次调度是从就绪队列中选择一个最先进入该队列的进程,为之分配处理机,使之投入运行。该进程一直

    2026年4月18日
    4
  • Device 与 platform device的不同(一)[通俗易懂]

    Device 与 platform device的不同(一)[通俗易懂]Device与platformdevice在注册方法上有所不同。Device注册有两步,platformdevice注册也有两步,它们第一步相同,都是initialize设备,但第二步有所不同,Device是直接调用device_add()函数来add设备,而platformdevice则调用platform_device_add()函数。实际上,platfo

    2022年7月24日
    18
  • Mycat读写分离的简单实现「建议收藏」

    Mycat读写分离的简单实现「建议收藏」文章目录1、Mycat读写分离的配置1.1、Mycat是什么1.2、Mycat能干什么1.2.1、数据库的读写分离1.2.2、数据库读写分离图解1.2.3、数据库分库分表1.2.3.1、水平拆分(分库)1.2.3.2、垂直拆分(分表)1.3、Mycat的搭建1.3.1、前期准备1.3.2、搭建环境1.3.3、Mycat的安装启动关闭1.3.4、Mycat的配置文件1.3.5、server.xml文件的配置1.3.6、schema.xml文件的配置1.4、测试读写分离1、Mycat读写分离的配置1.1、M

    2022年10月13日
    3
  • 基于coze studio开源框架二次定制开发教程

    基于coze studio开源框架二次定制开发教程

    2026年3月12日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号