测试~位运算符与普通运算速度区别

1. 测试想法

在读js 红宝书的时候，在书上看到位运算属于底层运算比直接运算速度要快，因此想要验证下

2.测试代码

 <!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试位运算符速度</title>
</head>
 
<body>
  <script>
    const loopNum = 999999999
    const runNum = 50
 
    function loop (loopNum) {
      const start1 = performance.now()
      for (let index = 0; index < loopNum; index++) {
        let res = ~25
      }
      const end1 = performance.now()
      const start2 = performance.now()
      for (let index = 0; index < loopNum; index++) {
        let res = -25 - 1
      }
      const end2 = performance.now()
      // 多数情况下 位操作符更快 但是差距有限  仅有几十ms 百分之3左右 580 / 597 除非极限条件下 否则平常开发 基本无区别
      return {
        time1: end1 - start1,
        time2: end2 - start2
      }
 
    }
    const runData = []
    for (let index = 0; index < runNum; index++) {
      runData.push(loop(loopNum))
    }
    const finalRes = runData.reduce((a, b) => {
      const res = {
        time1: a.time1 + b.time1,
        time2: a.time2 + b.time2
      }
      return res
    }, { time1: 0, time2: 0 })
 
    console.log('测算结果', finalRes) // zdz-log
    console.log('测算平均值', finalRes.time1 / runNum, finalRes.time2 / runNum) // zdz-log
 
 
 
 
  </script>
</body>
 
</html>

3.测试结果

前面为位运算结果，后面为直接计算结果,计算运算次数9999999次，循环50次取平均值
虽然电脑运行状态在某一时刻都是不同的，实验并没有保证完全其余变量相同，但是结果大致是准确的
根据结果可以看出两者差距很小，在正常业务代码中的运算次数不会导致两者存在差距

结果1.png
结果2.png

4.位运算的一个应用

位预算在React中用作了状态标记和一些类型判断

优点

节省内存：使用二进制可以将多个状态或类型合并到一个整数中，从而减少了存储这些信息所需的内存空间。
提高效率：位运算操作相比于其他逻辑运算通常更加高效，可以在一条指令中完成多个状态或类型的判断和设置，从而提高了程序的执行效率。
便于扩展：使用位掩码技术可以轻松地添加新的状态或类型，只需在现有的位上进行操作，而不需要重新定义数据结构。
代码简洁性：通过使用位运算，可以将多个状态或类型的操作集中在一处，使代码更加清晰简洁，减少了重复的逻辑判断

举个简单列子,如果要记录两个灯泡的开关有几种方式

1. 两个变量

 let lamp1 = true
let lamp2 = false
 
// 修改 
lamp1 = false
lamo2 = true

2.一个变量

 let lamp = []
lamp.push('lamp1')
// 数组中无对应灯名字 代表关闭
lamp = lamp.filter(item => item === 'lamp1')

3 使用位运算

通过常量预先定义对应状态可以在一个变量上保存多个状态,而仅仅使用一个数值就可以做到

 // 第一位0 与第二位0 代表灯1 灯2 都是关闭
const lamp1 = 0b10
const lamp2 = 0b01
const lamp12 = 0b11
let lamp = 0b00 
// 开启灯1
lamp = lamp | lamp1
console.log(lamp.toString(2))
// 开启灯2
lamp = lamp | lamp2
console.log(lamp.toString(2))
// 关闭灯1
lamp = lamp & ~lamp1
console.log(lamp.toString(2))

运行结果.png

posted @ 2024-04-15 11:12 story.Write(z) 阅读(38) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 有意思的JavaScript代码写法【持续更新，欢迎留言分享有趣代码】

· [Violation] 'click' handler took 429ms

· Java基础09：逻辑运算符、位运算符

· Day05--位运算符

· |NO.Z.00047|——————————|BigDataEnd|——|Java&运算符.V14|——|Java.v14|运算符.v14|位运算符|编程|

阅读排行：
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？

公告

test

昵称： story.Write(z)
园龄： 10个月
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

coderzdz

个人记录

测试~位运算符与普通运算速度区别

1. 测试想法

2.测试代码

3.测试结果

4.位运算的一个应用

公告

搜索

常用链接

随笔分类 (83)

随笔档案 (81)

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>测试位运算符速度</title>
	</head>

	<body>
	<script>
	const loopNum = 999999999
	const runNum = 50

	function loop (loopNum) {
	const start1 = performance.now()
	for (let index = 0; index < loopNum; index++) {
	let res = ~25
	}
	const end1 = performance.now()
	const start2 = performance.now()
	for (let index = 0; index < loopNum; index++) {
	let res = -25 - 1
	}
	const end2 = performance.now()
	// 多数情况下位操作符更快但是差距有限仅有几十ms 百分之3左右 580 / 597 除非极限条件下否则平常开发基本无区别
	return {
	time1: end1 - start1,
	time2: end2 - start2
	}

	}
	const runData = []
	for (let index = 0; index < runNum; index++) {
	runData.push(loop(loopNum))
	}
	const finalRes = runData.reduce((a, b) => {
	const res = {
	time1: a.time1 + b.time1,
	time2: a.time2 + b.time2
	}
	return res
	}, { time1: 0, time2: 0 })

	console.log('测算结果', finalRes) // zdz-log
	console.log('测算平均值', finalRes.time1 / runNum, finalRes.time2 / runNum) // zdz-log




	</script>
	</body>

	</html>

	let lamp1 = true
	let lamp2 = false

	// 修改
	lamp1 = false
	lamo2 = true

	let lamp = []
	lamp.push('lamp1')
	// 数组中无对应灯名字代表关闭
	lamp = lamp.filter(item => item === 'lamp1')

	// 第一位0 与第二位0 代表灯1 灯2 都是关闭
	const lamp1 = 0b10
	const lamp2 = 0b01
	const lamp12 = 0b11
	let lamp = 0b00
	// 开启灯1
	lamp = lamp \| lamp1
	console.log(lamp.toString(2))
	// 开启灯2
	lamp = lamp \| lamp2
	console.log(lamp.toString(2))
	// 关闭灯1
	lamp = lamp & ~lamp1
	console.log(lamp.toString(2))