前端知识点总结——图片懒加载 / localStorage和sessionStorage、cookie区别 / 垂直居中

实现图片的懒加载

实现原理是通过判断图片是否在浏览器窗口显示，显示时在进行加载

 let length = document.getElementsByTagName('img').length //获取图片总数量
 let imgs = document.getElementsByTagName('img') //获取图片列表
 let now = 0

 window.onscroll = lazylaod

 function lazylaod() {
   let height = document.documentElement.clientHeight //获取浏览器窗口高度
   let scrollTop = document.documentElement.scrollTop //获取滚动长度

   for (let i = now; i < length; i++) {
     if (imgs[i].offsetTop - scrollTop < height) { //offsetTop获取元素到浏览器顶部的距离
       imgs[i].src = imgs[i].getAttribute('data-src')
       now = i + 1
     }
   }
 }

localStorage和sessionStorage、cookie区别

cookie是HTML4中提出来保存用户数据的机制
localStorage和sessionStorage是HTML5中提出来可以存储大量数据的机制

相同点

1. 都是保存用户信息，存储的都是字符串

不同点

1. cookie不设置有效期就是存储在内存中，回话结束后cookie就失效，如果设置了存储时间cookie就存储在硬盘中，到期后cookie失效
2. localStorage只要存储就是永久存在，关闭浏览器或者关闭页面也不会消失，除非主动删除
3. sessionStorage只在当前会话下有效，关闭了浏览器窗口后sessionStorage就会失效。每一个窗口的数据是单独存放的，即使打开了相同的页面，sessionStorage也是不相同
4. cookie数据每次都会发送给服务器，loaclStorage和sessionStorage不会与服务器进行通信，只是为了存储数据
5. 因为cookie每次都要发送给服务器，所有cookie大小限制在4KB，loaclStorage和sessionStorage大小为5M
6. loaclStorage和sessionStorage不与服务器进行通信，安全性更高
7. loaclStorage和sessionStorage提供了单独的方法进行操作

setItem(key,value) //以键值对的方式存储数据
getItem(key) //通过查询键获取对应的value
removeItem(key) //删除响应的key -value
clear() //清除当前会话的所有数据
key(index) //通过值查询键

垂直居中

两个盒子是父子关系的时候

1. 同宽高 + padding
   将父元素和子元素设置相同的宽高，再给父元素设置padding，此时padding会将子元素挤到中间的位置。
2. absolute + margin：auto
   利用了绝对定位盒模型特点：left + right + width + margin + padding = 包含块的宽度（父元素宽度），top + bottom + height + margin + padding = 包含块的高度（父元素高度），
   将父元素相对定位，left 、 right、 top、 bottom设置为0，padding默认为0，margin设置为auto，元素会自动居中。
3. absolute + 负margin（transform）
   父相对子绝对，在设置负margin将多余的位移拽回到中心。如果不知道子元素的大小，使用transform（可能会出现兼容问题）
   lefrt:50%
   top:50%
   margin-top:-50%
   margin-left:-50%
   或者
   transform:translate3d(-50%,-50%)
4. flex（大杀器）
   设置父元素：
   display:flex
   justify-content:center
   align-items:content