文档章节

一段JS代码的性能优化

智深
 智深
发布于 2012/11/26 23:15
字数 812
阅读 851
收藏 22

所在项目:    机票预定系统

所属模块:    前端查询模块

存在的问题:    用户查询出航班数据时,点击按照价格排序,当航班数据很多时(大于>30条),在IE浏览器下会因为消耗过多内存而崩溃

涉及的函数:    2个  reverseTr  reverseTrLowToHigh

原来代码如下:

01 function reverseTr(sortType) {
02     var sortTrLength = $('.sortTable').length;
03     for (var sortedI = sortTrLength - 1; sortedI > 0; sortedI--) {
04         var minTr = $('.sortTable').eq(0);
05         var currentMin = 0;//定义当前最小值的编号用户与后面判断最终最小与最后是否相同,若同,则不变换位置(会引起删除现象)
06         for (var sortedJ = 0; sortedJ <= sortedI; sortedJ++) {
07             var sortingTr = $('.sortTable').eq(sortedJ);
08             if (parseInt(minTr.attr(sortType), '10') > parseInt(sortingTr.attr(sortType), '10')) {
09                 minTr = sortingTr;
10                 currentMin = sortedJ;
11             }
12         }
13         if (currentMin != sortedJ - 1) {
14             var currentLastTr = $('.sortTable').eq(sortedI);
15             currentLastTr.after(minTr);
16         }
17 
18     }
19     var cssOdd = false;
20     $('.sortTable').each(function(){
21         if(cssOdd){
22             $(this).attr('class','odd sortTable');
23             cssOdd = false;
24         }else{
25             $(this).attr('class','sortTable');
26             cssOdd = true;
27         }
28 
29     });
30 }


01 function reverseTrLowToHigh(sortType) {
02     var sortTrLength = $('.sortTable').length;
03 
04     for (var sortedI = sortTrLength - 1; sortedI > 0; sortedI--) {
05         var minTr = $('.sortTable').eq(0);
06         var currentMin = 0;//定义当前最小值的编号用户与后面判断最终最小与最后是否相同,若同,则不变换位置(会引起删除现象)
07         for (var sortedJ = 0; sortedJ <= sortedI; sortedJ++) {
08             var sortingTr = $('.sortTable').eq(sortedJ);
09             if (parseInt(minTr.attr(sortType), '10') < parseInt(sortingTr.attr(sortType), '10')) {
10                 minTr = sortingTr;
11                 currentMin = sortedJ;
12             }
13         }
14         if (currentMin != sortedJ - 1) {
15             var currentLastTr = $('.sortTable').eq(sortedI);
16             currentLastTr.after(minTr);
17         }
18 
19     }
20     var cssOdd = false;
21     $('.sortTable').each(function(){
22         if(cssOdd){
23             $(this).attr('class','odd sortTable');
24             cssOdd = false;
25         }else{
26             $(this).attr('class','sortTable');
27             cssOdd = true;
28         }
29 
30     });
31 }

注:这两个JS函数可以根据传入的 sortType 排序,sortType不仅仅是价格;reverseTr 第 20 行,设置每一行的样式

根据页面的数据量来说,JS所采用的冒泡排序算法是没有问题的,那问题出在什么地方呢?

之前我并没有碰到过JS性能的问题,SO GOOGLE...... 发现 dom的绘制和重绘非常消耗CPU和内存,dom结构和样式发生变化时都会发生重绘,在IE下尤为突出(可能是因为IE没有做相关优化,chrome快的多)。

因此改正代码,减少重绘次数;

以这个函数 reverseTr 举例: 第 15 行, 之前每次操作都会去操作dom树,都会引起dom重绘;第 20 行,遍历航班列表 设置样式的操作,也会引起dom重绘;把dom操作进行合并,也就说现在内存中进行dom操作,然后apeend到当前dom树中,代码如下:

