尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

JQuery Tips(4)----一些关于提高JQuery性能的Tips

JQuery Tips(4)----一些关于提高JQuery性能的Tips
📅 发布时间:2026/7/6 4:13:48

在选择时,最好以ID选择符作为开头

我想这个很好理解,因为JQuery内部使用document.getElementByID方法进行ID选择,这种方法比其他所有对DOM选择的方法更快,所以以$("#")开头是最好的,比如:

<div id="a"> <div class="b"> <div class="c"> <div class="d"></div> </div> </div> </div> <script type="text/javascript"> $(".b .c .d")//slow one $("#a .b .c .d")//fast one </script>
提供$()的上下文

在使用$()选择页面元素时,提供选择的范围可以减少选择的时间,换句话说,让选择器只在页面的一小片范围内筛选而不是整个页面当然会减少筛选时间,通过在$()函数内提供第二个参数作为上下文可以实现这一点

<div id="test"> <div class="inner">hi</div> </div> <script type="text/javascript"> alert($(".inner", document.getElementById("test")).text());//increase the speed by provide context alert($(".inner").text());//traverse all the element so that is slower than above </script>

当然,在jquery定义(或者js函数)事件内,可以通过this来指代上下文:

<div id="test"> <div class="inner">hi</div> </div> <script type="text/javascript"> $("#test").click(function() { var text = $(".inner", this).text(); //this means $("#test") alert(text);//alert hi }); </script>

当然,上面的例子也可以写成下面两种方式:

<div id="test"> <div class="inner">hi</div> </div> <script type="text/javascript"> alert($("#test .inner").text()); //method 1 alert($("#test").find(".inner").text());//method 2 and it was best one </script>

其中利用find方法是所有方法中效率最高的

当然,如果你是通过id选择符,也就是$("#..")来选择,不需要提供上下文参数.这对速度没有影响

将经常用的JQuery包装好的元素进行保存

如题,这点比较重要,因为使用$()对页面元素进行选择是需要耗费时间的.而保存为变量进行使用时,可以避免这种浪费,比如:

<ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> <script type="text/javascript"> for (i = 0; i < $("ul li").length; i++) {//very bad,select $("ul li") so many times,waste a lot of time alert($("ul li")[i].innerHTML);//same here,very bad } var $li = $("ul li"); for (i = 0; i < $li.length; i++) {//good one,only selct $("ul li") once alert($li[i].innerHTML); //same here,good } </script>

从代码可以看到,避免多次重复选择可以提高性能:-)

尽量少用选择符

JQuery的选择器是面向数组的,所以在条件允许的情况下尽量少用选择器,比如:

<div id="Div0"></div> <div id="Div1"></div> <div id="Div2"></div> <script type="text/javascript"> $("#Div0").slideDown("slow"); $("#Div1").slideDown("slow"); $("#Div2").slideDown("slow");//slow $("Div0,Div1,Div2").slideDown("slow");//fast </script>

可以看出,使用选择器并用逗号将被选择的元素分开,并选择多个元素不仅让代码更加简洁,并且通过减少创建JQuery的实例所以在性能上也稍胜一筹!

在循环次数很多时避免使用$().each,而使用for循环

使用$().each方法让在进行循环时,会让编程更加轻松,少量的循环在使用$().each时对性能的影响可以忽略不计,但是当这个数字很大的时候,对性能的影响便开始变得可观了.

这个数字,我查了下资料,据说是1000以下可以使用$().each方法,而这个数字如果继续增加,则应该使用for循环语句。

相关新闻

  • ClaudeCode Skills:IDE内可工程化的AI编程技能体系
  • 软件:STM32-F1系列-存储器映像(2026/7/5)
  • GitHub Copilot 实战指南:结对编程式AI辅助开发核心逻辑与7大高频场景

最新新闻

  • Audacity快速上手指南:7天从零到精通的免费音频编辑完整教程
  • 从模糊到高清:AI如何让老旧媒体内容重获新生?
  • Innovus 20.1 Shielding 实战:时钟网络屏蔽布线 3 步配置与串扰降低 40% 实测
  • 第【56期】-- 通信问题的cvx教程之基础篇【三】-- MU-MIMO下行功率分配问题SDR求解+高斯随机化
  • Layerdivider终极指南:免费AI图像分层工具,5分钟将任何插画转为可编辑PSD图层
  • 鸿蒙新特性——Refresh 下拉刷新组件详解

日新闻

  • AI智能体安全防护框架AgentGuard:从原理到实战部署指南
  • KMX63与PIC18F26K40硬件组合及低功耗设计实践
  • 基于YOLO13改进的门体检测模型:C3k2模块与PoolingFormer技术解析

周新闻

  • 基于YOLOv12的番茄成熟度智能检测系统开发
  • 终极RimWorld模组管理指南:用RimSort告别模组冲突烦恼
  • AI Agent框架开发:从理论到实践的完整指南

月新闻

  • 2026年6月公司网站搭建最新热门渠道测评:四大低成本/零代码平台对比+避坑
  • 【Linux】Linux arm 编译QT程序,出现expected “}“报错
  • 【MATLAB例程】四基站二维AOA定位与距离辅助增强对比仿真。基于角度观测和测距修正的固定目标平面定位精度分析

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号