javaScript基础面试题 -- 延迟加载JS有哪些方式?

article/2025/6/9 14:20:57

延迟加载JS有哪些方式?

  • js脚本放置在不同位置,对页面加载的不同影响
  • defer与async的区别:

回答:defer 与 async

js脚本放置在不同位置,对页面加载的不同影响

关于这个问题,首先来介绍一下,js脚本放置在不同位置,对页面加载有什么影响

①:先加载JS,再往后加载DOM
②:首先解析DOM,再解析JS脚本文件,一般都这样写,页面加载先出现结构,提高用户体验

如果JS脚本里面有,要获取#box元素,用②写法,因为如果#box还没解析出来,就开始用JS去获取,就会得到undefined

在这里插入图片描述
如果加上defer或者async就可以用①写法啦!
延迟加载JS的两个重要方法:

①:defer
②:async

在这里插入图片描述

defer与async的区别:

绿色:html的解析
灰色:html停止解析
紫色:JS下载
红色:JS执行
在这里插入图片描述


正常渲染过程:
1、先html解析
2、遇到了js,下载js
3、html解析停止,js执行
4、js执行完毕,html解析在这里插入图片描述


async解析过程:
1、下载js与html解析是并行的
2、下载完js就立刻执行
3、async的执行顺序是:谁先下载完,谁先执行(如果a.js依赖b.js,俩同时导入,就不能用async,因为此时顺序相当重要)
在这里插入图片描述


defer解析过程:
1、下载js过程与html解析过程同步进行(与async相同)
2、当html完全解析完毕,才执行js(与async不同)
3、defer是按照顺序执行的,不存在谁先下载谁先执行
在这里插入图片描述


http://chatgpt.dhexx.cn/article/HARgRXaX.shtml

相关文章

14道高频手写JS面试题及答案,巩固你的JS基础

目录 1. 手写深拷贝 2. 防抖函数 3. 节流函数 4. 模拟 instanceof 5. 全局通用的数据类型判断方法 6. 手写 call 函数 7. 手写 apply 函数 8. bind方法 9. 模拟 new 10. 类数组转化为数组的方法 11. 组合继承 12. 原型式继承 13. 实现 Object.create() 14. 数组…

javaScript基础面试题 --数据类型和考题

