0006.前端语言串讲｜青训营笔记

[TOC]

HTML（超文本标记语言）： HTML 是 Web 页面的基础结构。它用于描述网页的内容和结构。HTML 使用一系列标记（称为标签）来定义页面元素，如标题、段落、列表、图片和链接等。浏览器解析 HTML 代码，并根据标签的语义来显示页面内容。HTML 为网页提供了基本的骨架，使浏览器能够呈现文本、图像和其他媒体。
CSS（级联样式表）： CSS 用于描述 HTML 元素的外观和布局。CSS 允许我们定义如何显示 HTML 元素，例如字体、颜色、大小、间距等。通过使用 CSS，我们可以将样式与 HTML 结构分离，使得网站的设计和维护更加简便。CSS 还允许我们根据不同的设备和屏幕尺寸应用不同的样式(媒体查询)，以实现响应式设计。
JavaScript： JavaScript 是一种脚本语言，用于在浏览器中增加交互性和动态效果。它允许我们编写脚本来处理用户操作，例如点击按钮、输入表单、拖动元素等。通过使用 JavaScript，我们也可以操作 HTML 和 CSS，动态更改页面内容和样式，从而提供丰富的用户体验。JavaScript 也可以与服务器进行通信，以便在不刷新整个页面的情况下获取或提交数据（例如，通过 AJAX）。

1.你不知道的HTML

HTML并非图灵完备，它只是一门标记语言。

2.HTML5存储

	Cookies	Local Storage	Session Storage
Capacity	4 kb	10 mb	5 mb
Browsers	HTML 4 / HTML 5	HTML 5	HTML 5
Accessible from	Any window	Any window	Same tab
Expires	Manually set	Never	On tab close
Storage Location	Browser and server	Browser only	Browser only
Sent with requests	Yes	No	No

3.HTML5 IndexedDB

IndexedDB 是 HTML5 中新增的一种客户端存储机制，用于在浏览器中存储大量的结构化数据。它是一种键值对存储方式，类似于关系型数据库，可以通过索引快速访问数据。

4.HTML5 PWA & AMP

PWA（Progressive Web Apps）：PWA 是一种 Web 应用程序的开发方式，旨在提供类似于原生应用程序的用户体验。它使用 Web 技术开发，可以在任何设备上运行，包括桌面、移动设备和平板电脑。PWA 具有以下特点：

可靠性：PWA 可以离线使用，并且具有快速的加载速度。

响应式设计：PWA 能够自适应不同的设备和屏幕尺寸。

安全性：PWA 使用 HTTPS 进行通信，确保用户的数据和隐私得到保护。

独立性：PWA 可以添加到设备的主屏幕上，就像原生应用程序一样。

AMP（Accelerated Mobile Pages）：AMP 是一种 Web 页面的开发方式，旨在提供快速的加载速度和优化的移动体验。它使用精简的 HTML 和 CSS，以及 AMP JavaScript 库来实现。AMP 具有以下特点：

快速加载：AMP 页面能够快速加载，提供更好的用户体验。

移动友好：AMP 页面被设计为移动优先，适应各种屏幕尺寸。

安全性：AMP 页面使用 AMP CDN 来缓存页面，并使用 HTTPS 进行通信。

限制性：AMP 页面不能包含一些复杂的功能和 JavaScript 库，以确保页面的速度和可靠性。

5.HTML5 Audio

6.HTML5 Video

7.HTML5 二进制

实现了一个函数 loadAsText()，用于从本地文件读取数据，并将其转换为不同的格式输出

function loadAsText(file) {
  // 创建一个 FileReader 对象
  const reader = new FileReader();

  // 设置加载完成事件处理程序
  reader.onload = function(loadedEvent) {
    // 输出读取到的文件内容
    console.log(loadedEvent.target.result);
  }

  // 以文本字符串格式读取文件内容
  reader.readAsText(file);

  // 以二进制数组格式读取文件内容
  reader.readAsArrayBuffer(file);

  // 以DataURL格式字符串读取文件内容
  reader.readAsDataURL(file);
}

8.HTML5 Web Worker&HTML5 Web Socket

Web Socket 是一种在 Web 应用程序中实现实时通信的协议。它提供了一种双向通信机制，允许客户端和服务器之间进行实时的数据传输。与传统的 HTTP 请求/响应模式不同，Web Socket 采用了一种持久化的连接，可以在客户端和服务器之间保持通信通道，从而实现实时通信的功能。

