01 前端知识概览

前端知识体系

基础知识

HTML，HTML（超文本标记语言——HyperText Markup Language）是一种相当简单的、由不同元素组成的标记语言，它可以被应用于文本片段，使文本在文档中具有不同的含义，将文档结构化为逻辑块，并且可以将图片、影像等内容嵌入到页面中。

HTML5，HTML 的最新稳定版本，HTML5 将 HTML 从用于构造一个文档的一个简单标记，到一个完整的应用程序开发平台。除其他功能外，HTML5 还包括新元素和用于增强存储、多媒体和硬件访问的 JavaScript APIs 。

CSS，是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。

CSS3，是最新的 CSS 标准，是 CSS 的升级版本，它在 CSS2.1 的基础上新增加了很多强大的功能。

ECMAScript，ECMA 是 European Computer Manufacturer’s Association（欧洲计算机制造商协会）的缩写，该协会为信息技术和消费电子产品制定标准。 ECMAScript、Dart-lang 和 c# 等语言都是由 ECMA 标准化的。 ECMAScript 是一种通用的编程语言，被 Javascript 和其他一些语言实现。它是基于浏览器的 Javascript 语言和 Node.js 语言的基础。把 ECMAScript 看作是没有宿主环境的 Javascript。 Javascript 有两个主要的环境：浏览器和 Node.js。这些环境向该语言添加了一些 Api。如果剥离这些环境所有外部 Api（比如，浏览器上的 window 对象、Node.js 中的 fs 模块），就会得到 ECMAScript。

JavaScript，一种轻量级的、解释的或即时编译的编程语言，具有一流的函数。虽然它作为Web页面的脚本语言最为人所知，但许多非浏览器环境也使用它，如 Node.js、Apache CouchDB 和 Adobe Acrobat。

es6，即 ECMAScript 6.0，也称 ECMAScript 2015，是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

Node，一个开源、跨平台的 JavaScript 运行时环境。

Markdown，是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素。Markdown 由 John Gruber 于 2004 年创建，如今已成为世界上最受欢迎的标记语言之一。

TypeScript，是带有类型语法的 JavaScript，是一种构建在 JavaScript 之上的强类型编程语言。

知识扩展

Canvas，Canvas API 提供了一个通过 JavaScript 和 HTML canvas 元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。Canvas API 主要聚焦于 2D 图形，而同样使用 canvas 元素的 WebGL API 则用于绘制硬件加速的 2D 和 3D 图形。

SVG：可缩放矢量图形（Scalable Vector Graphics，SVG），是 W3C XML 的分支语言之一，用于标记可缩放的矢量图形。SVG 是一个基于文本的开放网络标准，能够优雅而简洁地渲染不同大小的图形，并和 CSS、DOM、JavaScript 和 SMIL 等其他网络标准无缝衔接。本质上，SVG 相对于图像，就好比 HTML 相对于文本。

WebGL，Web 图形库，是一个 JavaScript API，可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点，该 API 可以在 HTML5 canvas 元素中使用。这种一致性使 API 可以利用用户设备提供的硬件图形加速。

WebRTC， Web Real-Time Communications，是一项实时通讯技术，它允许网络应用或者站点，在不借助中间媒介的情况下，建立浏览器之间点对点（Peer-to-Peer）的连接，实现视频流和（或）音频流或者其他任意数据的传输。WebRTC 包含的这些标准使用户在无需安装任何插件或者第三方的软件的情况下，创建点对点（Peer-to-Peer）的数据分享和电话会议成为可能。

Web Components，是一套不同的技术，允许创建可重用的定制元素并且在 Web 应用中使用。阮一峰 - Web Components 入门实例教程。

WebAssembly/wasm，是一个可移植、体积小、加载快并且兼容 Web 的全新格式，实际上是体积小且加载快的二进制格式，其目标就是充分发挥硬件能力以达到原生执行效率。

IDE/文本编辑器

VIM，是一个高度可配置的文本编辑器，可以非常高效地创建和更改任何类型的文本。在大多数 UNIX 系统和Apple OS X中，它以“vi”的形式包含。

Sublime Text ，是一款用于代码、标记和散文的复杂文本编辑器，支持基于 Python 的插件。

Visual Studio，适用于 Windows 上 .NET 和 C++ 开发人员的最佳综合 IDE。完整打包了一系列丰富的工具和功能，可提升和增强软件开发的每个阶段。

Visual Studio Code，在 Windows、macOS 和 Linux 上运行的独立源代码编辑器。 JavaScript 和 Web 开发人员的最佳选择，具有几乎可支持任何编程语言的扩展。

