一、优化选择器执行速度

1. 优先使用ID选择器和标记选择器

  • 使用选择器时应该首选ID选择器($("#id")),其次是标记选择器($("div")),最后再选用class、属性等选择器。
  • 避免重复使用ID号修饰ID号,例如$("#div1 #div2")。也避免使用tag,class等修饰ID号,例如$(".title #id")。
  • 使用属性选择器时,尽量使用标记进行修饰。例如$(div[title='aa'])。

2. 使用jQuery对象缓存

  • 如果多次操作同一个DOM元素,可以将其存在全局变量中,避免重复调用选择器。
  • 缓存JQuery的变量命名规则尽量以$开头。
  • 如果同一个DOM对象进行多个操作,尽量使用链式写法。

3. 给选择器一个上下文

格式:$(expression,[context]),expression是选择器表达式,context是选择器查找的范围。这样会比在全局查找效率高一些。

实例:

<script type="text/javascript">
$( function() {
window.$objPub = { //在全局范围中,定义一个windows对象
$objTmp0: $( "#div0", ".MyCls0" ),
$objTmp1: $( "#div1")
}
TestFun();
})
function TestFun() { //自定义显示div内容的函数
$objPub.$objTmp0.html( "Tmp0").css("width" ,"100px");
$objPub.$objTmp1.html( "Tmp1");
}
</script >

二、处理选择器不规范元素

1. 选择器属性中包含特殊符号:特殊字符前添加转义字符\\。

2. 选择器中空格符:包含空格时表示祖先元素和后代元素的关系;不包含空格时表示一个选择器中两种筛选条件的合并。

<script type="text/javascript">
$( function() {
var $objTmp0 = $(".MyCls :hidden" );//含有空格符,.MyCls子元素中的隐藏元素
var $objTmp1 = $(".MyCls:hidden" );//没有空格符,.MyCls类名并且隐藏的元素
var $objTest = $("#div\\[test\\]" );//选择器特殊符号
})
</script >

三、解决jQuery库与其他库$冲突问题

使用jQuery.noConflict()转让$使用权,然后只能使用jQuery变量访问jQuery对象。

1.jQuery库先于其他库导入

无需使用jQuery.noConflict()方法。只要使用jQuery方法时不要使用$符号而是使用jQuery符号就可以了。

2.jQuery库后于其他库导入

需要先使用jQury.noConflict(),然后使用jQuery符号操作jQuery中的对象。如果仍然想使用简洁符号,有两种方法

①自定义其他符号用作快捷方式:

var j=jQuery.noConflict();
j( function() {
j( "#Button1").click(function () {
获取对象
var $objTmp = j("#txtName" );
显示内容
j( "#divTmp").html("J_" + $objTmp.val());
})
})

②在jQuery方法内部继续使用$符号。

jQuery.noConflict();
jQuery( function($) {
$( "#Button1").click(function () {
//获取对象
var $objTmp = $("#txtName" );
//显示内容
$( "#divTmp").html("J_" + $objTmp.val());
})
})

四、其他优化

  • 尽量减少对DOM元素直接操作的次数。
<script type="text/javascript">
$( function() {
//定义数组
var arrList = ["list0" , "list1", "list2", "list3" , "list4", "list5"];
var strList = "" ; //初始化字符
$.each(arrList, function(index) {
//遍历后累加数组元素
strList += ( "<li>" + arrList[index] + "</li>" );
})
//一次性完成DOM元素的增加
$( "#ulFrame").append(strList);
})
</script >
  • 使用子查询优化选择器性能。

五、区分DOM对象和jQuery对象

1.DOM对象和jQuery对象定义的区别

  • DOM对象:通过传统js方法获取的DOM元素对象;
  • jQuery对象:通过jQuery方法包装原始的DOM对象后生成的新对象。

2.DOM对象和jQuery对象的转换

如果想使DOM对象和jQuery对象之间的方法相互调用,需要先将对象进行类型转换。

  • DOM转jQuery:DOM对象通过$()方法进行包装就可以转换为jQuery对象。
  • jQuery转DOM:通过get(index)或者[index]方法,可以将jQuery对象转换为DOM对象。
<script type="text/javascript">
$( function() {
//***** DOM对象转成jQuery对象 *****//
//DOM对象
var objDom0 = document.getElementById("div0");
//转成jQuery对象
var $obj0 = $(objDom0);
//调用jQuery中的方法设置其中的内容
$obj0.html( "DOM对象转成jQuery对象后设置的内容" ); //***** jQuery对象转成DOM对象 *****//
//jQuery对象
var $obj1 = $("#div1" );
//转成DOM对象
var objDom1 = $obj1[0];//或者$obj1.get(0);
//调用JavaScript中的对象方法设置内容
objDom1.innerHTML = "jQuery对象转成DOM对象后设置的内容" ;
})
</script >

