前端语言串讲

字节前端训练营笔记，文章可能存在不妥之处，欢迎各位大佬指导交流

01 前端语言的基本能力

前端三剑客：HTML、CSS、JavaScript

01-1 HTML

HTML（Hypertext Markup Language 超文本标记语言）用于构建网页的框架结构，包含控制布局和内容。它由一系列的标签组成，用于标记文本、图片、链接等内容，以及定义它们之间的关系和层次结构。

01-2 CSS

CSS（Casccading Style Sheet 层叠样式表）用于定义网页的外观和布局。它允许您为 HTML 元素设置颜色、字体、边框、背景等样式，以及控制它们的位置和排列方式。

CSS语法

css规则由两个主要的部分组成：选择器、以及一条或多条声明。

每条声明（declaration）由一个键值对组成，即由一个属性（property）和一个值（value）组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开，一个属性和一个值组成一个键值对。

CSS选择器

下面是一些常用的 CSS 选择器：元素选择器、class选择器、id选择器、后代选择器、子元素选择器、兄弟选择器、全选择器、伪类选择器、、

元素选择器

元素选择器：通过标签名来选择元素。

p {
  color: red;
}

class选择器

class选择器（类选择器）：通过类名来选择元素。

class 选择器在 HTML 中以 class 属性表示。在 CSS 中，类选择器以一个点.开头，后面跟着类名。

.center {
  text-align:center;
}

id选择器

id选择器：通过 id 来选择元素，即为标有特定 id 的 HTML 元素指定特定的样式。

HTML 元素以 id 属性来设置 id 选择器，CSS 中 id 选择器以#开头，后面跟着 id 名。

#bg {
  color: red;
}

由于篇幅有限，关于 CSS 选择器的内容在此不再赘述。

小结

本文简单介绍CSS语法以及用法，后续会更新CSS详细介绍，如有需要可自行前往MDN查看。

01-3 Javascript

JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。JavaScript 怎能缺席。

特点：

借鉴C语言的基本语法
借鉴java的数据类型和内存管理
借鉴SCHEME语言，将函数提升到一等公民身份
借鉴SELF语言，使用基于原型（ProtoType）的继承机制

JavaScript数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

JavaScript Object

可以说 "JavaScript 对象是变量的容器"。

但是，我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为对象属性。

var person = {
  firstname: "hakine",
  lastname: 'lee',
  age: 20,
  eyeColor: "balck"
}

JavaScript Function

JavaScript 函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname(argument1,argument2)
{
    // 执行代码
}

当调用该函数时，会执行函数内的代码。

可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。

01-4 Brower

浏览器主要包含两种引擎：渲染引擎和 JavaScript 引擎。

渲染引擎

渲染引擎主要负责加载页面，根据 HTML 生成 DOM 树的结构；接着获取 CSS 资源，并共同构建 CSSOM（CSS对象模型）树；结合 DOM 结构特性和 CSSOM 树样式特性一起构建渲染树，浏览器依次使用渲染树来布局和绘制网页。

浏览器中的页面渲染可总结为以下几步：

浏览器将获取的HTML文档解析成DOM树。
处理CSS标记，构成层叠样式表模型CSSOM (CSS Object Model)。
将DOM和CSSOM合并为渲染树 ( rendering tree )，代表一系列将被渲染的对象。
渲染树的每个元素包含的内容都是计算过的，它被称之为布局 layout 。浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制 painting

JavaScript引擎

JavaScript 本质也是一段文本，它需要通过解释器才能运行。一个优质的解释器，除了能处理复杂的语法，还要有高度优化的性能。

V8工作流程

V8 是 Google 开发的一种高性能 JavaScript 引擎，它被用于 Chrome 浏览器和 Node.js 等环境中。V8 的工作流程大致如下：

解析：V8 首先将 JavaScript 代码解析成抽象语法树（AST）。

编译：接下来，V8通过 Ignition 将 AST 编译成字节码。字节码可以在虚拟机中运行。

