前端性能测试

!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