懒加载

基础

懒加载指定资源

• child::

  图片懒加载

  前端

  方案:

  • use::img的loading属性
  • 当视图没有看到图片标签时, 先不给 <img> 的src赋值，这样浏览器就不会发送请求了, 等到图片进入可视区域再给src赋值。
    • 一张图片就是一个 <img> 标签，浏览器是否发起请求图片是根据 <img>的src属性.

  指向原始笔记的链接

• child::

  路由懒加载

  使用动态导入来绑定路由组件

  指向原始笔记的链接

懒加载常用手段

• child::

  判断可视区域

  js

  判断目标元素是否出现在可视区域

  方案

  • child::getBoundingClientRect判断可视区域
  • child::IntersectionObserver判断可视区域

  指向原始笔记的链接