【前端优化】超详细!带你体验常用的前端优化手段

---

前言

前端是最贴近用户体验的地方,作为一个合格的前端,用户体验必须成为前端考虑的首位。

网页渲染速度,动画交互,网站是否掉帧等等这些都是用户体验中的一部分,但你知道我们该从哪些地方取做优化吗?

不知道也没关系,下面让我们一起谈一谈常见的前端优化手段。

一、图片懒加载

原因

使用原因:

• 在页面中,需要加载大量或内存很大的图片,有些图片甚至达到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