📕
余烬的小册
数据结构与算法GitHub
  • 总述
  • 经验记录
    • 经验总结
      • web component
      • 前端性能优化总结与分析
      • 我的长列表优化方案
      • 双向通讯解决方案
      • 🔧基于istanbul实现代码测试覆盖率工具
      • 表单系统(低代码表单)
      • 跨端小程序
      • 设计一个即时聊天功能
      • 跨页面通讯 3658699fe4cb4d0bbe22b0881390bacd
    • 踩坑记录
      • HTML踩坑记录
      • Flutter踩坑记录
      • CSS踩坑记录
  • 源码解析
    • Vue源码解析
      • Vue2源码解析系列-响应式原理
      • Vue2源码解析系列-模板编译
      • Vue2源码解析系列-渲染系统(待更新)
        • Patch
      • Vue2源码解析系列-调度系统(todo)
      • Vue2组件更新流程(todo)
      • 如何学习Vue源码
      • Vue3源码解析系列-响应系统
      • Vue3源码解析系列-渲染系统
      • Vue3源码解析系列-组件化和渲染优化(todo)
      • Vue router源码解析(todo)
    • React源码解析(todo)
    • 微前端
      • qiankun源码解析(todo)
    • Vite源码解析
      • Vite Client源码
      • Vite Server源码(todo)
  • 前端技术
    • javaScript
      • ES6
        • 变量声明
        • 模块化
        • 箭头函数
        • 你不知道的for...of
        • 新的数据结构Set和Map
        • JavaScript异步编程终极解决方案
        • ES6 Class 3a0c0a225a534984aabe9a943c5df975
      • JavaScript Error
      • JavaScript浅拷贝和深拷贝
      • JavaScript闭包
      • JavaScript最佳实践
      • JavaScript设计模式
      • async函数的polyfill
    • 深入理解JavaScript系列
      • JavaScript中的继承
      • JavaScript原始类型和引用类型
      • JavaScript浅拷贝和深拷贝
      • JavaScript手写系列
      • JavaScript之this
      • 词法环境和环境记录
      • JavaScript内存泄漏
      • 执行上下文
      • 从ECMAScript规范中学习this
    • TypeScript
      • TypeScript基础教程
      • Typescript高级操作
      • TypeScript工具类型
      • Typescript手写实现工具类型
      • Typescript总结(思维导图)
    • 浏览器原理
      • 页面渲染原理
      • 浏览器存储
      • JavaScript事件循环
      • 事件循环
      • 跨域
      • DOM事件流
      • 从输入url到页面渲染
      • 判断节点之间的关系及根据节点关系查找节点
      • history API
    • 跨端技术
      • Flutter
        • Flutter布局组件
    • 前端工程化
      • Babel插件开发指南
      • 循环依赖
      • pm2
    • React
      • React 状态管理
      • React组件通讯
      • Redux入门
      • Flux
      • React Hook(todo)
      • Effect
  • 服务器端
    • 计算机网络
      • 应用层
      • 运输层
      • 物理层
      • 数据链路层
      • HTTP缓存
      • HTTPS
      • 网络层
    • NodeJs
      • Node.js
      • nodejs最佳实践
      • 《深入浅出Nodejs》小结
      • mongoose填充(populate)
      • node事件循环
      • Node子进程
      • nestjs从零开始
      • nodejs流
      • Nodejs调试
      • Koa源码解析
    • 服务器
      • 操作系统
      • Linux
      • nginx常用指令
      • nginx常用配置
    • 数据库
      • Mysql常见语法
      • MongoDB Indexes索引
  • 前端安全与性能优化
    • 前端安全
      • 跨站脚本攻击(XSS)
      • 跨站点请求伪造(CSRF)
      • 点击劫持
      • 中间人攻击
      • 越权攻击与JWT
    • 前端性能优化
      • 前端监控系统
      • 前端性能优化总结与分析 7348bba0918645b1899006dc842a64c1
      • 衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292
      • 图片懒加载
  • 杂项
    • 其他
      • Git
      • web component框架
      • 实现滚动框的懒加载
      • Stencil指南
    • CSS
      • 定位和层叠上下文
      • BFC
      • 盒模型
      • css选择器
      • css变量
