前端页面渲染优化——performance工具分析优化

最新推荐文章于 2024-09-15 15:04:22 发布

Jiabing Yu

最新推荐文章于 2024-09-15 15:04:22 发布

阅读量1.5k

点赞数 2

分类专栏：性能优化文章标签： javascript 前端性能优化 performance

本文链接：https://blog.csdn.net/qq_41308489/article/details/122482141

版权

性能优化专栏收录该内容

3 篇文章 0 订阅

订阅专栏

首先这是一个代码运行计算大量逻辑的优化。

（1）场景

当JS中存在大量数据的逻辑计算时
非静态资源优化
代码层次上的优化

（2）工具

Chrome Devtools 的performance, 在浏览器按下F12就可以找到。

（3）情况

当我们的页面在进行大量的数据逻辑运算时，我们的页面要等待数据计算完毕后才开始渲染加载完毕。首先这是因为页面渲染它是一个宏任务，在我们的task任务里面。主线程的main包含的task里也要进行js的计算，所以就造成了阻塞。
在这里插入图片描述

（4）我们创建一个页面，代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <title>未优化</title>
</head>
<body>
        
    <script>
        let t1, t2 = 0
        t1 = new Date() // 页面开始加载
        window.onload = (event) => {
            t2 = new Date() // 页面加载完毕
            console.log(`页面加载完毕用时: ${t2 - t1}ms`)
        }
    </script>
    <script>
        const a = () => {
            b()
        }

        const b = () => {
            let total = 0
            for(let i = 0; i < 10*10000*10000; i++) {
                total += i
            }
            console.log('1 : ', total)
        }

        a()
    </script>

    <script>
        const c = () => {
            d()
        }
        const d = () => {
            let total = 0
            for(let i = 0; i < 10*10000*10000; i++) {
                total += i
            }
            console.log('2 : ', total)
        }

        c()
    </script>
</body>
</html>

分析

页面加载时间:

// 控制台输出:
1 :  499999999067109000
2 :  499999999067109000
页面加载完毕用时: 3065ms

通过performance工具分析

发现主线程的task宏任务里面有两个long task。而正是这些long task 导致页面渲染时阻塞状态。

我们可以进去对应的源码查看：
在这里插入图片描述

这些就是我们代码在运行的时间，我们找到了运行很长时间的代码，也就是long task 对应的 b函数 和 d函数。现在我们只要消灭它们（long task）就可以让我们的页面快速加载完毕。

（5）开始优化

不放在主线程跑我们的函数，用worker工作者线程去跑
充分利用多线程的作用

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>优化后</title>
</head>
<body>

    <script>
        let t1, t2 = 0
        t1 = new Date() // 页面开始加载
        window.onload = (event) => {
            t2 = new Date() // 页面加载完毕
            console.log(`页面加载完毕用时: ${t2 - t1}ms`)
        }
    </script>

    <script>
        // 用worker线程优化 promise封装 postMessage本就使用异步的方式传递参数
        const runWorker = (url, num) => {
            return new Promise((resolve, reject) => {
                const worker = new Worker(url)
                worker.postMessage(num)
                worker.onmessage = (evt) => {
                    resolve(evt.data)
                }
                worker.onerror = reject
            })
            
        }
    </script>
    
    <script>
        const a = () => {
            b()
        }
        const b = () => {
            // 把b函数之前的数据逻辑的处理过程交给worker.js线程中的message事件去处理
            runWorker('./worker.js', 10*10000*10000).then(res => {
                console.log('res 01: ', res)
            }).catch(err => {
                console.log('err 01: ', err)
            })
        }
        a()
    </script>

    <script>
        const c = () => {
            d()
        }
        const d = () => {
            // 把d函数之前的数据逻辑的处理过程交给worker02.js线程中的message事件去处理
            runWorker('./worker02.js', 10*10000*10000).then(res => {
                console.log('res 02: ', res)
            }).catch(err => {
                console.log('err 02: ', err)
            })
        }
        c()
    </script>
</body>
</html>

worker.js和worker02.js负责写我们的计算逻辑

// 这里写b函数的处理逻辑

addEventListener('message', (evt) => {
    console.log(evt)
    let total = 0, num = evt.data
    for (let i = 0; i < num; i++) {
        total += i
    }
    console.log('worker.js 01 : ', total)
    // 最后可以把结果postMessage回去
    postMessage(total)
})