前端知识概览

前端知识体系

基础知识

  • HTML：超文本标记语言，由各类元素组成标记语言；给文本赋予语义，划分文档逻辑结构，嵌入图片、音视频等多媒体资源。
  • HTML5：HTML 的稳定新版本，不再局限文档标记，升级为完整应用开发平台；新增语义标签、多媒体标签，同时配套大量用于存储、多媒体、硬件访问的 JavaScript API。
  • CSS：样式表语言，用于描述 HTML、XML（SVG、MathML、XHTML）文档的页面表现与渲染效果。
  • CSS3：CSS 的升级版本，采用模块化迭代，在 CSS2.1 基础上新增大量布局、动画、变换等能力。
  • HTTP：超文本传输协议，Web 通信基础，定义客户端与服务器之间的请求、响应格式。
  • ECMAScript：ECMA（欧洲计算机制造商协会）制定的语言标准。JavaScript、Dart、C# 等语言由 ECMA 标准化。ECMAScript 是语言核心规范，剥离宿主环境 API；浏览器、Node.js 是宿主环境，在标准之上提供额外 API（浏览器 window、Node.js fs 模块）。
  • JavaScript：轻量级解释/即时编译的函数式编程语言。多用于网页脚本，也可运行于 Node.js、Apache CouchDB、Adobe Acrobat 等非浏览器环境。
  • ES6：即 ECMAScript 2015，2015-06 正式发布，目标支持编写大型企业级 JS 应用。
  • Node.js：开源、跨平台 JavaScript 运行时环境，让 JS 脱离浏览器执行。
  • Markdown：轻量级标记语言，在纯文本内增加格式化标记；2004 年诞生，广泛用于文档编写。
  • TypeScript：JavaScript 的超集，为 JS 增加静态类型语法，编译输出普通 JavaScript。

知识扩展

  • Canvas：2D 绘图 API，JS 配合 <canvas> 实现动画、游戏、可视化、图片编辑；WebGL 基于 canvas 提供硬件加速 2D/3D 渲染。
  • SVG：可缩放矢量图形，W3C 制定的 XML 分支；文本格式矢量图，可与 CSS、DOM、JS、SMIL 协同工作，缩放不失真。
  • WebGL：浏览器高性能交互式 2D/3D 图形 API，基于 OpenGL ES 2.0，硬件图形加速，无需插件。
  • WebRTC：浏览器端实时通信，P2P 点对点，实现音视频流、任意数据传输，不需要中间插件。
  • WebSocket：浏览器与服务器全双工通信协议，适合聊天、实时推送、协同编辑等低延迟场景。
  • Service Worker：浏览器后台脚本，支持离线缓存、推送通知、请求拦截，是 PWA 的核心能力之一。
  • PWA（Progressive Web App）：渐进式 Web 应用，结合 Service Worker、Manifest 等能力，让网页具备接近原生 App 的安装与离线体验。
  • GraphQL：API 查询语言，客户端按需声明字段，减少冗余数据传输，常与 React、Vue 等框架配合使用。
  • Web Components：一套原生 Web 组件技术，实现可复用自定义 HTML 元素。参考：阮一峰 - Web Components 入门实例教程
  • WebAssembly、wasm：体积小、加载快的二进制可移植格式；接近原生硬件执行效率，C/C++、Rust 等语言可编译到 wasm 在浏览器运行。

