jquery開發中性能優化及注意事項

jquery開發中性能優化及注意事項

    日常的開發中，可能因爲時間問題，沒來及進行代碼性能的優化及一些注意事項，致使頁面加載很慢，或者是後臺獲不到值等等一系列的問題，下面例出些優化方案及注意事項。

    第一：對選擇器的執行速度進行優化：一、優先選擇使用ID與標記選擇器，在jquery中，訪問DOM元素的最快捷方式是經過元素ID號，其次是經過元素的標記；不過要注意一點的是，若是頁面中屬性元素特別多，那儘可能少用的id，由於容易形成id重名，這個時候能夠id和屬性過濾選擇器並用。

    第二：開發中儘可能使用jquery對象緩存：就是在使用jquery對象時，先儘可能使用變量保存對象名，而後，經過變量進行相應的方法操做。

   第三：給選擇器一個上下文：在jquery中，DOM元素的查找能夠經過$(element)方法實現，但有另一種方法能夠經過$(expression,[context])方法，在指定的範圍中查找某個DOM元素。

   第四：在開發中，有寫頁面是自動生成的，頁面中有些id的名字中包含特殊字符，這個時候就要用轉義符對有些特殊字符進行轉義，例如："#","("。其次，就是選擇器中含有空格符與不含空格符的區別，當選擇器含有空格符，例如：$(".emple :hidden")這個意思就查詢類爲emple中的隱藏元素，而$(".emple:hidden")就是查詢隱藏元素中類爲emple的元素。

   第五：開發中，能夠用data方法對數據進行緩存，緩存數據不管是在前端頁面開發，仍是在後臺服務器腳本編寫，多有十分重要的做用。

   第六：開發中，不免會引入多個js，這個時候，可能會有些衝突，"$"是jquery的自身的快捷符，而其餘js庫中也含有"$"符，這個時候，就須要jQuery.noConflict(),可是若是jquery引入的位置在其餘js的前面，這句話就不須要了，相反就須要引入。

  第七：開發中，有時候須要查找一個被衆多元素包含的元素，這個時候你們一致的作法就是直接用find方法查找所須要的元素，可是其性能特別低；但考慮性能的話，這個時候應該想到，使用對象緩存，就是把最外層的元素保存起來，再查找更近一層的元素進行保存，最後，在最近接近外層的元素，使用find方法，使用這種方法，能夠減小選擇器的性能開銷。

  第八：開發中，儘可能減小對DOM元素進行直接操做，咱們知道，DOM元素操做的原理是，如今內存中建立DOM結構，若是直接對DOM進行操做，那麼其性能是很低的。例如：$.each(arry,function(index){str +="<li>"+arry[index]+"</li>";})$("#name").append(str);若是直接在each裏面用append，那性能是很低的。

  第九：開發中，正確區分DOM對象和Jquery對象,jquery中得到元素的值是用val()，而DOM中用的是val就能夠了，若是dom要轉換成jquery對象，能夠用$（Dom對象）進行轉換；若是jquery對象須要轉換成DOM對象，能夠用[index]或者get(index)方法，進行轉換。

    程序開發中，尤爲是初學者來講，在使用過程當中不可避免會出現語法或者操做上的不當之處，但願這篇文章能幫到有些開發者，你們在開發中共同進步。