猫眼娱乐前端一面 凉经

猫眼娱乐前端一面凉经分析及知识点总结：

• CSS动画：

  transition：用于简单属性过渡（如颜色、尺寸变化），需指定属性、时长、缓动函数。

  animation：通过关键帧（@keyframes）定义复杂动画，支持循环、暂停等控制。

  transform：配合transition/animation实现位移、旋转、缩放等效果，性能优于直接操作宽高/位置。

• JS动画：

  setInterval/setTimeout：通过定时器逐步修改元素样式，但易卡顿（不推荐）。

  window.requestAnimationFrame：浏览器优化的动画API，与屏幕刷新率同步（通常60fps），避免丢帧。

  示例：

  function animate() { element.style.transform = `translateX(${x}px)`; x += 5; if (x < 200) requestAnimationFrame(animate);}requestAnimationFrame(animate);

• 常用选择器：

  类选择器（.class）、ID选择器（#id）、标签选择器（div）、属性选择器（[type="text"]）、伪类（:hover）、伪元素（::before）。

  项目常用：类选择器（复用样式）、后代选择器（如 .container p）。

• 居中方式：

  水平居中：margin: 0 auto（块级元素）、text-align: center（行内元素）。

  垂直居中：line-height: height（单行文本）、Flexbox（align-items: center）、Grid（place-items: center）。

• 隐藏元素：

  display: none（不占空间）、visibility: hidden（占空间）、opacity: 0（可交互）、clip-path: inset(100%)（裁剪隐藏）。

• 行内元素 vs 块级元素：

  行内元素（如 <span>）：宽度由内容决定，不可设宽高，垂直margin无效。

  块级元素（如 <div>）：独占一行，可设宽高和所有margin/padding。

• position定位：

  fixed：相对于视口定位，不受滚动影响。

  absolute：相对于最近的非static父元素定位。

  特殊情况：若父元素设置transform: translate，子元素fixed会相对于该父元素定位（因transform创建新的层叠上下文）。

• 数据类型：

  基础类型：Number、String、Boolean、Null、Undefined、Symbol（ES6，唯一标识）。

  引用类型：Object、Array、Function等。

  判断方法：typeof（区分基础类型）、instanceof（检测引用类型）、Object.prototype.toString.call()（精确类型）。

• 数组API：

  改变原数组：push/pop、shift/unshift、splice、sort、reverse。

  不改变原数组：concat、slice、map、filter。

• Object静态方法：

  Object.assign()：浅拷贝对象属性。

  Object.keys/values/entries()：遍历对象键/值/键值对。

• 浅拷贝 vs 深拷贝：

  浅拷贝：仅复制第一层属性，嵌套对象仍共享引用。

  数组：slice、concat、扩展运算符（[...arr]）。

  对象：Object.assign({}, obj)、扩展运算符（{...obj}）。

  深拷贝：递归复制所有层级，处理循环引用需额外逻辑（如使用WeakMap记录已拷贝对象）。

  示例：

  function deepClone(obj, map = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj; if (map.has(obj)) return map.get(obj); const clone = Array.isArray(obj) ? [] : {}; map.set(obj, clone); for (const key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key], map); } } return clone;}

• setTimeout/setInterval：

  不准时性：受主线程任务队列影响，可能延迟执行。

  替代方案：requestAnimationFrame（动画）、Promise/async/await（精确控制时序）。

• Promise：

  状态：pending → fulfilled/rejected（不可逆）。

  构造函数：同步执行，new Promise((resolve) => { console.log(1); resolve(); })会立即输出1。

  Promise.all：等待所有Promise完成，失败时快速拒绝。

  实现思路：遍历数组，记录结果/错误，通过计数判断全部完成或失败。

• 知识盲区：

  循环引用的深拷贝、transform对定位的影响、Promise.all内部实现。

• 改进方向：

  系统复习：梳理CSS布局、JS异步、数据结构等核心知识点。

  实战练习：通过编码题（如实现深拷贝、动画）巩固理解。

  模拟面试：针对高频题（如事件循环、手写Promise）进行限时作答训练。

总结：面试未通过多因知识点零散、细节掌握不牢，建议结合牛客网笔面经针对性补漏，同时加强项目经验与底层原理的理解。