专栏首页性能与架构jquery官方性能优化建议

jquery官方性能优化建议

jquery的官网上给出了6点性能方面的建议:

(1)在循环外面做append操作

DOM操作是有成本的,一次性append要比循环中每次都append要好很多

下面这种操作方式是一种普遍的现象,在循环中每次都执行append

$.each( myArray, function( i, item ) { 
    var newListItem = "<li>" + item + "</li>"; 
    $( "#ballers" ).append( newListItem ); 
});

建议创建一个fragment,在循环中 把内容append到fragment,最后把这个fragment append到dom节点

var frag = document.createDocumentFragment();
$.each( myArray, function( i, item ) { 
    var newListItem = document.createElement( "li" );
    var itemText = document.createTextNode( item ); 
    newListItem.appendChild( itemText ); 
    frag.appendChild( newListItem ); 
});
$( "#ballers" )[ 0 ].appendChild( frag );

或者在循环中构造字符串,最后把字符串设置到节点中

(2)循环时缓存length

循环中,不要每次都访问length熟悉,应在循环开始前把length值缓存起来

var myLength = myArray.length; 
for ( var i = 0; i < myLength; i++ ) { 
    // ... 
}

(3)操作子节点时 先把子节点Detach出来

DOM操作较慢,应尽量避免大量操作,如果想对某节点内部做一些操作,应先把子节点都移出来,对这些子节点操作完成后再放回去

var table = $( "#myTable" );
var parent = table.parent();
table.detach();
// 执行对table的各种操作
parent.append( table );

(4)不要对空节点进行操作

如果你对空对象操作时,jquery是不会告诉你的,因为对空操作时开销也不小,所以应该自己验证一下是否为空,以免做很多无效操作

// 糟糕的方式
$( "#nosuchthing" ).slideUp();
// 好的方式
var elem = $( "#nosuchthing" );
if ( elem.length ) {
    elem.slideUp();
}
// 更好的方式
jQuery.fn.doOnce = function( func ) { 
    this.length && func.apply( this ); 
    return this; 
} 
$( "li.cartitems" ).doOnce(function() { 
    // ...
});

(5)选择器优化

1)使用ID选择器

选择器以ID开始总是最好的

// 快

$( "#container div.robotarm" );

// 更快

$( "#container" ).find( "div.robotarm" );

第二种方式更快是因为使用了浏览器原生支持的document.getElementById()

2)右边尽量指定得详细点 而左边则尽量简单点

// 不好

$( "div.data .gonzalez" );

// 好

$( ".data td.gonzalez" );

因为选择器是从右面开始查找的,所以右面越明确,查找越快

3)避免冗余

// 不好

$( ".data table.attendees td.gonzalez" );

// 好

$( ".data td.gonzalez" );

4)避免通用选择器

通用选择器在任何地方出现都会很慢

$( ".buttons > *" ); // 及其慢的

$( ".buttons" ).children(); // 优化的

$( ".category :radio" ); // 隐式通用选择器,没明确指定*,但实际还是会使用

$( ".category *:radio" ); // 显示通用选择器

$( ".category input:radio" ); // 优化的

(6)修改多个节点的css时,使用样式表

如果你正在使用css()对20个以上节点修改css,使用style标签来代替,会提速将近60%

// 对20个以上的节点进行CSS操作,这样比较慢

$( "a.swedberg" ).css( "color", "#0769ad" );

// 这样会快很多

$( "<style type=\"text/css\">a.swedberg { color: #0769ad }</style>")

.appendTo( "head" );

本文分享自微信公众号 - 性能与架构(yogoup)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2015-09-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jquery中各个属性的应用

    <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf...

    闵开慧
  • 码云推荐 | 高德地图位置选择器

    bootstrap.AMapPositionPicker 是一款基于高德地图的位置选择插件,使用jQuery开发。 ? 概述 bootstrap.AMapPos...

    码云Gitee
  • jQuery选择器大全(48个代码片段+21幅图演示)

    选择器是jQuery最基础的东西,本文中列举的选择器基本上囊括了所有的jQuery选择器,也许各位通过这篇文章能够加深对jQuery选择器的理解,它们本身用法就...

    牛嗷嗷
  • 所历前端“姿势”更替记(其一)

    写作是为了光阴流逝使我心安。在上一篇 Vue ES6 Jade Scss Webpack Gulp中,阐述了现如今从事前端工作的“打开方式”;然而,虽到目前为...

    晚晴幽草轩轩主
  • 八款不可错过的热门 Markdown 开发包 | 码云周刊第 34 期

    八款不可错过的热门 Markdown 开发包 1码云项目推荐 项目名称:Markdown 编辑器 Editor.md ? 项目简介:Editor.md 是一个可...

    码云Gitee
  • jQuery VS JavaScript原生API

    如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替...

    晚晴幽草轩轩主
  • vue之导入Bootstrap以及jQuery的两种方式

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入 此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无...

    用户1214487
  • 高效Web开发的10个jQuery代码片段

    高效Web开发的10个jQuery代码片段 在过去的几年中,jQuery一直是使用最为广泛的JavaScript脚本库。今天我们将为各位Web开发者提供10个最...

    牛嗷嗷
  • IOS 8 Safari JIT bug影响jQuery和underscore

    前端时间为移动游戏做一个网页活动需求(9宫格的刮奖),遇到一个很诡异的问题:Android端OK,就是在Ios设备上,点击非第一块区域,显示却是第一块区域被刮开...

    晚晴幽草轩轩主
  • 自实现PC端jQuery版轮播图

      最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就...

    用户1174387

扫码关注云+社区

领取腾讯云代金券