深入了解Node中的Buffer

深入了解Node中的Buffer

在 Stream 篇结中,我们留下了一个问题,下述代码输出的 chunk 是一个什么东西?

Untitled.png

通过打印,我们发现 chunk 是 Buffer 对象,其中的元素是16进制的两位数,即0~255的数值。【相关教程推荐:nodejs视频教程、编程教学】

Untitled 1.png

说明在 Stream 中流动的数据就是 Buffer,那下面就让我们来探究一下 Buffer 的真实面目!

? Node 中为什么要引入 Buffer?

最开始的时候 JS 只在浏览器端运行,对于 Unicode 编码的字符串容易处理,但是对于二进制和非 Unicode 编码的字符串处理困难。并且二进制是计算机最底层的数据格式,视频/音频/程序/网络包都是以二进制来存储的。所以 Node 需要引入一个对象来操作二进制,因此 Buffer 诞生了,用于 TCP流/文件系统等操作处理二进制字节。

由于 Buffer 在 Node 中过于常用,所以在 Node 启动的时候已经引入了 Buffer,无需使用 require()

ArrayBuffer

是什么

ArrayBuffer 是内存之中的一段二进制数据,本身不能够操作内存,需要通过TypedArray 对象或者 DataView 来操作。将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容,其部署了数组接口,可以使用数组的方式来操作数据

TypedArray 视图

最常用的是 TypeArray 视图,用于读写简单类型的 ArrayBuffer,比如 Uint8Array(无符号8位整数)数组视图, Int16Array(16位整数)数组视图

和 Buffer 的关系

NodeJS 中的 Buffer 类其实是 Uint8Array 的实现。

Buffer 结构

Buffer 是一个类似 Array 的对象,但是它主要用于操作字节

模块结构

Buffer 是 JS 和 C++ 结合的模块,性能部分都由 C++ 实现,非性能部分都是 JS 实现的Untitled 2.png

Buffer 所占用的内存不是由 V8 分配的,属于堆外内存。

对象结构

Buffer 对象类似数组,其元素是16进制的两位数,即0~255的数值

Untitled 3.png

从这个例子能够看出,不同字符在 Buffer 中占据的字节是不一样的,在 UTF-8 编码下,中文占据3个字节,英文和半角标号占用1个字节

? 输入的元素是小数/负数/超出255会发生什么事情?

Untitled 4.png

对于上述这种情况,Buffer 的处理为:

给元素的赋值小于0, 就将该值逐次加256,直到得到一个0到255之间的整数如果得到的数值大于255,就逐次减256,直到得到0~255区间内的数值如果是小数,只保留整数部分

Buffer 里面为什么展示的是16进制

其实在内存存储的依旧是二进制数,只是 Buffer 在显示这内存数据的时候采用了16进制

大小为2字节的 buffer,一共有16 bit ,比如是00000001 00100011,如果直接这样显示不太方便就转成为了16进制

Buffer 的创建

Buffer.alloc 和 Buffer.allocUnsafe

创建固定大小的 buffer

Buffer.alloc(size [, fill [, encoding]])

size 新 Buffer 的所需长度fill 用于预填充新 Buffer 的值。默认值: 0encoding 如果 fill 是一个字符串,则这是它的字符编码。默认值: utf8

Untitled 5.png

Buffer.allocUnsafe(size)

分配一个大小为 size 字节的 Buffer,allocUnsafe 执行速度比 alloc 快,我们发现其结果并不像 Buffer.alloc 那样都初始化为 00

Untitled 6.png

当调用 allocUnsafe 时分配的内存段尚未初始化,这样分配内存速度很块,但分配到的内存片段可能包含旧数据。如果在使用的时候不覆盖这些旧数据就可能造成内存泄露,虽然速度快,尽量避免使用

Buffer 模块会预分配一个内部的大小为 Buffer.poolSize 的 Buffer 实例,作为快速分配的内存池,用于使用 allocUnsafe 创建新的 Buffer 实例

Buffer.from

根据内容直接创建Buffer

Buffer.from(string [, encoding])Buffer.from(array)Buffer.from(buffer)

Untitled 7.png

Buffer.allocUnsafe 的内存机制

为了高效使用申请来的内存,Node.js 采用了 slab 机制进行预先申请、事后分配,是一种动态的管理机制

使用 Buffer.alloc(size) 传入一个指定的 size 就会申请一块固定大小的内存区域,slab 具有如下三种状态

full: 完全分配状态partial:部分分配状态empty:没有被分配状态

Node.js 使用8 KB 为界限来区分是小对象还是大对象

知了zKnown 知了zKnown

知了zKnown:致力于信息降噪 / 阅读提效的个人知识助手。

知了zKnown 65 查看详情 知了zKnown

Untitled 8.png

Buffer 在创建的时候大小就已经被确定了且无法调整!

分配小对象

如果分配的对象小于 8KB,Node 会按着小对象的方式来进行分配

Buffer 的分配过程中主要使用一个局部变量 pool 作为中间处理对象,处于分配状态的 slab 单元都指向它。以下是分配一个全新的 slab 单元的操作,它将会新申请的 SlowBuffer 对象指向它

