• [JavaScript] 用电脑计算圆周率评估计算性能

    据说全球第一台计算机是在1946年面世的，那它的计算性能是怎样的，至今2022年，发展这么多年，现在的普通计算机性能又是怎样的呢，接下来做一个实验，评估计算性能

    文章目录

    1. 设计

    先写一个页面文件index.html，页面代码如下

    DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
		<title>计算圆周率 PItitle>
	head>
	<body>
		<div id="box">div>
		<div style="padding: 10px;">
			<input type="range" disabled id="box3" value="0" /><span id="box4">span>
			<div id="box2" style="height: 40px;">div>
		div>
		<div>
			<button id="btn1">开始button>
			<button id="btn2" disabled>停止button>
		div>
		<script>
			window.onload=()=>{
				//...处理的脚本
			}
		script>
	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    2. 编程

    再写好处理的脚本，代码如下

    let isContinue = false;
const elements = {};
const Max = 100000;

['box','box2','box3','box4','btn1','btn2'].forEach(box=>elements[box]=document.getElementById(box));
elements.box.innerText = `计算 PI=${Math.PI}`;
elements.box3.setAttribute('value',0);
elements.box3.setAttribute('max',Max);
//开始按钮点击事件
elements.btn1.onclick=()=>{
	elements.btn1.setAttribute('disabled',true);
	elements.btn2.removeAttribute('disabled');
	
	let p = 0;
	let c = 0;			
	let t = Date.now();
	const calc = () => {
		//...此处省略计算圆周率的
		
		//更新显示
		let time = (Date.now()-t)/1000;
		elements.box2.innerText = `当前值：${res}\n耗时:${time.toFixed(1)}s`;
		elements.box3.setAttribute('value',c);
		elements.box4.innerText = `${c}/${Max}`;
		
		if(!isContinue) return;
		if(c<Max){
			c++
			setTimeout(calc,1);
			return;
		}
		elements.btn2.setAttribute('disabled',true);
	};
	isContinue=true;
	calc();
};
//停止按钮点击事件
elements.btn2.onclick=()=>{
	elements.btn1.removeAttribute('disabled');
	elements.btn2.setAttribute('disabled',true);
	
	isContinue=false;
};

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43

    然后，就是找计算圆周率的公式了，将如下代码写到上面注释了省略代码以下

    let n = c*2;
let a = (n+2)*(n+3)*(n+4);
if (c%2==0) p += 1/a;
else p -= 1/a;

let res = 3 + 4*p;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    💡 小提示
    计算圆周率的公式是：PI = 3 + 4 × ( 1÷(2×3×4) - 1÷(4×5×6) + 1÷(6×7×8) … )
    从中找出规律，会发现，其中c是循环次数，p是括号内累计的数，res是计算结果

    3. 测试

    最后，用浏览器打开页面index.html看看，点击开始按钮，细品一杯茶，等待测试结果，计算完的话，至少要等到10分钟哦
    在这里插入图片描述

    💡 小提示
    可以用不同电脑浏览器或者手机浏览器上测试，会发现测试结果中的 相同时间内 计算耗时不一样，肯定是完成相同的数量100000 内耗时越短的，就是计算最快的，也是计算性能最好的

    💡要注意
    此方法是测试评估浏览器的网页脚本处理速度的，就相当于电脑的计算速度吧，
    计算精度位数是有限的，超过精度位数是没办法计算的，只有用笨方法，类似与小学数学里简单的除法，但是这样算得慢，因此，计算超过精度位数的数是很耗时间的，圆周率是无理数，可见计算圆周率是永远没有止境的吧。

  • 相关阅读:
    数据结构之堆 → 不要局限于堆排序
    node实战——koa给邮件发送验证码并缓存到redis服务（node后端储备知识）
    狂神说笔记 快速入门Nginx
    新电脑重装系统好吗？电脑重装系统的好坏
    “优化STM32单片机处理大量网络数据的方法“
    预约陪诊系统开发，跨省就医也能省时省力
    10 | Spark 查找每个单词的最大行号
    Jest和Mocha两者之间有哪些区别？
    面试面经|Java面试MySQL面试题
    webGL编程指南 第五章 MultiAttributeSize
  • 原文地址：https://blog.csdn.net/zs1028/article/details/127947061