跳到主要内容

前端知识体系

核心知识点​

HTML​

HTML（超文本标记语言）是构建网页结构的基础，它使用标签来描述网页内容的语义和结构。

语义化标签​

语义化标签使HTML更具可读性和可访问性，同时有助于搜索引擎优化（SEO）。

<!-- 语义化标签示例 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>语义化标签示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系方式</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section>
            <h2>新闻动态</h2>
            <article>
                <h3>最新文章标题</h3>
                <p>文章内容...</p>
            </article>
        </section>
    </main>
    <footer>
        <p>版权所有 &copy; 2023</p>
    </footer>
</body>
</html>

HTML语义化标签结构

表单元素和验证​

表单是用户与网站交互的重要方式，HTML5提供了丰富的表单验证功能。

<!-- 表单验证示例 -->
<form action="/submit" method="post">
    <div>
        <label for="email">电子邮箱：</label>
        <input type="email" id="email" name="email" required placeholder="请输入您的邮箱">
    </div>
    <div>
        <label for="password">密码：</label>
        <input type="password" id="password" name="password" required minlength="8" placeholder="请输入至少8位密码">
    </div>
    <div>
        <label for="age">年龄：</label>
        <input type="number" id="age" name="age" min="18" max="120" required>
    </div>
    <button type="submit">提交</button>
</form>

多媒体标签​

HTML5提供了原生的多媒体支持，无需额外插件。

<!-- 多媒体标签示例 -->
<img src="image.jpg" alt="图片描述" width="500" height="300" loading="lazy">

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    您的浏览器不支持音频播放。
</audio>

<video controls width="800" height="450" poster="video-cover.jpg">
    <source src="video.mp4" type="video/mp4">
    您的浏览器不支持视频播放。
</video>

CSS​

CSS（层叠样式表）用于描述网页的视觉表现，包括颜色、布局、字体等。

选择器优先级和继承​

CSS选择器优先级决定了哪些样式规则会被应用到元素上。优先级从高到低依次为：

  • !important 声明
  • 内联样式（style属性）
  • ID选择器（#id）
  • 类选择器（.class）、属性选择器（[attr]）、伪类选择器（:hover）
  • 元素选择器（div, p）、伪元素选择器（::before）
  • 通配符选择器（*）
/* 选择器优先级示例 */
#header { color: red; }
.header { color: blue; }
header { color: green; }
/* 最终 #header 元素的颜色为 red */

盒模型​

CSS盒模型描述了元素在页面上占据的空间，包括：

  • content（内容区域）：显示实际内容的部分
  • padding（内边距）：内容与边框之间的空间
  • border（边框）：围绕内边距的边界
  • margin（外边距）：元素与其他元素之间的空间
/* 盒模型示例 */
.box {
    width: 200px;        /* 内容宽度 */
    height: 100px;       /* 内容高度 */
    padding: 20px;       /* 内边距 */
    border: 2px solid black; /* 边框 */
    margin: 10px;        /* 外边距 */
    box-sizing: border-box; /* 使width和height包含padding和border */
}

CSS盒模型

定位机制​

CSS提供了多种定位方式，用于控制元素在页面上的位置：

/* 定位机制示例 */
.static { position: static; /* 默认值，按照正常文档流定位 */ }
.relative { position: relative; /* 相对自身正常位置偏移 */ top: 10px; left: 20px; }
.absolute { position: absolute; /* 相对于最近的非static定位祖先定位 */ top: 50px; right: 100px; }
.fixed { position: fixed; /* 相对于视口定位，不随滚动变化 */ bottom: 20px; right: 20px; }
.sticky { position: sticky; /* 滚动到阈值时变为fixed */ top: 0; background: white; }

弹性布局（Flexbox）​

Flexbox是一种一维布局模型，适合于对齐和分配空间。

/* Flexbox示例 */
.container {
    display: flex;
    justify-content: space-between; /* 水平方向两端对齐 */
    align-items: center; /* 垂直方向居中对齐 */
    flex-wrap: wrap; /* 允许换行 */
}

.item {
    flex: 1 1 200px; /*  flex-grow, flex-shrink, flex-basis */
    margin: 10px;
}

