前端开发怎样查看、优化网站页面性能

530 阅读2分钟

有时候页面卡到爆,这个时候就需要通过插件来查看一下页面的性能并且找出一些对应的损耗点,然后进行一些优化,当然,优化是非常复杂的,不过更多时候通过插件查看性能,我们也可以让我们的页面变得更好。

首先用微软最新的edge,因为它的拓展非常强大,相比谷歌不需要科学上网。

然后用浏览器访问一个http/https的页面,这里我就用淘宝来测试。

然后打开开发者工具(f12快捷键),点击这个lighthouse。

然后可以看到这个选项卡的右边有很多菜单,这里我就勾选性能以及桌面模式。

然后点击生成报告,接着就等待报告的生成。

之后就可以看到有图表显示出来了,可以看到淘宝的性能几乎100分,不得不感叹一句,牛皮。

看到别人的网站那么牛皮,这个时候就可以打开自己的网站看看自己菜不菜。可以看到得分不高。然后可以往下滚动,查看opportunity,这个选项是提示我们可以从哪些地方优化,此处提到了几点:

1 . 去除无用的js

2 . 设置不在可视范围内的图片懒加载

3 . 使用适当尺寸的图片

知道这些优化点之后就可以去优化项目了。

此外,继续下拉还有一个诊断提示

可以看到有资源缓存,dom节点数量 , 图片没有宽高以及监听器没有使用passive:true,所以页面的性能有可能是这些原因导致的。这个时候就可以分析项目的代码,以及资源文件是否使用协商缓存,强缓存等策略了。

当然,这些诊断只是有一定的依据,并不是非要修改不可,可以根据自己的项目业务去衡量。