Untitled 9.png

一个 slab 单元

Untitled 10.png

分配一个 2KB 大小的 Buffer

创建一个 2KB 的 buffer后,一个 slab 单元内存如下:

Untitled 11.png

这个分配过程是由 allocate 方法完成

Untitled 12.png

当我们创建了一个 2KB 的 buffer 之后,当前 slab 状态为 partial

再次创建 buffer 的时候,会去判断当前 slab 剩余空间是否足够。如果足够,使用剩余空间,并更新 slab 的分配状态

如果 slab 空间不够,就会构建新的 slab,原 slab 中剩余的空间造成浪费

分配大对象

如果有超过 8KB 的 buffer,直接会走到 creatUnsafeBuffer 函数,分配一个 slab 单元,这个 slab 单元将会被这个大 Buffer 对象独占

allocate 分配机制如图

Untitled 13.png

Buffer 的内存分配机制

Untitled 14.png

Buffer 和字符编码

通过使用字符编码,可实现 Buffer 实例与 JavaScript 字符串之间的相互转换

Untitled 15.png

Node 中目前支持 utf8、ucs2、utf16le、latin1、ascii、base64、hex、base64Url 八种编码方式,具体实现

Untitled 16.png

针对于每一种不同的编码方案都会用实现一系列 api,返回会有不同的结果,Node.js 会根据传入的 encoding 来返回不同的对象

Buffer 和字符串的转换

字符串转 Buffer

主要通过上述讲的 Buffer.from 方法,默认的 encoding 方式为 utf-8

Buffer 转字符串

Untitled 17.png

? 为什么会出现乱码呢?如何解决这个问题呢?

按着读取来说,我们每次读取的长度为4,chunk输出如下

Untitled 18.png

对于data += chunk等价于data = data.toString + chunk.toString

由于一个中文占据三个字节,第一个 chunk 中的第四个字节会显示乱码,第二个 chunk 的第一第二个字节也无法形成文字等等,所以会展示乱码问题

更多node相关知识,请访问:nodejs 教程!

以上就是深入了解Node中的Buffer的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/541275.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月9日 15:25:49
下一篇 2025年11月9日 15:28:38

