1.多使用事件委托
指定给元素的事件处理程序,相当于浏览器运行的程序和网页js代码的连接,这种连接越多,页面执行的速度也就会越慢,因此,使用事件委托减少了这种性能影响,同时也方便事件的卸载
2.避免使用二次评估
类似于 eval("num1+num2") ; var fun1 = new Function("arg1","arg2","return arg1 + arg2"); setTimeout("fun('arg')",500);
二次评估是一项非常昂贵的操作,因此,谨慎使用
3.使用对象和数组直接量创建对象和数组
有些人喜欢这样创建对象: var obj1 = new Object(); obj1.name="name1";
很明显我们可以使用直接量创建方法 var obj1 = {name:"name1"}
虽然性能上没有差别,但是有一个代码简洁编程的好习惯不是更好
4.使用惰性函数,避免多次评估(最常见的是浏览器兼容性调整)
看下面这段代码:
function addHandler(target, eventType, handler){
if (target.addEventListener){ //DOM2 Events
addHandler = function(target, eventType, handler){
target.addEventListener(eventType, handler, false);
};
} else { //IE
addHandler = function(target, eventType, handler){
target.attachEvent("on" + eventType, handler);
};
}
//call the new function
addHandler(target, eventType, handler);
}
这样兼容性调整的代码只运行了一遍,以后每次的调用都不用在进行评估,是不是提高了不必要的检验
5.条件判断语句根据可能性从高到低进行排序,减少否定的判断次数
我们写的流程控制语句,很多的可能性都是有侧重的,那么我们按可能性大小的顺序,将代码进行排序,就减少了那些不必要的非操作,岂不是明智之举
6.多多利用计算速度快的位运算
很多人都特别疑惑,js中提供的位运算到底有什么大的作用,我们的开发好像从来就没有用到过,其实位运算是最底层的运算,也是最快的运算,我们抛弃位运算不用实则是一项巨大的损失呀。举个例子:我们经常进行的奇偶判断:
while(k--){
if(k % 2 == 1){
//奇数
}else{
//偶数
}
}
其实我们可以改为:
while(k--){
if(k & 1){
//奇数
}else{
//偶数
}
}
7.使网页动画脱离文档流
网页渲染是一个很复杂的工作,虽然我们感受不到,但是由于页面动画持续修改页面标签的大小或者坐标,会给浏览器增加很大的负担,但是我们可以选择将动画元素脱离文档流的方式,例如给其使用
position:relative,或者position:fixed,这样,元素的各种改变就不会影响到页面元素了,何乐而不为呢。
8.多多使用原生方法
举一个很简单的例子,我们要求一个数的绝对值,有些人就写了一个判断语句:
if(num < 0){num *= -1};
虽然代码不是很麻烦,但是我们有原生的 Math.abs(num) 方法,而且,原生方法要比我们自己写的方法快好多的,这一点我相信大家只要对js基础够了解都不会犯错的
9.缓存需要使用的初级作用域以外的变量
了解作用域链的人应该都知道,代码访问变量的顺序,变量越靠外,访问的速度也就越慢,所以,当我们需要访问的变量不在初级作用域中而且访问次数大于1次时,我们可以选择缓存该变量到初级作用域
10.多使用数组来代替集合
我们看这样一段代码:
var coll = document.getElementsByTagName('span');
function toarray(coll){
var a = [];
for(var i=0,j = coll.length;i<j;i++){
a.push(coll[i]);
}
return a;
}
var arr = toarray(coll);
//循环1
for(var i=0,j = coll.length;i<j;i++){
coll[i].style.height="0px";
}
//循环2
for(var i=0,j = arr.length;i<j;i++){
arr[i].style.color="#F00";
}
这里面的循环1要比循环2慢一倍,coll是一个对象集合,而数组的访问速度是高于对象集合的,对象集合不是数组,它只不过有length属性和按序号取元素的方法,但不具有数组的push,shift等方法。
10.for循环的优化
先看一段代码:
var N1 = 1000000;
//循环1
for(var i = 0; i< N1 ;i++){
var l = i;
}
//循环2
var i=0;
for(; i< N1 ;i++){
var l = i;
}
经过试验得知,循环而的执行速度比循环1高5倍左右,有图为证:
11.迭代次数超过1000次,最好使用 达夫设备,减少迭代次数,提高效率
实现代码:
function duff(items,process){
var i = j = items.length % 8,//取余数
multiple= Math.floor(items.length / 8);//向下取整获取8的倍数
while(j){
process(items[--j]);
}
while(multiple--){ //有效的减少了循环判断的次数
process(items[i++]);
process(items[i++]);
process(items[i++]);
process(items[i++]);
process(items[i++]);
process(items[i++]);
process(items[i++]);
process(items[i++]);
}
}
12.if else 二分法,减少抵达正确分支的判断次数
这里给个图吧,应该能说明问题:
欢迎批评指正。
相关推荐
JS、Vue、React、性能优化、前端工程化、...最后祝所有的小伙伴都能找到心仪的工作,卡皮巴拉是你的前端编程学习伙伴、助手。喜欢的朋友麻烦点赞支持,这是最大的动力,更多资源分享,请关注卡皮巴拉账号,感谢关注。
常用CSS优化总结——网络性能与语法性能建议 编程语言 2013流行Python项目汇总 15款Django开发常用软件包 Rails 3 升级 Rails 4 中遇到的问题及解决方法 php性能优化 Java中的 equals() 和 hashCode() 契约 程序...
通过阅读《SQL Server 2008查询性能优化》,不仅可以学习到数据库性能管理的许多知识和技巧,还有助于养成良好的编程习惯,为实现高性能的数据库应用系统打下基础。 目录 第1章 SQL查询性能调整 1 1.1 性能调整...
从基本语法、应用架构、工具框架、编码风格、编程思想等5大方面对Web前端工程师遇到的疑难问题给出了经验性的解决方案,为Web前端工程师如何编写更高质量的JavaScript代码提供了188条极为宝贵的建议。对于每一个问题...
通过阅读《SQL Server 2008查询性能优化》,不仅可以学习到数据库性能管理的许多知识和技巧,还有助于养成良好的编程习惯,为实现高性能的数据库应用系统打下基础。 目录 第1章 SQL查询性能调整 1 1.1 性能调整...
前端文章三年前端路:分享我的工作经验与学习经历前端发展历程事件...24 条建议(2020)JavaScript性能优化优化循环的方法-循环展开程序局部性原理疑难问题手机软键盘弹起导致页面变形的一种解决方案用canvas实现手写
作为网页设计师(前端工程师),你可能还记得曾经的那个网页大小建议:一个网页(包括HTML、CSS、Javacript、Flash和图片)尽量不要超过30KB的大小,随着互联网的日益庞大,网络带宽也在飞速发展,很多设计师已经不再...
第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者了解。 第8章:JSTL的使用,这是优化JSP编码的部分,建议读者了解掌握。 第9章:JSP开发中的实用技术,通过学习来提高JSP编程的质量与效率...
第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者了解。 第8章:JSTL的使用,这是优化JSP编码的部分,建议读者了解掌握。 第9章:JSP开发中的实用技术,通过学习来提高JSP编程的质量与效率。 ...
第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者了解。 第8章:JSTL的使用,这是优化JSP编码的部分,建议读者了解掌握。 第9章:JSP开发中的实用技术,通过学习来提高JSP编程的质量与效率。 ...
第7章:自定义标签的使用,这是优化JSP学习中较难于理解的部分,建议读者了解。 第8章:JSTL的使用,这是优化JSP编码的部分,建议读者了解掌握。 第9章:JSP开发中的实用技术,通过学习来提高JSP编程的质量与效率。 ...
它不仅详细阐述了系统的需求分析、数据库设计和前端界面设计,还提供了关于如何优化代码、提高系统性能和保障数据安全的宝贵建议。这个资料包是计算机专业学生和程序员了解和掌握JSP应用开发的绝佳案例,无论是作为...
[关于兼容性] 建议使用chrome firefox ie9+ 体验更完整。ie8以下基本上不做兼容处理。chrome支持文件夹拖拽上传。 [文件打开] office文件在线预览功能,服务器必须在公网(外部能访问该服务器) [忘记密码] 修改data...
MicroCommunityWeb是完全开源免费的HC小区管理系统web端前端项目,主要采用比较主流的UI框架bootstrap 和vue,是一套完全组件化编程的项目,主要包含功能为资产管理(楼栋 单元 房屋),业主管理,费用管理,投诉建议...
开发者可根据自身需求,修改前端页面设计、增加新功能模块或优化后端服务性能等。同时,我们也提供了详细的说明文档,指导开发者快速上手和进行个性化定制。 总之,这个微信小程序企业产品推广系统不仅是一个优秀的...
随着人工智能和大数据技术的不断进步,未来这个系统可能会集成更多先进的机器学习算法,提供更加深入的疾病诊断支持,实现个性化医疗建议,并通过不断的学习和优化,进一步提升系统的准确性和实用性。
2. 后端:采用ASP.NET Web Forms框架,结合C#编程语言实现业务逻辑。 3. 数据库:使用SQL Server存储用户信息和系统数据。 4. 服务器:支持IIS部署,兼容多种浏览器。 二次开发定制建议: 1. 根据实际需求调整功能...
该项目是本人为了提升编程技能而学习所做的,很有可能存在不足的地方,不建议下载使用。挂在这也是为了学习记录(哈,好像将这么好的开源社区当个人放置代码的地方好像有点不厚道^ _ ^)。欢迎加QQ:839319250,一起...