HBuilder，H 是 HTML 的首字母，Builder 是构造者，X 是 HBuilder 的下一代版本。也简称 HX，是轻如编辑器、强如 IDE 的合体版本。

WebStorm：一款针对 JavaScript 和相关技术的集成开发环境。与其他 JetBrains IDE 一样，使开发体验更加愉快，使日常工作自动化，并帮助轻松处理复杂任务。

Atom，一个使用 HTML、JavaScript、CSS 和 Node.js 集成构建的编辑器。

Eclipse，是一款跨平台开源集成开发环境（IDE）。最初主要用来 Java 语言开发，目前亦有人通过插件使其作为C++、Python、PHP 等其他语言的开发工具。

Notepad++，是一个免费的、开源的文本和源代码编辑器。它是用 c++ 编程语言编写的，它以减少不必要的功能和简化过程而自豪，从而创建了一个轻便高效的文本记事本程序。

EditPlus，一款内置 FTP、FTPS 和 sftp 功能的 Windows 文本编辑器。虽然它可以作为记事本的很好的替代品，但它也为 Web 页面作者和程序员提供了许多强大的功能。

NetBeans，是由 Sun 微系统（Sun Microsystems）创建的开源软件开发工具，是一个开发框架，可扩展的开发平台，可以用于 Java，C 语言／C++，PHP，HTML5 等程序的开发，本身是一个开发平台，可以通过扩展插件来扩展功能。

Typora，一款 Markdown 编辑器和阅读器。

浏览器

Chrome/Chromium (Blink)，由 Google 打造的浏览器。

Safari (WebKit)，由苹果公司所开发，并内置于 macOS、iOS 与 iPadOS 的网页浏览器。

Firefox，一款由 Mozilla 基金会及其子公司 Mozilla 公司开发的支持 Windows、macOS、Linux、Android、Firefox OS 的开源网页浏览器。

Opera (Blink)，由 Opera 软件为个人电脑推出的网页浏览器，用于 Microsoft Windows、macOS 和 Linux 操作系统。

IE6/7/8/9/10/11 (Trident) ，IE 11 是 Internet Explorer 的最后一个主要版本。自 2022 年 6 月 15 日起，某些版本的 Windows 10 不再支持 Internet Explorer 11 桌面应用程序。

Edge (EdgeHTML)，Microsoft Edge，Windows 系统的理想浏览器，可在支持的 Windows、Linux、macOS、iOS 和 Android 版本上使用。

前端库/框架

jquery，是一个快速、小型且功能丰富的 JavaScript库。它通过一个易于使用、可跨多种浏览器工作的 API，大大简化了 HTML 文档遍历和操作、事件处理、动画和 Ajax 等工作。

knockoutjs，是一个 MVVM 模式的 JavaScript 库，它可以帮助您使用干净的底层数据模型创建丰富的、响应性强的显示和编辑器用户界面。任何时候你有动态更新的 UI 部分(例如，根据用户的操作或当外部数据源更改时进行更改)，KO 都可以帮助你更简单和可维护地实现它。

emberjs，是一个用于构建现代 Web 应用程序的高效、久经考验的 JavaScript 框架。它包含构建可在任何设备上工作的富 UI 所需的所有内容。

AngularJs，是一个动态 Web 应用的结构框架。它允许您使用 HTML 作为模板语言，并允许您扩展 HTML 的语法，以清晰而简洁地表达应用程序的组件。 AngularJS 的数据绑定和依赖注入消除了大量你需要编写的代码。

Reactjs，是一个用于构建用户界面的 JavaScript 库。

Vue.js，是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Handlebars，是一种简单的模板语言。它使用一个模板和一个输入对象来生成 HTML 或其他文本格式。

Next.js，一个基于 React 的服务端渲染 Web 应用框架。

Nuxt.js，一个基于 Vue.js 的服务端渲染 Web 应用框架。

jekyll，是一个将纯文本内容转化为静态网站或博客的工具。

uni-app，是一个使用 Vue.js（opens new window）开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

构建、工程化工具

npm，是一个随同 NodeJS 一起安装的包管理工具，用来解决 NodeJS 代码部署问题。在安装 NodeJS 时会自动安装相应的 npm 版本，不需要单独安装。

Yarn，是一个软件包管理器，还可以作为项目管理工具。无论你是小型项目还是大型单体仓库（monorepos），无论是业余爱好者还是企业用户，Yarn 都能满足你的需求。

Deno，是一个简单、先进且安全的 JavaScript 和 TypeScript 运行时环境，其基于 V8 引擎并采用 Rust 编程语言构建。阮一身 - Deno 运行时入门教程：Node.js 的替代品。

