Web前端最全前端常见面试题（8，2024年最新这份354页笔记的Web前端进阶知识+大厂高频面试题

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

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

3. position不为relative和static，脱离文档流

4. display为table-cell、table-caption、inline-block等

5. 是body根元素

BFC的应用：

1. 垂直方向的外边距重叠，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准

2. 清除浮动，计算子级浮动元素的高度

3. 阻止元素覆盖，形成两栏布局，左边固定宽度，右边不设宽，因此右边的宽度自适应，随浏览器窗口大小的变化而变化

4. 解除文字环绕

IFC内联格式化上下文，框线高度由最高的实际高度为准，垂直方向的margin和padding不会影响

GFC网格布局上下文，display为gird

FFC为自适应格式上下文，display为flex或者inline-flex的时候

div水平垂直居中

---

1. absolute定位，配合transform（不知道子元素大小）

2. absolute定位，配合负margin（知道子元素大小）

3. absolute定位，margin:auto(不知道子元素大小)

4. flex布局，justify-content和align-items都为center(不知道子元素大小)

5. display为table-cell，vertial-align为middle，text-align为center(不知道子元素大小)

6. absolute定位，使用calc（）计算位置（知道父、子元素大小）

display_none,visibility_hidden,opacity_0区别

---

display:none不会被渲染（会重排），不能触发事件，不能被继承属性，不支持transition动画

visibility:hidden会被渲染（会重绘），不会被触发事件，会被子元素继承，显示不支持隐藏支持动画

opacity:0会被渲染（不会重绘），会触发事件。会被子元素继承且不能取消，可以支持动画

CSS优先级

---

css优先级计算Specificity累加

id选择器 0，0，1，0，0

类选择器、属性选择器、伪类 0，0，0，1，0

元素和伪元素 0，0，0，0，1

通配符为 0，0，0，0，0

行内样式 0，1，0，0，0

！important 1，0，0，0，0

移动端1px边框的问题

---

移动端中css的1px不等于移动设备的1px，比如我们pc中模拟看到的iphone为375但是实际是750

边框变粗的原因：移动端和pc端的像素密度不同，通常移动端为devicePixelRatio2

1. 部分移动端支持border-width：0.5px

2. 使用border-image、background-image结合图片像素透明实现

3. 

4. 使用box-shadow模拟边框

5. viewport+rem实现

https://blog.csdn.net/qq_38735649/article/details/82748466

6. 使用伪类+transform：scale（0.5）

map和parseInt

---

函数节流和函数防抖

---

节流指的是一定时间内只会执行一次函数，先触发

防抖指的是任务触发的间隔超过一定时间才能执行，后触发

总的来说节流和防抖都是避免频繁调用函数的方法

Set、Map、WeakSet、WeakMap的区别

---

重点是遍历和弱引用

判断数组的方法

---

1. Object.prototype.toString.call(arr)->“[object Array]”

2. arr instanceof Array ->true,去找原型链prototype

3. Array.isArray(arr) ->true，ES5新增的方法，推荐使用

ES6的class有哪些特性

---

前端面试题汇总

JavaScript

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

性能

linux

前端资料汇总