相信作为前端…

在本文中我们将深入探讨导致页面加载缓慢的常见原因并分享一系列切实可行的优化策略无论你是刚入门的新手还是经验丰富的开发者这些技巧都将帮助你提升网页性能让你的用户体验畅快无阻。

相信作为前端开发者的我们无论是在平时工作还是日常学习当中一旦项目的逻辑较为复杂或者项目代码繁多的时候就可能会遇到页面加载很慢或者在进行页面某个交互的时候这一个交互可能就需要页面等待很久才会完成这个时候就需要我们前端开发来进行优化它(管他个鸟程序能跑就行优化是不可能滴)那么作为前端开发我们该如何对其进行优化这是博主今天要讲的知识

时间构成

在对前端进行性能优化找到最实用的排查方案前我们应先了解一个页面的产生加载所需要的时间包括我们进行的一些操作所花费的时间无非主要是以下三部分组成当然还有一些细微的时间花费比如说TCP连接时间、DNS解析时间等这些就不需要再提了主要还是以下三部分

页面加载时间组成

那当我们发现一个页面加载或者操作的时候很慢我们就需要排查其是因为资源加载缓慢、还是代码执行缓慢、还是页面绘制缓慢。

以后遇到的网站加载缓慢只要排查过这三点并发现和处理导致网站缓慢的原因基本上就会对我们网站的一个运行效率进行一定程度上的优化。

性能分析

这里我们以腾讯视频为例来讲解一下如何发现导致网站缓慢加载的原因因为腾讯视频也是采用了常见的vue框架进行开发也是比较贴近我们大家大部分的工作这里我们就以其进行举例吧

首先我们先F12打开我们的网页控制台然后进入到我们的性能分析的这个面板如果你是英文面板的话就是Performance这里我们就以中文面板举例点击左上角的录制按钮进行页面录制

然后刷新页面等待刷新页面中的符号从叉号又重新变成刷新符号的时候我们就可以点击控制台的停止按钮这样就代表着整个页面已经加载完毕了然后控制台就会分析页面加载的整个报告

我们从控制台给出的报告就能知道我们网站整个的执行一共再哪些地方花费多少时间

第一次使用控制台性能分析这个模块的朋友看到上面控制台的分析报告内容花里胡哨的可能就会看的比较懵这个分析报告其实大部分东西我们没必要知道是啥只需要挑出我们需要知道的重点就可以了如下所示

资源加载打开网络模块该模块我们可以详细的看到每一条资源所花费的时间由于腾讯视频当中图片和视频还是挺多的可以看到网站资源加载的时间还是稍微有点高的这个可以理解

代码执行与页面绘制如果我们发现资源很快就加载完毕但是页面很慢这个时候我们就需要了解一下是否是JS代码执行的问题导致的通过下面的摘要模块我们可以看到我们的执行脚本所花费的时间当然也包括了页面渲染的时间

除此之外我们也可以勾选性能分析模块中的屏幕截图和内存按钮然后再重新录制我们勾选上这两个按钮之后就可以看到网站的每一个时间点的屏幕的当前截图以及它的一个内存占用情况。

如下图所示可以看到有一个屏幕截图在这个地方我们可以清晰地看到每一个时刻当前网站屏幕的单层状态是什么

然后我们可以鼠标点击选中屏幕截图的一部分控制台就会给我们展示当前这一部分中所产生的资源、代码以及页面绘制的时间消耗更加细致的分析某一个时间段内产生时间消耗如下所示

如果我们想分析对页面进行某个交互的时候我们也可以通过性能分析面板进行处理通过点击屏幕录制然后进行页面的某项操作当操作完成之后点击控制台中的停止录制的按钮即可对我们当前进行的页面交互所产生的时间消耗问题进行分析。

如下我们通过录制一下我们从首页切换到动漫频道的操作来进行分析我们当前所产生的时间消耗当我们切换到动漫频道的时候图片资源以及代码执行所花费的时间我们也都能看到

当然除了控制台的性能分析我们也可以通过代码来实现以数据化的形式查看页面的各种时间其方法为window.performance即在项目中的index.html写入一段脚本通过方法对象来查看各种数据如下我们在控制台输入该函数回车

从上图我们可以看到该函数打印了相关的数据例如memory代表内存timing代表各种各样的时间点这里我们可以在我们项目的index.html中插入一段脚本如下给后端发送一段请求然后把window.performance作为数据传输给后端后端拿到数据之后就可以知道各个用户在访问网站的时候所花的一些性能时间从而知晓我们的项目在用户的电脑上表现如何。

web-vitalsjs库测量

如果出现资源加载时间较长的情况作为前端我们该如何处理这个问题呢这里博主提供一些简单的思路后期通过更加详细的文件来讲解如何细致的处理

1定位资源如果你通过上面讲解的性能分析查看到了资源加载占据较大时间的情况下你就需要定位到底是哪一个资源文件过大延迟了加载时间导致网站变得缓慢了如果存在了一些大文件但不是网站刚开始加载的时候就必须全部需要的这里我们可以采用异步加载的方式。

举例类似图片懒加载。

2tree-shaking利用tree-shaking去尽量减少我们的代码体积需要做到再引入其他第三方库的时候尽量采用按需引入然后把一些低版本的库升级到按需引入的版本。

3gzip压缩一般我们用nginx返回资源的时候会进行自动的压缩

4构建工具压缩利用构建工具对代码进行压缩这个我们在对项目进行打包的时候也是自动进行了。

如果出现代码执行加载时间较长的情况作为前端我们该如何处理这个问题呢这里博主提供一些简单的思路后期通过更加详细的文件来讲解如何细致的处理

一般情况下js代码执行是很难导致执行时间过长的出现代码执行较长的情况通常只有使用了大量的循环操作导致我们js代码执行缓慢这个时候我们往往需要去测量到底是哪段代码导致了代码执行的时间加载较长从而来进行优化。

那么我们如何在js代码中去精确测量到底是哪段代码导致了时间加载过长呢其执行化的时间是多少这里我们给出了两种方案如下

console.time浏览器支持性能好但是精度测量较差示例代码如下所示两个console函数用于测量两个点之间代码执行时间的浏览器控制台函数

script

document.createElement(div)div.innerHTML

hello

如下代码通过测量代码执行的时间可以看到代码一般都执行在15ms作用而当我把向div添加元素内容的代码注释掉之后可以看到代码执行的时间则变为2ms左右由此可以得出当删除逻辑代码中不必要的代码可能会大大提高代码的执行效率

performance.now更加精确但是浏览器支持性能可能会出现问题(一般推荐这个)示例代码如下

script

document.createElement(div)div.innerHTML

hello

注意上面的测量方式仅仅是测量同步的时间逻辑代码中的异步操作所产生的时间消耗是不会被算进结果里面的所以即使你在逻辑代码中设置了一个定时器得到的计算结果还是同步时间的结果和你异步设置的多少的时间执行没有任何关系这里需要注意。