1.如何判斷一個(gè)元素是否出現(xiàn)在窗口可視范圍（瀏覽器的上邊緣和下邊緣之間，肉眼可視）。寫(xiě)一個(gè)函數(shù) isVisible實(shí)現(xiàn)

• 首先，要知道三個(gè)高度之間的關(guān)系，
  窗口的高度可以通過(guò)$(window).height()獲得，
  窗口滾動(dòng)的高度可以通過(guò)$(window).scrollTop()獲得，
  以及目標(biāo)元素距離窗口頂部的高度距離，可以通過(guò)目標(biāo)元素的$node.offset().top獲得，
  當(dāng)元素距離頂部的高度<窗口的高度+滾動(dòng)的高度，它是可見(jiàn)的，反之，則不可見(jiàn)。
  function isVisible($node){
  var offset=$node.offset().top;
  var scrollTop=$(window).scrollTop();
  winH=$(window).height();
  if(offset>scrollTop+winH){
  alert('不在可視范圍內(nèi)')
  }else{
  alert('在可視范圍內(nèi)')
  }
  }

2.當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。每次出現(xiàn)都在控制臺(tái)打印 true 。用代碼實(shí)現(xiàn)

  $(window).on('scroll',function(){
      if(isVisible($node)){
            console.log('true')
          }
   })

    function isVisible($node){
        var offset=$node.offset().top;
        var scrollTop=$(window).scrollTop();
              winH=$(window).height();
        if(offset<scrollTop+winH){
            return true
        }else{
            return false
        }
    }

3. 當(dāng)窗口滾動(dòng)時(shí)，判斷一個(gè)元素是不是出現(xiàn)在窗口可視范圍。在元素第一次出現(xiàn)時(shí)在控制臺(tái)打印 true，以后再次出現(xiàn)不做任何處理。

• 設(shè)置延遲函數(shù)延遲執(zhí)行，并設(shè)置標(biāo)志位，判斷是否滾動(dòng)，若在幾秒內(nèi)一直在滾動(dòng)，就不執(zhí)行，清處定時(shí)器的，反之，則不執(zhí)行清除定時(shí)器
  var clock;
  $(window).on('scroll',function(){
  if(clock){
  clearTimeout(clock)
  }
  var clock=setTimeout(function(){
  if(isVisible($node)&&!isLoaded($node)){
  console.log('true')
  }
  },500)
  })

    function isVisible($node){
        var offset    =    $node.offset().top;
        var   scrollTop=$(window).scrollTop();
                winH      =   $(window).height();
        if(offset<scrollTop+winH){
            return true
        }else{
            return false
        }
    }
  
    function isLoaded($node){
        if(!!$node.data('src')){
            return true；
        }else{
            $node.data('src',true);
            return false;
        }
    }
  

4.圖片懶加載的原理是什么？

• 一般來(lái)說(shuō)一個(gè)網(wǎng)頁(yè)上會(huì)有幾百個(gè)張圖片，一張大圖要100K以上,如果一次性同時(shí)加載網(wǎng)頁(yè)，向服務(wù)器發(fā)送請(qǐng)求，數(shù)據(jù)超過(guò)10M,這直接會(huì)導(dǎo)致服務(wù)器忙不過(guò)來(lái)，因?yàn)閔ttp協(xié)議是只要客戶端發(fā)送請(qǐng)求-服務(wù)器就會(huì)響應(yīng)，頁(yè)面加載卡死，所以為了避免這種情況和性能優(yōu)化，才出現(xiàn)了懶加載。
• 懶加載的原理是將不在我們?yōu)g覽器的可視窗口的圖片不做加載，等到用戶滾動(dòng)到這些不在可視區(qū)域的圖片時(shí)，再去加載它，這會(huì)大大優(yōu)化瀏覽器的性能和用戶體驗(yàn)
• 懶加載的實(shí)現(xiàn)方法：在頁(yè)面載入時(shí)，將頁(yè)面中img標(biāo)簽的src指向同一張小圖片或白圖，這是為了避免某些瀏覽器當(dāng)加載不出來(lái)圖片時(shí)會(huì)出現(xiàn)X的丑陋情況，這樣對(duì)于服務(wù)器來(lái)說(shuō)只發(fā)送請(qǐng)求一次，在把真正的url地址放在一個(gè)自定義的data-src屬性里，然后在獲取頁(yè)面的中的img標(biāo)簽，遍歷img標(biāo)簽，并判斷它的位置是否出現(xiàn)在窗口的可視區(qū)域內(nèi)，如果出現(xiàn)在可視區(qū)域內(nèi)那就把真實(shí)的url地址賦給src,讓對(duì)應(yīng)的img圖片顯示出現(xiàn)，同時(shí)我們還可以對(duì)已經(jīng)加載過(guò)的圖片img標(biāo)簽設(shè)置一個(gè)為 isLoaded 的屬性，設(shè)置為true,這樣在下次執(zhí)行懶加載的時(shí)候就會(huì)判斷是否已經(jīng)加載過(guò)，這樣會(huì)有效的過(guò)濾出已加載的圖片，會(huì)大大的優(yōu)化頁(yè)面的加載速度和性能節(jié)省。

代碼題

1.代碼1
2.代碼2
3.代碼3
本地測(cè)試成功
4.原生JS的回到頂部效果
這是最近學(xué)習(xí)到了，比jquery感覺(jué)效果更好一點(diǎn)，加入定時(shí)器有了平滑的過(guò)渡到頂部，不會(huì)顯得太突然。