IDE、文本编辑器

  • VIM：高可配置文本编辑器，UNIX、macOS 系统内置 vi。
  • Sublime Text：代码、标记语言编辑器，支持 Python 插件生态。
  • Visual Studio：Windows 平台综合 IDE，侧重 .NET、C++ 开发。
  • Visual Studio Code：跨平台轻量源代码编辑器；前端开发主流工具，插件丰富。
  • HBuilderX（HX）：DCloud 出品，兼顾编辑器与 IDE 能力，uni-app 主要开发工具。
  • WebStorm：JetBrains 推出的 JavaScript 系列专用 IDE，自动化处理前端工作流。
  • Atom：使用 HTML、JS、CSS + Node.js 构建的编辑器（项目已停止维护）。
  • Eclipse：跨平台开源 IDE，原生主打 Java，插件扩展支持 C++、Python、PHP、HTML5。
  • Notepad++：Windows 开源轻量源码编辑器，C++ 编写。
  • EditPlus：Windows 文本编辑器，内置 FTP/SFTP。
  • NetBeans：Apache 开源可扩展开发平台，支持 Java、C/C++、PHP、HTML5。
  • Typora：Markdown 编写与阅读编辑器。

浏览器

前端库、框架

  • jQuery：轻量丰富 JS 库，简化 DOM 遍历、事件、动画、AJAX，兼容多浏览器。
  • KnockoutJS：MVVM 库，数据驱动 UI。
  • Ember.js：构建现代 Web 应用成熟高效框架。
  • AngularJS：早期动态 Web 应用框架，扩展 HTML 语法，数据绑定、依赖注入减少样板代码。
  • Angular：Google 维护的现代前端框架，AngularJS 的继任者。
  • React：用于构建用户界面 JavaScript 库，组件化。
  • Vue.js：构建用户界面框架，基于 HTML、CSS、JS，声明式组件化。
  • Svelte：编译型 UI 框架，构建时将组件编译为高效原生 DOM 操作代码，运行时体积小。
  • Handlebars：简单模板语言，输入模板 + 数据输出 HTML 文本。
  • RxJS：Reactive Extensions for JavaScript，用 Observable 处理异步与事件流，Angular 等框架常用。
  • Next.js：基于 React 的 SSR、SSG 元框架。
  • Nuxt.js：基于 Vue.js 的服务端渲染元框架。
  • Jekyll：静态站点、博客生成工具。
  • uni-app：一套代码，发布 Web、iOS、Android、多端小程序、快应用。
  • Electron：使用 Web 技术（HTML、CSS、JS）构建跨平台桌面应用的框架。

构建、工程化工具

  • npm：Node.js 附带包管理器，管理依赖包。
  • pnpm：高效、节省磁盘空间的 Node.js 包管理器。
  • Yarn：软件包管理器，支持 monorepo 大型仓库。
  • Deno：Rust + V8 实现，安全现代 JS/TS 运行时。参考：阮一峰 - Deno 运行时入门教程
  • Make：传统项目构建工具，读取 Makefile 执行编译构建。
  • Grunt：Node.js 任务自动化构建工具，插件生态庞大。
  • Gulp：基于流的构建工具，减少磁盘 IO，提升构建速度。
  • Webpack：静态模块打包器，递归构建依赖图输出 bundle。
  • Vite：基于 ESM 的现代前端构建工具，开发启动快、配置简洁。
  • Rollup：ES Module 为核心打包工具，适合库项目。
  • Parcel：零配置 Web 打包工具。
  • esbuild：极快的 JS/TS 打包与压缩工具，常用于 Vite、Webpack 等工具的底层加速。
  • Babel：JS 编译器，把高版本 ES+ 语法向下转译兼容旧环境。
  • GitHub Actions：GitHub 内置 CI/CD 平台，可自动化测试、构建与部署。
  • Nginx：HTTP 服务器，反向代理、TCP/UDP 代理。
  • Apache Tomcat：Servlet 容器，实现 JSP/Servlet 规范，兼具 HTTP 服务能力。

代码规范与工具

  • Stylelint：CSS 代码检查，捕获错误、强制编码风格。
  • ESLint：JavaScript 代码检查，发现、修复代码问题。
  • Less：CSS 预处理器扩展语言。
  • Sass：CSS 预处理器。
  • Tailwind CSS：实用类优先的 CSS 框架，适合快速构建界面。
  • PostCSS：JS 驱动 CSS 转换工具，插件体系处理 CSS。
  • Prettier：代码格式化工具，抹平源码风格差异。
  • EditorConfig：多编辑器之间统一编码格式（缩进、换行、编码）。
  • jsconfig.json：VS Code 标识 JS 项目根目录，配置 JS 语言服务。
  • Code Guide by @AlloyTeam：GitHub 总结 HTML、CSS 编码习惯。
  • codeguide.bootcss.com：HTML/CSS 编码规范中文版。