网格布局（Grid）​

Grid是一种二维布局模型，可以同时控制行和列。

/* Grid示例 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列，每列宽度相等 */
    grid-template-rows: 100px 200px; /* 2行，高度分别为100px和200px */
    gap: 10px; /* 网格间距 */
}

.grid-item:nth-child(1) {
    grid-column: 1 / 3; /* 跨越第1到第3列（不包含第3列） */
    grid-row: 1; /* 位于第1行 */
}

媒体查询和响应式设计​

媒体查询允许根据设备特性应用不同的样式，实现响应式设计。

/* 媒体查询示例 */
/* 移动设备 */
@media (max-width: 767px) {
    .container {
        flex-direction: column;
    }
}

/* 平板设备 */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        flex-wrap: wrap;
    }
}

/* 桌面设备 */
@media (min-width: 1024px) {
    .container {
        max-width: 1200px;
        margin: 0 auto;
    }
}

JavaScript​

JavaScript是一种脚本语言，用于实现网页的交互功能。

数据类型和变量​

JavaScript有多种数据类型，包括原始类型和引用类型。

// 数据类型示例
// 原始类型
const str = 'Hello World'; // 字符串
const num = 42; // 数字
const bool = true; // 布尔值
const undef = undefined; // 未定义
const nul = null; // 空值
const sym = Symbol('unique'); // 符号

// 引用类型
const obj = { name: 'John', age: 30 }; // 对象
const arr = [1, 2, 3, 4, 5]; // 数组
const func = () => console.log('Hello'); // 函数

函数和闭包​

函数是JavaScript的核心组件，闭包是函数的重要特性。

// 函数和闭包示例
function createCounter() {
    let count = 0; // 私有变量
    return function() {
        count++; // 访问外部函数的变量
        return count;
    };
}

const counter = createCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

原型链和面向对象编程​

JavaScript使用原型链实现面向对象编程。

// 原型链和面向对象示例
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHello() {
        console.log(`Hello, my name is ${this.name}.`);
    }
}

class Student extends Person {
    constructor(name, age, studentId) {
        super(name, age);
        this.studentId = studentId;
    }

    study() {
        console.log(`${this.name} with ID ${this.studentId} is studying.`);
    }
}

const student = new Student('Alice', 20, '12345');
student.sayHello(); // Hello, my name is Alice.
student.study(); // Alice with ID 12345 is studying.

异步编程​

JavaScript是单线程的，但可以通过异步编程处理耗时操作。

// 异步编程示例
// 1. 回调函数
function fetchData(callback) {
    setTimeout(() => {
        callback('Data fetched');
    }, 1000);
}

// 2. Promise
function fetchDataWithPromise() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data fetched with Promise');
        }, 1000);
    });
}

// 3. async/await
async function fetchDataWithAsyncAwait() {
    try {
        const data = await fetchDataWithPromise();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

// 使用示例
fetchData(data => console.log(data));
fetchDataWithPromise().then(data => console.log(data));
fetchDataWithAsyncAwait();

DOM操作和事件处理​

DOM操作允许JavaScript与HTML元素交互，事件处理使网页能够响应用户操作。

// DOM操作和事件处理示例
// 选择元素
const button = document.querySelector('#myButton');
const output = document.querySelector('#output');

// 添加事件监听器
button.addEventListener('click', function(event) {
    // 阻止默认行为
    event.preventDefault();

    // 创建新元素
    const newElement = document.createElement('p');
    newElement.textContent = 'Button clicked!';

    // 添加到DOM
    output.appendChild(newElement);

    // 修改样式
    newElement.style.color = 'blue';
    newElement.style.fontWeight = 'bold';
});

前端框架​

前端框架简化了复杂应用的开发，提供了组件化、状态管理等功能。

React​

React是由Facebook开发的基于组件的UI库，使用虚拟DOM提高性能。

// React组件示例
import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increment</button>
            <button onClick={() => setCount(count - 1)}>Decrement</button>
        </div>
    );
}

export default Counter;

Vue​

Vue是一个渐进式JavaScript框架，易于学习和集成。

