写出高质量jq代码常记,提高代码性能
论jQuery和javascript性能的文章并不罕见。然而,本文我计划总结一些速度方面的技巧和我本人的一些建议,来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。
首先,在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。
当你准备使用jQuery,我强烈建议你遵循下面这些指南:
一、DOM操作
1.缓存变量
DOM遍历是昂贵的,所以尽量将会重用的元素缓存。
// 糟糕
// 建议
2.繁重的操作中分离元素
如果你打算对DOM元素做大量操作(连续设置多个属性或css样式),建议首先分离元素然后在添加。
// 糟糕
// 建议
3.使用子查询缓存的父元素
正如前面所提到的,DOM遍历是一项昂贵的操作。典型做法是缓存父元素并在选择子元素时重用这些缓存元素。
// 糟糕
// 建议 (高效)
二、选择器
1.避免通用选择符
将通用选择符放到后代选择符中,性能非常糟糕。
// 糟糕
// 建议
2.避免隐式通用选择符
通用选择符有时是隐式的,不容易发现。
// 糟糕
// 建议
3.优化选择符
例如,Id选择符应该是唯一的,所以没有必要添加额外的选择符。
// 糟糕
// 建议
4.避免多个ID选择符
在此强调,ID 选择符应该是唯一的,不需要添加额外的选择符,更不需要多个后代ID选择符。
// 糟糕
// 建议
三、变量
1.避免全局变量
jQuery与javascript一样,一般来说,最好确保你的变量在函数作用域内。
// 糟糕
// 建议
2.使用匈牙利命名法
在变量前加$前缀,便于识别出jQuery对象。
// 糟糕
// 建议 - 在jQuery对象前加$前缀
3.使用 Var 链(单 Var 模式)
将多条var语句合并为一条语句,我建议将未赋值的变量放到后面。
四、函数调用
1.请使用’On’
在新版jQuery中,更短的 on(“click”) 用来取代类似 click() 这样的函数。在之前的版本中 on() 就是 bind()。自从jQuery 1.7版本后,on() 附加事件处理程序的首选方法。然而,出于一致性考虑,你可以简单的全部使用 on()方法。
// 糟糕
// 建议
2.精简javascript
一般来说,最好尽可能合并函数。
// 糟糕
// 建议
3.链式操作
jQuery实现方法的链式操作是非常容易的。下面利用这一点。
// 糟糕
// 建议
五、技巧
1.维持代码的可读性
伴随着精简代码和使用链式的同时,可能带来代码的难以阅读。添加缩紧和换行能起到很好的效果。
// 糟糕
// 建议
2.选择短路求值
短路求值是一个从左到右求值的表达式,用 &&(逻辑与)或 || (逻辑或)操作符。
// 糟糕
// 建议
3.选择捷径
精简代码的其中一种方式是利用编码捷径。
// 糟糕
// 建议
4.熟记技巧
你可能对使用jQuery中的方法缺少经验,一定要查看的文档,可能会有一个更好或更快的方法来使用它。
// 糟糕
// 建议 (高效)
5.坚持最新版本
新版本通常更好:更轻量级,更高效。显然,你需要考虑你要支持的代码的兼容性。例如,2.0版本不支持ie 6/7/8。摒弃弃用方法关注每个新版本的废弃方法是非常重要的并尽量避免使用这些方法。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
移动端跨平台开发的深度解析
跨平台一直是老生常谈的话题,cordova、ionic、react-native、weex、kotlin-native、flutter等跨平台框架的百花齐放,颇有一股推倒原生开发者的势头。(事实上更多是共存发展)看完本篇,相信你会对于当下跨平台移动开发的现状、实现原理、框架的选择等有更深入的理解。 一、前言 为什么我们需要跨平台开发? 本质上,跨平台开发是为了增加代码复用,减少开发者对多个平台差异适配的工作量,降低开发成本,提高业务专注的同时,提供比web更好的体验。嗯~通俗了说就是:省钱、偷懒。 本篇主要以react-native、weex、flutter,结合资讯展望,深入聊聊当前跨平台移动开发的实现原理、现状与未来。至于为什么只讲它们,因为对比ionic、phoneGap,它们更于 “naive” (˶‾᷄ ⁻̫ ‾᷅˵)。 二、原理与特性 目前移动端跨平台开发中,大致归纳为以下几种情况: react native、weex均使用JavaScript作为编程语言,目前JavaScript在跨平台开发中,可谓占据半壁江山,大有“一统天下”的趋势。kotlin-native开始支持 ...
- 下一篇
Python可视化笔记之folium交互地图
leftlet给R语言提供了很好用的交互式动态地图接口,其在Python中得API接口包名为folium(不知道包作者为何这样起名字,和leaflet已经扯不上关系了),可以满足我们平时常用的热力图、填充地图、路径图、散点标记等高频可视化场景。 本篇主要介绍其在point、line、polygon这三个地理信息场景下得应用: import pandas as pd import numpy as np import os import folium from folium import plugins import webbrowser import geopandas as gp Point: full = pd.read_excel("D:/Python/File/Cities2015.xlsx") full = full.dropna() 默认情况下folium.Marker函数用于在空间范围内标记点,点得样式是雨滴形状,但是也可以使用folium.RegularPolygonMarker函数来自定义点样式: schools_map = folium.Map(location=[...
相关文章
文章评论
共有0条评论来说两句吧...