Make，是一个项目构建工具，即方便地编译、链接多个源代码文件，自动决定哪些源文件需要重新编译，从而高效地构建项目。一般来说，最简单的就是直接在命令行下输入 make 命令，make 命令会找当前目录的 makefile 来执行，一切都是自动的。但也有时也许只想让 make 重编译某些文件，而不是整个工程，而又有的时候你有几套编译规则，你想在不同的时候使用不同的编译规则，等等。

GRUNT，是基于 Node.js 的项目构建工具。它可以自动运行你所设定的任务。Grunt 拥有数量庞大的插件，几乎任何你所要做的事情都可以用 Grunt 实现。

gulp，一个基于流（stream）的构建工具，可以自动执行指定的任务，简洁且高效。它在构建过程中并不把文件立即写入磁盘，从而提高了构建速度。

webpack，是一个现代 JavaScript 应用程序的静态模块打包器。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

Rollup，是一个 JavaScript 模块打包工具，可以将多个小的代码片段编译为完整的库和应用。与传统的 CommonJS 和 AMD 这一类非标准化的解决方案不同，Rollup 使用的是 ES6 版本 Javascript 中的模块标准。新的 ES 模块可以让你自由、无缝地按需使用你最喜爱的库中那些有用的单个函数。

parcel，是一个极速零配置 Web 应用打包工具。

Babel，是一个 JavaScript 编译器，是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

Nginx，一个 HTTP、反向代理、邮件代理的通用的 TCP/UDP 代理服务器。

Apache Tomcat，是由 Apache 软件基金会属下 Jakarta 项目开发的 Servlet 容器，按照 Sun Microsystems 提供的技术规范，实现了对 Servlet、JavaServer Page（JSP）的支持，并提供了作为 Web 服务器的一些特有功能。由于 Tomcat 本身也内含了 HTTP 服务器，因此也可以视作单独的 Web 服务器。

代码规范

Stylelint，帮助 CSS 避免错误和强制约定风格。

ESLint ，帮助发现和修复 JavaScript 代码中的问题。

Less，后兼容的 CSS 扩展语言。

Sass，一种 CSS 的预编译语言。

postCSS，是一个用 JavaScript 工具和插件转换 CSS 代码的工具。

Prettier，是一个代码格式化的工具，支持多种语言，与大多数编辑器集成。它删除所有源码风格，并确保所有输出的代码符合一致的样式。

Editorconfig，帮助跨不同编辑器和 IDE 从事同一项目的多个开发人员维护一致的编码风格。 EditorConfig 项目包括一个用于定义编码样式的文件格式和一组文本编辑器插件，这些插件使编辑器能够读取文件格式并遵循所定义的样式。有些编辑器默认支持 editorConfig，如 webstorm；而有些编辑器则需要安装 editorConfig 插件，如ATOM、Sublime、VS Code等。

jsconfig.json，在 VSCode 编辑器下，表明该目录是 JavaScript 项目的根目录。jsconfig.json 文件指定了根文件以及 JavaScript 语言服务提供的功能选项。

Code Guide by @AlloyTeam，通过分析github代码库总结出来的工程师代码书写习惯。

codeguide.bootcss.com，编写一致、灵活和可持续的 HTML 和 CSS 代码的规范。

源码管理

Git，一款免费和开源的分布式版本控制系统，旨在处理从小到非常大的项目，速度和效率。

SVN，Apache Subversion，是一个开放源代码的版本控制系统，Subversion 在 2000 年由 CollabNet Inc 开发，现在发展成为 Apache 软件基金会的一个项目，同样是一个丰富的开发者和用户社区的一部分。

Gitlab，由 GitLab 公司开发的、基于 Git 的集成软件开发平台。另外，GitLab 且具有 wiki 以及在线编辑、issue跟踪功能、CI/CD 等功能。

Github，是世界上最大的代码托管平台，超 7 千万开发者正在使用。它使用 Git 作为版本控制软件。在2018年，GitHub被微软公司收购。

Gitee，是 OSCHINA.NET 推出的代码托管平台，支持 Git 和 SVN，提供免费的私有仓库托管。目前已有超过 800 万的开发者选择 Gitee。

gitbook，一个从开发到发布的文档管理平台，使规划、集中和共享知识变得容易。

调试、自动化测试工具

Chrome DevTools，Chrome 浏览器内置的 Web 开发和调试工具。

vConsole，针对手机网页的前端开发者调试面板。

Eruda ：一个用于移动浏览器的控制台，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、捕获 XHR 请求、显示本地存储和 Cookie 信息等等。

Firefox DevTools，Firefox 浏览器内置的 Web 开发工具，用来检查、编辑和调试 HTML、CSS 和 JavaScript。