由 GitBook 提供支持
在本页
  • getBoundingClientRect
  • InterSectionObserver
在GitHub上编辑
  1. 前端安全与性能优化
  2. 前端性能优化

图片懒加载

tags: 前端性能 Created time: July 19, 2022 5:58 PM emoji: 🖼️

getBoundingClientRect

getBoundingClientRect方法可以获取元素的大小和距离视口左/上方的距离,可以通过以下算式判断元素是否出现在视口中。

img.getBoundingClientRect().top - clientHeight < 0

首先将图片url存放到data-src属性中,另外需要给图片设置width、height属性来占位,然后为页面滚动事件添加事件处理程序,滚动时判断每个图片元素是否出现在视口中。

另外为了减少性能消耗,可以利用节流来减少滚动事件处理程序的执行频率。

完整代码如下:

// 节流
function fn(cb,delay=300){
    let timer
    return function(...args){
        if(!timer){
            cb.call(null,...args)
            timer = setTimeout(()=>{
                timer = null
            },delay)
        }
    }
}

function imgLoad(){
    const clientHeight = document.documentElement.clientHeight
    const imgs = document.querySelectorAll("img[data-src]")
    console.log(1, imgs[imgs.length-1].getBoundingClientRect().top -  clientHeight );
    for(img of imgs){
        if(img.getBoundingClientRect().top - clientHeight < 0){
            img.setAttribute('src', img.getAttribute('data-src'))
            img.removeAttribute('data-src')  // 移除属性,避免之后又被获取
        }
    }
}

const handleImgLoad = fn(imgLoad)
document.addEventListener('scroll',handleImgLoad)

InterSectionObserver

Web为开发者提供了 IntersectionObserver 接口,它可以异步监听目标元素与其祖先或视窗的交叉状态,注意这个接口是异步的,它不随着目标元素的滚动同步触发,所以它并不会影响页面的滚动性能。

IntersectionObserver 构造函数接收两个参数,回调函数以及配置项。

  • root:所监听对象的具体祖先元素,默认是 viewport ;

  • rootMargin:计算交叉状态时,将 margin 附加到祖先元素上,从而有效的扩大或者缩小祖先元素判定区域;

  • threshold:设置一系列的阈值,当交叉状态达到阈值时,会触发回调函数。

IntersectionObserver 实例执行回调函数时,会传递一个包含 IntersectionObserverEntry 对象的数组,该对象一共有七大属性:

  • time:返回一个记录从 IntersectionObserver 的时间原点到交叉被触发的时间的时间戳;

  • target:目标元素;

  • rootBounds:祖先元素的矩形区域信息;

  • boundingClientRect:目标元素的矩形区域信息,与前面提到的 Element.getBoundingClientRect() 方法效果一致;

  • intersectionRect:祖先元素与目标元素相交区域信息;

  • intersectionRatio:返回intersectionRect 与 boundingClientRect 的比例值;

  • isIntersecting:返回一个布尔值,如果目标元素与交叉区域观察者对象 (intersection observer) 的根相交,则返回 true.如果返回 true, 则 IntersectionObserverEntry 描述了变换到交叉时的状态; 如果返回 false, 那么可以由此判断,变换是从交叉状态到非交叉状态。

完整代码

function observe() {
  const observer = new IntersectionObserver(
    (changes) => {
      console.log(changes);
      changes.forEach(function (change) {
        if (change.isIntersecting) {
          const img = change.target;
          img.setAttribute("src", img.getAttribute("data-src"));
          img.removeAttribute('data-src')
          observer.unobserve(img);
        }
      });
    },
    {
      root: null,
      rootMargin: "0px",
    }
  );

  const imgs = document.querySelectorAll("img[data-src]");
  for (img of imgs) {
    observer.observe(img);
  }
}

observe();
上一页衡量性能的核心指标 0dc15ef127cf4f4a9f1137c377420292下一页其他