<!-- Vue组件示例 -->
<template>
    <div>
        <p>Count: {{ count }}</p>
        <button @click="increment">Increment</button>
        <button @click="decrement">Decrement</button>
    </div>
</template>

<script>
export default {
    data() {
        return {
            count: 0
        };
    },
    methods: {
        increment() {
            this.count++;
        },
        decrement() {
            this.count--;
        }
    }
};
</script>

Angular​

Angular是由Google开发的全面的前端框架，基于TypeScript。

// Angular组件示例
import { Component } from '@angular/core';

@Component({
    selector: 'app-counter',
    template: `
        <div>
            <p>Count: {{ count }}</p>
            <button (click)="increment()">Increment</button>
            <button (click)="decrement()">Decrement</button>
        </div>
    `
})
export class CounterComponent {
    count = 0;

    increment() {
        this.count++;
    }

    decrement() {
        this.count--;
    }
}

原理介绍​

浏览器渲染原理​

浏览器渲染网页的过程可以分为以下几个步骤：

  1. HTML解析：浏览器将HTML文本解析成DOM（文档对象模型）树。
  2. CSS解析：浏览器将CSS文本解析成CSSOM（CSS对象模型）树。
  3. 渲染树构建：DOM树和CSSOM树结合生成渲染树（Render Tree），只包含可见元素。
  4. 布局（Layout）：计算每个元素的位置和大小，生成布局（Layout）。
  5. 绘制（Painting）：将元素绘制到屏幕上，包括颜色、文本、边框等。
  6. 合成（Compositing）：将绘制的图层合并，显示最终结果。

浏览器渲染原理

性能优化原理​

前端性能优化可以从多个方面入手：

网络优化​

  • 减少HTTP请求：合并CSS和JavaScript文件，使用CSS精灵图（Sprite）。
  • 使用缓存策略：设置适当的HTTP缓存头（Cache-Control, ETag, Last-Modified）。
  • 资源压缩：压缩HTML、CSS、JavaScript文件，使用WebP格式图片。
  • CDN加速：使用内容分发网络分发静态资源。

渲染优化​

  • 延迟加载非关键资源：使用loading="lazy"属性延迟加载图片，动态加载非首屏内容。
  • 优化DOM操作：减少DOM操作次数，使用文档碎片（DocumentFragment）批量更新。
  • 使用CSS动画：CSS动画性能优于JavaScript动画，尽量使用transform和opacity属性。
  • 避免重排和重绘：减少DOM元素的几何属性变化，使用CSS containment。

代码优化​

  • 代码分割：将代码分割成小块，按需加载。
  • 按需加载：只加载当前页面需要的资源。
  • 使用Tree Shaking：移除未使用的代码。
  • 优化JavaScript执行：减少长时间运行的任务，使用Web Workers处理耗时操作。

跨域原理​

跨域是指浏览器阻止不同源（协议、域名、端口不同）的网页之间的交互，这是由浏览器的同源策略引起的。

跨域解决方案​

  1. CORS（跨域资源共享）：服务器设置Access-Control-Allow-Origin响应头。
// 服务器端设置CORS示例（Node.js/Express）
const express = require('express');
const app = express();

// 允许所有来源访问
app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
});
  1. JSONP：利用<script>标签不受同源策略限制的特性。
// JSONP示例
function handleResponse(data) {
    console.log('Data received:', data);
}

const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);
  1. 代理服务器：在服务器端转发请求，避开浏览器的同源策略。
  2. WebSocket：WebSocket协议不受同源策略限制，可以实现跨域通信。

前端网络​

前端网络是前端开发中不可或缺的核心知识领域，涵盖了从基础网络概念到高级网络技术的完整学习路径。

网络基础​

  • 网络协议栈：理解OSI七层模型和TCP/IP四层模型
  • 浏览器网络模型：掌握浏览器如何处理网络请求和响应
  • 网络调试工具：熟练使用Network面板等调试工具

HTTP协议​

  • HTTP/1.1：深入理解HTTP协议的工作原理、请求方法、状态码等
  • HTTP/2：掌握多路复用、服务器推送、头部压缩等性能优化特性
  • HTTPS：理解SSL/TLS协议、数字证书、加密传输等安全技术

