文章目录
前言
前端是最贴近用户体验的地方,作为一个合格的前端,用户体验必须成为前端考虑的首位。
网页渲染速度,动画交互,网站是否掉帧等等这些都是用户体验中的一部分,但你知道我们该从哪些地方取做优化吗?
不知道也没关系,下面让我们一起谈一谈常见的前端优化手段。
一、图片懒加载
原因
使用原因:
- 在页面中,需要加载
大量
或内存很大
的图片,有些图片甚至达到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