前端性能测试

发布时间：2026/10/21 1:07:58

前端性能测试
!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title前端性能测试/title /head body divbutton onclickalert( 1. 运算测试计算十亿次浮点数相加和相乘统计时间 2. 连续内存读写测试创建长度为十万的数组进行一百万次随机位置读写统计时间 3. 随机排序测试创建长度为一万的数组进行随机排序100次统计时间 4. Dom性能测试重复执行一千次浏览器节点插入和计算尺寸统计时间 5. Canvas性能测试在画布上进行1600次矩形绘制统计时间 6. Webgl支持测试测试浏览器是否支持webgl 7. GPU测试使用显卡渲染3000个三角面时长4秒统计平均帧率)测试内容说明/button/div div idtitle button onclickstart()开始测试/button /div div idresult/div div idrenderArea div/div /div script const title document.getElementById(title) const result document.getElementById(result) const renderArea document.getElementById(renderArea) const items 7 async function start() { result.innerHTML title.innerText 正在进行运算测试(1/${items}) await sleep() testcalc() title.innerText 正在进行内存读写测试(2/${items}) await sleep() testMemory(); title.innerText 正在进行随机排序测试(3/${items}) await sleep() testSort(); title.innerText 正在进行DOM性能测试(4/${items}) await sleep() testDom() await sleep() renderArea.innerHTML title.innerText 正在进行Canvas性能测试(5/${items}) await sleep() await testCanvas() await sleep() renderArea.innerHTML title.innerText 正在进行Webgl检查测试(6/${items}) await sleep() const canvas document.createElement(canvas) if (canvas.getContext(webgl) || canvas.getContext(experimental-webgl)) { const p document.createElement(p) p.innerText Webgl测试结果支持 result.appendChild(p) await sleep() title.innerText 正在进行GPU性能测试约4秒(7/${items}) await sleep() await testGpu() } else { const p document.createElement(p) p.innerText Webgl测试结果不支持, 无法进行显卡测试 result.appendChild(p) title.innerText 测试完毕结果如下 renderArea.innerHTML } } function sleep(time) { return new Promise((resolve) { setTimeout(() { resolve() }, time || 500); }) } function testcalc() { const start new Date().valueOf(); let sum 0; for (let i 0; i 1000; i 0.01) { for (let j 0; j 100; j 0.01) { sum i j; } } let mul 0; for (let i 0; i 1000; i 0.01) { for (let j 0; j 100; j 0.01) { mul i * j; } } const end new Date().valueOf(); const p document.createElement(p) p.innerText 运算测试结果${end - start}ms result.appendChild(p) } function testMemory() { const start new Date().valueOf(); const arr new Array(100000).fill(0).map(() Math.random().toString(16).slice(2, 10)); let str for (let i 0; i 1000000; i) { const index Math.floor((Math.random() * 100000)) str arr[index] } const end new Date().valueOf(); const p document.createElement(p) p.innerText 内存读写测试结果${end - start}ms result.appendChild(p) } function testSort() { const start new Date().valueOf(); const arr new Array(10000).fill(0).map(() Math.random() * 10000); for (let i 0; i 100; i) { arr.sort(() Math.random() - 0.5) } const end new Date().valueOf(); const p document.createElement(p) p.innerText 随机排序测试结果${end - start}ms result.appendChild(p) } function testDom() { const start new Date().valueOf(); let height 0; for (let i 0; i 1000; i) { const div document.createElement(div) div.style.height 1px div.style.backgroundColor #${Math.random().toString(16).slice(2, 8)} renderArea.appendChild(div) height renderArea.offsetHeight } const end new Date().valueOf(); const p document.createElement(p) p.innerText DOM性能测试结果${end - start}ms result.appendChild(p) } async function testCanvas() { const start new Date().valueOf(); renderArea.innerHTML const canvas document.createElement(canvas) canvas.style.height 800px canvas.style.width 1000px canvas.style.backgroundColor gray canvas.height 800; canvas.width 800; renderArea.appendChild(canvas) const ctx canvas.getContext(2d) await sleep() for (let i 1; i 799; i) { ctx.fillStyle #${Math.random().toString(16).slice(2, 8)} ctx.fillRect(0, 0, i 199, 800) ctx.fill() } for (let i 1; i 799; i) { ctx.fillStyle #${Math.random().toString(16).slice(2, 8)} ctx.fillRect(i, 0, 800 - i, 800) ctx.fill() } const end new Date().valueOf(); const p document.createElement(p) p.innerText Canvas性能测试结果${end - start}ms result.appendChild(p) } function testGpu() { // 获取渲染区域的div元素 const renderArea document.getElementById(renderArea); // 创建canvas元素 const canvas document.createElement(canvas); canvas.style.height 800px canvas.style.width 1000px canvas.style.backgroundColor gray canvas.height 800; canvas.width 800; renderArea.appendChild(canvas); // 获取WebGL上下文 const gl canvas.getContext(webgl) || canvas.getContext(experimental-webgl); // 编写顶点着色器程序 const vertexShaderSource attribute vec2 a_position; uniform vec2 u_resolution; void main() { // 将屏幕坐标转换为裁剪空间坐标 vec2 clipspace (a_position / u_resolution) * 2.0 - 1.0; gl_Position vec4(clipspace * vec2(1, -1), 0, 1); } ; // 编写片元着色器程序 const fragmentShaderSource precision mediump float; void main() { gl_FragColor vec4(1, 0, 0, 1); // 红色 } ; // 创建顶点着色器 const vertexShader gl.createShader(gl.VERTEX_SHADER); gl.shaderSource(vertexShader, vertexShaderSource); gl.compileShader(vertexShader); // 创建片元着色器 const fragmentShader gl.createShader(gl.FRAGMENT_SHADER); gl.shaderSource(fragmentShader, fragmentShaderSource); gl.compileShader(fragmentShader); // 创建着色器程序 const program gl.createProgram(); gl.attachShader(program, vertexShader); gl.attachShader(program, fragmentShader); gl.linkProgram(program); // 使用着色器程序 gl.useProgram(program); // 获取顶点属性的位置 const positionLocation gl.getAttribLocation(program, a_position); // 创建缓冲区存储顶点数据 const positionBuffer gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); // 生成3000个随机位置的三角面顶点数据 const positions []; for (let i 0; i 3000; i) { const x1 Math.random() * canvas.width; const y1 Math.random() * canvas.height; const x2 Math.random() * canvas.width; const y2 Math.random() * canvas.height; const x3 Math.random() * canvas.width; const y3 Math.random() * canvas.height; positions.push(x1, y1, x2, y2, x3, y3); } // 将顶点数据写入缓冲区 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW); // 设置画布分辨率uniform变量 const resolutionLocation gl.getUniformLocation(program, u_resolution); gl.uniform2f(resolutionLocation, canvas.width, canvas.height); let frameCount 0; gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT); // 启用顶点属性数组 gl.enableVertexAttribArray(positionLocation); // 将缓冲区绑定到顶点属性 gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0); let needstop false; setTimeout(() { needstop true; }, 4000); function render() { // 绘制三角面 gl.drawArrays(gl.TRIANGLES, 0, positions.length / 2); // 统计运行时间如果超过10秒则停止测试 if (!needstop) { frameCount; requestAnimationFrame(render) } else { const endTime performance.now(); const averageFps frameCount / 4; // 打印平均帧率 // 将结果显示在页面上 const p document.createElement(p) p.innerText GPU性能测试结果 ${averageFps.toFixed(2)}fps result.appendChild(p) renderArea.innerHTML title.innerText 测试结束测试结果如下 } } // 启动渲染循环 requestAnimationFrame(render); } /script /body /html

相关新闻

深入解析DDR2/mDDR内存控制器：调度算法、地址映射与低功耗设计

深入解析DDR2/mDDR内存控制器：调度算法、地址映射与低功耗设计

1. 项目概述与核心价值在嵌入式系统、移动设备和各类计算平台的设计中，内存子系统往往是决定整体性能、功耗和稳定性的关键瓶颈。处理器（CPU/SoC）的速度日新月异，但动态随机存取存储器（DRAM）的访问延迟和带…

2026/10/21 0:14:09 阅读更多 →
AM335x引脚复用配置详解：从寄存器操作到设备树实践

AM335x引脚复用配置详解：从寄存器操作到设备树实践

1. 项目概述：从硬件引脚到软件配置的桥梁 在嵌入式系统开发中，尤其是基于德州仪器（TI）AM335x这类高度集成的应用处理器时，我们经常会遇到一个核心矛盾：芯片内部集成了丰富的外设，如以太网MAC&am…

2026/10/20 13:53:33 阅读更多 →
360获颁首批智能体身份码节点 深度参编智能体互联系列国家标准

360获颁首批智能体身份码节点 深度参编智能体互联系列国家标准

7月21日，《人工智能 智能体互联》系列国家标准应用推广专题会在北京中关村展示中心召开，会上正式举行智能体身份码节点首批发放仪式。360集团获颁首批智能体身份码节点，成为我国智能体互联国家标准落地进程的核心参与方。本次专题会由全国信息…

2026/10/19 14:51:46 阅读更多 →

最新新闻

Docker网络完全指南：从命名空间、网桥到Overlay跨主机通信

Docker网络完全指南：从命名空间、网桥到Overlay跨主机通信

1. 为什么网络是容器化应用最容易翻车的地方先从一个非常典型的场景说起。某团队开发了一个微服务Demo，容器里跑着前端、后端、数据库三个进程，本地开发时一切正常。结果一到部署环境，前端服务就是连不上后端接口，后端日志里全是连…

2026/10/21 1:54:35 阅读更多 →
UniHacker：一次看懂这个 Unity 全版本修补工具能做什么、怎么跑

UniHacker：一次看懂这个 Unity 全版本修补工具能做什么、怎么跑

UniHacker：一次看懂这个 Unity 全版本修补工具能做什么、怎么跑 【免费下载链接】UniHacker 为Windows、MacOS、Linux和Docker修补所有版本的Unity3D和UnityHub 项目地址: https://gitcode.com/GitHub_Trending/un/UniHacker UniHacker 是一个基于 C# / Aval…

2026/10/21 1:54:35 阅读更多 →
Linux安全提权：普通用户执行root脚本的sudo与setuid全解析

Linux安全提权：普通用户执行root脚本的sudo与setuid全解析

我是一个在服务器上折腾了七八年的老运维，今天想好好聊聊 Linux 权限管理里一个非常实用、但也经常被搞出安全问题的操作：如何让普通用户安全执行 root 权限的特定脚本。很多人一遇到“普通用户要执行管理员操作”的需求，第一反应就是给账号加…

2026/10/21 1:54:35 阅读更多 →
小体积快充新赛道：协议芯片集成才是体积缩小的胜负手

小体积快充新赛道：协议芯片集成才是体积缩小的胜负手

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/21 1:54:35 阅读更多 →
AI芯片软硬件协同设计：算子映射、指令集与编译器适配全解析

AI芯片软硬件协同设计：算子映射、指令集与编译器适配全解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/21 1:54:35 阅读更多 →
浏览器里跑三国杀：noname 网页版上手体验

浏览器里跑三国杀：noname 网页版上手体验

浏览器里跑三国杀：noname 网页版上手体验 【免费下载链接】noname 项目地址: https://gitcode.com/GitHub_Trending/no/noname 周三深夜加班结束，发现手边的备用电脑只装了浏览器，装不了任何客户端，又想在睡前打一局三国杀…

2026/10/21 1:53:35 阅读更多 →

日新闻

统一内存+量化：锐龙AI Max PRO 400如何本地跑320B大模型

统一内存+量化：锐龙AI Max PRO 400如何本地跑320B大模型

这段时间硬件圈和AI圈都在传一个事：AMD锐龙AI Max PRO 400系列把最高192GB统一内存搬进了PC形态的产品里，按宣传口径，本地跑320B参数的大家伙不再是纸面概念。我第一反应倒不是“内存真大”，而是这话背后的含金量——它把过去只能…

2026/10/21 0:00:11 阅读更多 →
AI助手深度使用体验：对话质量、长文本处理与指令遵循如何留住用户

AI助手深度使用体验：对话质量、长文本处理与指令遵循如何留住用户

1. 从“封号重开”这个行为说起：用户到底在追求什么“封号重开”这四个字，放在任何产品语境里都带着一股决绝的味道。一个账号从零开始积累使用记录、调教偏好、沉淀工作流，背后是大量的时间和精力成本。正常情况下，没有人愿意主动…

2026/10/21 0:00:11 阅读更多 →
ROS中YOLOv3工程落地：通信同步、坐标变换与性能调优

ROS中YOLOv3工程落地：通信同步、坐标变换与性能调优

1. 为什么在ROS里硬刚YOLOv3不是“炫技”，而是工程落地的必经之路我第一次在某高校机器人实验室看到那台搭载Jetson TX2的移动底盘原地打转、反复识别错垃圾桶时，就意识到：单纯跑通darknet_ros demo和真正让YOLOv3在ROS里“干活”&#xff0c…

2026/10/21 0:00:11 阅读更多 →

周新闻

基于GMM的语音识别系统原理与MATLAB实现详解

基于GMM的语音识别系统原理与MATLAB实现详解

说到基于高斯混合模型（GMM）的语音识别系统，很多人第一反应就是一堆数学公式，觉得门槛很高。但如果你真的在MATLAB里把它落地跑通，会发现核心其实就是三件事：把声音变成特征向量，用GMM给每个类别…

2026/10/20 10:02:13 阅读更多 →
数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理入门：反白、灰度化、调色板修改与导出txt实践

数字图像处理这四个字听起来挺唬人，但落到具体操作上，无非就是让计算机按你的想法“摆弄”像素。我在一个模拟项目X里用了一套特别经典的基础处理流程：对图像做反白、改调色板、彩色转灰度，最后把像素数据导出成txt文件。单看每一…

2026/10/20 20:43:59 阅读更多 →
机器人大脑技术盘点：具身智能的感知、决策与数据闭环

机器人大脑技术盘点：具身智能的感知、决策与数据闭环

如果你的信息流最近也天天刷到“机器人大脑”这个词，你会发现一个很有意思的现象：每个人说的“大脑”根本不是同一个东西。有人指的是大语言模型，有人指的是运动控制系统，还有人指的是能理解物理世界的端到端模型。在2026年这个时…

2026/10/20 2:50:50 阅读更多 →

月新闻

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 10:02:08 阅读更多 →
Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:17 阅读更多 →
黑夜航拍船只数据集训练YOLOV5模型全流程解析

黑夜航拍船只数据集训练YOLOV5模型全流程解析

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */#content_views .toc,/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */#content_views.markdown_views > p:empty:has(+ .toc),#content_views.markdown_views …

2026/10/20 9:50:45 阅读更多 →