0

0

有关javascript程序的优化问题

黄舟

黄舟

发布时间:2016-12-15 10:57:36

|

1205人浏览过

|

来源于php中文网

原创

有关javascript程序的优化问题

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

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一个添加就行了,因为事件是冒泡向上的
        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;"
(注意osition前;不能去了,因为ie没有这个;position认不出来了就,比的浏览器没这个毛病)

17.在new 时,没有参数时函数名后边的括号可以去了
new fn()==>new fn
new Image()==>new Image


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

以上就是有关javascript程序的优化问题的内容,更多相关文章请关注PHP中文网(www.php.cn)! 

元典智库
元典智库

元典智库:智能开放的法律搜索引擎

下载
java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
抖漫入口地址合集
抖漫入口地址合集

本专题整合了抖漫入口地址相关合集,阅读专题下面的文章了解更多详细地址。

12

2026.03.17

多环境下的 Nginx 安装、结构与运维实战
多环境下的 Nginx 安装、结构与运维实战

本专题聚焦多环境下Nginx实战,详解开发、测试及生产环境的差异化安装策略与目录结构规划。深入剖析配置模块化设计、灰度发布流程及跨环境同步机制。结合监控告警、故障排查与自动化运维工具,提供全链路管理方案,助力团队构建灵活、高可用的Nginx服务体系,从容应对复杂业务场景挑战。

1

2026.03.17

PS 批量添加图片
PS 批量添加图片

本专题整合了PS批量添加图片教程合集,阅读专题下面的文章了解更多详细操作。

2

2026.03.17

Nginx 基础架构:从安装配置到系统化管理
Nginx 基础架构:从安装配置到系统化管理

本专题深入解析Nginx基础架构,涵盖从源码编译与包管理安装,到核心配置文件优化及虚拟主机部署。进一步探讨日志轮转、性能调优、高可用集群构建及自动化运维策略,助力管理员实现从单一服务搭建到企业级系统化管理的全面升级,确保Web服务高效、稳定运行。

3

2026.03.17

mulerun骡子快跑入口地址汇总
mulerun骡子快跑入口地址汇总

本专题整合了mulerun入口地址合集,阅读专题下面的文章了解更多详细内容。

50

2026.03.17

源码编译安装Nginx详解:模块选择、依赖准备与常见错误排查
源码编译安装Nginx详解:模块选择、依赖准备与常见错误排查

本专题详解Nginx源码编译全流程:从GCC、OpenSSL等依赖准备,到按需定制HTTP/SSL/流媒体模块的configure参数策略。深入剖析“缺少库文件”、“配置选项冲突”及“权限错误”等常见报错,提供精准排查思路与解决方案。助您掌握灵活构建高性能、定制化Nginx的核心技能,满足复杂生产环境需求。

1

2026.03.17

Linux环境安装Nginx全流程:apt、yum与源码编译方式深度实操
Linux环境安装Nginx全流程:apt、yum与源码编译方式深度实操

本专题深度实操Linux下Nginx三大安装方式:apt/yum包管理器快速部署,适合新手与标准化运维;源码编译灵活定制模块,满足高性能与特殊需求场景。内容涵盖环境准备、依赖安装、配置优化及平滑升级策略,对比各方案优劣,助您根据业务场景选择最佳实践,构建稳定高效的Web服务基石。

6

2026.03.17

c++ 字符处理
c++ 字符处理

本专题整合了c++字符处理教程、字符串处理函数相关内容,阅读专题下面的文章了解更多详细内容。

7

2026.03.17

minimax视频生成教程汇总
minimax视频生成教程汇总

本专题整合了minimax生成视频相关教程,阅读下面的文章了解更多详细操作。

9

2026.03.17

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号