前端语言串讲 | 字节青训营笔记

看月亮的方源
1,492 阅读16分钟

一、前端语言的基本能力

HTML
  • HTML（超文本标记语言）用于定义网页的结构和内容。它由一系列的标签组成，用于标记文本、图片、链接等内容，以及定义它们之间的关系和层次结构。
css
  • CSS（层叠样式表）用于定义网页的外观和布局。它允许您为 HTML 元素设置颜色、字体、边框、背景等样式，以及控制它们的位置和排列方式。
  • css选择器：

下面是一些常用的 CSS 选择器：

  • 元素选择器：通过标签名来选择元素。例如，p 选择器会选择所有的 <p> 元素。
css
复制代码
p {
  color: red;
}
  • 类选择器：通过类名来选择元素。类选择器以一个点号 . 开头，后面跟着类名。例如，.highlight 选择器会选择所有具有 highlight 类的元素。
css
复制代码
.highlight {
  background-color: yellow;
}
  • ID 选择器：通过 ID 来选择元素。ID 选择器以一个井号 # 开头，后面跟着 ID 名。例如，#title 选择器会选择具有 title ID 的元素。
css
复制代码
#title {
  font-size: 24px;
}
  • 属性选择器：通过属性来选择元素。属性选择器使用方括号 [] 来包围属性名和属性值。例如，[href] 选择器会选择所有具有 href 属性的元素。
css
复制代码
[href] {
  color: blue;
}
  • 后代选择器：通过元素之间的嵌套关系来选择元素。后代选择器使用空格来分隔两个选择器，表示前一个选择器所选元素的后代中，符合后一个选择器条件的元素。例如，ul li 选择器会选择所有 <ul> 元素中的 <li> 元素。
css
复制代码
ul li {
  list-style-type: square;
}
  • css语法：
javascript
  • JavaScript 是一种脚本语言，用于为网页添加交互功能。它可以让您在网页中响应用户操作，动态更新内容，以及与服务器进行通信。

image.png

特点
  • 借鉴C语言的基本语法
  • 借鉴java的数据类型和内存管理
  • 借鉴SCHEME语言，将函数提升到一等公民身份
  • 借鉴SELF语言，使用基于原型（ProtoType）的继承机制
js数据类型
js基础
  1. let var const
  2. Object定义
  3. function 定义

这些太基础了，我就不写了～～不会的自己百度吧～～

Broswer

在浏览器中运行过程：浏览包含两种引擎：渲染引擎和JS引擎，渲染引擎负责加载页面，根据HTML生成DOM树，接着加载CSSOM树，二者合成render树，布局render树（Layout/reflow），绘制render树（paint），绘制页面像素信息, 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。

image.png

V8工作流程

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

  1. 解析：V8 首先将 JavaScript 代码解析成抽象语法树（AST）。
  2. 编译：接下来，V8通过 Ignition 将 AST 编译成字节码。字节码可以在虚拟机中运行。
  3. 执行：V8 执行字节码，并根据需要进行优化。TurboFan 是 V8 引擎中用于优化代码执行的编译器之一。它负责将 JavaScript 字节码编译成高效的机器码，以提高代码的执行效率。
  4. 垃圾回收：V8 使用垃圾回收机制来自动管理内存。它会定期检查内存中的对象，回收那些不再被引用的对象所占用的内存。

image.png

额外补充

当 V8 执行 JavaScript 字节码时，它会收集有关代码运行情况的信息，例如哪些函数被调用得最频繁，哪些循环被执行得最多等。然后，V8 会使用这些信息来确定哪些代码是热点代码，即那些需要优化的代码。

接下来，V8 会使用 TurboFan 编译器来优化这些热点代码。TurboFan 会将字节码编译成高效的机器码，并应用各种优化技术，例如内联函数调用、消除冗余计算等，以提高代码的执行效率。

二、前端语言的协作配合

image.png

css in html

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

  • 内联样式：内联样式是将 CSS 样式直接添加到 HTML 元素的 style 属性中。例如，下面的代码将一个段落的文本颜色设置为红色：
