前端语言串讲

Keria23333
137 阅读5分钟

1 前端语言的基本能力

三剑客：HTML（骨骼），CSS（肌肉），JS（外表）

1 HTML（大量标签组成的文本文件<Con.>）

2 css（{color:xxx ; font-size:12px}）

3 js

借鉴了C语言的基本语法和Java的数据类&内存管理--生命力强，比两个我岁数都大

数据类型

string，number，bool，null，undefined，symbol， object(shuzu,hanshu)

2 三位爷怎么忙到起来的

渲染引擎根据HTML生成DOM树，获取CSS的特性，最终绘制出页面

  • HTTP 请求：浏览器向服务器发送请求，获取网页的 HTML、CSS、JavaScript 文件以及其他资源（如图片、字体等）。

  • 构建 DOM 树：浏览器解析 HTML 文件，构建一个 DOM（Document Object Model）树。DOM 树是一个以节点形式表示的 HTML 文档结构。每个节点代表 HTML 文档中的一个元素、属性或文本。

  • 计算 CSS 树：浏览器解析 CSS 文件，构建一个 CSSOM（CSS Object Model）树。CSSOM 树是一个以节点形式表示的 CSS 规则结构。

  • 排版（Layout）：浏览器将 DOM 树和 CSSOM 树结合，生成一个渲染树（Render Tree）。渲染树包含了 DOM 中的可见元素及其对应的 CSS 规则。接着，浏览器会计算渲染树中每个节点的位置和大小，这个过程称为排版或布局（Layout）。

  • 渲染合成：浏览器将渲染树中的各个节点分层，创建渲染层（Render Layers）。每个层包含一个或多个节点，具有独立的绘制和合成上下文。

  • 绘制（Painting）：浏览器根据渲染层绘制每个节点的视觉效果（如文本、颜色、图像、边框、阴影等），生成位图（Bitmaps）。绘制过程可能会在 GPU（图形处理器）上完成，以提高性能。

  • 合成（Compositing）：浏览器将渲染层的位图合成为一个完整的屏幕图像，然后显示在屏幕上。合成过程通常由 GPU 完成，以实现高效的图像合成。

（这是图解吧？）

2 前端语言的协助配合

CSS in HTML

inline CSS（行内样式）

internal CSS（嵌入式html的CSs）

external CSS（写CSS，再导入html文件）（主流）

JS in HTML

编写脚本 定义在全局

dom：将部分HTML转换为JS对象

保存方式如图

有些机制：

event loop机制：防止单线程的js处理任务时出现误解。

HTML/CSS in JS

3 没听说过的HTML（它只是标记语言）

HTML DTD,HTML标签

ARIA（Accessible Rich Internet Applications）是一套让 Web 应用和网站更具可访问性的技术规范。ARIA 通过在 HTML 中添加特定的属性，帮助屏幕阅读器等辅助技术更好地理解页面内容和交互。

HTML的规范&特性

html 语义化标签：用比不用好，不用比用错好

html5 表单增强

  • 新的表单元素：HTML5 引入了一些新的表单元素，如 date、time、email、url 等，使得开发者可以更容易地创建各种类型的表单。

  • 自动聚焦：在 HTML5 中，可以通过将 autofocus 属性添加到表单元素中，使得页面加载时自动将焦点放在指定的表单元素上，方便用户操作

HTML5 PWA & AMP（来自2002XiaoYu）

  1. PWA（Progressive Web Apps）：PWA 是一种 Web 应用程序的开发方式，旨在提供类似于原生应用程序的用户体验。它使用 Web 技术开发，可以在任何设备上运行，包括桌面、移动设备和平板电脑。PWA 具有以下特点：
    • 可靠性：PWA 可以离线使用，并且具有快速的加载速度。
    • 响应式设计：PWA 能够自适应不同的设备和屏幕尺寸。
    • 安全性：PWA 使用 HTTPS 进行通信，确保用户的数据和隐私得到保护。
    • 独立性：PWA 可以添加到设备的主屏幕上，就像原生应用程序一样。
  1. AMP（Accelerated Mobile Pages）：AMP 是一种 Web 页面的开发方式，旨在提供快速的加载速度和优化的移动体验。它使用精简的 HTML 和 CSS，以及 AMP JavaScript 库来实现。AMP 具有以下特点：
    • 快速加载：AMP 页面能够快速加载，提供更好的用户体验。
    • 移动友好：AMP 页面被设计为移动优先，适应各种屏幕尺寸。
    • 安全性：AMP 页面使用 AMP CDN 来缓存页面，并使用 HTTPS 进行通信。
    • 限制性：AMP 页面不能包含一些复杂的功能和 JavaScript 库，以确保页面的速度和可靠性

音频能力

html5 video

实现了创建一个媒体源，将该媒体源与一个 video 元素关联，为该媒体源添加媒体数据，并开始播放该视频的功能

html5 web socket

拦截请求，通过自身的cache返回文件

Web Socket 是一种在 Web 应用程序中实现实时通信的协议。它提供了一种双向通信机制，允许客户端和服务器之间进行实时的数据传输。与传统的 HTTP 请求/响应模式不同，Web Socket 采用了一种持久化的连接，可以在客户端和服务器之间保持通信通道，从而实现实时通信的功能。

Shadow dom

通过创建一个“影子树”来实现组件的封装和隔离。在一个 Shadow DOM 中，组件的 HTML 结构、CSS 样式和 JavaScript 行为都被包裹在一个独立的命名空间中，与外部页面的 HTML、CSS 和 JavaScript 不会互相干扰。这种隔离性使得组件可以在不同的页面和应用程序中进行复用，而不用担心样式和行为的冲突

webGL&webGPU

通过着色器语言与gpu直接通信

ebGL 是一种在浏览器中呈现 3D 和 2D 图形的 JavaScript API

WebGPU 是一个新的 Web 标准，旨在为 Web 平台提供低级别、跨平台的图形和计算 API，支持使用现代硬件的强大功能。

wasm

是一种新型的虚拟机技术，由 W3C、Mozilla 和其他浏览器厂商共同推出的新 Web 标准。 可以将高性能的 C、C++、Rust 等语言的代码编译成二进制格式，在浏览器中运行。

avatar
文章
阅读
粉丝