带你体验常用的前端优化手段"/>
【前端优化】超详细!带你体验常用的前端优化手段
文章目录
- 前言
- 一、图片懒加载
- 原因
- 判断是否进入可视区
- 方案一: clientHeight、scrollTop 和 offsetTop
- 方案二:getBoundingClientRect
- 二、防抖与节流
- 三、路由和组件懒加载
- 原因
- 使用实例
- 路由懒加载:
- 组件懒加载
- 四、图片预加载
- 原因
- 五、使用前端缓存
- 强缓存
- 协商缓存
- 六、减少回流重绘
- 什么是回流和重绘
- 回流
- 重绘
- 优化回流重绘
- 总结
前言
前端是最贴近用户体验的地方,作为一个合格的前端,用户体验必须成为前端考虑的首位。
网页渲染速度,动画交互,网站是否掉帧等等这些都是用户体验中的一部分,但你知道我们该从哪些地方取做优化吗?
不知道也没关系,下面让我们一起谈一谈常见的前端优化手段。
一、图片懒加载
原因
使用原因:
- 在页面中,需要加载
大量
或内存很大
的图片,有些图片甚至达到30M+ JavaScript
需要在dom
渲染后才会执行,如果加载图片使用时长过大,会影响JS资源加载- 大量的图片请求,会增加浏览器的负荷,可能会导致页面直接卡死,极大影响用户体验。
图片懒加载的原理比较简单,就是先不设置图片的src
属性,先将图片的属性放在一个浏览器无法识别的属性中(比如data-src
),然后监听页面的scroll
事件,判断图片是否进入可视区,进入了可视区域,就将data-src
中的值放进src
中,这样图片就显示出来了。
那我们怎么判断进入可视区呢?
判断是否进入可视区
方案一: clientHeight、scrollTop 和 offsetTop
伪代码:
let img = document.getElementsByTagName("img");
let num = img.length;
let count = 0;//计数器,从第一张图片开始计lazyload();//首次加载别忘了显示图片window.addEventListener('scroll', lazyload);function lazyload() {let viewHeight = document.documentElement.clientHeight;//视口高度let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;//滚动条卷去的高度for(let i = count; i < num; i++) {// 元素现在已经出现在视口中if(img[i].offsetTop < scrollHeight + viewHeight) {if(img[i].getAttribute("src") !== "你的占位图片") continue;img[i].src = img[i].getAttribute("data-src");count++;}}
}
这里绑定的滑动事件是可以使用节流来优化的,下面将详细介绍。
方案二:getBoundingClientRect
getBoundingClientRect
可以直接获取元素距离各个方向视口的距离
function lazyload() {for(let i = count; i <num; i++) {// 元素现在已经出现在视口中if(img[i].getBoundingClientRect().top < document.documentElement.clientHeight) {if(img[i].getAttribute("src") !== "你的占位图片") continue;img[i].src = img[i].getAttribute("data-src");count ++;}}
}
二、防抖与节流
手把手带你实现防抖节流
博主在上面这篇博客有详细介绍哦,在此就不多说了!
三、路由和组件懒加载
原因
使用原因:
- 当进行打包构建应用时,打包后的代码逻辑实现包可能会非常大。
- 当我们把不同的路由对应的组件分别打包,在路由被访问时再进行加载,就会更加高效。
SPA(单页面应用)
已经在我们的开发中普及,带来便利的同时也加大了浏览器的负担
例如:
现在最常用的前端构建工具Webpack,我们在打包部署时,它会对我们的JavaScript代码进行打包压缩如果我们单个打包代码量非常大,那么我们的渲染速度将会变得非常慢。
在Webpack4.x
版本之后,Webpack会对一些特定操作进行分包
(将JS文件分成多个)
路由和组件懒加载就是能让Webpack进行分包的情况之一。
那么我们如何去使用路由懒加载和组件懒加载呢?
别急,很简单,让我们一起来看一看。
使用实例
路由懒加载:
正常使用:
import xiamLogin from './views/XiamLogin.vue'
routes: [{path:'/xiamLogin',component: xiamLogin,},]
懒加载:
routes: [{path:'/xiamLogin',component: () => import('./views/XiamLogin.vue'),},]
组件懒加载
正常使用:
import choose from './choose/index.vue'
懒加载:
const choose = () => import('./choose/index.vue')
是不是非常简单呢!
四、图片预加载
原因
使用场景:
- 用户可能在当前页面停留,可以在页面渲染完成后提前渲染其他页面资源
- 可以设置缓存,提前请求其他页面资源存入缓存,在其他页面加载后直接从缓存中读取。
预加载
就是提前加载所需资源,通常是加载静态资源,在可能停留页对其他静态资源发起请求,将资源放入浏览器缓存(需设置max-age
类可缓存字段,下面将详细介绍)
五、使用前端缓存
优点:
- 减少了服务器的负担,提高了网站的性能
- 加快了客户端网页的加载速度
- 减少了多余网络数据传输
想要完成上述步骤,就需要浏览器的强缓存
和协商缓存
共同协作完成。
强缓存
使用强缓存策略时,如果缓存资源有效,则直接使用缓存资源,不必再向服务器发起请求。
强缓存策略可以通过两种方式来设置,分别是 http
头信息中的 Expires
属性和 Cache-Control
属性。
- 服务器通过在响应头中添加
Expires
属性,来指定资源的过期时间。在过期时间以内,该资源可以被缓存使用,不必再向服务器发送请求。这个时间是一个绝对时间,它是服务器的时间,因此可能存在这样的问题,就是客户端的时间和服务器端的时间不一致,或者用户可以对客户端时间进行修改的情况,这样就可能会影响缓存命中的结果。 Expires
是http1.0
中的方式,因为它的一些缺点,在HTTP 1.1
中提出了一个新的头部属性就是Cache-Control
属性,它提供了对资源的缓存的更精确的控制。它有很多不同的值。
Cache-Control常用值:
no-cache
:设置了该字段需要先和服务端确认返回的资源是否发生了变化,如果资源未发生变化,则直接使用缓存好的资源;(和服务器确定有资源更新,再进行判断。没有强缓存,会有协商缓存)no-store
:设置了该字段表示禁止任何缓存,每次都会向服务端发起新的请求,拉取最新的资源;(不适用缓存,每次都从服务器获取)max-age
:设置缓存的最大有效期,单位为秒;
这里设置了max-age的缓存时间为31536000s(注意
:max-age的单位是s)
注意
:当两种方式一起使用时,Cache-Control 的优先级要高于 Expires。
协商缓存
如果命中强制缓存,我们无需发起新的请求,直接使用缓存内容,如果没有命中强制缓存,如果设置了协商缓存,这个时候协商缓存就会发挥作用了。
从上面我们说到,命中协商缓存只有两种情况:
max-age
过期了- 值为
no-cache
使用协商缓存策略时,会先向服务器发送一个请求,如果资源没有发生修改,则返回一个 304
状态,让浏览器使用本地的缓存副本。如果资源发生了修改,则返回修改后的资源
注意
:当 Last-Modified 和 Etag 属性同时出现的时候,Etag 的优先级更高。
六、减少回流重绘
什么是回流和重绘
大家都了解,在浏览器渲染过程中,当cssom树和dom树合并成render树后,将会计算render树的布局(这一步就是回流
),然后将布局渲染到屏幕上(这一步就是重绘
)
回流
当渲染树中部分或者全部元素的尺寸、结构或者属性发生变化时,浏览器会重新渲染部分或者全部文档的过程就称为回流
。
可能会导致回流的操作:
- 浏览器的窗口大小发生变化
- 添加或者删除可见的DOM元素
- 元素的字体大小发生变化
- 元素的尺寸或者位置发生变化
- 元素的内容发生变化
重绘
当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器就会对元素进行重新绘制,这个过程就是重绘
。
可能会导致重绘的操作:
- 字体颜色或背景发生变化
- border-radius、visibility、box-shadow等发生变化
注意
:重绘不一定引起回流,回流一定引起重绘。
优化回流重绘
减少回流重绘的操作:
- 不要频繁操作元素的样式,对于静态页面,可以修改类名,而不是样式。
- 如果需要修改多个css属性,可以先将元素设置为
display:none
,然后操作完成之后再改变回来,这样就能大大降低回流次数。 - 使用
absolute
或者fixed
,使元素脱离文档流,这样他们发生变化就不会影响其他元素 - 避免频繁的操作dom
总结
以上就是比较常用的前端优化手段,主要思路就是减少渲染率,增强用户体验以防卡顿。
前端优化手段远不止这么一点,虽然每个都只能优化一小部分,但是如果我们十分熟练使用的话,优化的就是一个很大的提升。
量变引起质变!
更多推荐
【前端优化】超详细!带你体验常用的前端优化手段
发布评论