网页制作JS代码优化经验总结
这些是我写代码时的一些经验,总结了一下分想给大家,没啥顺序,想到就写上了
1.使用局部变量避免使用全局变量
比如
function test(){ var s = document.getElementById(aaa); s.innerHTML = document.body.clientHeight; }
改成
function test(){ var d = document; s = d.getElementById(aaa); s.innerHTML = d.body.clientHeight; }
局部变量的好处就是减少了作用域链的查找
我建议要是有两次的引用就用局部变量
2.避免使用with(这个估计地球人都知道)
我理解原因就是with会创建自己的作用域,这样就加长了原来的作用域链,使得在with块中执行的代码反而变慢了,在书写上好像省了代码,其实在访问上反而变长变繁琐了,性能下降了
例子
使用with
function test(){ with(document.body){ clientHeight = 200px; clientWidth = 200px } }
其实都可以写成
function test(){ var ds = document.body; ds.clientHeight = 200px; ds.clientWidth = 200px }
3. 遍历nodelist的方式
一般的方式都是
var as = document.getElementsByTagName(div); for(var i=0,l<as.length;i<l;i++){//只计算一次长度}
我的方式一次都不用
for(var i=0,ci;ci=as[i++];){}
当nodeList完结时就为false就结束了
好处,没计算长度,省了在循环里赋值,代码更加少了,i++到了判断里
(注意:这个方式用在nodelist里可以,如果你用到array里,可会有问题的,数组里有个0后者null什么的就瞎了)
4.别用那么多个var,一个加逗号就搞定了
var a =1; var b = 1; var c =1;
代码长,性能差
拆成
var a=1, b=1, c=1;
5.innerHTML是最好的选择
往元素添加元素时,最好用innerHTML
6.ie的removeChild不好用
一般咱们删除一个元素会用
elm.removeChild(subElm)
这个在ie下不好用,因为在ie下这个只是把这个元素从dom树中断开了,但并没用真正删除,它现在变成了孤立的节点了,要想真正删除,可以这样
var ryc = document.createElement(div); div.appendChild(subElm); div.innerHTML = ; div = null;
这样就真的删除了,除了ie外别的都可以用removeChild达到效果
7.为多个同级元素绑定事件时,不用为每个都绑定,为他们的父级绑定就行了
比如
<ul id="a"> <li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li><li>sdf</li> </ul>
可能你要为每个li添加click
为每个添加那可繁琐且容易出现溢出(ie)
其实只要为 ul一个添加就行了,因为事件是冒泡向上的
ar ul = document.getElementById(a); ul.onclick = function (e){ !e&&(e=event); var target = e.srcElement||e.target; if(target.tagName==LI){ //your code } }
8.尽量用原生的方法,因为原生的都是用c/c++编译而成的他们执行的要比用js写的方法快多了
9.appendChild用的多时一定要用docuemntfragment
比如
for(var i=0;i<1000;i++){ var o = document.createElement(div); document.body.appendChild(o); }
用documentFragment
var f = document.createDocumentFragment(); for(var i=0;i<1000;i++){ var o = document.createElement(div); f.appendChild(o); } document.body.appendChild(f);
10. if else用的>=3个了,那用switch吧,好阅读,性能好
11. if<=3,别用if了,用3元表达式吧
12. if==1,if改&&
if(a==1)a=2
改
a==1&&(a=2);
13.计算元素位置,while()offsetParent
这个方式是老方式了,现在的浏览器ie6以上,ff3.1以上,chrome,opera(我只测了最新的)都支持这个el.getBoundingClientRect返回一个对像,分别是top,left,right,bottom的值
14.正则的查找没有indexOf快
var s= sdfsdfsdfAAAsdfdsfs; for(var i=0;i<1000;i++){ s.indexOf(AAA) }
比这个快
var s= sdfsdfsdfAAAsdfdsfs; for(var i=0;i<1000;i++){ /AAA/.test(s) }
15.在正则中多用非捕获(?:)这样快
16.设置某个元素的style时用cssText简单些
el.style.cssText +=";postion:absolute;"
(注意:position前;不能去了,因为ie没有这个;position认不出来了就,比的浏览器没这个毛病)
17.在new 时,没有参数时函数名后边的括号可以去了
new fn()==>new fn new Image()==>new Image
先想到这么多,再想到时在补偿,认为不对的提啊,别客气
一、推荐使用迅雷或快车等多线程下载软件下载本站资源。
二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。
三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!
四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.
五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。
六、如需转载本站资源,请注明转载来自并附带链接
七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6CSS实现悬浮顶部的Div工具栏
- 7记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 8service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法