function reverseTr(sortType) {
    var sortTrLength = $('.sortTable').length;
	
	var temp = document.createElement("div");
	temp.className = "tb-void";
	
    for (var sortedI = sortTrLength - 1; sortedI > 0; sortedI--) {
        var minTr = $('.sortTable').eq(0);
        var currentMin = 0;//定义当前最小值的编号用户与后面判断最终最小与最后是否相同,若同,则不变换位置(会引起删除现象)
        for (var sortedJ = 0; sortedJ <= sortedI; sortedJ++) {
            var sortingTr = $('.sortTable').eq(sortedJ);
            if (parseInt(minTr.attr(sortType), '10') > parseInt(sortingTr.attr(sortType), '10')) {
                minTr = sortingTr;
                currentMin = sortedJ;
            }
        }
        if (currentMin != sortedJ - 1) {
            var currentLastTr = $('.sortTable').eq(sortedI);
            temp.appendChild(minTr.get(0));
        }

    }
	$('.tb-void').empty();
	
    var cssOdd = false;
	var jtemp = $(temp);
    jtemp.children().each(function(){
        if(cssOdd){
            $(this).attr('class','odd sortTable');
            cssOdd = false;
        }else{
            $(this).attr('class','sortTable');
            cssOdd = true;
        }
    });
	
	$('.tb-void').replaceWith(jtemp);
	
}

很多知识参考了这篇文章:

https://www.ibm.com/developerworks/cn/web/1107_zhouxiang_tunejs/

© 著作权归作者所有

上一篇: Eclipse常用快捷键
下一篇: redis协议
智深
粉丝 90
博文 65
码字总数 42744
作品 0
朝阳
程序员
私信 提问
前端性能优化:细说JavaScript的加载与执行

本文主要是从性能优化的角度来探讨JavaScript在加载与执行过程中的优化思路与实践方法,既是细说,文中在涉及原理性的地方,不免会多说几句,还望各位读者保持耐心,仔细理解,请相信,您的耐...

小白师兄
2018/06/19
0
0
域名注册商 GoDaddy 被指悄悄在托管网站页面植入脚本

有网站管理者发文指责全球知名域名注册商 GoDaddy 在未经其授权的情况下,私自在其所有网页中植入 JavaScript 脚本,而这可能导致网站性能下降甚至崩溃。 该网友的网站托管于 GoDaddy,在检查...

h4cd
01/15
0
0
技术进阶:通过来JavaScript 性能调优提高 Web 应用性能

前言 现在的互联网应用中,在Web 开发中经常会遇到性能的问题,尤其是针对当今的 Web2.0 +应用。JavaScript 是当今使用最为广泛的 Web 开发语言,Web 应用的性能问题很大一部分都是由程序员写...

Java高级架构师
2018/12/12
0
0
在 Microsoft Edge 提供快速的 JavaScript 性能

我们已经在 Windows 10 和 Microsoft Edge 大大地提高了 Chakra JavaScript 引擎的性能。目的是尽可能地利用现有硬件,让你的 JavaScript 代码跑的更快。以便你创建的网页能在 Microsoft Ed...

oschina
2015/05/21
5K
25
javascript性能优化之避免二次评估

javascript与许多脚本语言一样,允许你在程序中获取一个包含代码的字符串然后运行它。例如下面代码: 在js文件中执行另一段Javascript代码时,需要付出二次评估的代价,首先需要判断当前代码...

老韭菜
2018/07/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CenOS7安装Docker--yum安装

每次安装都要去看官方文档,比较烦。所以把官网的搬过来。官网链接:https://docs.docker.com/install/linux/docker-ce/centos/ #卸载已有的Dockersudo yum remove docker \ ...

RippleChan
4分钟前
0
0
SpringBoot2.0高级案例(07) 整合:Redis集群 ,实现消息队列场景

本文源码GitHub地址:知了一笑https://github.com/cicadasmile/middle-ware-parent 一、Redis集群简介 1、RedisCluster概念 Redis的分布式解决方案,在3.0版本后推出的方案,有效地解决了...

知了一笑
20分钟前
0
0
服务器常见问题和故障诊断排除

原创: AIX7 talkwithtrend x86 服务器常见问题和故障诊断排除 | 周末送资料 : https://mp.weixin.qq.com/s/Qe_KConoUS6UzIANxAKacw 注意 : x86是我们广为熟知的架构,在核心处理器基础上,...

寰宇01
26分钟前
0
0
Android Camera模块解析之拍照

最近学习Android的camera模块,本文先介绍一下camera2的api,然后给出android camera拍照的例子,讲解一下camera 拍照的原因知识,与大家共勉。 camera2 介绍 android camera拍照功能介绍 一...

天王盖地虎626
34分钟前
7
0
Excel 曝Power Query安全漏洞

近日,Mimecast 威胁中心的安全研究人员,发现了微软 Excel 电子表格应用程序的一个新漏洞,获致 1.2 亿用户易受网络攻击。其指出,该安全漏洞意味着攻击者可以利用 Excel 的 Power Query 查...

linuxCool
40分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部