读<jquery 权威指南>[7]-性能优化与最佳实践的更多相关文章

  1. 读<jquery 权威指南>[1]-选择器及DOM操作

    今天是小年了,2013马上要过去了,但是学习不能间断啊.最近正在看<jQuery权威指南>,先温习一下选择器和DOM操作. 一.基本选择器 1.table单双行: $(function ( ...

  2. 读<jquery 权威指南>[3]-动画

    一. 显示与隐藏——hide(),show() 1. 方法: hide(speed,[callback]); show(speed,[callback]); 说明:这两个方法还可以实现带动画效果的显示 ...

  3. 读<jquery 权威指南>[4]-Ajax

    一.获取异步数据 jQuery可以从服务器异步获得静态数据. ①load() $.load(url,data,callback) url要加载的页面地址, data发送到服务器的数据key/value ...

  4. 读<jQuery 权威指南>[5]-插件

    一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...

  5. 读<jQuery 权威指南>[6]--实用工具函数

    官方地址:http://api.jquery.com/category/utilities/ 一.数组和对象操作 1. $.each——遍历 $.each(obj,function(param1,pa ...

  6. 读<jquery 权威指南>[2]-事件

    1.  事件冒泡 阻止事件冒泡的两种方式: event.stopPropagation(); return false ; 2. 绑定事件——bind(type,[data],function) ty ...

  7. 跟小静读《jQuery权威指南》——目录

    前言 2014年开始了,年底给自己制订的学习计划,第一步先从学习<jQuery权威指南>开始. jQuery大家都很比较熟悉,但是我经常是边用的时候边对照着API,这次找本书通读一遍,记录 ...

  8. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  9. 如何让HTTPS站点评级达到A+? 还得看这篇HTTPS安全优化配置最佳实践指南

    0x00 前言简述 SSL/TLS 简单说明 描述: 当下越来越多的网站管理员为企业站点或自己的站点进行了SSL/TLS配置, SSL/TLS 是一种简单易懂的技术,它很容易部署及运行,但要对其进行安 ...

随机推荐

  1. FTP上传

    package cn.zto.util; import java.io.ByteArrayInputStream; import java.io.File; import java.io.FileIn ...

  2. Linux:宿主机通过桥接方式连接的VMware内部Linux14.04虚拟机(静态IP)实现上网方案

    首先,我们要弄清楚三种常见的连接方式中的桥接方式的网络结构: .bridged(桥接模式) 在这种模式下,VMWare虚拟出来的操作系统就像是局域网中的一台独立的主机,它可以访问网内任何一台机器.在桥 ...

  3. [原创]java WEB学习笔记98:Spring学习---Spring Bean配置及相关细节:如何在配置bean,Spring容器(BeanFactory,ApplicationContext),如何获取bean,属性赋值(属性注入,构造器注入),配置bean细节(字面值,包含特殊字符,引用bean,null值,集合属性list map propert),util 和p 命名空间

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. Preconditions优雅的检验参数

    Preconditions里面的方法: 1 .checkArgument(boolean) : 功能描述:检查boolean是否为真. 用作方法中检查参数 失败时抛出的异常类型: IllegalArg ...

  5. 如何设置一个严格30分钟过期的Session(转载)

    本文地址: http://www.laruence.com/2012/01/10/2469.html 今天在我的微博(Laruence)上发出一个问题: 我在面试的时候, 经常会问一个问题: &quo ...

  6. matlab中imresize

    matlab中函数imresize简介: 函数功能:该函数用于对图像做缩放处理. 调用格式: B = imresize(A, m) 返回的图像B的长宽是图像A的长宽的m倍,即缩放图像. m大于1, 则 ...

  7. 安卓开发经验分享:资源、UI、函数库、测试、构建一个都不能少(转)

    除了高超的武艺,每位黑忍者还需要装备最好的武器.在软件开发的世界里,好的工具能让我们的生活变得更轻松,在更短的时间里写出更棒的代码. 时光回到2008年,那时安卓还很年轻.只有几个相关的博客和谷歌官方 ...

  8. dump_stack调用过程【原创】

    dump_stack调用: void dump_stack(void){    dump_backtrace(NULL, NULL);} 继续看: static void dump_backtrace ...

  9. Android布局-TableLayout表格布局

    一.表格布局-TableLayout 1.概念 表格布局采用行列的形式来管理UI的控件.表格布局适合于有规则的布局. TableRow,用来管理行,TableRow中的一个空间占据该行的一列.若不用T ...

  10. 2015弱校联盟(1) -A. Easy Math

    A. Easy Math Time Limit: 2000ms Memory Limit: 65536KB Given n integers a1,a2,-,an, check if the sum ...