2024年前端最全每天10个前端小知识 【Day 10】_不爱吃糖的程序媛，美团前端面试难度

读者福利

========

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

return new Promise((resolve, reject) => {
const img = new Image();
img.onload = function() {
resolve(img);
};
img.onerror = function() {
reject(new Error(‘Could not load image at’ + url));
};
img.src = url;
});

### 5. 怎么使用 setTimeout 实现 setInterval？


setInterval 的作用是每隔一段指定时间执行一个函数，但是这个执行不是真的到了时间立即执行，它真正的作用是每隔一段时间将事件加入事件队列中去，只有当当前的执行栈为空的时候，才能去从事件队列中取出事件执行。所以可能会出现这样的情况，就是当前执行栈执行的时间很长，导致事件队列里边积累多个定时器加入的事件，当执行栈结束的时候，这些事件会依次执行，因此就不能到间隔一段时间执行的效果。


针对 setInterval 的这个缺点，我们可以使用 setTimeout 递归调用来模拟 setInterval，这样我们就确保了只有一个事件结束了，我们才会触发下一个定时器事件，这样解决了 setInterval 的问题。

// 思路是使用递归函数，不断地去执行 setTimeout 从而达到 setInterval 的效果

function mySetInterval(fn, timeout) {
// 控制器，控制定时器是否继续执行
var timer = {
flag: true
};

// 设置递归函数，模拟定时器执行。
function interval() {
if (timer.flag) {
fn();
setTimeout(interval, timeout);
}
}

// 启动定时器
setTimeout(interval, timeout);

// 返回控制器
return timer;
}

### 6. Js 动画与 CSS 动画区别及相应实现


CSS3 的动画的优点 在性能上会稍微好一些，浏览器会对 CSS3 的动画做一些优化 代码相对简单 缺点 在动画控制上不够灵活 兼容性不好 JavaScript 的动画正好弥补了这两个缺点，控制能力很强，可以单帧的控制、变换，同时写得好完全可以兼容 IE6，并且功能强大。对于一些复杂控制的动画，使用 javascript 会比较靠谱。而在实现一些小的交互动效的时候，就多考虑考虑 CSS 吧


### 7. 什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？


前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。


在单页面应用，大部分页面结构不变，只改变部分内容的使用


优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点：单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 实现方式 前端路由一共有两种实现方式，一种是通过 hash 的方式，一种是通过使用 pushState 的方式。


### 8. 什么是点击穿透，怎么解决？


在发生触摸动作约300ms之后，移动端会模拟产生click动作，它底下的具有点击特性的元素也会被触发，这种现象称为点击穿透。


#### 常见场景


情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。  
 情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。  
 情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应位置元素的click事件被触发了。  
 情景四：不过概率很低，就是新页面中对应位置元素恰好是a标签，然后就发生连续跳转了。


#### 发生的条件


上层元素监听了触摸事件，触摸之后该层元素消失  
 下层元素具有点击特性（监听了click事件或默认的特性（a标签、input、button标签））


#### 解决点击穿透的方法


方法一：书写规范问题，不要混用touch和click。既然touch之后300ms会触发click，只用touch或者只用click就自然不会存在问题了。  
 方法二：吃掉（或者说是消费掉）touch之后的click，依旧用tap，只是在可能发生点击穿透的情形做额外的处理，拿个东西来挡住、或者tap后延迟350毫秒再隐藏mask、pointer-events、在下面元素的事件处理器里做检测（配合全局flag）等。


### 9. 介绍些 setTimeout 的运行机制


setTimeout简介


setTimeout()函数：用来指定某个函数或某段代码在多少毫秒之后执行。它返回一个整数，表示定时器timer的编号，可以用来取消该定时器。


先看个简单的例子：

console.log(1);
setTimeout(function () {
console.log(2);
}, 0);
console.log(3);

问：最后的打印顺序是什么？（如果不了解js的运行机制就会答错）


正确答案：1 3 2


解析：无论setTimeout的执行时间是0还是1000，结果都是先输出3后输出2，这就是面试官常常考查的js运行机制的问题，接下来我们要引入一个概念，JavaScript 是单线程的。