html
复制代码
<p style="color: red;">这是一段红色的文本。</p>
  • 内部样式表：内部样式表是将 CSS 样式定义在 HTML 文档的 <style> 标签中。例如，下面的代码定义了一个内部样式表，将所有段落的文本颜色设置为蓝色：
html
复制代码
<head>
  <style>
    p {
      color: blue;
    }
  </style>
</head>
<body>
  <p>这是一段蓝色的文本。</p>
</body>
  • 外部样式表：外部样式表是将 CSS 样式定义在一个单独的 .css 文件中，然后在 HTML 文档中使用 <link> 标签来引用它。例如，假设您有一个名为 styles.css 的外部样式表文件，其中定义了如下样式：
css
复制代码
/* styles.css */
p {
  color: green;
}

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

html
复制代码
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一段绿色的文本。</p>
</body>
javascript in html

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

  • 内部脚本：内部脚本是将 JavaScript 代码直接写在 HTML 文档的 <script> 标签中。例如，下面的代码定义了一个内部脚本，用于在页面加载时弹出一个对话框：
html
复制代码
<body>
  <script>
    alert('页面已加载！');
  </script>
</body>
  • 外部脚本：外部脚本是将 JavaScript 代码定义在一个单独的 .js 文件中，然后在 HTML 文档中使用 <script> 标签的 src 属性来引用它。例如，假设您有一个名为 script.js 的外部脚本文件，其中定义了如下代码：
javascript
复制代码
// script.js
alert('页面已加载！');

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

html
复制代码
<body>
  <script src="script.js"></script>
</body>

使用 async和defer属性都是用来控制script标签的加载和执行顺序的。defer属性表示延迟执行，即等到页面解析完毕后再执行async属性表示异步执行，即不等待页面解析完毕，也不阻塞页面解析，但是执行顺序不一定按照加载顺序。举例来说，如果你有两个script标签，一个使用defer属性，一个使用async属性，那么它们的写法和效果如下：

js
复制代码
<!-- defer属性 -->
<script src="defer.js" defer></script>
<!-- async属性 -->
<script src="async.js" async></script>

1、defer.js会在页面解析完毕后按照加载顺序执行。

2、async.js会在加载完毕后立即执行，不一定按照加载顺序。

事件捕获和事件冒泡
event loop

promise callback:例如promise.reselove微任务

html in javascript

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

例如，下面的代码创建了一个包含一段文本和一个按钮的 HTML 字符串，并使用 innerHTML 属性将其添加到页面中的一个 <div> 元素中：

html
复制代码
<body>
  <div id="container"></div>

  <script>
    let html = `
      <p>这是一段动态添加的文本。</p>
      <button>点击我</button>
    `;

    let container = document.querySelector('#container');
    container.innerHTML = html;
  </script>
</body>
css in javascript

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

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

html
复制代码
<body>
  <p id="text">这是一段文本。</p>

  <script>
    let text = document.querySelector('#text');
    text.style.color = 'red';
    text.style.fontSize = '24px';
  </script>
</body>
css module

三、你不知道的HTML5

image.png

html全部标签分类

image.png

html头标签

image.png

html5

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

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

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

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

image.png

html5存储

cookie localstorage sessionstorage

image.png

html5_indexedDB

IndexedDB 和 Web Storage（包括 Local Storage 和 Session Storage）都是浏览器提供的客户端存储技术，它们可以让您在用户的浏览器中存储数据。但是，它们之间也存在一些重要的区别。

  • 存储能力：Web Storage 的存储能力有限，通常只能存储几兆字节的数据。而 IndexedDB 的存储能力更大，可以存储更多的数据。
  • 数据类型：Web Storage 只能存储字符串类型的数据。如果您想要存储其他类型的数据，需要先将其转换为字符串。而 IndexedDB 可以直接存储多种类型的数据，包括字符串、数字、对象、数组等。
  • 查询能力：Web Storage 只提供了简单的键值对查询方式，不支持复杂的查询操作。而 IndexedDB 提供了更强大的查询能力，支持索引、游标、范围查询等高级查询功能。
  • 事务支持：Web Storage 不支持事务操作。而 IndexedDB 支持事务操作，可以确保数据的完整性和一致性。

