2024年Web前端最新每天10个前端小知识 【Day 10】_不爱吃糖的程序媛(1)，web开发权威

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

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

class Foo {
constructor (color) {
this.color = color
}
like () {
console.log(like${this.color})
}
}
let foo = new Foo(‘red’)

for (let key in foo) {
// 只打印一个color,没有打印原型链上的like
console.log(key) // color
}

**new.target属性**  
 es6为new命令引入了一个new.target属性，它会返回new命令作用于的那个构造函数。如果不是通过new调用或Reflect.construct()调用的，new.target会返回undefined。

function Person(name) {
if (new.target === Person) {
this.name = name;
} else {
throw new Error(‘必须使用 new 命令生成实例’);
}
}

let obj = {}
Person.call(obj, ‘red’) // 此时使用非new的调用方式就会报错

**class类有static静态方法**


static静态方法只能通过类调用，不会出现在实例上；另外如果静态方法包含 this 关键字，这个 this 指的是类，而不是实例。static声明的静态属性和方法都可以被子类继承。

class Foo {
static bar() {
this.baz(); // 此处的this指向类
}
static baz() {
console.log(‘hello’); // 不会出现在实例中
}
baz() {
console.log(‘world’);
}
}

Foo.bar() // hello


### 2. 背包问题


![在这里插入图片描述](https://img-blog.csdnimg.cn/cd26560f71994498b21794e108d6e84f.png)


### 3. 全排列


![在这里插入图片描述](https://img-blog.csdnimg.cn/b83dbf4045a34245814f320a9bbd7d7a.png)


### 4. 使用Promise封装一个异步加载图片的方法


这个比较简单，只需要在图片的onload函数中，使用resolve返回一下就可以了。

function loadImg(url) {
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.主线程不断重复上面的第三步。




#### css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解


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

#### js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


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

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



，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？


[外链图片转存中...(img-WEYYydMG-1714965825535)]

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