CPU和GPU前端的应用

1、CPU（英文Central Processing Unit 中央处理器）

CPU（中央处理器）是一种通用的处理器，其主要任务是执行计算机程序中的指令和序列。它能够处理复杂的逻辑判断、分支、跳转、内存访问等操作，因此在执行大多数通用计算和控制任务时表现出色，例如：办公软件、数据库等应用时。

1.1、CPU的前端应用

前端CPU主要用于处理浏览器中的JavaScript代码执行以及页面渲染等任务。

具体而言，主要有一下几个任务：

JavaScript代码执行：前端CPU需要将编写好的JavaScript代码解析成计算机可以理解的指令，然后执行这些指令。
页面渲染：前端CPU需要对浏览器接收到的HTML、CSS、JavaScript等文档进行解析，并在内存中构建DOM树和CSSDOM树。然后、根据这些树的结构生成页面布局，并最终在屏幕中展示出来。
事件监听和响应：前端CPU需要监听用户的交互事件（比如：鼠标点击、键盘输入等），并做出相应的响应。例如：当用户点击按钮时，前端CPU需要执行预定的JavaScript函数来处理相应的业务逻辑。

前端如何减少CPU触发

减少DOM操作：DOM操作是比较消耗CPU的操作之一，因此浏览器需要对页面进行大量的计算和渲染。因此，尽量减少DOM操作的次数可以有效的降低CPU的负担。可以使用虚拟DOM等技术。
避免长时间占用主线程：如果JavaScript代码在主线程中执行时间过长，导致页面卡顿、响应变慢等问题。因此可以采用异步操作、Web Worker等方式来避免长时间占用主线程。
避免长时间的重绘和回流：当页面的布局或样式发生变化时，浏览器需要进行重绘和回流操作，这些操作也会消耗大量的的CPU资源。因此，可以合理的使用CSS属性、批量更新来避免频繁的重绘和回流。
图片压缩：当图片过大的时候会导致页面加载缓慢并且浪费CPU资源，因此需要合理的进行图片的压缩。
实用现在浏览器：使用最新版的浏览器，提高性能，从而减少CPU的负担。

2、GPU（图形处理器）

是专门为图形和并行运算设计的处理器。它包含大量的流处理器（stream processor），能够同时进行大量的浮点运算，并可通过并行计算来加速图像渲染、物理模拟、深度学习等应用场景。在游戏、视频剪辑、CAD等涉及广泛。GPU通常比CPU更快更高效。但是在处理通用计算和控制任务方面，GPU的性能并不如CPU。

2.1、前端GPU的主要运用场景

前端GPU主要用于浏览器中的图形和图像处理，以及实现更流畅的动画效果。

图像处理：前端GPU可以通过WebGL技术来进行高性能的3D渲染、图形处理等操作。例如游戏开发、虚拟现实、计算机辅助领域。前端GPU通常是实现复杂图像渲染和运算的核心技术。
动画效果：前端GPU可以通过CSS3动画、Web Animations等技术来实现流畅的动画效果。GPU可以加速CSS属性动画、SVG、canvas运动等动画类场景，从而实现页面的流程进行。
视频播放：H5视频标签采用的技术就是GPU进行硬件解码和渲染，从而实现高性能的视频播放体验。

前端如何触发GPU：

使用CSS 3D变换或透视变换。
使用CSS动画或过度效果。
使用video或canvas元素进行图像处理。
使用CSS滤镜效果。
使用will-change css属性来告知浏览器那些元素即将被修改，以提高渲染性能。

will-change CSS属性用于告知浏览器一个或多个元素的哪些属性即将被修改，
并且浏览器可以根据这个信息来优化页面性能。它的语法如下：css
selector {will-change: auto | scroll-position | contents | <custom-ident>...;
}
其中，selector是要应用will-change属性的元素选择器；
auto是默认值，表示没有特定的属性将会被修改；
scroll-position指示元素的滚动位置将被修改；
contents表示元素的内容将被修改；
<custom-ident>是自定义标识符，可以是任何CSS标识符，用于指定其他将被修改的属性。
例如，下面的CSS代码告诉浏览器.box元素的transform属性即将被修改
，以便浏览器能够进行优化。css
.box {will-change: transform;
}
需要注意的是，使用will-change属性可能会增加内存占用和CPU使用率，
因此应该谨慎使用，只在必要时使用。

CPU和GPU前端的应用相关推荐

五年经验的前端社招被问：CPU 和 GPU 有什么区别？
CPU 和 GPU 的设计目标和整体架构的区别分析,并在全文最后使用通俗的例子做比喻帮助理解. 首先来看 CPU 和 GPU 的百科解释: CPU(Central ProcessingUnit,中央处 ...
0921深度学习硬件CPU和GPU
计算机构成 CPU(处理器):除了运行操作系统和其他许多功能外,还能执行程序:通常由 8 个或者更多个核心组成内存(随机访问存储,RAM):用于存储和检索计算结果,如权重向量和激活参数,以及训练数 ...
【动手学深度学习PyTorch版】23 深度学习硬件CPU 和 GPU
上一篇请移步[动手学深度学习PyTorch版]22续 ResNet为什么能训练出1000层的模型_水w的博客-CSDN博客目录一.深度学习硬件CPU 和 GPU 1.1 深度学习硬件 ◼ 计算机构 ...
CPU，GPU，Memory调度
CPU,GPU,Memory调度 HDD&Memory&CPU调度机制(I/O硬件性能瓶颈) 图1. HDD&Memory&CPU调度图 CPU主要就是三部分:计算单元 ...
TensorFlow指定CPU和GPU方法
TensorFlow指定CPU和GPU方法 TensorFlow 支持 CPU 和 GPU.它也支持分布式计算.可以在一个或多个计算机系统的多个设备上使用 TensorFlow. TensorFlow ...
CPU，GPU，GPGPU
CPU,GPU,GPGPU 1．基本概念 1.1 GPU 图形处理器(bai英语:Graphics Processing Unit,缩写:GPU),又称显示核心.视觉du处理器.zhi显示芯片,是一种 ...
PyTorch 笔记（03）— Tensor 数据类型分类（默认数据类型、CPU tensor、GPU tensor、CPU 和 GPU 之间的转换、数据类型之间转换）
1. Tensor 数据类型 Tensor 有不同的数据类型,如下表所示,每种类型都有 CPU 和 GPU 版本(HalfTensor)除外,默认的 tensor 是数据类型是 FloatTensor ...
Arm 发布移动端 v9 体系新架构，CPU、GPU、IP全囊括了
作者 | 夕颜头图 | 下载于ICphoto 出品 | AI 科技大本营(ID:rgznai100) 2021年5月25日晚,Arm发布了针对移动端的Armv9体系新架构,除了公布首款全面计算(To ...
CPU和GPU跑深度学习差别有多大？
作者:带萝卜链接:https://www.zhihu.com/question/273812506/answer/1271840613 来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商 ...

CPU和GPU前端的应用

1、CPU（英文Central Processing Unit 中央处理器）

1.1、CPU的前端应用

2、GPU（图形处理器）

2.1、前端GPU的主要运用场景

CPU和GPU前端的应用相关推荐

最新文章

热门文章