目录
15、float，flexbox，position：relative 区别
3）Object.prototype.toString（最准确）
11、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
12、CSS 预处理器 Sass，Less 是什么？为什么使用他们
HTML + CSS
1、HTML，CSS，JS 区别
HTML --结构
CSS --表现
JavaScript --行为
2、HTML5 中新增
1）语义化标签
<header>、<main> 页面主要内容、<aside> 侧边栏、<footer>、<nav>、<article> 加载页面一块独立内容、<section> 相当于 div 。
2）多媒体元素
<audio> 和 <video> 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Complex Audio and Video Example</title>
</head>
<body>
<!-- 复杂的音频播放器 -->
<audio id="myAudio" controls autoplay loop preload="auto">
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<!-- 复杂的视频播放器 -->
<video id="myVideo" controls autoplay loop preload="auto" width="640" height="360">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
<script>
// 获取音频和视频元素
const audio = document.getElementById('myAudio');
const video = document.getElementById('myVideo');
// 打印音频和视频的属性
console.log('Audio autoplay:', audio.autoplay);
console.log('Audio loop:', audio.loop);
console.log('Audio preload:', audio.preload);
console.log('Video autoplay:', video.autoplay);
console.log('Video loop:', video.loop);
console.log('Video preload:', video.preload);
</script>
</body>
</html>其它属性：
1. controls：显示播放器的控制按钮，如播放/暂停、音量控制、进度条等。
2. muted：静音播放器，默认为 false。如果设置为 true，将静音播放器。
3. volume：设置音频或视频的音量，范围为 0（静音）到 1（最大音量）。
4. poster：指定视频加载前显示的封面图像的 URL。
5. currentTime：获取或设置音频或视频的当前播放时间（以秒为单位）。
6. duration：获取音频或视频的总时长（以秒为单位）。
7. playbackRate：设置音频或视频的播放速率，可加快或减慢播放速度。
8. paused：判断音频或视频是否暂停播放。
9. ended：判断音频或视频是否已播放完毕。
10. preload：设置音频或视频的预加载策略，可选值为 none、metadata 或 auto。
3）Canvas
在网页上绘制图形、动画和图像处理。
4）新的表单元素和属性
表单元素：<input type="email">、<input type="url">、<input type="date">、<input type="number"> （选择xx的输入框）等，
表单属性：required 必填项、pattern 输入框的匹配模式、placeholder、min、max 等。
5）地理定位
Geolocation API，网页可以获取用户的地理位置信息。
6）本地存储
提供了 localStorage 和 sessionStorage API，使得网页可以在客户端存储数据，实现离线应用和持久化存储。
7）WebSocket
提供了 WebSocket API，使得网页可以创建基于 TCP 的全双工通信通道，实现实时通信和数据交换。
3、CSS3 新增
1）Flexbox 布局
弹性布局，使得元素的排列更加灵活和简单，能够轻松实现水平和垂直居中、自适应布局等效果。
2）Grid 布局
二维网格布局系统，使得页面的布局更加灵活和精确，能够实现复杂的多列布局、栅格系统等。
3）响应式设计支持
引入媒体查询（Media Queries），使得样式可以根据设备的特性和视口大小进行调整，从而实现响应式设计。
4）自定义字体（@font-face）
5）渐变
6）内外阴影
7）圆角（Border-radius）
8）动画（Animations）
使用关键帧（Keyframes）来定义动画效果，包括元素的平移、旋转、缩放等动作。
9）过渡（Transitions）
为元素的状态变化（如悬停、焦点、点击等）添加过渡效果，使得状态变化更加平滑和自然。
10）变换（Transforms）
包括平移、旋转、缩放、倾斜等，以实现复杂的动态效果。
4、HTML 结构
<!DOCTYPE html>
<html>
<head>
<title>我的第一个页面</title>
</head>
<body>
很高兴，开始了我的web前端之旅！
</body>
</html>5、表格
- th（table header cell）：标头单元格
- tr（table row）：一行
- td（table data cell）：一个单元格
跨行合并：rowspan = "合并单元格的个数"
跨列合并：colspan = "合并单元格的个数"
6、元素显示模式
1）块元素 Block
<h1>~<h6>,<p> 段落,<div>,<ul>无序,<ol>有序,<li>
2）行内/内联元素 Inline
<span>、<a> 超链接、<strong>、<em> 斜体、<img>、<input>
3）内联块元素 Inline-block
<button>、<input type="button">、<input type="checkbox">、<input type="radio">
转换
- 转换为块元素： display: block;
- 转换为行内元素：display: inline;
- 转换为行内块元素：display: inline-block;
<div> 和 <span>
- <div> 块级元素，一行只能放一个 <div>。 大盒子，用于创建页面的结构布局。
- <span> 内联元素，一行上可以多个 <span>。小盒子，用于对文本的一部分进行样式设置。
7、BFC 块级格式化上下文
1）BFC 含义
Block Formatting Context 块级格式化上下文。用于控制块级元素的布局和定位方式。
BFC 定义了一个独立的渲染区域。
在 BFC 中，元素的布局不受外部元素的影响，也不会影响外部元素的布局。
2）BFC 特性
- 垂直方向布局：BFC 内部的块级元素会在垂直方向上一个接一个地放置，不会出现浮动元素的重叠。
- 边界包裹：BFC 的边界会将浮动元素包裹在内部，避免浮动元素影响到外部的布局。
- 避免重叠：BFC 内部的元素不会与外部元素重叠，可以用来清除浮动。
- 外边距折叠：BFC 内部的元素的外边距不会与外部元素的外边距折叠。
3）触发 BFC 的方式
- overflow 属性为除 visible 以外的值（hidden，scroll，auto）。
- float 属性为除 none 以外的值（left，right）。
- position 属性为 absolute 或 fixed。
- display: flex 或 display: inline-block。
- display: table-cell 或 display: table-caption。
4）BFC 的作用
清除浮动，阻止 marigin 塌陷，防止文字环绕，避免元素被浮动元素覆盖，自适应高度：保证容器元素正确地计算高度。
8、浮动，清除浮动
1）含义
float 属性用于创建浮动框，将其移动到一边，直到左/右边缘触及包含块或另一个浮动块的边缘。
2）作用
- 实现多个块级元素没有空白缝隙的一行展示。
- 实现两个盒子左右对齐。
3）加了浮动之后的元素，会？
- 浮动元素会脱离标准流（脱标，漂浮在普通流的上面，不占原有的位置）
- 浮动的元素会一行内显示并且元素顶部对齐。
- 浮动的元素具有行内块元素的特性：
- 如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定。
- 不需要转换块级/行内块元素，可直接给高度和宽度。
- 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
4）网页布局采取的策略
先标准流的父元素排列上下位置，后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
5）为什么需要清除浮动
父级盒子很多情况下，不方便给高度，但是内部的子盒子浮动之后又不占据位置（脱标），最后父级盒子的高度就是0，会影响下面的标准流盒子。
如果父元素本身有设置高度，则不需要清除浮动。
没有高度，内容需要浮动，则需要清除浮动。
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准文档流。
清除浮动不是清除浮动本身，而是清除浮动对其他元素的影响。
6）清除浮动的策略和方式
闭合浮动（只让浮动在父盒子内部影响，不影响父盒子外面的其他盒子。）
9、选择器
1）基础选择器
id 选择器（唯一的）和类选择器最大的不同在于使用次数上。
2）复合选择器
后代选择器、子选择器、并集选择器、伪类选择器
// 后代选择器
ol li a {
color: red;
}
// 亲儿子选择器
div>a {
color: red;
}
// 并集选择器
div,
p,
.pig li {
color: pink;
}
// 伪类选择器
/* 1. a:link 默认，未访问过，把没有点击过的(访问过的)链接选出来 */
a:link {
color: #333;
text-decoration: none;
}
/* 2. a:visited 已访问过，选择点击过的(访问过的)链接 */
a:visited {
color: orange;
}
/* 3. a:hover 悬停，选择鼠标经过的那个链接 */
a:hover {
color: pink;
}
/* 4. a:active 点击，选择的是我们鼠标正在按下还没有弹起鼠标的那个链接 */
a:active {
color: green;
}
/* 5. ：focus 选取获得焦点的表单元素
input:focus {
background-color: red;
color: blue;
}10、px、em、rem
px 像素。相对长度单位，相对于显示器屏幕分辨率而言的。
em 单位是相对于父元素的字体大小来计算的。例如，父元素的字体大小为 16 像素，1em = 16 像素，1.5 em = 24 像素。
rem 单位则是相对于根元素（通常是 <html> 元素）的字体大小来计算的。具有全局性，因为它不受父元素字体大小的影响。
11、CSS 引入方式/样式表
1）行内（内联）：写在标签里
<p style="color: red; font-size: 16px;">这是一段红色的文字。</p>2）内部：写在 <head>里
<head>
<style>
p {
color: red;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一段红色的文字。</p>
</body>3）外部：使用 link
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<p>这是一段使用外部样式表定义的文字。</p>
</body>style.css
p {
color: blue;
font-size: 18px;
}4）@import 导入样式表
@import url("styles.css");12、CSS 三大特性
1）层叠性
相同的选择器设置相同的样式，此时一个样式会被覆盖（层叠）掉另一个冲突的样式，层叠性主要解决的是冲突的问题。
2）继承性
2.1）能继承
- 字体：font、font-family、font-weight、font-size、font-style；
- 大部分文本：color、line-height、word-spacing、letter-spacing、text-transform；text-indent、text-align；
- 元素可见性：visibility；
- 表格：caption-side、border-collapse、border-spacing、empty-cells、table-layout；
- 列表：list-style-type；
2.2）不能继承
- display：规定元素应该生成的框的类型；
- 小部分文本：vertical-align、text-decoration;
- 盒子模型：width、height、margin 、border、padding；
- 背景：background、background-color、background-image；
- 定位：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip；
3）优先级
- 权重不会有进位。
- !important > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 继承或者通配符选择器。
- 继承的权重为0，如果该元素没有被直接选中，不管父元素权重多高，子元素得到的权重都是0。
13、CSS 盒子
包括：边框 border、外边距 margin、内边距 padding 和实际内容 content。
box-sizing: border-box; /* 让边框算进高度里面 */
14、position 定位的属性值
1）relative
相对定位，不脱离文档流，相对于自身定位。
2）absolute
绝对定位，脱离文档流，相对于父级定位。
3）fixed
固定定位，脱离文档流，相对于浏览器窗口定位。
4）sticky
粘性定位，常做吸顶使用，会在滚动到特定位置时生效，这个位置通常是相对于容器的顶部、底部、左侧或右侧。
5）static
默认值，元素出现在正常的流中。
15、float，flexbox，position：relative 区别
- float 实现一些简单的布局效果，如图片环绕等。
- flexbox 沿着主轴和交叉轴的方向进行灵活的排列和对齐，实现各种复杂的布局效果。默认主轴是 row（水平），可通过 flex-direction 更换为 column（垂直）；reverse 可以变成从右往左，从下往上
- position：relative 通常用于局部微调，而不是整个布局的设计
16、子元素如何在父元素中居中
1）水平居中
// 方法一：块元素
.parent {
text-align: center;
}
// 方法二：有固定宽度的块元素
.child {
width: 200px;
margin: 0 auto;
display: block;
}
//方法三：
.parent {
display: flex;
justify-content: center;
}2）水平垂直居中
// 方法一：Flexbox
.container {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh; /* 设置容器高度为视口高度 */
}
// 方法二：绝对定位和 transform
.container {
position: relative; /* 让内部元素相对于此元素定位 */
height: 100vh; /* 设置容器高度为视口高度 */
}
.centered {
position: absolute;
top: 50%; /* 元素顶部距离父容器顶部的距离为 50% */
left: 50%; /* 元素左侧距离父容器左侧的距离为 50% */
transform: translate(-50%, -50%); /* 使用 translate 函数将元素向左上方移动自身宽高的一半，实现居中 */
}
//方法三：表格布局
.container {
display: table;
width: 100%;
height: 100vh; /* 设置容器高度为视口高度 */
}
.centered {
display: table-cell;
text-align: center; /* 水平居中 */
vertical-align: middle; /* 垂直居中 */
}
//方法四：Grid布局
.container {
display: grid;
place-items: center; /* 使用 place-items 属性水平和垂直居中 */
height: 100vh; /* 设置容器高度为视口高度 */
}3）单行文字垂直居中
文字的行高 = 盒子的高度
JavaScript
1、闭包，冒泡，委托
1）闭包（Closure）
由函数及其相关的引用环境（包括函数创建时所处的作用域）组合而成的包裹，从内部函数访问外部函数的作用域。
2）事件冒泡（Event Bubbling）
当一个元素上发生了某个事件（例如点击事件），这个事件会按照从内向外（从目标元素向祖先元素）的顺序进行传播，直至传播到最外层的祖先元素或到达文档的根节点。
3）事件委托（Event Delegation）
适用于处理大量相似元素。它利用事件冒泡的机制，将事件处理程序绑定到它们的共同祖先，而不是绑定到每个单独的元素上。这样一来，只需一个事件处理程序即可管理一组元素上的事件。
2、判断基本数据类型的方法
1）typeof
判断基本数据类型（6个）：string 字符串，null 空值或不存在的值，number 数字，boolean 布尔，undefined 未定义，symbol 符号（新增的，表示独一无二的值，用于对象属性的唯一标识符）。
typeof 目前能返回（7个） ：string，number，boolean，symbol，unfined，object，function 数据类型。
复杂数据类型：Object（对象）复合值，可以包含多个键值对（属性和方法），用花括号 {} 定义，或通过构造函数创建。
返回字符串。
2）instanceof
判断对象数据类型，如：Object，Function，Array，Date，RegExp 等。
例如 value instanceof Array 可以用来检测 value 是否是数组的实例。返回布尔值。
3）Object.prototype.toString（最准确）
Object.prototype.toString.call(value)
对于基本数据类型，如字符串、数字、布尔值等，Object.prototype.toString 会返回对应的原始类型字符串，如 [object String]、[object Number]、[object Boolean]。
对于函数，返回 [object Function]。
对于数组，返回 [object Array]。
对于普通对象，返回 [object Object]。
对于 null 和 undefined，返回 [object Null] 和 [object Undefined]。
通过这种方式，可以方便地获取对象的类型信息，并进行类型判断。
例如，可以使用
Object.prototype.toString.call(value) === '[object Array]' 来判断一个值是否为数组。3、如何判断一个数据是 NaN 非数字
NaN 非数字，用 typeof 检测是 number 类型。
1）isNaN()
会接受一个参数，如果参数是 NaN 或不能转换为数字，则返回 true ，否则返回 false。
isNaN(NaN); // true
isNaN("hello"); // true，因为 "hello" 不能转换为数字
isNaN(123); // false，因为 123 是一个有效的数字2）Number.isNaN();
严格检查，不会将参数转换为数字（isNaN(); 在判断之前会将参数转换为数字）
4、null 和 undefined 区别
1）相同点
用 if 判断时，两者都会被转换成 false。
2）不同点
①number 转换的值不同
number（null）为0；
number（undefined）为 NaN。
②
Null 定义，但是空值。
Undefined 没被定义，变量声明但未赋值。
5、localStorage、sessionStorage 、cookie
1）cookie
4KB，主要保存登录信息，由服务器生成，可设置失效时间。
2）sessionStorage
5MB，仅在当前会话下有效，关闭页面或浏览器后被清除。每个标签页或窗口拥有自己独立的 sessionStorage，不同标签页之间的数据不共享。
3）localStorage
5MB，除非被清除，否则永久保存。
6、ES6 新特性
7、let、var、const 区别
1）var 声明的变量
存在变量提升；函数作用域；可重复声明。
2）let 声明的变量
不会变量提升；块级作用域，即在 {} 内部声明的变量只在该块中有效；不可重复声明。
3）const 声明的变量
不会变量提升；块级作用域，不可重复声明；必须进行初始化赋值；声明的常量是不可变的；但如果常量是对象或数组等复合类型数据，可以修改其内部的属性或元素（因为 JavaScript 中的对象和数组是引用类型，它们的值存储的是内存地址，而不是实际的数据。）。
8、数组方法
1. push()
在数组末尾添加一个或多个元素，并返回数组的新长度。
2. pop()
删除并返回数组的最后一个元素。
3. shift()
删除并返回数组的第一个元素。
4. unshift()
在数组开头添加一个或多个元素，并返回数组的新长度。
5. slice()
返回数组的指定部分，不修改原始数组。
const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // 输出: [2, 3, 4]
console.log(arr); // 输出: [1, 2, 3, 4, 5]，原数组不受影响6. splice()
修改原始数组，可以增删改换数组中的元素。
const arr = [1, 2, 3, 4, 5];
const removed = arr.splice(2, 2, 'a', 'b', 'c');
console.log(arr); // 输出: [1, 2, "a", "b", "c", 5]，原数组被修改
console.log(removed); // 输出: [3, 4]，被删除的元素组成的数组7. concat()
连接两个或多个数组，并返回一个新数组，不会修改原数组。
例如，[1, 2].concat([3, 4], [5, 6]) 将返回数组 [1, 2, 3, 4, 5, 6]。
8. join()
将数组的所有元素连接成一个字符串。默认逗号
例如，[1, 2, 3].join('-') 将返回字符串 "1-2-3"。
9. reverse()
颠倒数组中元素的顺序。
10. sort()
对数组的元素进行排序，默认是按照字母顺序排序。
11. indexOf()
返回数组中某个元素第一次出现的索引，如果不存在则返回 -1。
12. lastIndexOf()
返回数组中某个元素最后一次出现的索引，如果不存在则返回 -1。
13. forEach()
遍历数组中的每个元素，不修改原始数组，无返回值，对每个元素执行回调函数。
14. map()
遍历数组中的每个元素，不修改原始数组，有返回值，生成新数组。
15. filter()
返回满足指定条件的所有元素组成的新数组。
16. reduce()
将数组中的所有元素通过指定的函数进行累积计算，最终得到一个单一的结果。
17. reduceRight()
与 reduce() 方法类似，但是从数组的右边开始执行。
9、Promise
用于处理异步操作的对象，它代表了一个尚未完成、但最终会完成的操作（也可以是失败），避免了传统的回调地狱（callback hell）。
1）三种状态
pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
只能由 pending 转向 fulfilled ，或 pending 转向 rejected
状态一旦改变，就不会再变。创造promise实例后，它会立即执行。
2）链式调用
可以通过链式调用的方式处理多个异步操作。
通过 then() 方法注册在 Promise 完成后要执行的回调函数，可以在一个 Promise 完成后继续执行下一个操作。
3）错误处理
使用 catch() 方法捕获 Promise 中的错误。
在链式调用中，可以在任何一个 then() 方法中使用 catch() 捕获前面任何一个 Promise 中的错误。
const promise = new Promise((resolve, reject) => {
// 异步操作，比如进行网络请求或者读取文件
setTimeout(() => {
const success = true; // 模拟异步操作成功
if (success) {
resolve("操作成功");
} else {
reject("操作失败");
}
}, 2000);
});
promise.then((result) => {
console.log("成功：", result);
}).catch((error) => {
console.error("失败：", error);
});4）Promise 的缺点
- 无法取消。
- 如果不设置回调函数，Promise 内部抛出的错误，不会反映到外部。
- 当处于pending（等待）状态时，无法得知目前进展到哪一个阶段，是刚开始还是即将完成。
10、原型/原型链/（原型）继承
11、一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么？
1. 解析 URL：浏览器解析输入的 URL，识别出协议、主机名、路径等信息。
2. DNS 查询：浏览器根据主机名进行 DNS 查询，获取服务器的 IP 地址。
3. 建立连接：浏览器使用获取到的 IP 地址，通过 TCP 连接向服务器发起请求。
4. 发送请求：浏览器向服务器发送 HTTP 请求，请求资源的信息包括请求方法、请求头等。
5. 服务器处理请求：服务器接收到请求后，根据请求的内容进行处理，准备要发送的资源。
6. 返回响应：服务器将处理后的资源作为 HTTP 响应返回给浏览器，响应中包含状态码、响应头等信息。
7. 解析响应：浏览器接收到响应后，开始解析响应内容，确定响应的类型（如 HTML、CSS、JavaScript 等）。
8. 构建页面结构：浏览器根据 HTML 内容构建 DOM 树（文档对象模型树），表示页面的结构。
9. 应用样式：浏览器根据 CSS 内容构建 CSSOM 树（CSS 对象模型树），表示页面的样式信息，并将其与 DOM 树合并成渲染树。
10. 布局与绘制：浏览器根据渲染树进行布局和绘制，确定每个元素在页面中的位置和样式，并进行绘制。
11. 显示页面：最后，浏览器将绘制好的页面内容显示在用户的浏览器窗口中，用户可以看到页面。
通俗的讲：解析你的 DNS，返回响应的数据，服务器解析数据，客服端显示数据。
12、CSS 预处理器 Sass，Less 是什么？为什么使用他们
Sass 和 Less 都是 CSS 预处理器，是 CSS 上的一种抽象层，是一种特殊的语法，最终会编译成CSS，提供了诸如嵌套规则、变量、混合、继承等功能。
Sass 有两种语法：Sass 格式（使用缩进来表示层级）和 SCSS 格式（类似于常规的 CSS，使用大括号和分号）
Less 的语法类似于常规的 CSS，易于学习和上手。
Less 和 Sass 都可以在客户端和服务端运行：
- 在客户端运行时，可以通过浏览器原生支持或者通过将 Less/Sass 文件编译成 CSS 文件来实现。
- 在服务端运行时，通常使用 Node.js 来执行 Less 或 Sass 的编译工作。
13、this 指向
1. 全局上下文
指向全局对象，在浏览器中通常是 window 对象。
2. 函数调用
当函数作为一个独立的函数调用时，this 指向全局对象。
但在严格模式下，函数作为独立调用时，this 是 undefined。
3. 对象方法调用
this 指向调用该方法的对象。
4. 构造函数调用（通过 new 关键字调用）
this 指向新创建的实例对象。
5. 显示绑定
使用 call()、apply() 、 bind() 方法可以显式地指定函数内部 this 的值。
- call() 立即调用函数，并且可以指定函数内部的 this 值和参数，参数可以是任意类型。
- apply() 立即调用函数，并且可以指定函数内部的 this 值和参数，但是参数以数组形式传递。
- bind() 不会立即调用函数，而是创建一个新的函数，并且可以预先绑定执行上下文和参数。
例如：
B.call(A, args1,args2);A对象调用B对象的方法
F.apply(G, arguments);G对象应用F对象的方法
第一个参数（A 和 G）是 this 要指向的对象，当为 null、undefined 时，默认指向 window。
call() 改过 this 的指向后，会再执行函数；
bind() 改过 this后，不执行函数，会返回一个绑定新 this 的函数。
function f() {
console.log("看我怎么被调用");
console.log(this) //指向this
}
var obj = {};
f.call(obj) // call()直接调用函数
var g = f.bind(obj); // bind()不能调用函数
g(); // 调用函数g，此时才调用函数6. 箭头函数
没有自己的 this，继承父级作用域中的 this。
7. DOM 事件处理函数
指向触发事件的元素。
8. 回调函数
指向取决于该回调函数是如何被调用的。
14、减少页面加载时间的方式
- 优化图片：图像格式，尺寸，懒加载
- 减少 HTTP 请求：合并和压缩文件、图像，压缩工具（如 UglifyJS、CSSNano 等）
- 使用缓存：使用浏览器缓存和服务器缓存，减少重复请求相同资源
- 非必要资源延迟加载、异步加载
- 优化代码：删除不必要的代码和注释
- 使用内容分发网络（CDN）来分发静态资源，加速资源加载速度。
- 预加载资源：preload 和 prefetch 标签。
- 使用响应式设计：优化网站在不同设备上的显示效果。
15、forEach与map区别
1）相同点
- 都是循环遍历数组中的每一项。
- forEach 和 map 每次执行匿名函数都支持3个参数，参数分别是 item（当前每一项）、index（索引值）、arr（原数组）。
- 匿名函数中的 this 都是指向 window。
- 只能遍历数组。
2）不同点
- forEach() 没有返回值，不修改原数组。
- map() 有返回值，会 return 一个新数组，不修改原数组。
16、什么是进程，什么是线程
一个程序的运行到结束就是一个进程，运行的过程中有多个持续的或者断断续续的片段组成，这就是线程，线程是进程内部的执行单元，一个进程包含多个线程。
进程提供了隔离和保护，每个进程有自己的资源和执行环境；
线程是在进程内部进行执行的，可以共享相同的资源。
JavaScript 是单线程的，但是通过异步编程模型，JavaScript 可以实现非阻塞的 I/O 操作和异步任务处理，例如通过事件循环、回调函数、Promise、async/await 等机制来处理异步任务。这样可以避免在等待 I/O 操作完成时阻塞整个应用程序，从而提高应用程序的响应性和性能。
17、事件循环中的任务：微任务，宏任务
事件循环（Event Loop）是用于管理异步操作和事件处理的机制。
1. 微任务（Microtask）
高优先级的任务，会在事件循环的当前阶段执行完成之后立即执行。
包括 Promise 的处理函数（如 then() 方法）、process.nextTick()、queueMicrotask() 等。
用于执行一些优先级较高、需要尽快执行的操作。
2. 宏任务（Macrotask）
低优先级的任务，会在当前事件循环的结束时执行。
包括整体的代码块（script）、setTimeout、setInterval、I/O 操作等。
用于执行一些需要等待一段时间、或者需要等待异步操作完成后执行的任务。
在事件循环中，每个阶段都会依次执行微任务队列中的所有微任务，直到微任务队列为空，然后执行宏任务队列中的一个宏任务，然后再次执行微任务队列中的所有微任务，如此循环直至所有队列为空。
这种微任务和宏任务的执行顺序保证了 JavaScript 的异步操作可以以一种可预测的方式进行，同时也确保了一些优先级较高的操作能够尽快得到执行。
18、防抖、节流
防抖：在一定的时间内再次触发此事件，会清空上次的事件重新开始。
节流：在一定的时间同一事件只会触发一次，只有超过了这个时间才会再次出发（手机验证码短信）
作用：防止函数多次调用。
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