执行：V8 执行字节码，并根据需要进行优化。TurboFan 是 V8 引擎中用于优化代码执行的编译器之一。它负责将 JavaScript 字节码编译成高效的机器码，以提高代码的执行效率。

垃圾回收：V8 使用垃圾回收机制来自动管理内存。它会定期检查内存中的对象，回收那些不再被引用的对象所占用的内存。

简单总结：V8首先会将js源码解析成抽象语法树（AST），通过 ignition 遍历语法树生成相应的字节码（Bytecode）。这些字节码在执行过程中会被TurboFan编译成本地代码（机器码）。

额外补充：

当 V8 执行 JavaScript 字节码时，它会收集有关代码运行情况的信息，例如哪些函数被调用得最频繁，哪些循环被执行得最多等。然后，V8 会使用这些信息来确定哪些代码是热点代码，即那些需要优化的代码。
接下来，V8 会使用 TurboFan 编译器来优化这些热点代码。TurboFan 会将字节码编译成高效的机器码，并应用各种优化技术，例如内联函数调用、消除冗余计算等，以提高代码的执行效率。

02 前端语言的协作配合

CSS in HTML

在 HTML 中使用 CSS 有三种方法：内联样式(Inline CSS)、内部样式表(Internal CSS)和外部样式表(External CSS)。

1、内联样式：内联样式是将 CSS 样式直接添加到 HTML 元素的 style 属性中。例如，下面的代码将一个段落的文本颜色设置为红色：

<p style="color: red;">这是一段红色的文本。</p>

2、内部样式表：内部样式表是将 CSS 样式定义在 HTML 文档的 <style> 标签中。例如，下面的代码定义了一个内部样式表，将所有段落的文本颜色设置为蓝色：

<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色的文本。</p>
</body>

3、外部样式表：外部样式表是将 CSS 样式定义在一个单独的.css文件中，然后在 HTML 文档中使用<link>标签来引用它。例如，假设您有一个名为 styles.css 的外部样式表文件，其中定义了如下样式：

/*styles.css*/
p {
  color: green;
}

您可以在 HTML 文档中使用 <link> 标签来引用这个外部样式表，将所有段落的文本颜色设置为绿色：

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段绿色的文本。</p>
</body>

Javascript in HTML

在 HTML 中使用 JavaScript 有两种方法：内部脚本和外部脚本。

1、内部脚本：内部脚本是将 JavaScript 代码直接写在 HTML 文档的 <script></script> 标签中。例如，下面的代码定义了一个内部脚本，用于在页面加载时弹出一个对话框：

<body>
  <script>
    alert('页面已加载！');
  </script>
</body>

2、外部脚本：外部脚本是将 JavaScript 代码定义在一个单独的.js文件中，然后在 HTML 文档中使用 <script></script> 标签的src属性来引用它。例如，假设您有一个名为 script.js 的外部脚本文件，其中定义了如下代码：

// script.js
alert('页面已加载！');

您可以在 HTML 文档中使用 <script> 标签来引用这个外部脚本，在页面加载时弹出一个对话框：

<body>
  <script src="script.js"></script>
</body>

注意

默认情况下，script是会阻塞页面解析的，但是可以使用async和defer属性来控制 script 标签的加载和执行顺序的。

async属性表示异步执行，即不等待页面解析完毕，也不阻塞页面解析，但是执行顺序不一定按照加载顺序；而defer属性表示延迟执行，即等到页面解析完毕后再执行。

举例来说，如果你有两个script标签，一个使用defer属性，一个使用async属性，那么它们的写法和效果如下：

<!-- defer属性 -->
<script src="defer.js" defer></script>
<!-- async属性 -->
<script src="async.js" async></script>

效果：

defer.js会在页面解析完毕后按照加载顺序执行。
async.js会在加载完毕后立即执行，不一定按照加载顺序。

JavaScript事件机制：event loop、promise callback、事件捕获和事件冒泡

HTML in Javascript

在 JavaScript 代码中使用字符串来表示 HTML 内容，并使用 DOM API 来动态地将这些内容添加到网页中。

例：

<body>
  <p id="p1">Hello World!</p>
