题目 - 简书

22、避免v-if和v-for一起使用

先处理v-for再处理v-if 如这个列表有一百条数据，再某种情况下，它们都不需要显示，但是vue还是会循环这个100条数据显示，再去判断v-if，因此，我们应该避免这种情况的出现。
vue 2.X中判断是先判断for,所以v-for的优先级更高

vue/src/compiler/codegen/index.js

vue 3.X中v-if的优先级更高

23、懒加载和预加载

懒加载 将img标签中的src链接设为同一张图片，一般取用1px*1px，俗称占位图0将其真正的图片地址存储在img标签的自定义属性中(如data-src); 当监听到该图片元素进入可视窗口时,将自定义属性中的地址存储到src属性中,达到懒加载的效果; 这样做能防止页面一次性向服务器响应大量请求导致服务器响应慢页面卡顿或崩溃等问题。
预加载
简单的可以用css来处理，直接加载。在使用的时候就会使用这些缓存的图片。
更好的方式是监听页面是否加载完毕(window.onload)，加载完毕在使用此种方式处理。

.aa{
  background:url(xxx) no-repeat -9999px -9999px;
}

// 补充知识
// 1、屏幕可视窗口大小
//原生方法
  window.innerHeight || //标准浏览器及IE9+
  document.documentElement.clientHeight || //标准浏览器及低版本IE标准模式
  document.body.clientHeight  //低版本混杂模式
  //jQuery方法 
  $(window).height();

// 2、屏幕可视窗口大小
//原生方法
  window.pagYoffset || //标准浏览器及IE9+
  document.documentElement.scrollTop || //兼容ie低版本的标准模式
  document.body.scrollTop //兼容混杂模式；
  //jQuery方法 
  $(document).scrollTop();

// 3、获取元素的尺寸
//原生方法
  document.getElementsByTagName[n].clientWidth
  document.getElementsById.clientWidth
  //jQuery方法 
  $(o).width() = o.style.width;
  $(o).innerWidth() = o.style.width+o.style.padding;
  $(o).outerWidth() = o.offsetWidth = o.style.width+o.style.padding+o.style.border；
  $(o).outerWidth(true) = o.style.width+o.style.padding+o.style.border+o.style.margin；

// 4、获取元素的位置信息
  //原生方法
  offsetTop
 //jQuery方法 
  $(o).offset().top //元素距离文档顶的距离
  $(o).offset().left //元素距离文档左边缘的距离
  jQuery:position() //返回一个对象
  $(o).position().left = o.style.left;
  $(o).position().top = o.style.top；

-One
-TWO