#### JavaScript 单线程


JavasScript引擎是基于事件驱动和单线程执行的，JS引擎一直等待着任务队列中任务的到来，然后加以处理，浏览器无论什么时候都只有一个JS线程在运行程序，即主线程。那么单线程的JavasScript是怎么实现“非阻塞执行”呢？是通过任务队列。  
 所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。  
 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着。但是如果有些任务很慢时（比如Ajax操作从网络读取数据），我还是要等结果在执行后一个任务吗？于是，有了一种异步任务。  
 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；而异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有主线程执行完毕，主线程去通知"任务队列"，某个异步任务可以执行了，该任务才会进入主线程执行。  
 所以js的运行机制如下：


* 1.所有同步任务都在主线程上执行，形成一个执行栈（Call Stack）
* 2.主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件


-3. 一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。


* 4.主线程不断重复上面的第三步。


#### setTimeout运行机制


setTimeout 和 setInterval的运行机制，其实就是将指定的代码移出本次执行，等到下一轮 Event Loop 时，再检查是否到了指定时间。如果到了，就执行对应的代码；如果不到，就等到再下一轮 Event Loop 时重新判断。


这意味着，setTimeout指定的代码，必须等到本次执行的所有同步代码都执行完，才会执行。


### 10. Promise.all 和 Promise.allSettled 有什么区别？


一句话概括Promise.allSettled和Promise.all的最大不同：Promise.allSettled永远不会被reject。


**Promise.all的痛点**


当需要处理多个Promise并行时，大多数情况下Promise.all用起来是非常顺手的，比如下面这样

const delay = n => new Promise(resolve => setTimeout(resolve, n));

const promises = [
delay(100).then(() => 1),
delay(200).then(() => 2),
]

Promise.all(promises).then(values=>console.log(values))
// 最终输出： [1, 2]

可是，是一旦有一个promise出现了异常，被reject了，情况就会变的麻烦。

const promises = [
delay(100).then(() => 1),
delay(200).then(() => 2),
Promise.reject(3)
]

Promise.all(promises).then(values=>console.log(values))
// 最终输出： Uncaught (in promise) 3

Promise.all(promises)
.then(values=>console.log(values))
.catch(err=>console.log(err))
// 加入catch语句后，最终输出：3

尽管能用catch捕获其中的异常，但你会发现其他执行成功的Promise的消息都丢失了，仿佛石沉大海一般。


要么全部成功，要么全部重来，这是Promise.all本身的强硬逻辑，也是痛点的来源，不能说它错，但这的确给Promise.allSettled留下了立足的空间。


**Promise.allSettled**


假如使用Promise.allSettled来处理这段逻辑会怎样呢?  
 const promises = [

delay(100).then(() => 1),
delay(200).then(() => 2),
Promise.reject(3)
]

Promise.allSettled(promises).then(values=>console.log(values))
// 最终输出：
// [
// {status: “fulfilled”, value: 1},
// {status: “fulfilled”, value: 2},
// {status: “rejected”, value: 3},
// ]

可以看到所有promise的数据都被包含在then语句中，且每个promise的返回值多了一个status字段，表示当前promise的状态，没有任何一个promise的信息被丢失。


### 学习笔记

主要内容包括**html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue**等等

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>**HTML/CSS**

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

![](https://img-blog.csdnimg.cn/img_convert/edad5785de634e55628acaa4c0780ea1.webp?x-oss-process=image/format,png)

>**HTML5 /CSS3**

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

![](https://img-blog.csdnimg.cn/img_convert/5c7777353ae09cb3cb2e32236c8f8c7c.webp?x-oss-process=image/format,png)

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

![](https://img-blog.csdnimg.cn/img_convert/d3965ffe4d7bb1902dac6af5045c8422.webp?x-oss-process=image/format,png)

性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

[外链图片转存中...(img-d0zISsRv-1715536682444)]

>**JavaScript**

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中...(img-685Gtw8i-1715536682444)]