温习日志-15

温习日志

——2023年2月9日下午

学习内容

• 展示元素通过滚动
  1. 通过创建IntersectionObserver对象,在通过创建的对象.observe(获取的元素)
  2. 通过回调的函数的第一个参数entries有一个entry包含了entry.target和e.target类似
  3. 回调函数第二个参数observer，可以对已经触发的函数进行取消监控observer.unobserve(监控的元素)
• Lazy loading Images
  1. 通过querySelectorAll('img[data-src]')获取有data-src属性的图像标签
  2. 默认的图片像素是很低，只有要翻滚到该图片时再加载更高清像素的图片
  3. 也是通过IntersectionObserver对象监听
  4. 当entry.isIntersecting为真时，entry.target.src = entry.target.dataset.src
  5. 对于IntersectionObserver的对象数据参数，rootMargin就是增加viewport的高度，如果为正数就可以在要接触的这个元素距离为规定的值时启动回调函数
• 搭建滑动模块
  1. 在HTML中，要滑动的元素都已经写入，通过transform: translateX(100%)和overflow: hidden来实现滑动
• 声明周期DOM事件
  1. 通过document.addEventListener('DOMContentLoaded', callback)添加监听事件，当HTML解析完成和DOM树创建完成时运行
  2. 通过window.addEventListener('load', callback)添加监听事件，当html文件和js文件执行完成后运行
• 有效率的script加载
  1. 如果要兼顾旧版本的浏览器，对于js文件的引入<script src=''></script>放在body结束前
  2. 对于<script defer src=''></script>是在解析HTML文件同时加载JS文件，但是在HTML文件解析完成后才执行JS文件
  3. 对于<script async src=''></script>是是在解析HTML文件同时加载JS文件，当加载js文件完成后，会暂停HTML的解析会首先执行JS文件，DOMContentLoaded不会等待async的JS文件

明日计划

• 明天十二点半起床，十三点开始学习JS基础知识
• 学习至下午五点半
• 晚上六点半学习React知识
• 学习至八点半