使用jquery可能存在的9個誤區

jQuery是如此容易使用以至於我們有時候忘記了CSS的存在。我們在使用CSS時,幾乎不去考慮性能,因爲它已經是快得不值得再去做什麼優化上 的努力。但現實世界中,JQuery會導致令開發人員發瘋的性能問題。有時你會毫無知覺地就損失那麼幾毫秒。我們也很容易忘記的一些功能並繼續使用一些舊 的(和不那麼好的)的功能。以下是使用jQuery過程容易犯的9個錯誤,看看是不是你也曾遇到過?

1.不使用最新的版本

你看看你的機器是不是最新的?可能你不會把已經做好的網站再去更新一把,畢竟這個工作量可能沒 人給你付費,但新的開發項目呢?千萬別忘記了使用最新的版本哦,畢竟每個版本更新肯定會在功能或性能上有所提升,或者修復了幾個Bug,但有時惰性讓人不 想再去研究新版本的變化,因此,提醒你別忘記了在新項目用新的一定比舊版本要好。

2.不使用CDN-hosted的jQuery

很多人喜歡Download到自己的服務器上,然後調用。似乎潛意識裏文件放在自己手裏比較有安全感。但大部分時候,除非你特別牛,自己的服務器比 不過CDN服務器。如果流量小,可能沒有什麼影響,但如果流量一旦大了,性能方面的影響就非常突出了,這時,你完全可以考慮CDN服務器嘛,比如 google的Copy,這對於網站的性能有很大的幫助!

你只需要調用時採用如下:

複製代碼
1   <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

注意:如果google的鏈接已經失效,將無法引用到jquery核心庫,可以自己尋找可用的host。
複製代碼

3.使用了CDN-hosted版本但沒有備份措施

儘管我們相信Google很牛逼,不會出問題,但別忘記了你在天朝,一切皆有可能!因此,在html代碼中加上本地服務器版本的容災計劃還是很有必要的,也非常簡單:

1     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
2     <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.2.min.js"><\/script>')</script>

4. 忘記鏈式寫法

我們在進行一些普通操作時,如果多使用鏈式操作方式,可以提高性能,不用多次加載元素,有時候鏈式寫法帶來的性能改善是相當可觀的。例如

1     $(“#mydiv”).hide();
2     $(“#mydiv”).css(“padding-left”, “50px”);
3     JQuery會獲取元素2次
4     $(“#mydiv”).hide().css(“padding-left”, “50px”);

5.忘記緩存

這是跟性能相關的重要提示:別忘記緩存!如果頁面中調用了某個元素至少2次,你就應該考慮緩存了。通過一個變量就可以在JQuery中緩存選擇器。 當第二次使用該選擇器時,只需引用該變量即可。這樣做的好處就是jQuery不用再次遍歷搜索整個DOM樹去尋找你選擇的元素。例如

1     var $myMxria = $(“#mydiv”).hide();
2     //......
3     $myMxria.show();

6.幹嘛不使用原始的JS?

用慣了$,大家就基本忽略document.getElementById了,但不得不說,濫用$也是不對的,爲什麼呢?如果只是純粹的屬性修改, 使用原始的javascript性能更好,完全沒有使用jQuery對象。例如下面的例子中,瀏覽器還是會將jQuery對象轉化爲DOM節點進行操作。

1   $mydiv[0].setAttribute('class', 'awesome');

7.未作檢查的濫用插件

如今,JQuery流行起來也帶來無數插件,精彩的、雷人的各種插件很多。我們很喜歡追隨潮流,用些時髦玩意兒。但事實上,很多插件需要我們認真評估,看看到底是不是適合你的項目,或者說你真的需要嗎?有沒有考慮以下因素呢?

文件大小:超過10k的大小就得反覆考慮一下哦

性能評估:圖個方便不在乎性能?真的嗎?

跨瀏覽器支持: 看看你的客戶在用什麼瀏覽器,別忘記了古老的IE6可是依然風采依舊哦

移動支持: 確認插件是可以在Mobile環境下運作正常的

8 不用jQuery

不用不行嗎?幹嘛一定要用呢?很多時候我們可能根本沒有想過這個問題,首先想到的可能是用jquey好像很容易實現啊!這個誤區真的很普遍,你有一把快刀砍到底的習慣嗎?

9 使用jQuery幹服務器端的活

JQuery太好了,太強大了,似乎一切都可以在前端搞定!於是,我們又會進入一個誤區:類似有效性檢查和數據驗證的活,忽略了在服務端的重要性。 很多業務邏輯能在前端處理的就一古腦在前端處理,過猶不及的悲劇就此發生!千萬要記住,前端瀏覽器裏啥事都可能發生!!!禁用JS、某個不兼容問題、僞造 數據、攻擊行爲,這些都不是開發者能100%掌控到的,所以,服務端的活千萬別因爲jQuery的強大而放鬆警惕!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章