网页优化怎么做(网页制作代码优化经验总结怎么写)
admin
2022-12-28 08:31:42
Pro/E5.0产品设计视频教程_办公百科网  AutoCAD2011机械视频教程_办公百科网

这些是我写代码时的一些经验,总结了一下分想给大家,没啥顺序,想到就写上了

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         我的方式一次都不用
        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.为多个同级元素绑定事件时,不用为每个都绑定,为他们的父级绑定就行了
比如


                   
  • sdf
  • sdf
  • sdf
  • sdf
  • sdf
  • sdf

  •        

可能你要为每个li添加click

为每个添加那可繁琐且容易出现溢出(ie)

其实只要为 ul一个添加就行了,因为事件是冒泡向上的


var 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

先想到这么多,再想到时在补偿,认为不对的提啊,别客气



以上就是网页制作JS代码优化经验总结,希望大家喜欢,请继续关注办公百科网。

相关内容

热门资讯

苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
怎么样的桃花 桃花近看远看的样... 今年的“三八”妇女节,阳光明媚,踏青赏花正当时。遂与姐妹们共赴十里蓝山,与花海来一场春天的约会。十里...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
怎么样的桃花 桃花近看远看的样... 今年的“三八”妇女节,阳光明媚,踏青赏花正当时。遂与姐妹们共赴十里蓝山,与花海来一场春天的约会。十里...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...