image.png

html5 PWA AMP

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

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

image.png

html5 Audio

HTML5提供了一个<audio>元素，用于在网页上播放音频文件。例如，要在HTML中播放音频文件，可以使用以下代码：

html
复制代码
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
  您的浏览器不支持 audio 元素。
</audio>

controls属性会添加音频控件，如播放、暂停和音量。<source>元素允许您指定浏览器可以选择的备用音频文件。浏览器将使用第一个识别的格式。<audio>和</audio>标签之间的文本仅在不支持<audio>元素的浏览器中显示。

html5 Redio

HTML5提供了一个<video>元素，用于在网页上显示视频。例如，要在HTML中显示视频，可以使用以下代码¹：

html
复制代码
<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 video 标签。
</video>

controls属性会添加视频控件，如播放、暂停和音量。建议始终包括宽度和高度属性。如果未设置高度和宽度，则在视频加载时页面可能会闪烁。<source>元素允许您指定浏览器可以选择的备用视频文件。浏览器将使用第一个识别的格式。<video>和</video>标签之间的文本仅在不支持<video>元素的浏览器中显示。

html5 二进制

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

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

javascript
复制代码
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中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。

下面是一个简单的例子，它演示了如何在HTML5中实现拖拽操作。

html
复制代码
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">

</body>
</html>

image.png

html5 Web worker

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

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

image.png

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 一样。

image.png

html5 SVG & Canvas

HTML5 中的 Canvas 和 SVG 都可以用来绘制图形，但它们之间有一些重要的区别。

Canvas

  • 通过 js 来绘制 2D图形。
  • canvas 图像单位是像素。
  • canvas 图像绘制完毕之后，浏览器将不再关注它，如果位置发生变换，就需要重新绘制。

SVG

  • svg 使用 XML 描述的2D图像。
  • svg 是基于 xml 的，所以 svg 中绘制图形还是使用的元素，js 给元素任意添加事件。
  • svg 绘制的图像是一个对象，如果对象的属性发生改变，浏览器将重新绘制图形。

SVG与Canvas比较

  1. svg 是一种矢量图，而 canvas 依赖于分辨率。所以 svg 放大不会失真，但是 canvas 绘制的图形会失真。
  2. svg 支持事件处理器，而 canvas 不支持事件处理器。
  3. svg 中的文字独立于图像，文字可保留，可编辑和可搜索，canvas 的文本渲染能力弱。
  4. canvas 适合图像密集型的游戏，频繁地重绘图像，svg 绘制的复杂度高时减慢渲染的速度。
  5. canvas 绘制的图形可以多种格式 (jpg、png) 保存图片，但是 svg 绘制的只能以 .svg 格式保存，使用时可以引入 html 文件。
  6. canvas 适合开发游戏，svg 不适合游戏应用。

image.png

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 一起运行，允许两者共同工作

image.png

MVC & MVP & MVVM

MVC：全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写。

MVC优点： 耦合性低，重用行高，生命周期成本低，部署快，可维护性高，有利软件工程化管理

MVC缺点： MVC模型的一个缺点是它增加了系统结构和实现的复杂性。对于简单的界面，严格遵循MVC，使模型、视图与控制器分离，会增加结构的复杂性，并可能产生过多的更新操作，降低运行效率¹。此外，视图与控制器间的联系过于紧密。视图与控制器是相互分离，但确实联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用

image.png

MVP优点：

1、模型与视图完全分离，我们可以修改视图而不影响模型

2、可以更高效地使用模型，因为所有的交互都发生在一个地方——Presenter内部

3、我们可以将一个Presenter用于多个视图，而不需要改变Presenter的逻辑。这个特性非常的有用，因为视图的变化总是比模型的变化频繁。

4、如果我们把逻辑放在Presenter中，那么我们就可以脱离用户接口来测试这些逻辑（单元测试）

MVP缺点：

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

image.png

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

image.png

avatar
文章
阅读
粉丝