阿里外包前端面试题get和post的区别 GET：参数在 URL 中，长度有限会被缓存，可收藏书签不安全，敏感数据

get和post的区别

GET：
- 参数在 URL 中，长度有限
- 会被缓存，可收藏书签
- 不安全，敏感数据不要放这里
POST：
- 参数在 body 中，适合发送大量或敏感数据
- 不会被缓存
- 更安全（配合 HTTPS）

http和https的区别

HTTPS 比 HTTP 多了加密传输，防止数据被篡改或监听，更安全

HTTPS = HTTP + SSL/TLS 加密
特点：
- 加密、防劫持、防篡改
- 使用证书（CA颁发）
- 性能略下降但安全性高
浏览器地址栏有 🔒 锁

let和var的区别

var 是函数作用域，有变量提升，可以重复声明，并挂在全局对象上； let 是块级作用域，有暂时性死区，不可重复声明，且不挂在全局对象上，在异步和循环中表现更安全。

webpack的plugin和loader的区别

Loader：处理文件，让 Webpack 能识别非 JS 内容（如 Babel 转译、Sass 编译）
Plugin：扩展 Webpack 功能（如打包优化、HTML模板生成等）

在webpack里有哪些plugin

首屏加载优化

异步加载资源（懒加载、按需加载）
压缩 JS/CSS/图片
使用 CDN 提升访问速度
减少首屏依赖
骨架屏（Skeleton）提升用户感知
SSR 或预渲染提升内容首屏渲染速度

图片懒加载实现原理

图片懒加载的核心是延迟图片的加载时机，一般先用占位图，等图片进入可视区域时再替换成真实图片。实现方式包括：使用 IntersectionObserver API、监听 scroll 事件配合 getBoundingClientRect、或 HTML 原生属性 loading="lazy"

如何判断图片进入可视区域？

判断图片是否进入视口，可以使用 getBoundingClientRect() 判断元素的位置是否在 window.innerHeight 内，也可以用 IntersectionObserver API 来监听进入可视区域的事件。

实现左边200px 右边200px 中间自适应

.container {
  display: flex;
}
.left, .right {
  width: 200px;
}
.center {
  flex: 1;
}

postion 的属性

static：默认值，不定位
relative：相对自身原位置偏移
absolute：相对最近的定位祖先元素定位
fixed：相对视口定位，滚动不动
sticky：在某个位置“粘住”，结合滚动使用

判断a是否等于undefined

if (a === undefined) {
  // a 是 undefined
}
if (typeof a === 'undefined') {
  // 安全判断，无论 a 是否声明
}
if (a == undefined) {
  // 同时为 null 或 undefined 都成立
}
if (a === void 0) {
  // void 0 永远返回 undefined
}

判断是否是个数组

Array.isArray instanceof Object.prototype.toString.call() arr.constructor === Array

什么是微任务，什么是宏任务

宏任务是由浏览器或 Node.js 环境提供的异步任务，通常是一些独立的、耗时较长的操作。宏任务会在主线程执行完毕后，从任务队列中取出并执行。

微任务是更细粒度的异步任务，通常用于需要在当前任务完成后立即执行的操作（如 Promise 回调）。微任务会在当前宏任务执行结束后、下一个宏任务开始前执行

微任务和宏任务的执行顺序遵循以下规则：

主线程执行同步代码。
遇到异步任务时，将宏任务放入宏任务队列，微任务放入微任务队列。
主线程执行完毕后：
- 从宏任务队列中取出一个任务执行。
- 执行完该宏任务后，立即清空微任务队列（执行所有微任务）。
- 重复上述步骤，直到所有队列清空

[1,4,5.6]找出和3最接近的

const arr = [1, 4, 5, 6];
const target = 2;
const closest = arr.reduce((prev, curr) => 
  Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev
);
console.log(closest);

vue中key的作用

唯一标识节点****

key 赋给列表中每个节点一个独一无二的标识，Vue 通过这个标识来判断节点是否发生变化，而不是简单靠顺序比较。
提升渲染性能****

当数据更新时，Vue 会用 key 来复用、移动、删除和添加元素，避免不必要的重新渲染和 DOM 操作。
防止渲染错误****

如果没有合理的 key，Vue 默认用就地复用策略，可能导致组件状态错乱，比如输入框输入内容错位、动画异常等。

v-for可以用index作为索引吗？

语法上是允许的，Vue 不会报错。
适合列表不会发生增删改，且顺序不变的简单场景。
为什么不推荐用
当列表发生增删改操作时，用 index 作为 key 会导致 Vue 误判节点，产生错误复用，可能出现：
- 组件状态错乱
- 输入框内容错乱
- 动画异常等

阿里外包前端面试题