最近看到一些不錯的文章,轉來坐一下筆記。
其內容和一些新提供的方法還是很多有值得學習的地方。
1. 使用最新版本的jquery
jquery的版本更新很快,你應該總是使用最新的版本。因為新版本會改進效能,還有很多新功能。
下面就來看看,不同版本的jquery效能差異有多大。這裡是三條最常見的jquery選擇語句:
$('.elem')
$('.elem', context)
context.find('.elem')
我們用1.4.2、1.4.4、1.6.2三個版本的jquery測試,看看瀏覽器在1秒內能夠執行多少次。結果如下:
可以看到,1.6.2版本的執行次數,遠遠超過兩個老版本。尤其是第一條語句,效能有數倍的提高。
其他語句的測試,比如.attr("value")和.val(),也是新版本的jquery表現好於老版本。
2. 用對選擇器
在jquery中,你可以用多種選擇器,選擇同乙個網頁元素。每種選擇器的效能是不一樣的,你應該了解它們的效能差異。
(1)最快的選擇器:id選擇器和元素標籤選擇器
舉例來說,下面的語句效能最佳:
$('#id')
$('form')
$('input')
遇到這些選擇器的時候,jquery內部會自動呼叫瀏覽器的原生方法(比如getelementbyid()),所以它們的執行速度快。
(2)較慢的選擇器:class選擇器
$('.classname')的效能,取決於不同的瀏覽器。
firefox、safari、chrome、opera瀏覽器,都有原生方法getelementbyclassname(),所以速度並不慢。但是,ie5-ie8都沒有部署這個方法,所以這個選擇器在ie中會相當慢。
(3)最慢的選擇器:偽類選擇器和屬性選擇器
先來看例子。找出網頁中所有的隱藏元素,就要用到偽類選擇器:
$(':hidden')
屬性選擇器的例子則是:
$('[attribute=value]')
這兩種語句是最慢的,因為瀏覽器沒有針對它們的原生方法。但是,一些瀏覽器的新版本,增加了queryselector()和queryselectorall()方法,因此會使這類選擇器的效能有大幅提高。
最後是不同選擇器的效能比較圖。
**
jQuery外掛程式的怎麼寫
對於jquery之前一直用,也看到過別人寫的外掛程式,直到最近才想著學習怎麼寫自己的jquery外掛程式,今天看了網上的一些資料,發現其實很簡單的。先看乙個簡單的jquery外掛程式的例子 使用的時候要先導入jquery外掛程式,比如 p bold red 這樣p標籤內容就會變為紅色粗體。那麼,如何...
JQuery效率問題
1,前言 我們開發了乙個專題系統,生成了json的資料格式,採用jquery動態插入html中,在前期的使用中,沒有太大的問題,效率還可以接受,但是最近可能由於網路加之頁面設計問題,我們的js效率比較差,長達10多秒中,實在難以忍受,到底是什麼原因呢?2,分析 我觀察了一下js指令碼,應該說沒有太費...
有害的「這樣效率最高」思維
在與一些人交流時經常碰到對方說,你的方法好是好,就是不如現在的方式效率高,因此並不願意作出改變。我們來分析下,為什麼說這樣的思維方式是有害的。有些團隊包括技術背景出身的po不願意按可交付的方式拆分需求,原因是原來的方式雖然不能頻繁交付,但最節省時間,效率最高。這種思維是有害的,首先 頻繁交付的一大目...