web前端技术有哪些

打开任何一个现代网页，端技右键查看源代码，端技你看到的端技可能是一堆压缩过的、带哈希值的端技文件名。但剥开这层外壳，端技前端技术的端技地基其实就三样东西：HTML、CSS、端技JavaScript。端技浏览器只认这三样。端技其他所有框架、端技工具、端技预处理器，端技最终都得编译成它们才能跑起来。端技

我刚开始写前端那会儿，端技jQuery 还是标配。一个 $(document).ready() 走天下，DOM 操作全靠它。现在呢？jQuery 还在，但新项目里几乎见不到了。不是它不好，是时代换了赛道——页面交互复杂到 jQuery 那种命令式写法扛不住状态同步的混乱。

框架和库：React 不是唯一答案

React、Vue、Angular 这三个名字你肯定绕不开。React 把 UI 拆成组件，用 JSX 把 HTML 塞进 JavaScript 里写，第一次见觉得别扭，用惯了反而回不去。Vue 的模板语法对新手友好，v-if、v-for 写起来像在写增强版 HTML。Angular 呢？大而全，依赖注入、RxJS、TypeScript 默认集成，适合那种“一个团队干五年”的企业级项目。

但别以为会了 React 就等于会了前端。我见过不少简历上写“精通 React”的人，被问到事件循环、原型链、闭包时卡壳。框架只是工具，底层还是 JavaScript。ES6 的 class、Promise、async/await、解构赋值，这些才是每天真正在用的东西。

构建工具：从 Grunt 到 Vite 的进化

以前用 Grunt 配一个 watch 任务，改一行代码等三秒才刷新。后来 Gulp 用流式处理快了一点。Webpack 出来的时候，配置 webpack.config.js 能写上百行，loader 和 plugin 傻傻分不清。现在 Vite 靠浏览器原生 ES Module 和 esbuild 预构建，冷启动基本秒开。我最近一个小项目用 Vite，npm create vite@latest 之后直接写代码，热更新几乎无感。

Babel 还在，但目标变了——以前是把 ES6 转 ES5 兼容 IE，现在更多是转 JSX 和 TypeScript。PostCSS 也还在，Autoprefixer 帮你自动加 -webkit- 前缀，省得查 caniuse。

CSS 这一块：预处理器和原子化 CSS 的拉扯

Sass 和 Less 让 CSS 有了变量、嵌套、混入。但原生 CSS 现在也有了 var(--color) 和 @nest（虽然支持度一般）。Tailwind 走另一条路——把类名当积木用，flex items-center p-4 rounded-lg 直接写在 HTML 里。喜欢的人觉得效率飞起，讨厌的人说这跟写内联样式有什么区别。我自己的感受是：小项目用 Tailwind 很爽，大项目还是得配合 @apply 或者组件化方案，不然类名列表长得像火车。

TypeScript：从可选到默认

五年前面试，会 TypeScript 是加分项。现在不会 TypeScript，很多团队直接筛掉。类型系统能提前抓出 undefined is not a function 这种低级错误。虽然写类型定义有时候烦人——尤其是给第三方库写 .d.ts 文件——但项目大了之后，重构时编译器帮你检查每一个引用，那种安全感是 JavaScript 给不了的。

还有一个东西叫 WebAssembly，允许你用 C++、Rust 写模块跑在浏览器里。目前主要用在视频编辑、游戏、CAD 这些高性能场景。普通业务前端暂时碰不到，但值得知道它存在。

前端技术栈的更新速度像手机发布会，每年都有新东西。但别被吓到——HTML 管结构，CSS 管样式，JavaScript 管行为，这条主线二十年没变过。框架和工具只是让这三件事写起来更顺手。把基础打牢，学新东西就是查文档的事。

对了，还有 Web Components。浏览器原生支持自定义元素，<my-button></my-button> 这种。虽然生态还没起来，但哪天框架不香了，它可能是最后的退路。