简单数据类型和复杂数据类型 简单类型(基本数据类型、值类型):在存储时变量中存储的是值本身,包括string ,number,boolean,undefined,null 复杂数据类型(引用类型&…

分享一些常用的 JS 基础面试题

介绍 此篇属于前端算法入门系列的第一篇,主要介绍常用的数组方法、字符串方法、遍历方法、高阶函数、正则表达式以及相关数学知识。 前端算法入门一:刷算法题常用的JS基础扫盲[1]前端算法入门二:时间空间复杂度\&8大数据结构的JS实现[2]前…

js基础面试题总结

数据类型 什么是引用类型,值类型 值类型key与value的值存储再栈中(量小)医用类型再栈存储引用地址,在堆中存储数据(量大)把引用类型赋值给一个变量,是把变量的引用地址指向引用类型堆中地址 …

js基础常考面试题汇总(一)(附答案)

1.值类型和引用类型的区别 //值类型 let a 100 let b a a 200 console.log(b) //100 //引用类型 let a { age: 20 } let b a console.log(a.age) //21值类型:number, string, boolean, null, undefined, symbol(ES6)引用类型:Object(对象的子类: A…

3道js经典面试题

第一道: var a 10; // 全局作用域,全局变量。a10function foo() {// var a //的声明将被提升到到函数的顶部。// 比如:var aconsole.log(a); // 打印 undefined// 实际初始化值20只发生在这里var a 20; // local scope}foo(); 看图说话: 第…

2022年js基础面试题---持续更新

目录 1.javascipt的数据类型 1.1基本类型 1.2引用类型 1.3存储方式的区别 1.4 undefined和null的区别 1.5JavaScript什么情况下会返回undefined值? 2.javaScript数据类型检测的方法 2.1 typeof 2.2 instanceof 3.创建函数的几种方式 3.1 函数声明式 3.2…

JS 基础面试题

JS 基础面试题 1、什么是JavaScript? 基于对象和事件驱动可解释性脚本语言 2、JavaScript与ECMAScript的关系? JavaScript是ECMAScript的表现,ECMAScript是JavaScript的规范 3、变量的命名规则? 1.名字见名知义,…

js基础面试题

一、JavaScript的基本数据类型 1、 基本类型:字符串(String)、数字(Number)、布尔(Boolean)、对空(Null)、未定义(Undefined)、Symbol。 2、 引用数据类型:对象(Object)、数组(Arr…

【c++】atan2()和atan()函数

atan2(): (1)定义: double atan2(double y,double x); atan2() 函数的功能是求 y/x 的反正切值。atan2() 是 atan() 的增强版,能够确定角度所在的象限。 反正切函数 atan2() 和正切函数 tan() 的功能恰好…

asin、acos、atan 和 atan2 函数用法简介

函数名: asin 函数原型: double asin(double x); (x > -1 && x < 1) 功 能: 返回 x 的弧度制反正弦值 函数名: acos 函数原型: double acos(double x); (x > -1 && x < 1) 功 能: 返回的是一个数值的反余弦弧度值&#xff0c;其范围是 0…

atan2与atan的区别

目录 总结 atan2: Four-quadrant inverse tangent. atan 距离对比 总结 简而言之&#xff0c;atan2与atan的区别体现在两个方面&#xff1a; (1) atan2接收两个输入参数&#xff1b;atan只接收一个输入参数 (2) atan2对象限敏感&#xff0c;根据两个参数判断它是属于哪个象…

【Unity3D日常开发】Mathf.Atan2函数研究

推荐阅读 CSDN主页GitHub开源地址Unity3D插件分享简书地址我的个人博客QQ群&#xff1a;1040082875 大家好&#xff0c;我是佛系工程师☆恬静的小魔龙☆&#xff0c;不定时更新Unity开发技巧&#xff0c;觉得有用记得一键三连哦。 一、前言 最近有用到这个函数&#xff0c;就…

【计算几何】atan2函数

atan2函数 幅角 复数的模与辐角是复数三角形式表示的两个基本元素&#xff0c;复数所对应的向量长度称为复数的幅值&#xff0c;该向量与实轴正方向的夹角为复数的辐角。辐角的大小有无穷多&#xff0c;但是辐角主值唯一确定。利用复数的模和辐角&#xff0c;可以将复数表示成…

matlab atan2函数解析

旁边的图片显示内容是:在一个单位圆内atan2函数在各点的取值。圆内标注代表各点的取值的幅度表示。 图片中,从最左端开始,角度的大小随着逆时针方向逐渐从-π增大到+π,并且角度大小在点位于最右端时,取值为0。 另外要注意的是,函数atan2(y,x)中参数的顺序是倒置的,atan…

torch.atan2函数详细解答

先看看arctan arctan实际上是用来计算点(x&#xff0c;y)组成的向量&#xff0c;与x轴的弧度的&#xff0c;是tan的反函数&#xff0c;推导如下&#xff0c;α为弧度 ​ ​ yarctan(x)其图像如下 y为弧度&#xff0c;x为任意值&#xff0c;这里不是指上面的坐标x&#xff0c…

atan2相关知识汇总

1.atan2的含义 C 语言里 double atan2(double y,double x) 返回的是原点至点(x,y)的方位角&#xff0c;即与 x 轴的夹角。返回值的单位为弧度&#xff0c;取值范围为&#xff08;-π, π]。结果为正表示从 X 轴逆时针旋转的角度&#xff0c;结果为负表示从 X 轴顺时针旋转的角…

HPC超算初识思维导图

HPC是高性能计算(High Performance Computing)机群的简称。指能够执行一般个人电脑无法处理的大资料量与高速运算的电脑&#xff0c;其基本组成组件与个人电脑的概念无太大差异&#xff0c;但规格与性能则强大许多。现有的超级计算机运算速度大都可以达到每秒一兆&#xff08;万…

超级计算机中心建设方案,超算中心建设框架

数据中心硬件建设框架 1.主要内容 华浩超算数据中心主要由基础硬件设施、超算影像处理系统及业务协同管理应用平台和安全保密体系组成。每个部分相互联系、相互依赖。目前具体建设内容如下&#xff1a; 内容一&#xff1a;基础硬件设施建设 1&#xff1a;机房及服务器集群建设 …

HPC超算网络资源

HPC超算资源 资源 Blue Water 超算William D. GroppOSU benchmarksTuning MPI Applications for Peak Performance W.D.Gropp苏黎世联邦理工 Scalable Parallel Computing LaboratoryNERSC超算文档资料HPC Wikipipeline-parallelism 课程 Design of Parallel and High-Perfor…