实时通信​

  • WebSocket：掌握全双工通信协议，实现实时数据交换
  • 长连接管理：理解连接类型选择、心跳机制、自动重连等策略
  • 消息处理：掌握消息类型管理、队列处理、错误恢复等机制

离线技术​

  • Service Worker：理解离线缓存策略、后台同步、推送通知等PWA技术
  • 缓存管理：掌握各种缓存策略、版本控制、性能优化等技巧

网络优化​

  • 性能监控：使用Network面板分析网络性能，识别优化点
  • 资源优化：实施资源压缩、CDN加速、预加载等优化策略
  • 连接优化：优化连接建立、复用、关闭等各个环节

前端安全​

前端安全是Web应用开发的重要考虑因素，常见的安全问题包括：

XSS攻击（跨站脚本攻击）​

XSS攻击是指攻击者注入恶意脚本到网页中，当用户访问时执行。防御措施包括：

  • 输入验证和过滤
  • 输出编码
  • 使用Content Security Policy (CSP)
  • 避免使用eval()和innerHTML

CSRF攻击（跨站请求伪造）​

CSRF攻击是指攻击者诱导用户访问恶意网站，利用用户的身份执行未授权操作。防御措施包括：

  • 使用CSRF令牌
  • 检查Referer头
  • 使用SameSite Cookie属性
  • 实现双重提交防护

点击劫持​

点击劫持是指攻击者通过透明层覆盖在合法网站上，诱导用户点击。防御措施包括：

  • 使用X-Frame-Options响应头
  • 使用Content Security Policy (CSP)的frame-ancestors指令
  • 实现JavaScript防御（如检查top.location）

安全的Cookie设置​

设置Cookie时应考虑以下安全属性：

  • HttpOnly：防止JavaScript访问Cookie，减少XSS攻击风险
  • Secure：仅通过HTTPS传输Cookie
  • SameSite：限制Cookie仅在同一站点请求中发送
  • Path和Domain：限制Cookie的作用范围
// 设置安全Cookie示例
document.cookie = 'sessionId=abc123; HttpOnly; Secure; SameSite=Strict; Path=/; Domain=example.com';

前端工程化​

前端工程化是指将工程化的思想应用于前端开发，提高开发效率和代码质量。

构建工具​

  • Webpack：模块打包工具，支持代码分割、按需加载等功能。
  • Vite：基于ESM的开发服务器和构建工具，具有快速的热更新能力。
  • Rollup：专注于ES模块的打包工具，适合库的开发。

包管理工具​

  • npm：Node.js的包管理工具，是目前最大的JavaScript包仓库。
  • Yarn：由Facebook开发的包管理工具，提供更快的安装速度和离线模式。
  • pnpm：高效的包管理工具，使用硬链接和符号链接节省磁盘空间。

代码规范和质量​

  • ESLint：静态代码分析工具，用于检测代码中的错误和风格问题。
  • Prettier：代码格式化工具，保持代码风格一致。
  • TypeScript：静态类型检查器，提高代码可读性和可维护性。

测试​

  • 单元测试：测试单个组件或函数，如Jest。
  • 集成测试：测试多个组件的交互，如React Testing Library。
  • 端到端测试：模拟用户操作测试整个应用，如Cypress、Playwright。

前沿技术和趋势​

前端技术发展迅速，以下是一些前沿技术和趋势：

WebAssembly​

WebAssembly是一种低级字节码格式，可以在浏览器中运行高性能的代码，适合游戏、视频编辑等CPU密集型应用。

微前端​

微前端将大型应用拆分为多个独立的小型应用，每个应用可以独立开发、部署和维护。

PWA（渐进式Web应用）​

PWA结合了Web和原生应用的优点，可以离线工作、添加到主屏幕、接收推送通知等。

Serverless​

Serverless架构允许开发者专注于代码，无需管理服务器，由云提供商负责基础设施。

大前端​

大前端趋势下，前端开发者需要掌握更多技能，如移动端开发（React Native、Flutter）、桌面端开发（Electron）等。