概述 今天产品反映有个5000条数据的页面的保存按钮很慢,查看代码看到是因为点击保存按钮之后,进行了查重操作,而查重操作是用2个for循环完成了,时间复杂度是O(n^2).没办法,只能想办法优化一下了. 主要参考了这篇文章:JavaScript 高性能数组去重 源码 简单来说,这个页面的要求是查找一个数组中的重复项,并且返回重复项的行号.源码简化后如下: checkData(tableData) { // console.time('数组检查重复项时间'); // 检查重复项,检查空值(全局)…
最近开发的软件中需要用到日志功能,其中有一个重要功能是显示日期和时间.于是网上搜了一把,搜到大量的日期格式化函数,不过比较了下,感觉代码都不够优雅,而且性能都不给力.对线上一些代码进行了评测,以下是一些结论和优化代码. 测试代码如下,在同以浏览器中,分别对格式化函数进行50万次计算: var start = new Date().getTime(); var date = new Date(); for(var i = 0;i<500000;i++){ date.format1('yyyy-MM…
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂的.   [合并JS代码,尽可能少的使用script标签] 最常见的方式就是带代码写入一个js文件中,让页面只使用一次<script></script>标签来引入   [无堵塞加载JS] 通过给script标签增加 defer属性或者是 a…
所谓缓存,通俗点讲就是把已经做过的事情结果先暂时存起来,下次再做同样的事情,不用再重新去做,只要把之前的存的结果拿出来用即可,很明显大大提升了效率.他的应用场景非常广泛.如: 1.缓存ajax结果,大多数网站都会有产品推荐功能,比如按热销推荐,简单低效的做法,每次点击切换的时候,都要通过ajax去数据库中取出结果,其实他的结果并不是要实时去获取,完全可以用缓存技术保存起来,减少数据库处理压力 2.单例模式,也是缓存的应用 一.缓存原理与应用 我们先来一个的简单例子,比如,判断一个数是不是素数,普…
文章首发于笔者的个人博客 文章概览 本文主要内容包括:什么是babel-polyfill,如何使用,如何通过按需加载进行性能优化. 本文所有例子可以在 笔者的github 找到. 什么是babel-polyfill babel只负责语法转换,比如将ES6的语法转换成ES5.但如果有些对象.方法,浏览器本身不支持,比如: 全局对象:Promise.WeakMap 等. 全局静态函数:Array.from.Object.assign 等. 实例方法:比如 Array.prototype.includ…
js性能优化-事件委托 考虑一个列表,在li的数量非常少的时候,为每一个li添加事件侦听当然不会存在太多性能方面的问题,但是当列表非常的长,长到上百上千甚至上万的时候(当然只是一个解释,实际工作中很少遇到这么多li的情况),为每个li添加事件侦听就会对页面性能产生很大的影响. 就像下面这段代码: <!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>js性能优化&l…
Web性能优化已经是老生常谈的话题了, 不过笔者也一直没放在心上,主要的原因还是项目的用户量以及页面中的js,css文件就那几个,感觉没什么优化的.人总要进步的嘛,最近在被angularjs吸引着,也用了angularjs开发了一个项目,那感觉真的是谁用谁知道. angularjs的好处我就不在这里废话了,有兴趣的请自行度娘.背景是这样的, 在这个使用angularjs开发的项目中,由于自己的粗心导致页面打开很慢,傻了吧唧的引用了未压缩的js文件,将近1M的js啊,我还傻乎乎的建索引,优化sql…
本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中移除所有的注释以及不必要的空白字符(空格,换行和制表符),减少javascript文件的大小. 混淆:和精简一样,会从javascript代码中移除注释和空白,另外也会改写代码.作为改写的一部分,函数和变量的名字将被转换为更短的字符串,所以进一步减少了javascript文件的大小. 混淆的缺点 1…
转自http://www.cnblogs.com/koking/archive/2011/10/17/2215665.html 折腾了好几天,纠结了好几天,郁闷了好几天,终于在今天可以释怀了,留下其中的苦乐辛酸来和大家分享. 事情是这样子的,上周接到一个需求,其中涉及到一个好友选择的组件,就是单机左侧某个群组下的好友后该好友移动到右侧,视为选择了它,另外每个群组还有全选,折叠和展开等功能.组件在开发过程中,遇到了在2000条数据的时候,搜索会变的很卡,IE8下为2s左右,IE6更长,我在最初的优…
通过网上查找资料了解关于性能优化方面的内容,现简单整理,仅供大家在优化的过程中参考使用,如有什么问题请及时提出,再做出相应的补充修改. 一. 让代码简洁:一些简略的表达方式也会产生很好的优化 eg:x=x+1;在不影响功能的情况下可以简写为x++; 二. 变量名方法名尽量在不影响语意的情况下简单.(可以选择首字母命名) eg:定义数组的长度可以取名为:ArrLen而不需要取为ArrayLength. 三. 关于JS的循环,循环是一种常用的流程控制. JS提供了三种循环:for(;;).while…