Web開發常用到的JavaScript代碼區別和經驗總結

1.下列三種寫法的區別:就存在寫法上的區別,而實際作用一致。
$(document).ready(function(){
//do something
})
$().ready(function(){
//do something
})
$(function(){
//do something
})

總結:
    ready() 函數僅能用於當前文檔,因此無需選擇器。
    所以document選擇器可以不要,那麼就可以寫成:
    $().ready(function(){})
    最後$的默認事件就是ready,所以,ready也可以省略,寫成:
    $(function(){});

2.document.ready和onload的區別
    頁面加載完成有兩種事件，
    一、是ready,表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）,
    二、onload,指示頁面包含圖片等文件在內的所有元素都加載完成。

  頁面中的內容加載順序:域名解析-加載html-加載js和css-加載圖片等其他信息
    Dom Ready:在DOM加載完成後就可以可以對DOM進行操作。
    Dom Ready應該在“加載js和css”~~~~~~“加載圖片等其他信息”之間,就可以操作Dom了

  //經常使用
  document.getElementById("imgID").οnlοad=function(){
  //do something
  }
  這是:Dom Load-->在document文檔加載完成後就可以可以對DOM進行操作,document文檔包括了加載圖片等其他信息。

  例子分析理解:
    Dom Ready是在dom加載完成後就可以直接對dom進行操作,
    比如一張圖片只要<img>標籤完成,不用等這個圖片加載完成,
    就可以設置圖片的寬高的屬性或樣式等。

    Dom Load是在整個document文檔（包括了加載圖片等其他信息）
    加載完成後就可以直接對dom進行操作,
    比如一張圖片要等這個圖標加載完成之後才能設置圖片的寬高的屬性或樣式等。

  最佳實踐:
    解決方案就是用Dom Ready而不是Dom Load，因爲通常大圖片加載的時候會一點一點的加載,
    這個在尺寸大,字節多,網速慢的時候表現的非常明顯,用Dom Load，通常是先把頁面撐開,
    加載完成後再把圖片重設寬高,圖片加載多少時間,這個頁面就會撐開多久，用戶會非常難受！！

3.圖片瀏覽效果最佳解決方案:
  圖片大小比較統一:可以直接給<img>標籤添加寬和高的值,要保證不圖片不變形,就直接自設置寬的值。
  圖片大小比較不統一:影響-->圖片失真, 解決:設置max-width,min-height的值來解決。