页面加载慢排查与解决方案

作者:Yuan Tang

更新于:6 个月前

字数统计:596 字

阅读时长:2 分钟

排查

页面加载的时间构成主要分为以下几点：

资源加载（占大头）
代码执行（有可能会慢）
页面绘制（一般情况很快）

以网易云音乐官网为例，聊聊如何排查页面加载的速度。打开控制台，选择性能，点击录制后刷新页面。页面绘制完毕后停止即可生成资源加载与代码脚本执行的时间，如下图所示：

它不仅可以测页面加载所要花费的时间，也可测试点击按钮后做某些事件所需要的时间。如下图所示：

解决方法

一般解决思路为：

找到是哪个文件过大导致
如果存在一些文件比较大，又不是马上需要，可以异步加载
利用好 tree-shaking ，尽量使用按需引入，升级库到支持按需引入的版本
进行 gzip 压缩
利用 webpack 、vite 对代码进行压缩

JS执行太慢

一般情况下的操作很难导致 js 执行时间过长，通常只有大量的循环会导致。所以需要测量是那段代码导致的进行对应的优化。

计算代码时间也有两种方法：

console.time() 支持性好，但是精度差一些

代码如下：

html

<div id="test"></div>

<script>
	console.time()
    for(let i = 0; i < 10000; i++) {
        let div = document.querySelector('#test')
        div.innerHTML = i
    }
    console.timeEnd()
</script>

打印多次后结果会有一定的误差，最终输入结果即代码执行所需的时间。如果把盒子文本内容渲染的代码注释掉，时间会更短。

performance.now -推荐，更加精确，但是可能支持性有问题。

代码如下：

html

<div id="test"></div>

<script>
	let a = performance.now()
    for(let i = 0; i < 10000; i++) {
        let div = document.querySelector('#test')
        div.innerHTML = i
    }
    let b = performance.now()
    console.lo(b - a)
</script>

不过他只能检测同步任务的代码，异步任务如 setTimeout 他无法检测到。

window.performance 可以在项目的 index.html 写入一段脚本，通过 window.performance 对象来查看各种数据。属性如下图所示：
js
```
window.onload = () {
    axios({
        method: 'get',
        data: window.performance
    })
}
```

一些工具

可以利用一些现成的工具，如：

可视化测评网站性能 - lighthouse
JS 库测量 - web-vitals

Contributors

Yuan Tang

页面加载慢排查与解决方案 ​

排查 ​

解决方法 ​

JS执行太慢 ​

一些工具 ​

Contributors ​

页面加载慢排查与解决方案

排查

解决方法

JS执行太慢

一些工具

Contributors