jquery 性能优化与实践

一.使用jQuery对象缓存

1.所谓对象缓存，就是在使用jQuery对象时，先尽量使用变量保存对象名，然后，通过变量进行相应的方法操作。

2.无论是局部还是全局性的变量，为了避免与其他变量名称冲突，原则上，请尽量使用"$"符号进行命名；

3.如果在同一个DOM对象中有多个对象的操作，应尽量采用链接式的写法优化调用的代码；

二.选择器中含有特殊符号

1.<div id=“div#2#"></div> $("#div\\#2\\#");

通过采用在特殊字符前添加转义符"\\"的方法，可以正确获取这些元素。

三.事件中的target方法优化冒泡现象

例子：在一个表单form中，有3个input输入框，为了使每个输入框获取焦点时改变原有的样式，通过事件中的target方法，获取文本框的父级元素，并为该元素绑定一个事件，从而实现文本框改变样式的需求。

<form id="form"><label>姓名：<input type="text"></label><label>性别：<input type="text"></label><label>年龄：<input type="text"></label>
</form>

<script>$("#form").bind("click",function(e){$objChild = $(e.target);//捕捉触发事件的元素$objChild.addClass("txt");//增加元素的样式
    })
</script>

四.使用data()方法在元素上存取移除数据

1.根据元素中的名称定义或返回存储的数据，其调用格式为：data([name]);

2.根据元素中的名称在元素上存储或设置数据，其调用格式为：data(name,value);

3.除了定义和存储数据外，还可以移除元素中存放的数据，其调用格式为：removeData(name).

五.减少对DOM元素直接操作

DOM元素操作的原理是：先在内存中创建DOM结构，然后，更新现有的DOM结构。如果直接对DOM进行操作，那么其性能是很低的，因此，为了减少这种对DOM元素直接操作的次数，有必要在操作前完善大部分的DOM操作，最后通过一次直接操作，更新其DOM结构。

例子：向ul元素里面动态插入4个li元素。

<script>$(function(){var arrList = ["1","2","3","4"];var initList = "";//初始化字符
        $.each(arrList,function(index){//遍历后累加数组元素initList += "<li>" + arrList[index] + "</li>";})//一次性完成DOM元素的添加$("ul").append(initList);})
</script>

六.jQuery对象与DOM对象的类型转换

jQuery中提供的[index]与get(index)方法既可将jQuery对象转换成DOM对象。DOM对象只要通过jQuery方法$()进行包装，就可以转换成jQury对象。

转载于:https://www.cnblogs.com/qianrong/p/5553699.html

jquery 性能优化与实践相关推荐

前端性能优化最佳实践（转）
转载请注明: 转载自WEB前端开发(www.css119.com)-关注常见的WEB前端开发问题.最新的WEB前端开发技术(webApp开发.移动网站开发).最好的WEB前端开发工具和最全的WEB前端 ...
jQuery性能优化指南(转载)
现在jquery应用的越来越多, 有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquery虽在诸多的js类库中性能表现还算优秀, 但毕竟不是在用原生的javascript开发, ...
jQuery 性能优化指南（2）
这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM . 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 .直接的DOM操作速度很慢. 例如,你想动态的创建一组列表 ...
jQuery 性能优化技巧
原文地址:jQuery 性能优化技巧博客地址:www.extlight.com 一.使用最新版本 jQuery 类库二.合理使用选择器 # 推荐使用 $("#id") # 可以 ...
MySQL第12天：MySQL索引优化分析之性能优化案例实践
MySQL索引优化分析之性能优化案例实践执行计划中各select_type含义可以看:MySQL第11天:MySQL索引优化分析之性能分析 https://weibo01.blog.csdn.net ...
jQuery性能优化指南（1）
jQuery性能优化指南(1) 1,总是从ID选择器开始继承在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HT ...
高性能网站建设进阶指南：Web开发者性能优化最佳实践 pdf扫描版
高性能网站建设进阶指南:Web开发者性能优化最佳实践是<高性能网站建设指南>姊妹篇.作者Steve Souders是Google Web性能布道者和Yahoo!前首席性能工程师.在本书中, ...
jQuery性能优化
大家都知道jQuery非常流行,是前端开发中重要的类库之一,也成为构建丰富web前端的利器.但是作为一个javascript类库,很多人并不是很清楚如何正确的使用jQuery来达到最佳的性能,特别是复 ...
前端性能优化最佳实践
本文主要考量客户端性能.服务器端和网络性能,内容框架来自 Yahoo Developer Network,包含 7 个类别共 35 条前端性能优化最佳实践,在此基础上补充了一些相关或者更符合主流技术的 ...

jquery 性能优化与实践

jquery 性能优化与实践相关推荐

最新文章

热门文章