Jquery性能优化详解

寻寻觅觅，觅觅寻寻终于找到了一些关于jquery性能优化的文章，小编果断收藏当然不能忘了加上自己的一些总结及理解。

首先，之前文章中的jquery链式操作就是jquery性能优化方式中的一种，具体实现及优势在这里就不重复了哈。其次，jquery的优化与web优化中的某些方法是一样的。

a.压缩js。使用代码压缩技术，减小文件体积。（使用jsmin、YUI Compressor等）。

b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理。把事件注册上提到父节点上,这 样就不需要为每个子节点注册事件监听.

c.利用缓存，当要多次使用某个jquery对象时，可以将jquery对象缓存到变量里。

代码如下:

var nodeTd = $("table td");
var $cj = $("#cj");

$cj.on("click",function(){
    $cj.css("color","blue");}）

jquery结果缓存，如果需要将jquery结果对象在程序中的其他地方使用，或者function会多次执行，那么就可以将其存放到一变量中。

d.尽量从id选择器来继承。因为id的唯一性，id选择是jquery选择一个元素最快的方法了。

代码如下:

$("#firstd").slideDown(500);
$("#firstd img").slideUp(500);//利用id选择器继承来选择多个元素

e.使用子查询

代码如下:

zhuye.on("swiperight","#data li",function(){
            $(this).find(".delete").hide();
        });//swiperight——看jquery-mobile  api内容内容

f.采用find（），儿不使用上下文查找，.find()函数更快速些，在上面的e中已有使用。

g.采用jquery的内部函数data()来存储状态（这种性能优化方法在百度时第一次见到，例子也暂直接引用他的吧）。

代码如下:

$('#head').data('name', 'value');
// 之后在你的应用中调用:
$('#head').data('name');

h.最后，使用新版本的 jQuery及简化jquery代码。

代码如下:

$(document).ready(function (){
});
$(function (){
});

赞 (0)

相关推荐

  • jQuery性能优化的38个建议

    一.注意定义jQuery变量的时候添加var关键字这个不仅仅是jQuery,所有javascript开发过程中,都需要注意,请一定不要定义成如下:$loading = $('#loading'); //这个是全局定义,不知道哪里位置倒霉引用了相同的变量名,就会郁闷至死的二.请使用一个var来定义变量如果你使用多个变量的话,请如下方式定义: 复制代码 代码如下: var page = 0,   $loading = $('#loading'),   $body = $('body'); 不要给每一

  • jQuery 性能优化指南 （1）

    1,总是从ID选择器开始继承 在jQuery中最快的选择器是ID选择器,因为它直接来自于JavaScript的getElementById()方法. 例如有一段HTML代码: 复制代码 代码如下: <div id="content"> <form method="post" action="#"> <h2>交通信号灯</h2> <ul id="traffic_light"&

  • jQuery性能优化28条建议你值得借鉴

    jQuery性能优化28条建议 一直在寻找有关jQuery性能优化方面的小窍门,能让我那臃肿的动态网页应用变得轻便些.找了很多文章后,我决定将最好最常用的一些优化性能的建议列出来.我也做了一个jQuery性能优化的简明样式表,你可以打印出来或者设为桌面背景. 一.选择器性能优化建议 1. 总是从#id选择器来继承 这是jQuery选择器的一条黄金法则.jQuery选择一个元素最快的方法就是用ID来选择了. 复制代码 代码如下: $('#content').hide(); 或者从ID选择器继承来选

  • Jquery优化效率 提升性能解决方案

    例如有一段HTML代码: 1.总是从ID选择器开始继承 以下是引用片段:<div id="content">  <form method="post" action="#">  <h2>交通信号灯</h2>  <ul id="traffic_light">  <li><input type="radio" class="

  • jQuery代码性能优化的10种方法

    1.总是使用#id去寻找element. 在jQuery中最快的选择器是ID选择器 ($('#someid')). 这是因为它直接映射为JavaScript的getElementById()方法. 选择单个元素 <div id="content"> <form method="post" action="/"> <h2>Traffic Light</h2> <ul id="traff

  • jQuery 性能优化指南（2）

    4,对直接的DOM操作进行限制 这里的基本思想是在内存中建立你确实想要的东西,然后更新DOM . 这并不是一个jQuery最佳实践,但必须进行有效的JavaScript操作 .直接的DOM操作速度很慢. 例如,你想动态的创建一组列表元素,千万不要这样做,如下所示: var top_100_list = [...], // 假设这里是100个独一无二的字符串 $mylist = $("#mylist"); // jQuery 选择到 <ul> 元素 for (var i=0,

  • 22点关于jquery性能优化的建议

    首先,在脑子里牢牢记住 jQuery 就是 javascript.这意味着我们应该采取相同的编码惯例,风格指南和最佳实践. 首先,如果你是一个 javascript 新手,我建议您阅读 <24 JavaScript Best Practices for Beginners>, 这是一篇高质量的 javascript 教程,接触 jQuery 之前最好先阅读. 当你准备使用 jQuery,我强烈建议你遵循下面这些指南: 1. 缓存变量 DOM 遍历是昂贵的,所以尽量将会重用的元素缓存. 复制代码

  • jQuery 性能优化手册 推荐

    在twitter上发现了<jQuery Performance Rules>这篇文章, 简单的摘译了一下: 总是从ID选择器开始继承 在class前使用tag 将jquery对象缓存起来 掌握强大的链式操作 使用子查询 对直接的DOM操作进行限制 冒泡 消除无效查询 推迟到 $(window).load 压缩js 全面掌握jquery库 1. 总是从ID选择器开始继承 在jquery中最快的选择器是ID选择器. 因为它直接来自于Javascript的getElementById()方法. 复制

  • JQuery each()函数如何优化循环DOM结构的性能

    如果对jQuery这东西只停留在用的层面,而不知其具体实现的话,真的很容易用出问题来.这也是为什么近期我一直不怎么推崇用jQuery,这框架的API设定就有误导人们走上歧途之嫌. 复制代码 代码如下: $.fn.beautifyTable = function(options) { //定义默认配置项,再用options覆盖 return this.each(function() { var table = $(this), tbody = table.children('tbody'), tr

  • Jquery性能优化详解

    寻寻觅觅,觅觅寻寻终于找到了一些关于jquery性能优化的文章,小编果断收藏当然不能忘了加上自己的一些总结及理解. 首先,之前文章中的jquery链式操作就是jquery性能优化方式中的一种,具体实现及优势在这里就不重复了哈.其次,jquery的优化与web优化中的某些方法是一样的. a.压缩js.使用代码压缩技术,减小文件体积.(使用jsmin.YUI Compressor等). b. 事件默认是向上冒泡的,发生在子节点中的事件,可以由父节点来处理.把事件注册上提到父节点上,这 样就不需要为每

  • 基于Tomcat安全配置与性能优化详解

    Tomcat 是 Apache软件基金会下的一个免费.开源的WEB应用服务器,它可以运行在 Linux 和 Windows 等多个平台上,由于其性能稳定.扩展性好.免费等特点深受广大用户喜爱.目前,很多互联网应用和企业应用都部署在 Tomcat 服务器上,比如我们公司,哈. 之前我们 tomcat 都采用的是默认的配置,因此在安全方面还是有所隐患的.上周对测试环境的所有服务器的tomcat都做了安全优化,其间也粗略做了一些性能优化,这里就简单记录分享下! 一.版本安全 升级当前的tomcat版本

  • java 较大数据量取差集,list.removeAll性能优化详解

    今天在优化项目中的考勤同步功能时遇到将考勤机中的数据同步到数据库, 两边都是几万条数据的样子,老代码的做法差不多半个小时,优化后我本机差不多40秒,服务器速度会更加理想. 两个数据集取差集首先想到的方法便是List.removeAll方法,但是实验发现jdk自带的List.removeAll效率很低 List.removeAll效率低原因: List.removeAll效率低和list集合本身的特点有关 : List底层数据结构是数组,查询快,增删慢 1.List.contains()效率没有h

  • iOS 下的图片处理与性能优化详解

    图片在计算机世界中怎样被存储和表示? 图片和其他所有资源一样,在内存中本质上都是0和1的二进制数据,计算机需要将这些原始内容渲染成人眼能观察的图片,反过来,也需要将图片以合适的形式保存在存储器或者在网络上传送. 这种将图片以某种规则进行二进制编码的方式,就是图片的格式. 常见的图片格式 图片的格式有很多种,除了我们熟知的 JPG.PNG.GIF,还有Webp,BMP,TIFF,CDR 等等几十种,用于不同的场景或平台. 这些格式可以分为两大类:有损压缩和无损压缩. 有损压缩:相较于颜色,人眼对光

  • MySQL Limit性能优化及分页数据性能优化详解

    MySQL Limit可以分段查询数据库数据,主要应用在分页上.虽然现在写的网站数据都是千条级别,一些小的的优化起的作用不大,但是开发就要做到极致,追求完美性能.下面记录一些limit性能优化方法. Limit语法: SELECT * FROM table LIMIT [offset,] rows | rows OFFSET offset LIMIT子句可以被用于强制 SELECT 语句返回指定的记录数.LIMIT接受一个或两个数字参数.参数必须是一个整数常量. 如果给定两个参数,第一个参数指定

  • Postgre数据库Insert 、Query性能优化详解

    Postgre数据库Insert 、Query性能优化详解

    一.前言以前的系统由于表设计比较复杂(多张表,表与表直接有主从关系),这个是业务逻辑决定的. 插入效率简直实在无法忍受,必须优化.在了解了Postgre的Copy,unlogged table 特性 之后,决定一探究竟. 二.测试用例 1.数据表结构:表示一个员工工作绩效的表(work_test):共15个字段id,no,name,sex,tel,address,provice,city,post,mobile,department,work,start_time,end_time,score索

  • MySQL批量SQL插入性能优化详解

    MySQL批量SQL插入性能优化详解

    对于一些数据量较大的系统,数据库面临的问题除了查询效率低下,还有就是数据入库时间长.特别像报表系统,每天花费在数据导入上的时间可能会长达几个小时或十几个小时之久.因此,优化数据库插入性能是很有意义的. 经过对MySQL innodb的一些性能测试,发现一些可以提高insert效率的方法,供大家参考参考. 1. 一条SQL语句插入多条数据. 常用的插入语句如: INSERT INTO `insert_table` (`datetime`, `uid`, `content`, `type`) VAL

  • 数据库Mysql性能优化详解

    在mysql数据库中,mysql key_buffer_size是对MyISAM表性能影响最大的一个参数(注意该参数对其他类型的表设置无效),下面就将对mysql Key_buffer_size参数的设置进行详细介绍下面为一台以MyISAM为主要存储引擎服务器的配置: mysql> show variables like 'key_buffer_size'; +-----------------+------------+ | Variable_name | Value | +---------

  • Android图片性能优化详解

    1. 图片的格式 目前移动端Android平台原生支持的图片格式主要有:JPEG.PNG.GIF.BMP.和WebP(自从Android 4.0开始支持),但是在Android应用开发中能够使用的编解码格式只有三种:JPEG.PNG.WebP,图片格式可以通过查看Bitmap类的CompressFormat枚举值来确定. public static enum CompressFormat { JPEG. PNG. WebP; private CompressFormat() { } } 如果要在

  • JS 加载性能Tree Shaking优化详解

    目录 正文 什么是 Tree Shaking 寻找 Tree Shaking 的机会 防止 Babel 将 ES6 模块转换为 CommonJS 模块 留意 side effects 只导入你需要的 更复杂的情况 总结 正文 随着 web 应用复杂性增加,JS 代码文件的大小也在不断的攀升,截住 2021年9月,在 httparchive 上有统计显示——在移动设备上 JS 传输大小大约为 447 KB,桌面端 JS 传输大小大约为 495 KB,注意这仅仅是在网络中传输的 JS 文件大小,JS

随机推荐