沧州市科一网站,专业制作公司网站公司,放单网站建设,邯郸推广公司懒加载
图片懒加载
懒加载的概念
懒加载也叫延迟加载#xff0c;按需加载#xff0c;指在长网页中延时加载图片数据#xff0c;是一种比较好的网页性能优化的方式。在比较长的网页或应用中#xff0c;如果图片加载很多#xff0c;所有图片都加载出来#xff0c;而用户…懒加载
图片懒加载
懒加载的概念
懒加载也叫延迟加载按需加载指在长网页中延时加载图片数据是一种比较好的网页性能优化的方式。在比较长的网页或应用中如果图片加载很多所有图片都加载出来而用户只能看到可是窗口的那一部分图片这样就浪费性能。
懒加载的特点
减少无用资源的加载使用懒加载明显减少服务器的压力和流量同时减少浏览器的负担提升用户体验如果同时加载较多图片可能需要等待的时间较长这样影响了用户体验防止加载过多的图片而影响其他资源文件的加载
懒加载实现原理
图片的加载是由src引起的当对src赋值时浏览器会请求图片资源根据这个原理我们使用HTML5 的data-xxx属性来存储图片路径在需要加载图片的时候会将data-xxx中的图片路径赋值给src这样就实现了图片的按需加载即懒加载
回流和重绘
回流和重绘的概念和触发条件
1回流也叫重排 当渲染树中部分或者全部元素的尺寸结构或者属性发生变化时浏览器会重新渲染部分或者全部文档过程称为回流
下面这些操作会导致回流
页面的首次渲染浏览器的窗口大小发生变化元素的内容发生变化元素的尺寸或者位置发生变化元素的字体大小发生变化激活css伪类查询某些属性或者调用某些方法添加或者删除可见DOM元素
在触发回流重排的时候由于浏览器渲染页面是基于流式布局的所以当触发回流时会导致周围的DOM元素重新排列它的影响范围有两种
全局范围从根节点开始对整个渲染树进行重新布局局部范围对渲染树的某部位或者一个渲染对象进行重新布局
2重绘 当页面中某个元素的样式发生变化但是不会影响其在文档流中的位置时浏览器会对元素进行重新绘制这个过程就叫重绘
下面的操作会导致重绘
color、background相关属性background-color、background-image等outline相关属性outline-color、outline-width、text-decorationborder-radius、visibility、box-shadow
注意当触发回流时一定会触发重绘但是重绘不一定引发回流
如何减少回流和重绘
操作DOM时尽量在低层级的DOM节点进行操作不要使用table布局一个小的改动可能会使整个table进行重新布局不要频繁的操作元素的样式对于静态页面可以修改类名而不是样式使用absolute或者fixed使文档脱离文档流这样它们发生改变就不会影响其他元素避免频繁的操作DOM可以创建一个文档片段documentFragment在它上面应用所有DOM操作最后把它添加到文档中
防抖和节流
对防抖和节流的理解
函数防抖是指在事件被触发n秒后在执行回调如果在这n秒内事件又被触发则重新计算这可以使用在一些点击请求的事件上避免因为用户多次点击后向后端发送多次请求函数节流是指在规定的时间内只能触发一次回调函数如果在同一单位时间内某件事被触发多次只能一次生效。节流可以使用在scroll函数的事件监听上通过事件节流来降低事件调用的频率
防抖函数的应用场景
按钮提交的场景防止多次提交按钮只执行最后提交的一次服务端验证场景表单验证需要服务端配合只执行一段连续的输入事件的最后一次类似于搜索联想词功能
节流函数的应用场景
拖拽场景固定时间内只执行一次防止超高频的触发位置变动缩放场景监控浏览器的resize动画场景避免短时间内多次触发动画引起性能问题
实现防抖和节流函数
防抖函数的实现
function debounce(fn, wait) {// 首先定义一个定时器let timer null;// 返回一个函数// 使用闭包能保存变量的值return function () {// 获取参数const args argumentsconsole.log(timer)// 如果再次触发先判断定时器状态timer clearTimeout(timer)// 定时器timer setTimeout(() {// this 表示调用debounce()的对象fn.apply(this, args)timer null}, wait)}
}使用方法一
document.getElementById(click).addEventListener(click, debounce(callback, 1000))使用方法二 const debounceFn debounce(callback, 1000)document.getElementById(click).addEventListener(click, function(e) {debounceFn(e)})注意 不能把 debounce防抖函数放在 监听事件的回调函数里面 否则每次会生成多个防抖函数不能实现防抖功能
// 注意这是错误的调用document.getElementById(click).addEventListener(click, function(e) {debounce(callback, 1000)(e)})节流函数的实现
function throttle(fn, wait) {// 获取当前时间戳let currentTime Date.now()// 使用闭包return function () {// 获取参数const args arguments// 获取调用时的时间戳let nowTime Date.now()// 判断条件if(nowTime - currentTime wait) {// 执行回调函数fn.apply(this, args)currentTime Date.now()}}
}使用方法
window.addEventListener(resize, throttle(resize, 1000))
