写出高质量jq代码常记,提高代码性能

简介: 论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。

论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。 

首先,在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。

当你准备使用jQuery,我强烈建议你遵循下面这些指南: 

一、DOM操作 

1.缓存变量 

DOM遍历是昂贵的,所以尽量将会重用的元素缓存。

// 糟糕

img_9e4437461180117a0daa755d7522c050.png

// 建议

img_68ccbb0ff2ad2a5e5aa58b1fe69253c5.png

2.繁重的操作中分离元素 

如果你打算对DOM元素做大量操作(连续设置多个属性或css样式),建议首先分离元素然后在添加。 

// 糟糕

img_3514240398d1352d5ec1a056c374f00c.png

// 建议

img_7dcd34ec255e41a9a2d98b3e2ee8cb1c.png

3.使用子查询缓存的父元素 

正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。 

// 糟糕

img_23e5ced66b9b16db7fd10808c159d288.png

// 建议 (高效)

img_c9967570c8c8415b0f17c3c00b52c627.png

二、选择器 

1.避免通用选择符 

将通用选择符放到后代选择符中,性能非常糟糕。 

// 糟糕

img_641aa6862ed636345c371cdecda32e5d.png

// 建议

img_30b327ab6d59d4ea37be085892c5b99c.png

2.避免隐式通用选择符 

通用选择符有时是隐式的,不容易发现。 

// 糟糕

img_295b7e8d4804ebd5d2627661d7c9a42f.png

// 建议

img_f91700429e7cde8dad6454a2d5929d14.png

3.优化选择符 

例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符。 

// 糟糕

img_9e42bbd3598be38f14bbd9e82b105750.png

// 建议

img_d1037ebfb3814f84e692ec162ae495be.png

4.避免多个ID选择符 

在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。 

// 糟糕

img_d520f9ae6091abb8d69bdb1d24c7a500.png

// 建议

img_7b2718df2b1a9a75275fb05fec7a94b5.png

三、变量 

1.避免全局变量 

jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。 

// 糟糕

img_41df1119ef5d03d664e9ca9322e71868.png

// 建议

img_5b52fc762aa2f66ec727889e7a35e200.png

2.使用匈牙利命名法 

在变量前加$前缀,便于识别出jQuery对象。 

// 糟糕

img_b2b50a4bd5e8026b2a256e8661ac7cb9.png

// 建议 - 在jQuery对象前加$前缀

img_65bf5f8d67e1e881436b69105c35e0df.png

3.使用 Var 链(单 Var 模式) 

将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。

img_52a536adee8871642a5706cf8733674d.png

四、函数调用 

1.请使用’On’ 

在新版jQuery中,更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用 on()方法。 

// 糟糕

img_080cc2f9ef9e5cd9c3993a981b4c7f22.png

// 建议

img_ec35a8b72ccd7fdf92de7aa20cf750bf.png

2.精简javascript 

一般来说,最好尽可能合并函数。 

// 糟糕

img_f9faf3dbf1341a785e80de67cd07e17f.png

// 建议

img_8f1f02a5339d9303b92e1e9ceb0c65ae.png

3.链式操作 

jQuery实现方法的链式操作是非常容易的。下面利用这一点。 

// 糟糕

img_e6f604581867486f2da594531f1a9ac0.png

// 建议

img_5eba793744073dae098eba9e5bf36e96.png

五、技巧 

1.维持代码的可读性 

伴随着精简代码和使用链式的同时,可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。 

// 糟糕

img_3a685e0fbdeb853ec576d3b53c994ce6.png

// 建议

img_b6292a54eda8bb51c25cbf0ef49d75a4.png

2.选择短路求值 

短路求值是一个从左到右求值的表达式,用 &&(逻辑与)或 || (逻辑或)操作符。 

// 糟糕

img_23003536811411582923bbf52c5724ae.png

// 建议

img_57b310631b0c85b104a6eda3e8a3539e.png

3.选择捷径 

精简代码的其中一种方式是利用编码捷径。 

// 糟糕

img_5f4517b38998ca3eea25803891c1ed3f.png

// 建议

img_e1549a1d2dc75e7924c015a5652aa0e5.png

4.熟记技巧 

你可能对使用jQuery中的方法缺少经验,一定要查看的文档,可能会有一个更好或更快的方法来使用它。 

// 糟糕

img_359291c831f751715429de454e9697b9.png

// 建议 (高效)

img_0f128400e4be32d77e1b9b3ea5ecf968.png

5.坚持最新版本 

新版本通常更好:更轻量级,更高效。显然,你需要考虑你要支持的代码的兼容性。例如,2.0版本不支持ie 6/7/8。摒弃弃用方法关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。

相关文章
|
安全 Java easyexcel
【二十七】springboot实现多线程事务处理
【二十七】springboot实现多线程事务处理
702 0
|
编解码 Ubuntu 虚拟化
【问题解决】VMware安装ubuntu操作系统出现分辨率的问题
【问题解决】VMware安装ubuntu操作系统出现分辨率的问题
2095 0
【问题解决】VMware安装ubuntu操作系统出现分辨率的问题
|
9月前
|
负载均衡 监控 定位技术
HTTP代理网速变慢的原因及优化策略
随着互联网技术的发展,使用HTTP动态代理IP的人越来越多。本文介绍了HTTP代理网速变慢的六个常见原因及解决方法,包括代理服务器的地理位置、带宽、服务器负载、网络拥塞、配置问题和数据加密解密时间。通过识别和解决这些问题,可以有效提升HTTP代理的网速。
369 10
|
机器学习/深度学习 数据采集 数据建模
Python机器学习数据建模与分析——Numpy和Pandas综合应用案例:空气质量监测数据的预处理和基本分析
本篇文章主要以北京市空气质量监测数据为例子,聚集数据建模中的数据预处理和基本分析环节,说明Numpy和Pandas的数据读取、数据分组、数据重编码、分类汇总等数据加工处理功能。同时在实现案例的过程中对用到的Numpy和Pandas相关函数进行讲解。
914 0
Python机器学习数据建模与分析——Numpy和Pandas综合应用案例:空气质量监测数据的预处理和基本分析
|
编解码 数据安全/隐私保护
中继网关转码设备与IMS对接说明
中继网关转码设备与IMS对接说明
|
Java Maven 数据库连接
|
10天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1208 5
|
9天前
|
机器学习/深度学习 人工智能 前端开发
通义DeepResearch全面开源!同步分享可落地的高阶Agent构建方法论
通义研究团队开源发布通义 DeepResearch —— 首个在性能上可与 OpenAI DeepResearch 相媲美、并在多项权威基准测试中取得领先表现的全开源 Web Agent。
1170 87
|
7天前
|
机器学习/深度学习 物联网
Wan2.2再次开源数字人:Animate-14B!一键实现电影角色替换和动作驱动
今天,通义万相的视频生成模型又又又开源了!Wan2.2系列模型家族新增数字人成员Wan2.2-Animate-14B。
653 11

热门文章

最新文章