Web Socket 协议基于 TCP 协议实现，使用了类似 HTTP 协议的握手过程来建立连接。客户端和服务器之间的通信采用帧（Frame）的形式进行，每个帧包含一个标识、一些附加信息和一段数据。客户端和服务器可以通过发送不同类型的帧来实现不同的功能，比如文本消息、二进制数据、ping-pong 等。

Web Socket 协议可以与任何支持该协议的服务器进行通信，包括自己开发的服务器和第三方提供的服务。它通常被用于实现实时聊天室、实时游戏、实时协作等应用场景。由于其实时性和高效性，越来越多的 Web 应用程序开始采用 Web Socket 技术来实现实时通信的功能

9.HTML5 Shadow DOM

Shadow DOM 是 Web Components 技术中的一部分，用于实现 Web 页面上的组件化开发。它允许开发者将 HTML、CSS 和 JavaScript 封装到一个独立的、可重用的组件中，以便在不同的页面和应用程序中进行复用。

Shadow DOM 通过创建一个“影子树”来实现组件的封装和隔离。在一个 Shadow DOM 中，组件的 HTML 结构、CSS 样式和 JavaScript 行为都被包裹在一个独立的命名空间中，与外部页面的 HTML、CSS 和 JavaScript 不会互相干扰。这种隔离性使得组件可以在不同的页面和应用程序中进行复用，而不用担心样式和行为的冲突。

使用 Shadow DOM 可以创建一些高度可定制化的组件，比如自定义的表单控件、交互式组件等。Shadow DOM 还提供了一些 API，可以让开发者更加方便地控制组件的行为和样式。比如，可以使用 JavaScript 修改组件内部的 DOM 结构、监听组件内部的事件、控制组件内部的样式等。

10.WebGL & WebGPU

WebGL 是一种在浏览器中呈现 3D 和 2D 图形的 JavaScript API，它是基于 OpenGL ES 2.0 的标准，支持硬件加速，并可与 HTML、CSS 和 JavaScript 无缝集成。使用 WebGL，开发者可以在浏览器中创建高性能的 3D 游戏、可视化工具和数据展示应用等。

WebGPU 是一个新的 Web 标准，旨在为 Web 平台提供低级别、跨平台的图形和计算 API，支持使用现代硬件的强大功能。WebGPU 由 Khronos Group 开发，它是 Metal、Vulkan 和 DirectX 12 的 Web 版本，支持多线程和多 GPU，并可以在 WebAssembly 上运行。WebGPU 的目标是为 Web 开发者提供更高效、更灵活的图形和计算功能，从而打造更加丰富和复杂的 Web 应用。

11.Web的风靡

(1)对用户友好

无需安装
无需强大硬件
升级非常方便
容错率强
传播方便

(2)对开发者友好

心智模型成熟
丰富的API能力
框架、工具标准化
开发、调试简单
具备跨平台能力

(3)领域成熟度

whatwg/w3c/ecma
浏览器厂商整合
各类Web应用风靡
商用平面设计标准化
全面组件化

(4)未来的方向

效率工具(Rust)
JS 2 Anything
服务端容器化
低(无)代码站点
大前端的统一
三维可视化

12.MVC & MVVM & MVP

MVC、MVVM 和 MVP 是三种常见的前端架构设计模式。

MVC 是 Model-View-Controller（模型-视图-控制器）的缩写。它是一种分层设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和控制器（Controller），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，控制器负责协调模型和视图之间的通信。

MVVM 是 Model-View-ViewModel（模型-视图-视图模型）的缩写。它是一种基于数据绑定的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和视图模型（ViewModel），实现了数据的双向绑定。模型表示应用程序的数据和业务逻辑，视图表示用户界面，视图模型负责将模型数据绑定到视图上，并处理用户输入的数据。

MVP 是 Model-View-Presenter（模型-视图-表示器）的缩写。它是一种基于事件驱动的设计模式，通过将应用程序分为三个组件：模型（Model）、视图（View）和表示器（Presenter），实现了应用程序逻辑和界面之间的分离。模型表示应用程序的数据和业务逻辑，视图表示用户界面，表示器负责协调模型和视图之间的通信，并响应用户的事件。

前端语言串讲 ｜ 青训营笔记

0006.前端语言串讲 ｜ 青训营笔记