<script>
  document.getElementById("p1").innerHTML="新文本!";
</script>
</body>

CSS in Javascript

在 JavaScript 代码中使用 DOM API 来动态地修改 HTML 元素的样式。

例如，下面的代码使用 style 属性来修改一个段落的文本颜色和字体大小：

<body>
  <p id="text">这是一段文本。</p>

  <script>
    var text = document.querySelector('#text');
    text.style.color = 'red';
  </script>
</body>

03 你不知道的HTML(5)

html基础标签在此就不一一介绍了，有需要的同学可自行查看MDN

HTML5

HTML5 引入了一些新的语义元素，例如 <article>、<section>、<nav> 和 <header> 等，它们使您能够更清晰地描述网页的结构和内容。

此外，HTML5 还提供了一些新的表单控件，例如日期选择器、颜色选择器、搜索框等，它们使您能够更方便地收集用户输入。

HTML5 还支持音频和视频播放，您可以使用 <audio> 和 <video> 元素来在网页中嵌入音频和视频内容，而无需依赖第三方插件。

除此之外，HTML5 还提供了许多其他新功能和特性，例如拖放、离线存储、地理定位等。

HTML5 Web存储

通过本地存储（Local Storage），web 应用程序能够在用户浏览器中对数据进行本地的存储。

HTML 本地存储提供了两个在客户端存储数据的对象：

window.localStorage - 存储没有截止日期的数据
window.sessionStorage - 针对一个 session 来存储数据（当关闭浏览器标签页时数据会丢失

HTML5 PWA AMP

PWA 是一种移动网站体验，旨在看起来、感觉和工作方式与原生移动应用程序相同。它可以让用户在浏览器中访问网站，然后选择将其安装到设备上，就像原生应用程序一样。

而 AMP 则是一个开源项目，旨在通过使用精简的 HTML 和 CSS 语言（限制了 JavaScript 的使用）来构建几乎即时加载的网页。这些页面托管在 CDN 上，当用户访问时，它会提供页面的缓存版本。

HTML5 二进制

在HTML5中，可以使用XMLHttpRequest对象的responseType属性来更改从服务器预期的响应类型。可能的值为空字符串（默认），"arraybuffer"，"blob"，"document"，"json"和"text"。根据responseType，response属性将包含实体主体，作为ArrayBuffer，Blob，Document，JSON或字符串。如果请求未完成或未成功，则为null。

例如，以下代码读取图像作为二进制文件，并从原始字节创建8位无符号整数数组。请注意，这不会解码图像并读取像素。需要一个png解码库来实现这一点：

const req = new XMLHttpRequest();
req.open("GET", "/myfile.png", true);
req.responseType = "arraybuffer";
req.onload = (event) => {
  const arrayBuffer = req.response;
  if (arrayBuffer) {
    const byteArray = new Uint8Array(arrayBuffer);
    byteArray.forEach((element, index) => {
      // ...
    });
  }
};
req.send(null);

HTML5 API

HTML5提供了大量的Web API。这些API和接口（对象类型）可以在开发Web应用程序或网站时使用。Web API通常与JavaScript一起使用，尽管并非总是如此。例如，HTML5引入了一种名为Web Worker的新技术API，专门用于独立于其他用户界面脚本执行后台工作，而不会影响页面性能。当您运行JavaScript操作时，Web Worker不会中断用户和网页，因为它在后台运行任务。

HTML5 拖放（Drag 和 Drop）

在HTML5中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。

下面的例子是一个简单的拖放实例：

HTML5 Web worker

Web Worker是一种在后台运行JavaScript的方式，它独立于其他脚本运行，不会影响页面的性能。您可以继续做任何您想做的事情：点击、选择等，而Web Worker在后台运行。

Web Worker API允许在主线程之外的另一个线程中运行JavaScript程序。这意味着您可以在不影响用户界面的情况下执行任务。创建了一个worker后，它将继续监听消息（即使外部脚本已经完成），直到它被终止。要终止一个worker并释放浏览器/计算机资源，需要使用terminate()方法。

HTML5 Web socket

