一、面试经历与个人感悟
面试形式：远程视频面试
影响：省去奔波但缺乏面对面交流的代入感，容易紧张
关键教训：
重视基础：不要轻视通用业务、项目经历、价值观和软技能的考察
代码习惯：过度依赖IDE提示可能导致手写代码能力下降，需做到“手到心到”
面试重点：简历熟悉度 + 底层原理考察
今日感悟：
CI/CD概念已深度融入工具和框架
程序员高频操作：Ctrl+C / Cmd+C 与 Ctrl+V / Cmd+V
开发重点从语言本身转向工具链使用（Git→Sourcetree，语言→框架）
高级语言的核心价值是提升开发者效率
二、CSS核心知识点
1. display常用属性
| 属性值 | 说明 |
|---|---|
none | 元素不显示，不占位 |
block | 块级元素，前后有换行符 |
inline | 内联元素（默认），前后无换行符 |
inline-block | 行内块元素（CSS2.1新增） |
2. position定位属性
| 属性值 | 说明 |
|---|---|
absolute | 绝对定位，相对于最近的非static父元素 |
fixed | 固定定位，相对于浏览器窗口 |
relative | 相对定位，相对于自身正常位置 |
static | 默认值，无定位，正常文档流 |
3. margin与padding区别
| 特性 | margin（外边距） | padding（内边距） |
|---|---|---|
| 作用对象 | 容器外距离（自身边框到另一个容器） | 容器内距离（自身边框到内部内容） |
| 取值 | 可为负值 | 不能为负值 |
| 典型场景 | 兄弟元素间距 | 父子元素内间距 |
示例：
html
<!-- margin: box1与box2之间的间距 --> <div class="box1"></div> <div class="box2"></div> <!-- padding: box1内部到box2的间距 --> <div class="box1"> <div class="box2"></div> </div>
4. 纯CSS实现三角形
原理：利用border属性，将元素宽高设为0，设置不同边框颜色与透明度
实现步骤：
创建带边框的div
将内部div宽高设为0
保留一个边框颜色，其他设置为透明
代码示例：
css
.triangle { width: 0; height: 0; border-width: 40px; border-style: solid; border-color: red transparent transparent transparent; }5. rpx与px换算
在小程序开发中，rpx（responsive pixel）是响应式像素单位，换算关系与屏幕宽度相关：
设计稿通常以750rpx为基准
换算公式：
px = rpx * (屏幕宽度 / 750)物理像素关系取决于设备像素比（DPR）
6. 垂直水平居中方案
推荐方案：Flex布局（最简单直观）
html
<div id="app"> <div class="center">hello world</div> </div> <style> #app { height: 100vh; display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } #app .center { width: 300px; height: 300px; } </style>三、HTTP与网络相关
7. GET与POST深度辨析
表层区别：
| 特性 | GET | POST |
|---|---|---|
| 缓存 | 可缓存 | 不缓存 |
| 历史记录 | 保留 | 不保留 |
| 书签 | 可收藏 | 不可收藏 |
| 数据长度 | 有限制（URL长度） | 无限制 |
| 安全性 | 较低（数据在URL中） | 相对较高 |
| 用途 | 获取数据 | 提交数据 |
底层本质：
GET和POST都是基于TCP的HTTP请求，本质无差别
关键差异在于HTTP协议和浏览器/服务器的实现：
GET：浏览器一次性发送header和data，服务器响应200
POST：浏览器先发header，服务器响应100 continue，再发data，服务器响应200
虽然GET理论上性能稍优，但实际差异微乎其微，推荐根据语义选择
8. 跨域问题解决方案
开发推荐：本地NGINX反向代理
避免修改后端代码或使用JSONP等复杂方案
配置灵活，模拟生产环境
上线后同域部署自然解决跨域
四、JavaScript核心概念
9. 闭包（Closure）
本质：函数与其词法环境的组合
特性：
创建私有变量
延长变量生命周期
避免全局污染
核心：内部函数可访问外部函数作用域，即使外部函数已执行完毕
10. 前端存储方案对比
| 特性 | cookie | localStorage | sessionStorage |
|---|---|---|---|
| 生命周期 | 可设置过期时间 | 永久（手动清除） | 会话结束（标签页关闭） |
| 存储位置 | 浏览器+服务器 | 浏览器本地 | 浏览器本地 |
| 请求携带 | 每次HTTP请求自动携带 | 不自动携带 | 不自动携带 |
| 存储大小 | ~4KB | ~5-10MB | ~5-10MB |
| API | document.cookie | setItem/getItem | setItem/getItem |
localStorage使用示例：
javascript
const db = window.localStorage; db.setItem('name', '李四'); db.setItem('age', 22); // 存储数字会自动转为字符串 console.log(db.getItem('name')); // '李四' console.log(db.getItem('age')); // '22' // 存储对象需序列化 const obj = { key: 'value' }; localStorage.setItem('obj', JSON.stringify(obj)); const retrieved = JSON.parse(localStorage.getItem('obj'));11. 箭头函数 vs 普通函数
| 特性 | 箭头函数 | 普通函数 |
|---|---|---|
| this绑定 | 继承上下文this（不可改变） | 动态绑定（调用者决定） |
| 构造函数 | 不可用作构造函数（无new） | 可用作构造函数 |
| arguments | 不绑定，使用rest参数(...args) | 绑定arguments对象 |
| 原型 | 无prototype属性 | 有prototype属性 |
| yield | 不能用作Generator函数 | 可用作Generator函数 |
| 简洁性 | 语法更简洁 | 语法相对冗长 |
关键记忆点：箭头函数的this在定义时确定且永不改变，普通函数的this由调用方式决定。
12. var、let、const区别
| 特性 | var | let | const |
|---|---|---|---|
| 作用域 | 函数作用域 | 块级作用域 | 块级作用域 |
| 变量提升 | 提升且初始化undefined | 提升但不初始化（暂时性死区） | 提升但不初始化 |
| 重复声明 | 允许 | 不允许 | 不允许 |
| 值修改 | 可修改 | 可修改 | 不可修改（引用类型可修改属性） |
13. call、apply、bind方法比较
共同点：改变函数执行时的this指向
区别：
call：
func.call(thisArg, arg1, arg2, ...)- 参数逐个传递apply：
func.apply(thisArg, [argsArray])- 参数以数组传递bind：
func.bind(thisArg, arg1, arg2, ...)- 返回新函数，不立即执行
使用场景：
call：参数数量明确时
apply：参数为数组或伪数组时
bind：需要延迟执行或创建偏函数时
五、总结与建议
面试准备重点：
基础扎实：CSS盒模型、定位、布局必须熟练掌握
原理深入：不要只记表面区别（如GET/POST），理解底层机制
手写能力：减少对IDE提示的依赖，能徒手实现常见功能
项目清晰：对简历上的项目经历要了如指掌
工具链：熟悉现代前端开发工具和流程（CI/CD、Git等）
心态调整：
视频面试需提前熟悉技术环境
紧张时深呼吸，将问题拆解回答
诚实面对不懂的问题，展示学习能力
