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

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

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

    第一：對選擇器的執行速度進行優化：1、優先選擇使用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)方法，進行轉換。

    程序開發中，尤其是初學者來說，在使用過程中不可避免會出現語法或者操作上的不當之處，希望這篇文章能幫到有些開發者，大家在開發中共同進步。