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

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

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

文章目录

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

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

1.图片资源优化

1.1图片大小适中

刚开始接触前端的开发者可能会误以为图片越大,用户就会觉得越清晰,以致于会在一个小板块中缩放使用一个较大的图片。
【web前端】前端性能优化指南,还不来看看?_第1张图片

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

1.2使用精灵图

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

1.3使用字体图标

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

1.4使用WebP格式的图片

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

2设置浏览器缓存

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

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

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

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

⭐3.1代码建议:

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

4使用CDN

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


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

最后给大家推荐一个:

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

Page Speed最人性化的地方,便是它会对测试网站的性能瓶颈提出完整的建议,我们可以根据它 的提示进行优化工作。
并且测试完会给你的网站效率打分,不服跑个分。
【web前端】前端性能优化指南,还不来看看?_第3张图片

你可能感兴趣的:(大前端,经验分享,html,javascript,前端,css,网络)