前端性能测试
<!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> <div><button onclick="alert(` 1. 运算测试，计算十亿次浮点数相加和相乘，统计时间； 2. 连续内存读写测试，创建长度为十万的数组，进行一百万次随机位置读写，统计时间； 3. 随机排序测试，创建长度为一万的数组，进行随机排序100次，统计时间； 4. Dom性能测试，重复执行一千次浏览器节点插入和计算尺寸，统计时间； 5. Canvas性能测试，在画布上进行1600次矩形绘制，统计时间； 6. Webgl支持测试，测试浏览器是否支持webgl； 7. GPU测试，使用显卡渲染3000个三角面，时长4秒，统计平均帧率；`)">测试内容说明</button></div> <div id="title"> <button onclick="start()">开始测试</button> </div> <div id="result"></div> <div id="renderArea"> <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>