lighthouse
在前端开发中，总会遇到一些项目优化问题。但是所谓优化，就是要比之前更好。那么这个"之前我们从何判断"？所以我们需要找到一些指标，有指标才能判断所谓的优化。今天学习的时候发现了一个好用的小工具——lighthouse。可以给你的页面做一个性能的打分，比较值得关注的是这个小工具，可以给你一些对html、css、js、缓存处理、图片的小建议。这里我测试了两个网址提供一个参考
案例测试
B站测试
英雄联盟官网测试
测试结果
可以看到lighthouse给出的建议的第一个就是英雄联盟官方的加载太慢了，也就是太大了如下：
一个图片500多kb了，还是挺大的。但是关于这个就讨论到这里，咱小fw一个还是别搁这指指点点鹅厂的东西了，说不定人家有他的考虑呢…… 但是说回来，我们可以看到前四个建议都是有关于图片的，如果能把这个大小降下来，其实就目前的我感觉，是比你做很多细枝末节的代码优化，结构优化要好很多的，毕竟加起来30多秒呢，也算个优化的大头吧。
使用方法
关于lighthouse有两种使用方法，一种是直接在chorme中使用，一种是通过node来操作
1.使用chrome中的lighthouse
F12 打开开发者模式，找到Lighthouse，点击Generate report
2.通过node来操作lighthouse
首先使用npm在全局下载lighthouse
npm install -g lighthouse
然后直接用就行啦
lighthouse (xxx网站) 以英雄联盟官网为例子lol.qq.com/main.shtml
然后就会在相应位置得到一个html文件，打开就是啦(我直接在桌面运行的，他就在桌面上啦)
附上lighthouse的github，还想了解其他细节自己去看叭
TinyPNG
这是咩？其实就是一个压缩图片的网站啦。刚刚我们也看到了，英雄联盟官网的图片有多大对叭。那么我们在优化图片的时候，除了可以通过转换图片的格式JPEG PNG GIF Webp，我们也可以通过这种直接压缩图片的方式来减小图片的大小，虽然图片减小了但是不会怎么影响图片的清晰度噢。不过这个网站只支持两种格式PNG和JPG，但感觉也差不多够用了叭
TinyPNG网址
案例测试
我们选择刚刚英雄联盟官网最大的那张图 584kb
然后我们在网站中上传图片让他操作一下，可以看到图片大小变成了131KB，缩小了78%
看看操作后的图片（确实没看出太大的区别叭）
垃圾话时间
好滴，今天的分享就到这里啦。写这个的原因是我刚好看到了，然后测试的时候发现很多网站可能或许应该都在图片这上面处理的不太好(吗?)。测了几个都有这些问题。B站和CSDN好像都还行？然后呢想到之前学习的时候有用到TinyPNG这个压缩图片的网站，挺契合我测出来的结果的，就一起整上来了。有问题请指正，3Q~
