前端学习——从入门到放弃
最近跟着官方文档和 ChatGPT 糊了一个前端项目之后，基本理清了前端用的一些知识，开一篇博客进行梳理，随着学习深入会不断更新这篇入坑贴。
我的新书《LangChain编程从入门到实践》 已经开售！推荐正在学习AI应用开发的朋友购买阅读！
基础
HTML（HTML5标准）
常见控件
表单控件
<input type="text">文本框<input type="password">密码框<input type="email">邮箱框<input type="number">数字框<input type="tel">电话号码框<input type="url">网址框<input type="search">搜索框<input type="date">日期选择器<input type="time">时间选择器<input type="week">周选择器<input type="month">月份选择器<input type="datetime-local">本地日期时间选择器<input type="color">颜色选择器<input type="range">滑块<input type="radio">单选框<input type="checkbox">复选框<select>下拉框<option>下拉框选项<textarea>多行文本框<button>按钮<label>表单标签<fieldset>表单分组<legend>表单分组标题<datalist>列表框<output>表单输出
多媒体控件
<audio>音频播放器<video>视频播放器<source>媒体资源<picture>响应式图片<canvas>画布
语义化标签
<header>页面头部<nav>导航<main>主要内容<section>区块<article>文章<aside>侧边栏<footer>页面底部
其他控件
<a>超链接<img>图片<div>容器<span>行内容器<ul>无序列表<ol>有序列表<li>列表项<table>表格<tr>表格行<td>表格列<th>表格标题列<form>表单<iframe>内嵌网页<progress>进度条<meter>测量条<details>折叠面板<summary>折叠面板标题<blockquote>引用块<cite>引用来源<abbr>缩写<address>地址<time>时间<mark>高亮<hr>水平线<br>换行符<small>小字体<strong>粗体<em>强调<sub>下标<sup>上标<code>代码
多媒体场景 API
MediaStream API
getUserMedia()获取音视频流MediaStream音视频流对象MediaStreamTrack音视频流轨道对象RTCPeerConnectionWebRTC 连接对象
Web Audio API
AudioContext音频上下文对象OscillatorNode振荡器节点GainNode增益节点AnalyserNode音频分析节点AudioBuffer音频缓冲区对象
Media Source Extensions API
MediaSource媒体源对象SourceBuffer媒体源缓冲区对象appendBuffer()向缓冲区添加数据
Fullscreen API
requestFullscreen()进入全屏模式exitFullscreen()退出全屏模式fullscreenElement当前全屏元素
Picture-in-Picture API
pictureInPictureEnabled是否支持画中画requestPictureInPicture()进入画中画模式exitPictureInPicture()退出画中画模式
图形绘制Canvas 和 SVG
Canvas
Canvas 是基于像素的绘图技术，它可以让开发者使用 JavaScript 在画布上绘制二维和三维图形。Canvas 的优势在于可以精确地控制每个像素的颜色、位置和透明度等属性，因此适用于创建复杂的动态图像和动画效果，例如游戏、数据可视化等。
SVG
SVG 是一种基于 XML 的矢量图形格式，它可以让开发者创建可缩放的图像和动画效果。SVG 的优势在于可以轻松地控制每个图形对象的属性和样式，可以在不失真的情况下对图像进行缩放和旋转等变换操作，因此适用于创建图标、图表、地图等需要可缩放性的静态图像和动画效果。SVG 的绘图过程是基于对象的，因此开发者可以使用标记语言来描述图形对象，而不需要手动编写 JavaScript 代码。这使得开发者可以更轻松地创建和编辑图形，并且可以使用各种图形编辑软件来创建和编辑 SVG 图像。
Web 存储机制
- LocalStorage
- SessionStorage
- IndexedDB
- Web SQL
- Cookies
浏览器实时通信
以下三种 API 都可以实现实时通信，但应用场景和实现方式略有不同。Web Sockets 适用于双向实时通信，例如聊天、游戏等应用，Server-Sent Events 适用于单向实时通信，例如新闻推送、股票行情等应用，而 WebRTC 则适用于实时的音视频通话，例如视频会议、在线教育等应用。
Web Sockets
Web Sockets 是一种 HTML5 标准中的 API，它可以在浏览器和服务器之间建立持久的双向通信连接，从而实现实时通信。Web Sockets 使用 WebSocket 协议进行通信，可以在客户端和服务器之间实现实时的数据交换，例如聊天应用、在线游戏、股票行情等。Web Sockets 可以发送和接收文本和二进制数据，可以使用加密和认证机制来保护数据的安全性。
Server-Sent Events
Server-Sent Events 是一种 HTML5 标准中的 API，它可以在浏览器和服务器之间建立单向通信连接，从而实现服务器向客户端推送实时数据。Server-Sent Events 使用纯文本格式进行通信，可以实现单向的实时通信，例如新闻推送、股票行情等。Server-Sent Events 可以使用 EventSource API 接收服务器发送的数据，从而实现实时数据的展示和处理。
WebRTC
WebRTC 是一种 HTML5 标准中的 API，它可以让浏览器之间直接进行音视频通信，从而实现实时的语音和视频通话。WebRTC 使用 P2P（点对点）技术进行通信，可以实现高清晰度的音视频通话，并支持屏幕共享、文件传输等功能。WebRTC 可以在不需要插件或第三方软件的情况下，在浏览器中直接进行音视频通信，从而提高用户的使用体验。
多线程 Web Workers
Web Workers 是 HTML5 标准中的 API，它可以让 JavaScript 运行在独立的后台线程中，不会阻塞主线程，从而可以提高页面的响应速度和性能。Web Workers 可以执行大量的计算密集型任务，例如图像处理、数据分析等。Web Workers 可以通过 postMessage() 方法向主线程发送消息，从而实现线程间的通信。
提高页面性能：Web Workers 可以让 JavaScript 运行在独立的后台线程中，不会阻塞主线程，从而可以提高页面的响应速度和性能。
执行计算密集型任务：Web Workers 可以执行大量的计算密集型任务，例如图像处理、数据分析等，可以提高 Web 应用程序的性能和效率。
可以实现线程间通信：Web Workers 可以通过 postMessage() 方法向主线程发送消息，从而实现线程间的通信，可以让多个线程之间共享数据和协同工作，提高程序的灵活性和可扩展性。
兼容性良好：Web Workers 是 HTML5 标准中的 API，得到了各大浏览器的支持，兼容性良好。
应用场景广泛：Web Workers 适用于需要处理大量计算密集型任务的 Web 应用程序，例如图像处理、数据分析、模拟计算等，也适用于需要提供实时通知和更新的应用程序，例如聊天、游戏等。
CSS（CSS3标准）
盒模型（Box Model）
标准盒模型（Standard Box Model）和怪异盒模型（Quirks Box Model）
常用解决方案：在CSS样式中通过
box-sizing属性设置为border-box，以将 padding 和 border 包含在盒子内部。如：box-sizing: border-box;box-sizing属性（Box Sizing Property）常用解决方案：设置
box-sizing属性为border-box，以保证元素的宽度和高度包含了元素的内边距和边框。如：box-sizing: border-box;
布局（Layout）
流式布局（Fluid Layout）
常用解决方案：将元素的大小设置为相对单位（如百分比、vw/vh），以适应不同的屏幕大小。如：
width: 100%;max-width: 1200px;弹性布局（Flexible Box Layout or Flexbox）
常用解决方案：使用
display: flex;将容器设置为弹性布局，用flex属性来控制子元素的大小和位置。如：display: flex; flex-direction: row; align-items: center; justify-content: space-between;网格布局（Grid Layout）
常用解决方案：使用
display: grid;将容器设置为网格布局，用grid-template-columns和grid-template-rows来定义网格的列和行。如：display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto;浮动（Float）和定位（Positioning）
常用解决方案：使用浮动将元素放置在文档流中的特定位置，使用定位将元素放置在相对于视口或父元素的特定位置。如：
float: left; position: absolute; top: 0; left: 0;
样式优先级（CSS Specificity）
继承（Inheritance）
常用解决方案：使用继承将样式属性从父元素传递到子元素，以实现统一的样式效果。如：
color: inherit;特殊性（Specificity）
常用解决方案：使用特殊性来确定样式的优先级，以避免样式冲突。如：
div#content p.intro { color: red; }源代码顺序（Source Order）
常用解决方案：根据样式的优先级和需要覆盖的目标元素，合理安排样式的源代码顺序。如：将相同特殊性的样式放在一起，便于管理和维护。
响应式设计（Responsive Design）
媒体查询（Media Queries）
常用解决方案：通过媒体查询设置不同的样式，以适应不同的设备和屏幕尺寸。如：
@media screen and (max-width: 600px) { /* Styles for small screens */ }弹性单位（如 em、rem 和 vw/vh）（Flexible Units）
常用解决方案：使用弹性单位（如 em、rem 和 vw/vh）来实现响应式布局，以适应不同的屏幕尺寸。如：
font-size: 1rem; width: 50%; height: 50vh;
动画和过渡（Animations and Transitions）
transition属性（Transition Property）常用解决方案：使用
transition属性实现简单的过渡效果，如平滑地改变元素的样式属性，以提高用户体验。如：transition: all 0.3s ease-in-out;animation属性（Animation Property）常用解决方案：使用
animation属性实现更复杂的动画效果，如旋转、缩放、淡入淡出等。如：animation: spin 2s linear infinite;JavaScript 控制动画（JavaScript Animation）
常用解决方案：使用 JavaScript 控制动画，以实现更高级的动画效果，如交互式动画、复杂的路径动画等。如：使用
requestAnimationFrame()方法控制动画的帧数和时间，以避免卡顿和性能问题。
字体和文本样式（Fonts and Text Styling）
字体（Fonts）
常用解决方案：选择合适的字体族和字体大小，以实现清晰、易读的文本效果。如：
font-family: Arial, sans-serif; font-size: 16px;字号（Font Size）
常用解决方案：根据设计需求和用户体验，选择合适的字号，以实现清晰、易读的文本效果。如：
font-size: 1.2rem;字重（Font Weight）
常用解决方案：根据设计需求和文本内容，选择合适的字重，以实现清晰、易读的文本效果。如：
font-weight: bold;行高（Line Height）
常用解决方案：根据设计需求和文本内容，选择合适的行高，以实现清晰、易读的文本效果。如：
line-height: 1.5;字间距（Letter Spacing）
常用解决方案：根据设计需求调整字间距，以实现更好的排版效果。如：
letter-spacing: 0.1em;伪元素（如
:before和:after）（Pseudo Elements）常用解决方案：使用伪元素实现一些特殊效果，如添加装饰线、图标等。如：
.btn:before { content: "⭐️"; }
颜色和背景（Colors and Backgrounds）
颜色值（Color Values）
常用解决方案：选择合适的颜色值，以实现清晰、美观的设计效果。如：
color: #333; background-color: #f5f5f5;渐变（Gradients）
常用解决方案：使用 CSS 渐变实现复杂的背景效果，如线性渐变、径向渐变等。如：
background-image: linear-gradient(to bottom, #fff, #ccc);背景图像（Background Images）
常用解决方案：使用背景图像实现特殊的背景效果，如纹理、图案、图片等。如：
background-image: url('bg.jpg'); background-repeat: no-repeat;半透明色（Opacity）
常用解决方案：使用半透明色实现特殊的背景效果，如模糊、透明等。如：
background-color: rgba(255, 255, 255, 0.5);
边框和阴影（Borders and Shadows）
边框样式（Border Styles）
常用解决方案：选择合适的边框样式，以实现特殊的边框效果，如虚线、双线等。如：`border:
JavaScripts（ECMAScript 标准）
- ECMAScript: ECMAScript 是 JavaScript 的核心规范，它定义了 JavaScript 语言的基本语法、数据类型、控制结构、函数、对象等。ECMAScript 是 JavaScript 语言的基础，所有的 JavaScript 引擎都必须遵守 ECMAScript 规范，以确保语言的一致性和互操作性。
- DOM: DOM 是一种基于 XML 的文档对象模型，它定义了 HTML 和 XML 文档的结构和内容。通过使用 DOM，可以将文档解析成一个由节点和对象组成的树形结构，开发者可以通过操作这个结构来改变页面的内容和结构，例如添加、删除、移动或修改节点等。DOM 是 JavaScript 和 HTML 之间的桥梁，它使 JavaScript 能够与 HTML 文档交互，从而实现动态的网页效果。
- BOM：BOM 是浏览器对象模型，它提供了一组对象和方法，用于操作浏览器窗口、历史记录、地址栏、定时器等。BOM 是 JavaScript 和浏览器之间的桥梁，它使 JavaScript 能够与浏览器交互，从而实现一些浏览器相关的功能，例如弹出窗口、重定向页面、控制浏览器的前进和后退等。
TypeScripts
- 先补一本开源书籍占坑 《简洁的TypeScript之书》
工程化
包管理
npm，yarn，pnpm
模块化开发
Node.js系列三 - 彻底掌握前端模块化：擅长Vue教学的coderwhy
CommonJS规范、ES6 Module规范
自动化构建工具
Webpack、Gulp、Grunt: 自动化构建工具可以帮助我们自动执行一些重复性的任务，例如打包、压缩、编译等，可以提高开发效率和代码质量。
CSS 预处理器
CSS 预处理器可以扩展 CSS 的功能，并提供更好的代码组织和维护。例如使用 Sass、Less 等预处理器，可以使用变量、嵌套、混合等功能，提高 CSS 的可读性和可维护性。
代码质量
ESLint: 静态代码检查工具，它可以检测代码中的语法错误、潜在的问题和不规范的代码风格等。
Prettier: Prettier 是一个代码格式化工具，它可以自动调整代码的格式，包括缩进、换行、空格等，以便于让代码具有一致的风格和易于阅读。
测试
单元测试：Jest
集成测试：Vitest
其他（跨语言通用）
版本控制: Git；
自动化部署：Travis CI、GitHub Actions；
k m n k h ni
文档:Swagger
进阶
V8 引擎
Node
- 知识普及 如何正确的学习Node.js，虽然内容有点老，但是基本概念没有变，讲的挺好。
- 补一本开源手册 Node.js 最佳实践
CSR，SSR等渲染方式
- React 渲染的未来 讲各种渲染方式的原理，前端充电宝这个号的内容质量都蛮不错的，持续关注。在深入研究渲染模式之前，一些重要术语：
- Time To First Byte (TTFB) ：发出页面请求到接收到应答数据第一个字节所花费的时间；
- First Paint (FP) ：第一个像素对用户可见的时间。
- First Contentful Paint (FCP)： 第一条内容可见所需的时间。
- Largest Contentful Paint (LCP) ：加载页面主要内容所需的时间。
- Time To Interactive (TTI)： 页面变为交互并可靠响应用户事件的时间。
前端学习——从入门到放弃
