前端语言串讲（部分）｜ 青训营

少年没有乌托邦
81 阅读7分钟

由于基础薄弱，本文基于视频、及其他同学笔记和chatgpt整理，用来弥补个人知识。记录部分心得。如有错误，请批评指正。

基础

前端语言的基本能力

image.png

备忘录来源iLoveCoding (github.com)

CSS

image.png

browser

浏览器包含两种引擎：渲染引擎和JS引擎。

  • 渲染引擎负责加载页面，根据HTML生成DOM树，构建CSSOM树，二者合成render树，布局render树（Layout/reflow），绘制render树（paint），绘制页面像素信息, 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。 image.png
  • JS引擎，以V8举例。JavaScript本质上也是一段文本，需要通过解释器才能够运行.V8 是一款高性能的 JavaScript 引擎，常用于 Chrome 浏览器和 Node.js 等环境中。

image.png

  1. Source code：JavaScript 源代码作为 V8 引擎的输入。
  2. Parser：V8 引擎将 JavaScript 源代码解析成``一个抽象语法树（Abstract Syntax Tree，简称 AST）。AST 是源代码的一种树状表示，其中每个节点表示一个源代码中的语法结构（如变量声明、函数调用等）。
  3. AST：生成的抽象语法树将用于接下来的编译和优化过程。
  4. Ignition：V8 引擎中的 Ignition 是一个解释器（Interpreter），它负责将 AST 转换为字节码（Bytecode）。字节码是一种中间表示，比源代码更接近机器代码，但仍具有平台无关性。
  5. Bytecode Execute：Ignition 解释器执行字节码，实现 JavaScript 源代码的功能。在执行字节码的过程中，V8 会收集代码的运行时信息（如类型信息等），用于后续的优化过程。
  6. Feedback：V8 引擎收集的运行时信息（如变量类型、函数调用频率等）称为反馈（Feedback）。这些信息将用于指导后续的即时编译（JIT）过程，生成更高效的机器代码。
  7. TurboFan：V8 引擎中的 TurboFan 是一个即时编译器（Just-In-Time Compiler，简称 JIT），它负责将字节码优化为机器代码。TurboFan 会根据收集到的反馈信息对代码进行特定的优化（如内联函数、消除数组边界检查等），生成性能更好的机器代码。
  8. Machine code (Intel, ARM, MIPS)：TurboFan 生成的机器代码是针对特定处理器架构（如 Intel x86/x64、ARM、MIPS 等）的低级代码。这些机器代码可以直接在目标处理器上执行，实现更高的性能。

V8 引擎通过这个工作流程实现了 JavaScript 源代码的高效执行。在实际使用过程中，V8 会根据代码的运行情况动态调整优化策略，确保在不同场景下都能实现最佳性能。

作者：VUE
链接：juejin.cn/post/722443…
来源：稀土掘金

协作

HTML

HTML5 PWA & AMP

早起网络时代，由于Microsoft注重于操作系统，在操作系统上做应用程序。Google注重于浏览器的web应用，为了更好地在web实现类似于原生应用的能力。Google提出了PWA。
【PWA】什么是 PWA （progressive web app）_哔哩哔哩_bilibili

  1. PWA:渐进式web应用程序(progressive web APP)。PWA 是一种 Web 应用程序的开发方式，旨在提供类似于原生应用程序的用户体验。它使用 Web 技术开发，可以在任何设备上运行，包括桌面、移动设备和平板电脑。并不需要特定的技术栈，，PWA 还依赖一些技术标准和 API，主要是 Service Worker来实现。 PWA 的目标是提供类似于原生应用的用户体验，具备以下特点：

    • 响应式设计：PWA 应用能够适应不同屏幕尺寸和设备类型，提供一致的使用体验。
    • 离线访问：PWA 应用可以在离线或网络连接不稳定的情况下继续工作，通过使用缓存技术来提供离线访问能力。
    • 快速加载：PWA 应用能够快速加载并立即响应用户的操作，通过使用服务工作线程（Service Worker）等先进技术来实现。
    • 本地推送通知：PWA 应用可以像原生应用一样发送本地推送通知，与用户进行互动并提供实时的信息更新。
    • 安装性：PWA 应用可以被用户添加到主屏幕或任务栏，并且独立于浏览器打开，给用户一种和原生应用相似的入口和体验。

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

    • 快速加载：AMP精简HTML，只保留核心内容。 页面能够快速加载，提供更好的用户体验。
    • 预加载和预渲染：AMP 使用预加载技术，同时，AMP 还支持预渲染，加速用户的交互响应。
    • 缓存优化：AMP 页面可以被缓存在 AMP 缓存中，可以直接从缓存中加载页面，减少网络请求的次数和延迟。
    • 安全性：AMP 页面使用 AMP CDN 来缓存页面，并使用 HTTPS 进行通信。
    • 限制性：AMP 页面不能包含一些复杂的功能和 JavaScript 库，以确保页面的速度和可靠性。

PWA&AMP

HTML5_Veido

image.png

MVC & MVVM & MVP

image.png MVC（Model-View-Controller）、MVVM（Model-View-ViewModel）和MVP（Model-View-Presenter）是软件开发中常见的三种架构模式，用于将用户界面、业务逻辑和数据操作进行分离。每种模式都有其独特的结构和优势。以下是对每种模式的简要概述：

  1. Model-View-Controller（MVC）： MVC是最早的一种架构模式之一。它将应用程序分为三个主要组件：
  • Model（模型）：代表应用程序的数据和业务逻辑。
  • View（视图）：向用户呈现界面，并将用户输入发送给控制器。
  • Controller（控制器）：处理用户交互，更新模型，并与视图进行通信。

MVC通过确保每个组件具有特定职责来促进关注点分离。该模式广泛应用于Web开发框架，如Ruby on Rails和ASP.NET MVC。

  1. Model-View-ViewModel（MVVM）： MVVM是一种专为用户界面设计的模式，广泛应用于诸如WPF和Knockout.js之类的框架中。它将应用程序分为以下组件：
  • Model（模型）：表示数据和业务逻辑，类似于MVC。
  • View（视图）：表示用户界面。
  • ViewModel（视图模型）：位于视图和模型之间，提供数据绑定和数据操作功能。它将数据和命令公开给视图，使其能够更新模型并响应更改。

MVVM通过清晰地分离用户界面和底层数据和逻辑，简化了UI测试，并促进了更模块化和可维护的代码库。

  1. Model-View-Presenter（MVP）： MVP是另一种关注用户界面和应用程序逻辑分离的架构模式。它由以下组件组成：
  • Model（模型）：表示数据和业务逻辑。
  • View（视图）：向用户显示界面。
  • Presenter（表示器）：充当视图和模型之间的中介。它处理用户输入，操作数据，并相应地更新视图。

在MVP中，视图是被动的，将用户交互委托给Presenter，后者然后更新模型并更新视图。该模式促进了可测试性，因为可以轻松地单独测试Presenter，而无需依赖UI。

每种模式都有其优点，在选择时可以根据项目的具体要求和所使用的技术进行选择。它们都旨在改善代码组织、可维护性和关注点分离。

avatar
文章
阅读
粉丝