相关推荐

  • 为什么前端固定定位会发生移动问题?

    前端固定定位为什么会出现移动现象? 在进行前端开发时,我们经常会使用CSS中的position属性来控制元素的定位。其中,固定定位(position: fixed)是一种常用的定位方式,它可以让元素相对于浏览器窗口进行定位,保持在页面的固定位置不动。 然而,有时候我们会遇到一个问题:在使用固定定位时…

    2025年12月24日
    000
  • 从初学到专业:掌握这五种前端CSS框架

    CSS是网站设计中重要的一部分,它控制着网站的外观和布局。前端开发人员为了让页面更加美观和易于使用,通常使用CSS框架。这篇文章将带领您了解这五种前端CSS框架,从入门到精通。 Bootstrap Bootstrap是最受欢迎的CSS框架之一。它由Twitter公司开发,具有可定制的响应式网格系统、…

    2025年12月24日
    200
  • 克服害怕做选择的恐惧症:这五个前端CSS框架将为你解决问题

    选择恐惧症?这五个前端CSS框架能帮你解决问题 近年来,前端开发者已经进入了一个黄金时代。随着互联网的快速发展,人们对于网页设计和用户体验的要求也越来越高。然而,要想快速高效地构建出漂亮的网页并不容易,特别是对于那些可能对CSS编码感到畏惧的人来说。所幸的是,前端开发者们早已为我们准备好了一些CSS…

    2025年12月24日
    200
  • is与where选择器:提升前端编程效率的秘密武器

    is与where选择器:提升前端编程效率的秘密武器 在前端开发中,选择器是一种非常重要的工具。它们用于选择文档中的元素,从而对其进行操作和样式设置。随着前端技术的不断发展,选择器也在不断演化。而其中,is与where选择器成为了提升前端编程效率的秘密武器。 is选择器是CSS Selectors L…

    2025年12月24日
    000
  • 前端技巧分享:使用CSS3 fit-content让元素水平居中

    前端技巧分享:使用CSS3 fit-content让元素水平居中 在前端开发中,我们常常会遇到需要将某个元素水平居中的情况。使用CSS3的fit-content属性可以很方便地实现这个效果。本文将介绍fit-content属性的使用方法,并提供代码示例。 fit-content属性是一个相对于元素父…

    2025年12月24日
    000
  • 前端技术分享:利用fit-content实现页面元素的水平对齐效果

    前端技术分享:利用fit-content实现页面元素的水平对齐效果 在前端开发中,实现页面元素的水平对齐是一个常见的需求。尤其在响应式布局中,我们经常需要让元素根据设备的屏幕大小自动调整位置,使页面更加美观和易读。在本文中,我将分享一种利用CSS属性fit-content来实现页面元素的水平对齐效果…

    2025年12月24日
    000
  • 聊聊怎么利用CSS实现波浪进度条效果

    本篇文章给大家分享css 高阶技巧,介绍一下如何使用css实现波浪进度条效果,希望对大家有所帮助! 本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 现代 CSS 之高阶图片渐隐消失术现代 CSS 高阶技巧,像 Canvas 一样自由绘图构建样式! 在上两篇中,我们…

    2025年12月24日 好文分享
    200
  • 13 个实用CSS技巧,助你提升前端开发效率!

    本篇文章整理分享13 个前端可能用得上的 css技巧,包括修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色等,希望对大家有所帮助! 修改输入占位符样式、多行文本溢出、隐藏滚动条、修改光标颜色、水平和垂直居中。多么熟悉的场景!前端开发者几乎每天都会和它们打交道,本文收集 13 个CSS技巧,…

    2025年12月24日
    000
  • 巧用距离、角度及光影制作炫酷的 3D 文字特效

    如何利用 css 实现3d立体的数字?下面本篇文章就带大家巧用视觉障眼法,构建不一样的 3d 文字特效,希望对大家有所帮助! 最近群里有这样一个有意思的问题,大家在讨论,使用 CSS 3D 能否实现如下所示的效果: 这里的核心难点在于,如何利用 CSS 实现一个立体的数字?CSS 能做到吗? 不是特…

    2025年12月24日 好文分享
    000
  • CSS高阶技巧:实现图片渐隐消的多种方法

    将专注于实现复杂布局,兼容设备差异,制作酷炫动画,制作复杂交互,提升可访问性及构建奇思妙想效果等方面的内容。 在兼顾基础概述的同时,注重对技巧的挖掘,结合实际进行运用,欢迎大家关注。 正文从这里开始。 在过往,我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化,像是这样: 立即学习“前端…

    2025年12月24日 好文分享
    000
  • 聊聊CSS中怎么让auto height支持过渡动画

    css如何让auto height完美支持过渡动画?下面本篇文章带大家聊聊css中让auto height支持过渡动画的方法,希望对大家有所帮助! 众所周知,高度在设置成auto关键词时是不会触发transition过渡动画的,下面是伪代码 div{ height: 0; transition: 1…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(一)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:给定一个元素,如何实现水平垂直居中?…

    2025年12月24日 好文分享
    300
  • 看看这些前端面试题,带你搞定高频知识点(二)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:页面导入样式时,使用 link 和 …

    2025年12月24日 好文分享
    200
  • 看看这些前端面试题,带你搞定高频知识点(三)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:清除浮动有哪些方式? 我:呃~,浮动…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(四)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:请你谈一下自适应(适配)的方案 我:…

    2025年12月24日 好文分享
    000
  • 看看这些前端面试题,带你搞定高频知识点(五)

    每天10道题,100天后,搞定所有前端面试的高频知识点,加油!!!,在看文章的同时,希望不要直接看答案,先思考一下自己会不会,如果会,自己的答案是什么?想过之后再与答案比对,是不是会更好一点,当然如果你有比我更好的答案,欢迎评论区留言,一起探讨技术之美。 面试官:css 如何实现左侧固定 300px…

    2025年12月24日 好文分享
    000
  • css实现登录按钮炫酷效果(附代码实例)

    今天在网上看到一个炫酷的登录按钮效果;初看时感觉好牛掰;但是一点一点的抛开以后发现,并没有那么难;我会将全部代码贴出来;如果有不对的地方,大家指点一哈。 分析 我们抛开before不谈的话;其实原理和就是通过背景大小以及配合位置达到颜色渐变的效果。 text-transform: uppercase…

    2025年12月24日
    000
  • 看看CSS如何利用计数器来实现长按点赞累积动画

    本篇文章给大家分享一个css自定义计数器的使用小技巧,聊聊如何利用它实现长按点赞累积动画,希望对大家有所帮助! 【推荐学习:css视频教程】 在某条 APP 中,如果长按点赞,会出现这样花里胡哨的动画,如下 立即学习“前端免费学习笔记(深入)”; 这个动画有两部分组成,其中这个随机表情的实现可以参考…

    2025年12月24日 好文分享
    000
  • 详解用SVG给 favicon 添加标识

    怎么使用svg给 favicon 添加标识?下面本篇文章给大家介绍一下使用 svg 生成带标识的 favicon的方法,希望对大家有所帮助! 之前做了一个 Chrome 插件,可以根据地址的不同生成不同的图标,这样可以很方便的区分不同的开发环境,效果如下 主要实现过程其实不复杂,首先获取网站 fav…

    2025年12月24日 好文分享
    000
  • 手把手教你用 transition 实现短视频 APP的点赞动画

    怎么使用纯 css 实现有趣的点赞动画?下面本篇文章就带大家了解一下巧妙借助 transition实现点赞动画的方法,希望对大家有所帮助! 在各种短视频界面上,我们经常会看到类似这样的点赞动画: 非常的有意思,有意思的交互会让用户更愿意进行互动。 那么,这么有趣的点赞动画,有没有可能使用纯 CSS …

    2025年12月24日 好文分享
    000

发表回复

登录后才能评论
关注微信