文档章节

【jQuery基础学习】11 jQuery性能简单优化

前端老手
 前端老手
发布于 10/22 11:45
字数 966
阅读 19
收藏 0

本文转载于:专业的前端网站【jQuery基础学习】11 jQuery性能简单优化

关于性能优化

  • 合适的选择器
    • $("#id")会直接调用底层方法,所以这是最快的。如果这样不能直接找到,也可以用find方法继续查找
    • $("p")标签选择器也是直接调用底层方法,所以是第二选择
    • $(".class")也是直接调用底层方法,不过IE8及更早版本不支持getElementByClassName,它会采用DOM搜索方式,所以会影响性能。
    • $("[attribute=value]")采用DOM搜索的方式,很多现代浏览器支持querySelectorALL方法,但不同浏览器上性能也有所区别。总的来说,用这种方式定位DOM元素,性能不太理想。
    • $(":hidden")这种伪选择器方式,同样没有在本地js方法中实现。同样DOM搜索
    • 以上五种方法性能依次而降,所以尽量用ID选择器,并且给选择器指定上下文。如果你强行要用DOM搜索方式的选择器,建议先用个ID选择器缩小范围,再用find函数进一步搜索。
  • 缓存对象
    • 尽量去用链式操作,而不是多次使用相同的选择器,然后再进行不同的操作
    • 如果不能用链式操作,可以考虑将需要用到的jQuery对象放到一个全局对象里。这样不用每次使用都去查找DOM。
  • 循环时的DOM操作
    • 不要去循环进行DOM插入的操作,就是$("#id").append及类似的操作,这样会很耗性能。所以可以考虑先把一大串这样的操作,用拼接HTMl字符串的方式,当做字符串先拼好,然后再插入。
  • 数组方式使用jQuery对象
    • jQuery选择器返回的是一个jQuery对象,如果你是在用一个实际上是数组意义的结构的话,那么在性能上讲,可以用for和while去代替$("#id").each()的写法。
  • 事件代理
    • 尽量去少绑定事件,否则也会带来负面性能影响。当绑定多个事件时,可以考虑是否能够通过它们共同的父级去只绑定一个事件
      //可以想一想下面这种情况,如果是一个大型表格,那么会绑定N次事件。
      $('#myTable td').click(function(){
          $(this).css('background','red');
      });
      //利用事件的冒泡机制去代替上面那种拙劣的写法
      $('#myTable').click(function(e){
          var $click=$(e.target);//e.target捕捉触发的目标元素
          $click.css('background','red');
      });
      //当然我们还可以用on来进行更简单的事件绑定
      $('#myTable').on('click','td',function(){
          $(this).css('background','red');
      });
  • 可以考虑用自定义jQuery插件去取代自己的重复代码
  • 使用join()去取代+来拼接字符串
  • 可以考虑在更需要性能的地方使用原生js代码
  • 合理使用HTML5的data属性
    <div id="d1" data-role="page" data-last-value="43" data-options='{"name":"Troy123"}'></div>
    
    $("#d1").data("role");//"page"
    $("#d1").data("lastValue");//43
    $("#d1").data("options").name;//"Troy123"

最后作者还写了一些使用jQuery的技巧,其实也就是一些解决方案。

好吧,更通俗的讲就是可以在网上搜一搜,然后直接复制粘贴的代码。

我觉得这些都很次要,所以只是自己看完就没有贴上来了。毕竟当你遇到这些问题的时候百度一下copy就好了。

 


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文转载自:https://www.mk2048.com/blog/blog.php?id=h0ii0jk1c20j

前端老手
粉丝 10
博文 703
码字总数 0
作品 0
卢湾
技术主管
私信 提问
jquery合集--从零开始学习jQuery系列- 转载

从零开始学习jQuery系列 作者: ziqiu.zhang 来源: 博客园 发布时间: 2009-12-22 11:37 阅读: 3452 次 [收藏] 本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二...

nkbai
2010/04/06
0
0
15个值得开发人员关注的jQuery开发技巧和心得

日期:2011/11/16 来源:GBin1.com 在这篇文章中,我们将介绍15个让你的jQuery更加有效的技巧,大部分关于性能提升的,希望大家能够喜欢! 1. 尽量使用最新版本的jQuery类库 jQuery项目中使用...

gbin1
2011/11/17
5.2K
9
Web前端开发必备:《Jquery实战》第3版 介绍

目标读者 本书适合想深入学习jQuery的Web开发人员、全栈工程师、架构师。jQuery是互联网上最流行的JavaScript框架。本书的目标是希望读者成为Web高级开发人员,无论起点如何。本书深入介绍了...

frankxulei
2018/06/26
0
0
jQuery Boilerplate——流行的jQuery插件开发模板

在初次进行jquery插件开发时,我们往往无从下手,当然我们可以按照jquery官方提供的格式进行简单的插件开发,但是很多时候往往不尽完美,一不小心,就造出一个很“烂”的插件:难以维护、难以...

缪斯的情人
09/29
0
0
分享26本关于Jquery的学习书籍(免费下载)

分享26本关于Jquery的学习书籍(免费下载) 1、精通JavaScript+jQuery 2、网友small6分享锋利的jQuery实例源码 3、网友small6分享jQuery权威指南配套源代码 4、犀利开发jQuery内核详解与实践...

邓剑彬
2012/11/30
3.4K
8

没有更多内容

加载失败,请刷新页面

加载更多

JS前端MD5加密

Bootstrap官网获得md5 js地址:https://www.bootcdn.cn/blueimp-md5/ <!--MD5加密--><script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.js"></script> 使用方法: md5(pwd)......

被毒打的程序猿_先瑞
23分钟前
4
0
BigDecimal 去后面无用的0的方法

BigDecimal a=new BigDecimal("0.1000"); System.out.println(a.stripTrailingZeros().toPlainString());...

xiaodong16
今天
5
0
JAVA--高级基础开发

[集合版双色球] 十二、双色球规则:双色球每注投注号码由6个红色球号码和1个蓝色球号码组成。红色球号码从1—33中选择;蓝色球号码从1—16中选择;请随机生成一注双色球号码。(要求同色号码...

李文杰-yaya
昨天
20
0
聊聊rocketmq broker的CONSUMER_SEND_MSG_BACK

序 本文主要研究一下rocketmq broker的CONSUMER_SEND_MSG_BACK CONSUMER_SEND_MSG_BACK rocketmq/common/src/main/java/org/apache/rocketmq/common/protocol/RequestCode.java public class......

go4it
昨天
4
0
API常见接口(下)

system类 StringBuilder和StringBuffer 包装类 1.System类 (java.lang包中) 提供了大量的静态方法,可以获取与系统相关的信息或系统级操作。 常用方法: public static long currentTimeMi...

Firefly-
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部