源码管理

  • Git：分布式版本控制系统，高效处理大小项目。
  • SVN (Subversion)：Apache 开源集中式版本控制系统。
  • GitLab：基于 Git 的开发平台，wiki、issue 跟踪、CI/CD 能力。
  • GitHub：全球最大代码托管平台，Git 为底层，2018 被微软收购。
  • Gitee（码云）：OSCHINA 推出国内 Git/SVN 托管平台。
  • GitBook：文档编写、发布平台。

调试、自动化测试工具

  • Chrome DevTools：Chrome 浏览器内置网页调试工具。
  • vConsole：腾讯移动端 H5 调试面板。
  • Eruda：移动端浏览器迷你调试控制台，查看日志、网络、Storage。
  • Firefox DevTools：Firefox 浏览器内置网页调试工具。
  • IETester：Windows 平台，多版本 IE 渲染引擎测试工具，兼容 IE5.5－IE11（项目已停止维护）。
  • 微信开发者工具：小程序、公众号网页调试集成工具。
  • Fiddler：Windows 抓包代理工具，捕获 HTTP/HTTPS 请求，断点、修改报文。
  • Charles：跨平台 HTTP/HTTPS 抓包代理。

  • DebugBar：IE 浏览器调试工具栏。

  • Mock.js：模拟随机数据，拦截 AJAX 请求。

  • Mocha：JS 测试框架，可运行 Node 与浏览器，支持异步测试。
  • Jest：JS 测试框架，开箱即用，专注简洁。
  • Vitest：基于 Vite 的单元测试框架，API 与 Jest 兼容，启动速度快。
  • Cypress.io：E2E 端到端测试框架，优秀开发者体验。
  • Playwright：微软出品的 E2E 测试框架，支持 Chromium、Firefox、WebKit，跨浏览器能力强。
  • Nightwatch.js：Node.js 实现 WebDriver API 端到端测试方案。
  • Chai：BDD/TDD 断言库，搭配各类测试框架。
  • Expect.js：轻量 BDD 断言工具。
  • Karma：多真实浏览器执行 JS 测试运行器。
  • QUnit：JavaScript 单元测试框架。
  • BrowserStack：云端多设备浏览器兼容性测试服务。
  • PhantomJS：无界面 WebKit 浏览器引擎（项目已停止维护）。
  • Puppeteer：Node 库，控制 Chrome/Chromium，无头浏览器自动化。

性能和安全

其他

  • JSDoc：JavaScript API 文档生成工具。
  • Dox：Node 文档解析工具，输出 JSON 中间文档。
  • documentation.js：可输出 HTML/Markdown/JSON 的 JS 文档生成系统。
  • MySQL：流行关系型数据库。
  • MongoDB：分布式文档数据库，介于关系与非关系之间。
  • Redis：高性能内存键值 NoSQL 数据库。
  • Sketch：矢量 UI 设计工具。
  • XMind：思维导图软件。
  • Axure：产品原型、线框图工具。

技术网站

应用网站

  • responsinator.com：在线测试响应式页面多设备效果。
  • tinypng：PNG、JPEG、WebP 智能图片压缩。
  • caniuse：查询 Web 特性浏览器兼容支持表。
  • animate.style：开箱即用跨浏览器 CSS 动画库。
  • ocr2edit：OCR 扫描识别提取文本。
  • pearocr：免费图片 OCR 识别导出复制文本。

优秀个人网站

资源集合网页

书籍课程

© lizhao all right reserved，powered by Gitbook文件修订时间： 2026-08-21 00:02:29

results matching ""

    No results matching ""