前端技术栈演进

前端开发已经从简单的HTML页面发展到复杂的前端应用。

发展历程：

1. 静态网页时代：HTML + CSS
2. 动态交互时代：JavaScript + jQuery
3. 前端框架时代：React、Vue、Angular
4. 全栈开发时代：Node.js + 前端框架

现代前端三大基石

HTML5新特性：

• 语义化标签（header、nav、section、article等）
• 多媒体支持（audio、video标签）
• Canvas绘图
• 本地存储（localStorage、sessionStorage）
• Web Workers（多线程）
• 地理定位（Geolocation API）

CSS3新特性：

• Flexbox布局
• Grid布局
• CSS变量
• 过渡和动画
• 媒体查询（响应式设计）
• 自定义字体

现代JavaScript特性：

• ES6+新语法（let/const、箭头函数、模板字符串）
• Promise和async/await
• 模块化（import/export）
• 类与面向对象
• 解构赋值
• 扩展运算符

前端框架对比

框架	特点	适用场景	学习曲线
React	组件化、虚拟DOM、单向数据流	大型应用、需要高度自定义	中等
Vue	渐进式、模板语法、双向绑定	中小型应用、快速开发	平缓
Angular	完整的MVC框架、TypeScript	企业级应用、需要强类型	陡峭

前端构建工具

主要构建工具：

• Webpack：模块打包器，支持代码分割、懒加载
• Vite：新一代构建工具，开发环境极速启动
• Rollup：专注于库的打包
• Parcel：零配置构建工具

包管理器：

• npm：Node.js默认包管理器
• yarn：Facebook开发，性能更好
• pnpm：节省磁盘空间，速度快

现代前端开发示例

React组件示例：

import React, { useState } from 'react';
import './App.css';

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

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div className="counter">
      <h1>计数器: {count}</h1>
      <button onClick={increment}>增加</button>
      <button onClick={decrement}>减少</button>
    </div>
  );
}

export default Counter;

Vue组件示例：

<template>
  <div class="counter">
    <h1>计数器: {{ count }}</h1>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

<style scoped>
.counter {
  text-align: center;
  padding: 20px;
}
</style>

前端性能优化

• 代码分割：按需加载代码
• 图片优化：使用WebP格式、懒加载
• 缓存策略：合理使用浏览器缓存
• 减少重绘重排：优化CSS和DOM操作
• 使用CDN：加速静态资源加载
• 服务端渲染(SSR)：提高首屏加载速度