1. 首页
  2. 前端

前端性能优化的七大手段整理技术分享

前端性能优化的七大手段之减小资源大小(一)

1、压缩

(1).HTML压缩

HTML代码压缩就是压缩在文本文件中有意义,但是在HTML中不显示的字符,包括空格、制表符、换行符等。

(2).css压缩

CSS压缩包括无效代码删除和css语义合并,去除无用css样式。

(3).JS压缩与混乱

JS压缩与混乱包括无效字符与注释的删除、代码语义的缩减和优化、降低代码可读性,实现代码保护。

(4).图片压缩

针对真实图片情况,舍弃一些相对无关紧要的色彩信息,使用精灵图/雪碧图等。

2、webp

在安卓下可以使用webp格式的图片,它具有更优的图像数据压缩算法,能带来更小的图片体积,同等画面质量下,体积比jpg、png少25%以上,而且同时具备了无损和有损的压缩模式、alpha透明度以及动画的特性。

3、开启gzip

HTTP协议上的GZIP编码是一种用来改进web应用程序性能的技术。大流量的web站点常常使用GZIP压缩技术来让用户感受更快的速度。这一般是指www服务器中安装的一个功能,当有人来访问这个服务器中的网站时,服务器中的这个功能就将网页内容压缩后传输到来访的电脑浏览器中显示出来。一般对纯文本内容可压缩到原大小的40%以上。

前端性能优化的七大手段之减少请求数量(二)

1、减少重定向

尽量避免使用重定向,当页面发生了重定向,就会延迟整个HTML文档的传输。在HTML文档到达之前,页面中不会呈现任何东西,也没有任何组件会被下载,降低了用户体验。

如果一定要使用重定向,如http重定向到https,要使用301永久重定向,而不是302临时重定向。因为,如果使用302,则每一次访问http,都会被重定向到https的页面。而永久重定向,在第一次从http重定向到https之后,每次访问http,会直接返回https的页面。

2、使用缓存

使用cach-control或expires这类强缓存时,缓存不过期的情况下,不向服务器发送请求。强缓存过期时,会使用last-modified或etag这类协商缓存,向服务器发送请求。如果资源没有变化,则服务器返回304响应,浏览器继续从本地缓存加载资源;如果资源更新了,则服务器将更新后的资源发送到服务器,并返回200响应。

3、不使用CSS @import

CSS的@import会造成额外的请求

4、避免使用空的src和href

a标签设置空的href,会重定向到当前的页面地址。form设置空的method,会提交表单到当前的页面地址。

前端性能优化的七大手段之性能更好的API(三)

1、用对选择器

选择器的性能排序如下所示,尽量选择性能更好的选择器

id 选择器  (“#myid”)

类选择器  (“.myclassname”)

标签选择器  (“p”)

相邻选择器  (“h1+p”)

子选择器  (“ul>li>a”)

后代选择器  (“li a”)

通配符选择器  (“*”)

属性选择器   (“a[rel=’external’]”)

伪类选择器  (“a:hover”)   (“li:nth-child”)

2、使用requestAnimationFrame来代替setTimeout和setInterval

希望在每一帧刚开始的时候对页面进行更改,目前只有使用requestAnimationFrame能够保证这一点。使用setTimeout或者setInterval来触发更新页面的函数,该函数可能在一帧的中间或者结束的时间上调用,进而导致该帧后面需要进行的事情没有完成,引发丢帧。

3、使用IntersectionObserver来实现图片可视区域的懒加载

传统的做法中,需要使用scroll事件,并调用getBoundingClientRect方法,来实现可视区域的判断,即使使用了函数节流,也会造成页面回流。使用IntersectionObserver,则没有上述问题。

4、使用web  worker

客户端JavaScript一个基本的特性是单线程:比如,浏览器无法同时运行两个事件处理程序,它也无法在一个事件处理程序运行的时候触发一个计时器。web Worker是HTML5提供的一个JavaScript多线程解决方案,可以将一些大计算量的代码交由web worker运行,从而避免阻塞用户界面,在执行复杂计算和数据处理时,这个API非常有用。

但是,使用一些新的API的同时,也要注意其浏览器的兼容性。

原创文章,作者:Ferrycoln,如若转载,请注明出处:https://ms200.cn/archives/686

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:499661635@qq.com.com

工作时间:周一至周五,9:30-18:30

QR code