IETester，一款免费的 WebBrowser，允许在 Windows 8、Windows 7、Vista、XP 上拥有 IE 5.5~11 的渲染和 JavaScript 引擎，可以于调试不同版本的 IE 浏览器的兼容性。

微信开发者工具，为了帮助开发者简单和高效地开发和调试微信小程序，在原有的公众号网页调试工具的基础上，推出了全新的微信开发者工具，集成了公众号网页调试和小程序调试两种开发模式。

Fiddler，是最强大最好用的 Web 调试工具之一，它能记录所有客户端和服务器的 http 和 https 请求。允许监视、设置断点、甚至修改输入输出数据。

Charles ，是一个 HTTP 代理 / HTTP 监视器 / 反向代理，它使开发人员能够查看他们的机器和 Internet 之间的所有 HTTP 和 SSL / HTTPS 通信。这包括请求、响应和 HTTP 报头（其中包含 cookie 和缓存信息）。

Debugbar，是一个 IE 的 Web 开发栏，分为工具栏和侧边栏。它的目的是帮助您调试您的网站更快或快速分析任何网页。

mockjs，用于生成随机数据，拦截 Ajax 请求。

mocha，是一个功能丰富的 javascript 测试框架，运行在 node.js 和浏览器中，使异步测试变得简单有趣。Mocha测试连续运行，允许灵活和准确的报告，同时将未捕获的异常映射到正确的测试用例。

Jest，是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。

Cypress.io，是一个测试框架，旨在通过使开发者能够可靠地测试他们的应用，同时提供一流的开发者体验，来提高开发者的生产率。

Nightwatch.js，是一个集成的、易于使用的 Web 应用程序和网站的端到端测试解决方案，用 Node.js 编写。它使用 W3C WebDriver API 来驱动浏览器并对 DOM 元素执行命令和断言。

Chai，是一个用于 Node 和浏览器的 BDD / TDD 断言库，可以与任何 JavaScript 测试框架愉快地配对。

Expect，是一个基于 should.js 的极简 BDD 断言工具包。

Karma，一个简单的工具，允许在多个真正的浏览器中执行 JavaScript 代码。

unitjs，是一个 Javascript 的单元测试框架。它是 JavaScript 的断言库，运行在 Node.js 和浏览器上。它适用于任何测试运行器和单元测试框架，比如 Mocha、Jasmine、Karma、protractor（Angular 应用的端到端测试框架）、QUnit……。

QUnit，功能强大、易于使用的 JavaScript 测试框架。

browserstack，是一款提供网站浏览器兼容性测试的在线云端测试工具，从而开发测试人员不必再准备很多虚拟机或者手机模拟器。通过在 3000 多个真实设备和浏览器上进行测试，为用户提供无缝体验。

phantomjs，是一个无界面的，可脚本编程的 WebKit 浏览器引擎。它原生支持多种 Web 标准：DOM 操作、CSS选择器、JSON、Canvas 以及SVG。

Puppeteer，是一个 Node.js 库，它提供了一个高级 API 来控制 DevTools 协议上的 Chrome/Chromium。Puppeteer 在默认情况下运行在无头模式下，但可以配置为运行在完整的(非无头)铬/铬。

性能和安全

PageSpeed Insights (PSI) ，报告网页在移动设备和桌面设备上的性能，并提供关于如何改进网页的建议。它会提供网页的实验和实地数据。实验数据可用于调试性能问题，因为它是在受控环境中收集的。但是，它可能无法捕获实际瓶颈。实测数据有助于捕获真实的真实用户体验，但指标集会比较有限。

lighthouse，是一个开源的、自动化的工具，用于分析网页应用和网页、收集性能指标和开发者最佳实践的建议。

sentry，是一个应用监控和错误跟踪的监控平台。

XSS，跨站脚本攻击（Cross-site scripting，XSS）是一种安全漏洞，攻击者可以利用这种漏洞在网站上注入恶意的客户端代码。若受害者运行这些恶意代码，攻击者就可以突破网站的访问限制并冒充受害者。根据开放式 Web 应用安全项目（OWASP），XSS 在 2017 年被认为 7 种最常见的 Web 应用程序漏洞之一。

CSRF，跨站请求伪造（CSRF）是一种冒充受信任用户，向服务器发送非预期请求的攻击方式。

CFS，跨框架脚本攻击（Cross Frame Script）是利用浏览器允许框架跨站包含其它页面的漏洞，在主框架的代码中加入 scirpt，监视、盗取用户输入。

