【web前端】前端性能优化指南，还不来看看

虽然现在网速已经非常快了，但是对于极致性能的追求一直从未停止过，那怕提升1s,也是用户体验的一大步提升。

文章目录

【web前端】前端性能优化指南，还不来看看
- 1.图片资源优化
- - 1.1图片大小适中
  - 1.2使用精灵图
  - 1.3使用字体图标
  - 1.4使用WebP格式的图片
- 2设置浏览器缓存
- 3 项目代码优化&资源打包压缩
- - ⭐3.1代码建议：
- 4使用CDN
- 网络传输性能测试工具：Page Speed

废话多说，这篇文章就基础的讲一下前端页面的优化项都有哪些

1.图片资源优化

1.1图片大小适中

刚开始接触前端的开发者可能会误以为图片越大，用户就会觉得越清晰，以致于会在一个小板块中缩放使用一个较大的图片。

其实这样，在普通显示器上，并不能让用户觉得更清晰，相反会导致网络速度大幅度下降，还会造成带宽浪费。所以当你需要多大的图片的时候，就在服务器上准备好多大的图片，尽量固定图片尺寸。

1.2使用精灵图

精灵图或者叫雪碧图相信大家在实际工作中经常用到。
精灵图不仅能够显著的减少请求次数，并且神奇的是，多张图片拼合在一起时，总体积会比之前所有的图片体积之和小（你可以尝试一下）。
对于制作精灵图有些人感到很麻烦，这里给大家推荐一个自动生成精灵图的工具：https://www.toptal.com/developers/css/sprite-generator，你只需要添加相关资源，他就会自动帮你生成精灵图和对应的css样式

1.3使用字体图标

无论是压缩后的图片，还是精灵图，终归还是图片，只要是图片，就还是会占用大量网络传输资源。但是字体图标的出现，却让前端开发者看到了另外一个神奇的世界。
网上有很多字体图标的资源比如说Font Awesome 等
自己自定义字体图片的话可以用icomoon。

1.4使用WebP格式的图片

WebP格式，是谷歌公司开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有 JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook、Ebay等知名网站已经开始测试并使用WebP格式。

2设置浏览器缓存

我们都知道，浏览器在向服务器发起请求前，会先查询本地是否有相同的文件，如果有，就会直接拉取本地缓存。
由于本篇为前端篇，所以具体设置细节和后端相关（缓存服务器）将不做介绍

3 项目代码优化&资源打包压缩

像刚刚所作的浏览器缓存工作，只有在用户第二次访问我们的页面才能起到效果，如果想要在用户首次打开页面就实现优良想能，就必须要对资源进行优化。
我们经常将网络性能优化措施结为三大方面：减少请求数，减少请求资源体积，提高网络传输速率。
前面的图片优化就包括前两方面优化。

现在的项目大部分使用webpack对内容进行提取和打包压缩

⭐3.1代码建议：

在我们书写HTML元素的src或href属性时，可以省略协议部分，这样也能简单起到节省资源的目的。
CSS属性读写分离：浏览器每次对元素样式进行读操作时，都必须进行一次重新渲染，所以我们在使用JS对元素样式进行读写操作时，最好将两者分离开，先读后写，避免出现两者交叉使用的情况。最客观的解决方案就是不用js去操作元素样式。
基于前面第二项优化建议，通过切换class或者style.css路径去批量操作元素样式
将没用的元素设为不可见：visibility: hidden，而不是display：none.因为visibility的属性值发生改变时页面不会重新渲染，而display属性值发生改变时页面会重新渲染。
压缩DOM的深度，少用DOM完成页面样式，多用伪元素或者box-shadow取代
图片在渲染前指定大小：因为img元素是内联元素，所以在加载图片后会改变宽高，严重的情况会导致整个页面重排，所以最好在渲染前就指定其大小，或者让其脱离文档流。

4使用CDN

使用CDN就是避免要引用的资源经过较多的路由器，以至于延迟较高。

//服务器（反向代理）或后端相关知识本篇将不介绍

最后给大家推荐一个：

网络传输性能测试工具：Page Speed

Page Speed最人性化的地方，便是它会对测试网站的性能瓶颈提出完整的建议，我们可以根据它的提示进行优化工作。
并且测试完会给你的网站效率打分，不服跑个分。