HTML5 WebSocket 是一种在单个 TCP 连接上进行全双工通讯的协议。它使客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。传统的网站为了实现推送技术，所用的技术都是 Ajax 轮询。轮询是在特定的时间间隔（如每1秒），由浏览器对服务器发出HTTP请求，然后由服务器返回最新的数据给客户端的浏览器。这种传统的模式带来很明显的缺点，即浏览器需要不断地向服务器发出请求，然而HTTP请求可能包含较长的头部，其中真正有效的数据可能只是很小的一部分，显然这样会浪费很多的带宽等资源。HTML5 定义的 WebSocket 协议能更好地节省服务器资源和带宽，并且能够更实时地进行通讯。 html5 Web component

Web component由三个主要技术组成，可以一起创建具有封装功能的可重用自定义元素，并在 Web 应用程序中使用它们。这三个技术分别是：自定义元素、Shadow DOM 和 HTML 模板。

自定义元素是一组 JavaScript API，允许您定义自定义元素及其行为，然后按需在用户界面中使用。

HTML5 Shadow dom

Shadow DOM 是 Web 组件标准的一部分，它提供了一种将 CSS 样式限定在特定 DOM 子树中并将该子树与文档的其余部分隔离开来的方法。Shadow DOM 允许将隐藏的 DOM 树附加到常规 DOM 树中的元素上，这个 Shadow DOM 树以 Shadow Root 开始，下面可以附加任何元素，就像普通 DOM 一样。

HTML5 WebGL & WebGPU

WebGL 是一种 JavaScript API，用于在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形，而无需使用插件。WebGL 通过引入一种与 OpenGL ES 2.0 非常接近的 API 来实现这一点，该 API 可以在 HTML 中的canvas元素中使用。这种一致性使得该 API 能够利用用户设备提供的硬件图形加速。 WebGPU 是一种新的 Web 标准，旨在提供现代图形和计算功能。它是为了取代 WebGL 而设计的，并且提供了更好的性能和更多的功能。WebGPU 提供了对现代 GPU 功能的访问，包括计算着色器、存储纹理和多绘制缓冲区输出。它还提供了更好的安全性和可移植性。 html5 WebAssembly WebAssembly 是一种新型的代码，可以在现代 Web 浏览器中运行。它是一种低级的类汇编语言，具有紧凑的二进制格式，具有接近本地的性能，并为 C/C++、C# 和 Rust 等语言提供了编译目标，使它们可以在 Web 上运行。它还被设计为与 JavaScript 一起运行，允许两者共同工作

MVC & MVP & MVVM

MVC

MVC：全名是 Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。 MVC优点：耦合性低，重用行高，生命周期成本低，部署快，可维护性高，有利软件工程化管理 MVC缺点： MVC模型的一个缺点是它增加了系统结构和实现的复杂性。对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率。此外，视图与控制器间的联系过于紧密。视图与控制器是相互分离，但确实联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用

MVP

MVP优点：

模型与视图完全分离，我们可以修改视图而不影响模型
可以更高效地使用模型，因为所有的交互都发生在一个地方——Presenter内部
我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁。
如果我们把逻辑放在Presenter中，那么我们就可以脱离用户接口来测试这些逻辑（单元测试）

MVP缺点：

MVP模型的一个明显缺点是它增加了代码的复杂度，特别是针对小型Android应用的开发，会使程序冗余。此外，由于对视图的渲染放在了Presenter中，所以视图和Presenter的交互会过于频繁。如果Presenter过多地渲染了视图，往往会使得它与特定的视图的联系过于紧密。一旦视图需要变更，那么Presenter也需要变更。

MVVM

MVVM优点：低耦合，数据是独立于UI的，ViewModel只负责处理和提供数据，UI想怎么处理数据都由UI自己决定，ViewModel不涉及任何和UI相关的事，即使控件改变，ViewModel几乎不需要更改任何代码，专注自己的数据处理就可以了。此外，MVVM模型还具有双向绑定技术，当Model变化时，View-Model会自动更新，View也会自动变化,能很好的做到数据一致性。

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