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

略略略62
82 阅读6分钟

第一天的课程主要围绕着前端“三剑客”展开，除此之外我还了解到了一些拓展的知识。我的笔记将基于老师在课程最后给出的总结模板给出：

基础

  1. HTML
  2. CSS
  3. JavaScript
  4. 浏览器引擎

浏览器一般包含两种引擎：渲染引擎和JavaScript引擎。

image.png 上图为渲染引擎，渲染引擎负责解释和执行HTML和CSS代码。

概念1：DOM（Document Object Model）树是指HTML（或XML）文档在浏览器中被解析后生成的树状结构。它将整个文档以层次结构的方式表示，其中每个HTML元素都被表示为一个节点（node），节点之间通过父子关系进行连接。

在HTML文档中，每个HTML标签和文本内容都被表示为一个节点。DOM树的根节点是文档节点（document node），它代表整个HTML文档。其余的节点根据它们在HTML中的嵌套关系，形成层次结构。

概念2：CSSOM（CSS Object Model）树是一种由CSS样式表构建的树状结构，用于表示HTML文档中的所有CSS样式信息。它类似于DOM（Document Object Model），但是专门用于处理CSS样式，而不是HTML元素。

当浏览器解析HTML文档时，如果遇到<style>标签或外部CSS文件（通过<link>标签引入），它将会解析这些CSS样式，并生成CSSOM树。CSSOM树表示了文档中所有CSS样式规则，每个规则都被表示为一个对象，并按照它们在样式表中的出现顺序组织在树中。

CSSOM树使得浏览器能够理解文档中的样式信息，以便在渲染页面时正确应用这些样式。当浏览器需要计算元素的样式或布局时，它会与DOM树和CSSOM树结合使用，以确定最终应用在每个元素上的样式规则。

image.png 上图为JavaScript引擎（V8为例）。JavaScript引擎负责解释和执行JavaScript代码。 JavaScript引擎的主要功能包括：

  1. 词法和语法分析：引擎首先对JavaScript代码进行词法和语法分析，将源代码转换为抽象语法树（Abstract Syntax Tree，AST）。抽象语法树是一种用于表示代码结构的树状数据结构。
  2. 解释器和编译器：引擎可以使用解释器或编译器的组合来执行代码。解释器逐行解释代码并即时执行，而编译器将代码转换为中间代码或机器码，然后执行转换后的代码。
  3. 优化器：一些现代JavaScript引擎还包含优化器，它可以对代码进行分析，并尝试优化代码以提高执行效率和性能。
  4. 内存管理：引擎负责分配内存来存储变量、函数和其他数据结构，并在不再需要这些数据时释放内存，以避免内存泄漏。
  5. 执行上下文和作用域：引擎维护执行上下文栈和作用域链，以跟踪和管理变量的访问和生命周期。

协作

  1. CSS/JavaScript in HTML

image.png PPT里右上角这张动图很有趣，它揭示了js的事件机制。MICROTASK QUEUE是微任务队列，MACROTASK QUEUE是宏任务队列。设计时先做宏任务，再做微任务；执行时先做微任务，再做宏任务。可以跟左图的捕获和冒泡合起来理解。 2. HTML/CSS in JavaScript

React中的JSX，JSS

HTML

  1. 标签

image.png

  • head

image.png

  • body

image.png 3. HTML5

  • 语义化
  • 存储/音视频

关于存储

Cookies用于在客户端和服务器之间传递少量数据，有限制，可以设置过期时间。Local Storage是HTML5的特性，用于在客户端本地存储大量数据（5MB左右），长期保存。Session Storage也是HTML5的特性，类似于Local Storage，但数据仅在会话期间有效，关闭浏览器后数据会被清除。

基于存储的应用一般有PWA和AMP：

image.png

PWA是一种利用现代Web技术提供类似原生应用体验的Web应用程序，适用于各种设备。而AMP是一种专注于移动设备的高性能网页技术，着重于提供更快的页面加载速度和更好的用户体验，并在搜索引擎中有更高的优先级。

  • 浏览器API
  • 可视化相关

SVG&Canvas SVG使用矢量图形来描述图像而Canvas使用点阵，因此前者放大缩小不会失真。同时，由于SVG是DOM元素，它对事件处理更加得心应手。但是由于二者一个偏“素描”一个偏“水彩”，作画目的不同，不能简单地认为SVG优于Canvas。

拓展交流

  1. 回顾分析
  2. UI<->Data

MVC&MVVM&MVP

image.png

  1. MVC（Model-View-Controller）：

    • Model（模型）：代表应用程序的数据和业务逻辑。
    • View（视图）：负责用户界面的显示，将数据从模型中获取并展示给用户。
    • Controller（控制器）：处理用户输入，更新模型和视图之间的交互。它充当模型和视图之间的中间人，负责应用程序的控制流程。

    在MVC中，模型、视图和控制器之间是相互独立的，它们通过事件驱动或回调的方式进行通信。MVC将应用程序分成三个组件，以实现代码的分层和解耦，使得修改和维护更加容易。

  2. MVVM（Model-View-ViewModel）：

    • Model（模型）：同样代表应用程序的数据和业务逻辑。
    • View（视图）：与MVC类似，负责用户界面的显示。
    • ViewModel（视图模型）：它是连接模型和视图的桥梁。ViewModel包含视图所需的所有数据和命令，负责将模型的数据转换为视图所需的数据。

    在MVVM中，ViewModel起到了Controller的作用，但不同于Controller，ViewModel通常不直接处理用户输入和控制流程，而是通过数据绑定机制将模型的数据与视图进行绑定。这样，当模型的数据发生变化时，视图会自动更新，而无需手动编写大量的事件处理代码。

  3. MVP（Model-View-Presenter）：

    • Model（模型）：同样代表应用程序的数据和业务逻辑。
    • View（视图）：负责用户界面的显示。
    • Presenter（表示器）：类似于MVVM中的ViewModel，负责将模型的数据转换为视图所需的数据，并处理用户输入。

    在MVP中，Presenter是视图和模型之间的中间人，类似于MVC中的Controller。它负责协调视图和模型之间的交互，但不像MVVM那样使用数据绑定，而是通过接口和回调等方式实现视图和模型之间的解耦。

avatar
文章
阅读
粉丝