前端基础知识小结

一、HTML/CSS 相关

1. HTML5 新特性

• • 语义化标签：<header>, <footer>, <article>, <section>, <nav> 等。
  • 表单增强：<input> 类型增加（如 email, date, range 等）。
  • 多媒体支持：<audio>, <video>, <canvas>, <svg>。
  • 本地存储：localStorage, sessionStorage。
  • Web Workers：多线程处理。
  • WebSocket：全双工通信。

1. CSS3 新特性

• • 选择器：:nth-child, :not, :last-child 等。
  • 动画：@keyframes, animation, transition。
  • 布局：Flexbox, Grid。
  • 媒体查询：@media 响应式设计。
  • 渐变：linear-gradient, radial-gradient。
  • 阴影：box-shadow, text-shadow。

1. 盒模型

• • 标准盒模型：content-box（width/height 只包含内容）。
  • 怪异盒模型：border-box（width/height 包含内容、内边距和边框）。

1. BFC（块级格式化上下文）

• • 定义：BFC 是一个独立的渲染区域，内部元素的布局不会影响外部元素。
  • 触发条件：

• • • float 不为 none。
    • position 为 absolute 或 fixed。
    • display 为 inline-block, table-cell, flex 等。
    • overflow 不为 visible。

• • 作用：

• • • 防止外边距重叠。
    • 清除浮动。
    • 阻止元素被浮动元素覆盖。

1. Flexbox 布局

• • 容器属性：

• • • display: flex。
    • flex-direction：主轴方向（row, column）。
    • justify-content：主轴对齐方式。
    • align-items：交叉轴对齐方式。
    • flex-wrap：是否换行。

• • 项目属性：

• • • flex-grow：放大比例。
    • flex-shrink：缩小比例。
    • flex-basis：初始大小。
    • align-self：单个项目对齐方式。

1. Grid 布局

• • 容器属性：

• • • display: grid。
    • grid-template-columns / grid-template-rows：定义列和行。
    • gap：间距。
    • justify-items / align-items：项目对齐方式。

• • 项目属性：

• • • grid-column / grid-row：项目位置。
    • justify-self / align-self：单个项目对齐方式。

1. 响应式设计

• • 媒体查询：@media screen and (max-width: 768px)。
  • 视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0">。
  • 图片响应式：<img srcset="..." sizes="...">。

---

二、JavaScript 相关

1. 数据类型

• • 基本类型：number, string, boolean, null, undefined, symbol, bigint。
  • 引用类型：object, array, function。

1. 原型与原型链

• • 每个对象都有一个 __proto__ 属性，指向其构造函数的 prototype。
  • 原型链：通过 __proto__ 连接起来的对象链，用于实现继承。

1. 闭包

• • 定义：函数内部定义的函数，可以访问外部函数的变量。
  • 作用：

• • • 封装私有变量。
    • 延长变量生命周期。

• • 缺点：可能导致内存泄漏。

1. this 指向

• • 普通函数：this 指向调用者。
  • 箭头函数：this 指向定义时的上下文。
  • 构造函数：this 指向新创建的对象。
  • 事件处理函数：this 指向触发事件的元素。

1. 事件循环（Event Loop）

• • 宏任务：setTimeout, setInterval, I/O。
  • 微任务：Promise.then, MutationObserver。
  • 执行顺序：同步代码 → 微任务 → 宏任务。

1. Promise

• • 状态：pending, fulfilled, rejected。
  • 方法：

• • • Promise.resolve / Promise.reject。
    • Promise.all：所有成功才成功。
    • Promise.race：第一个完成的结果。

• • 链式调用：.then().catch().finally()。

1. ES6+ 新特性

• • 变量声明：let, const。
  • 箭头函数：() => {}。
  • 解构赋值：const { a, b } = obj。
  • 模板字符串：`${name}`。
  • 模块化：import / export。
  • 类：class, extends, super。
  • 异步：async / await。

1. 防抖与节流

• • 防抖（Debounce）：多次触发只执行最后一次。
  • 节流（Throttle）：一段时间内只执行一次。

---

三、框架相关

1. Vue

• • 核心特性：

• • • 响应式数据：data。
    • 模板语法：{{ }}, v-bind, v-model。
    • 指令：v-if, v-for, v-show。
    • 组件化：props, emit, slot。

• • 生命周期：

• • • beforeCreate, created。
    • beforeMount, mounted。
    • beforeUpdate, updated。
    • beforeDestroy, destroyed。

• • Vuex：

• • • 状态管理：state, getters, mutations, actions。

• • Vue Router：

• • • 路由配置：routes。
    • 导航守卫：beforeEach, afterEach。

1. React

• • 核心特性：

• • • JSX：<div>{name}</div>。
    • 组件：函数组件和类组件。
    • 状态管理：useState, useReducer。
    • 生命周期：

• • • • 挂载：componentDidMount。
      • 更新：componentDidUpdate。
      • 卸载：componentWillUnmount。

• • Hooks：

• • • useState：状态管理。
    • useEffect：副作用处理。
    • useContext：上下文传递。

• • Redux：

• • • 状态管理：store, reducer, action。

• • React Router：

• • • 路由配置：<Route>, <Switch>。
    • 导航：<Link>, useHistory。

---

四、性能优化

1. 加载优化

• • 减少 HTTP 请求：合并文件，使用雪碧图。
  • 压缩资源：CSS, JS, 图片。
  • 使用 CDN 加速。
  • 懒加载：图片、组件。

1. 渲染优化

• • 减少重绘和回流：使用 transform 代替 top/left。
  • 使用 will-change 提示浏览器优化。
  • 避免频繁操作 DOM。

1. 代码优化

• • 减少全局变量。
  • 使用事件委托。
  • 避免深层嵌套。

1. 工具

• • Lighthouse：性能分析。
  • Webpack：代码分割，Tree Shaking。

---

五、网络相关

1. HTTP/HTTPS

• • HTTP 状态码：

• • • 1xx：信息。
    • 2xx：成功（200, 204）。
    • 3xx：重定向（301, 302, 304）。
    • 4xx：客户端错误（404, 403）。
    • 5xx：服务器错误（500, 502）。

• • HTTPS：通过 SSL/TLS 加密传输。

1. 缓存

• • 强缓存：Cache-Control, Expires。
  • 协商缓存：Last-Modified, ETag。

1. 跨域

• • 原因：同源策略限制。
  • 解决方案：

• • • CORS：服务器设置 Access-Control-Allow-Origin。
    • JSONP：通过 <script> 标签跨域。
    • 代理服务器：Nginx 反向代理。

1. WebSocket

• • 全双工通信。
  • 适用于实时应用（如聊天室）。

---

六、手写代码

数组去重

const unique = (arr) => [...new Set(arr)];

深拷贝

const deepClone = (obj) => JSON.parse(JSON.stringify(obj));

防抖

function debounce(fn, delay) {
    let timer;
    return function (...args) {
        clearTimeout(timer);
        timer = setTimeout(() => fn.apply(this, args), delay);
    };
}

节流

function throttle(fn, delay) {
    let flag = true;
    return function (...args) {
        if (!flag) return;
        flag = false;
        setTimeout(() => {
            fn.apply(this, args);
            flag = true;
        }, delay);
    };
}

Promise.all

Promise.all = function (promises) {
    return new Promise((resolve, reject) => {
        let results = [];
        let count = 0;
        promises.forEach((promise, index) => {
            promise.then((res) => {
                results[index] = res;
                if (++count === promises.length) resolve(results);
            }).catch(reject);
        });
    });
};