前端语言串讲｜ 青训营

七仔Leon
112 阅读10分钟

一、前端语言的基本能力

CSS选择器

  • 类选择器
  • 全选择
  • 伪元素选择器
  • 伪类选择器
  • id选择器
  • 元素类型选择器
  • 后代选择器
  • 兄弟选择器

JavaScript

特点

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

Browser

浏览器包含两种引擎：渲染引擎和JS引擎。 渲染引擎负责加载页面，根据HTML生成DOM树结构，接着构建CSSOM树，结合DOM结构特性和CSSOM样式特性,渲染引擎会计算最终页面的开发，并推断其中哪些部分可以作为整体，变为一个图层，这样渲染的效率会更高，最后把页面绘制出来。 JS引擎以V8工作流程举例说明：

  • 首先会编译 JavaScript 编译过程分为三步
  • 1 词法分析(scanner)
    • 会将对应的每一行的代码的字节流分解成有意义的代码块 代码块被称为词法单元(token 进行记号化)
  • 2 语法分析(parser)
    • 将对应的tokens分析成一个元素逐级嵌套的树 这个树称之为 抽象语法树(Abstract Syntax Tree AST)
    • 这里也有对应的 pre-parser
  • 3 将AST 通过Ignition解释器转换成对应的字节码(ByteCode) 交给CPU执行 同时收集信息
    • 将可优化的信息，通过TurBoFan编译器，编译成更好使用的机器码交给CPU执行
    • 如果后续代码的参数类型发生改变 则会逆优化(Deoptimization)为字节码

二、前端语言的协作配合

css in html

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

javascript in html

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

html in javascript

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

css in javascript

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

三、你不知道的HTML5

HTML DTD

image.png

HTML 全部标签分类

image.png

HTML head标签

image.png

HTML body 功能性标签

image.png

HTML5 存储

image.png

HTML5 IndexedDB

image.png

image.png

HTML5 Audio

image.png

HTML5 Video

image.png

HTML5 二进制

image.png

HTML5 API

HTML5提供了大量的Web API。这些API和接口（对象类型）可以在开发Web应用程序或网站时使用。Web API通常与JavaScript一起使用，尽管并非总是如此。

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 Shadow dom

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

image.png

HTML5 Web component

  • Web component由三个主要技术组成，可以一起创建具有封装功能的可重用自定义元素，并在 Web 应用程序中使用它们。这三个技术分别是：自定义元素、Shadow DOM 和 HTML 模板。
  • 自定义元素是一组 JavaScript API，允许您定义自定义元素及其行为，然后按需在用户界面中使用。

HTML5 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 不适合游戏应用。

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

全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地方Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

MVP优点：

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

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

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

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

MVP缺点：

由于对视图的渲染放在了Presenter中，所以视图和Presenter的交互会过于频繁。还有一点需要明白，如果Presenter过多地渲染了视图，往往会使得它与特定的视图的联系过于紧密。一旦视图需要变更，那么Presenter也需要变更了。比如说，原本用来呈现Html的Presenter现在也需要用于呈现Pdf了，那么视图很有可能也需要变更。

image.png

MVP与MVC区别：

作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。
在MVC里，View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。 在MVC模型里，更关注的Model的改变，而同时有多个对Model的不同显示，即View。所以，在MVC模型里，Model不依赖于View，但是View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
虽然 MVC 中的 View 的确“可以”访问 Model，但是我们不建议在 View 中依赖 Model，而是要求尽可能把所有业务逻辑都放在 Controller 中处理，而 View 只和 Controller 交互。

MVVM优点：

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xaml代码。

4. 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。

MVVM与MVP区别：

mvvm模式将Presener改名为View Model，基本上与MVP模式完全一致，唯一的区别是，它采用双向绑定(data-binding): View的 变动，自动反映在View Model，反之亦然。这样开发者就不用处理接收事件和View更新的工作，框架已经帮你做好了。

avatar
文章
阅读
粉丝