Clickjacking，点击劫持是一种视觉欺骗手段，在 Web 端就是一个透明不可见的页面，让用户在不知情的情况下，点击攻击者想要欺骗用户点击的位置。

Same-origin policy，是一个重要的安全策略，它用于限制一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

CSP，是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。无论是数据盗取、网站内容污染还是散发恶意软件，这些攻击都是主要的手段。

SEO，搜索引擎优化（Search Engine Optimization）是一种利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名的方式。

其他

JSDoc，一个 JavaScript 的 API 文档生成器。

Dox，是一个用 node 编写的 JavaScript 文档生成器。 Dox 不再为你的文档生成固执的结构或样式，它只是给你一个 JSON 表示，允许你使用标记和 jsdoc 样式的标签。

documentation.js，一个可扩的输出格式的文档系统，可输出 HTML + Markdown + JSON 。可用于获得 JSON、美化的、可定制的 HTML 或完全适合 API 的 Markdown 格式的原始文档。

mysql，是最流行的关系型数据库管理系统，在 WEB 应用方面 MySQL 是最好的 RDBMS（Relational Database Management System，关系数据库管理系统）应用软件之一。

mongodb，是一个基于分布式文件存储的数据库，是一个介于关系数据库和非关系数据库之间的产品，是非关系数据库当中功能最丰富，最像关系数据库的。

Redis，是现在最受欢迎的 NoSQL 数据库之一，是一个使用 ANSI C 编写的开源、包含多种数据结构、支持网络、基于内存、可选持久性的键值对存储数据库。

sketch，一款轻量、高效的矢量设计工具。

xmind，是一款非常实用的商业思维导图软件，应用 Eclipse RCP 软件架构，打造易用、高效的可视化思维软件，强调软件的可扩展、跨平台、稳定性和性能，致力于帮助用户提高生产率。

Axure，是唯一的用户体验工具，让用户体验专业人士有能力构建现实的、功能的原型。是美国 Axure Software Solution 公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或 Web 网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。

技术网站

W3C，万维网联盟官方网站。万维网联盟（The World Wide Web Consortium）是一个国际性的团体，它的成员组织、全职工作人员和公众共同努力开发 Web 标准。 W3C 由 Web 发明者兼主管 Tim Berners-Lee 和首席执行官 Jeffrey Jaffe 领导，其使命是引导 Web 发挥其全部潜力。

chinaw3c，万维网联盟官方网站（中文版）。

HTML5中国产业联盟，是工信部下属单位，是为了更好的推进 HTML5 的商用、更好的为 HTML5 开发者服务而由产业链厂商共同组成的一个联盟。

MDN，自 2005 年以来，记录 Web 技术，包括 CSS、HTML 和 JavaScript。

oschina，开源中国，成立于 2008 年 8 月，目前已建立了相当完善的开源软件分类数据库，收录全球知名开源项目近 5 万款，涉及几百个不同的分类。围绕这些开源项目，OSCHINA 为中国开发者提供了最新开源资讯、软件更新资讯、技术分享和交流的技术平台。2013 年，OSCHINA 建立了代码托管与 DevOps 平台“码云 Gitee”，为广大开发者提供团队协作、源码托管、代码质量分析、代码评审、测试、CI/CD 与代码演示等功能。

infoq，是一个实践驱动、以社区为中心的技术媒体平台，致力于促进软件开发及相关领域知识与创新的传播，提供架构，云计算，AI，前端，大数据等与软件开发相关的最新技术资讯、解读及技术会议。

StackOverflow，一个构建编码问题和答案权威集合的公共平台，一个基于社区的空间，寻找和贡献技术挑战的答案，是世界上最受欢迎的网站之一。

segmentfault，思否，是中国领先的开发者技术社区，是以技术问答、技术专栏、技术课程、技术资讯为核心的产品形态，为开发者提供纯粹、高质的技术交流平台。

稀土掘金，juejin，是面向全球中文开发者的技术内容分享与交流平台。

GitHub，面向开源及私有软件项目的托管平台。

w3school，全球最大的中文Web 技术教程。

ECMAScript5.1，是 ECMAScript5.1 规范中文版。

阮一峰 - JavaScript 标准参考教程（alpha）

阮一峰 - ECMAScript 6 入门教程，是一本开源的 JavaScript 语言教程，全面介绍 ECMAScript 6 新引入的语法特性。

javascript.info，以最新的 JavaScript 标准为基准。通过简单但足够详细的内容，为你讲解从基础到高阶的 JavaScript 相关知识。

w3chtml ，W3C HTML 中文网页技术标准教程，传播推广 W3C WEB 标准。

w3chtml - css3，CSS3/CSS2/CSS 教程、参考、帮助。