1、减少Jquery使用

处理dom遍历和复杂的脚本场景时,jquery可能有很大的帮助,不过在处理简单的、直截了当的代码场景就会迟缓。尽可能的避免jquery对象创建,尤其在循环中。

2、优化循环

用被缓存的数组长度

优化前
for (var i = ; i < arr.length; i++) {
// some code here
} 优化后
for (var i = , len = arr.length; i < len; i++) {
// some code here
}

3、if/else和swith语句

  • 如果只是1或者2个语句,那if/else性能更好点
  • 如果3个或者3个以上,那swith更好,这个可以通过测试来验证(测试地址

4、缓存dom元素、jquey对象、对象/数组值

5、减少reflow

对dom的每次改变都会有一个重大的性能成本造成页面reflow

  • 避免在document上直接进行频繁的DOM操作,如果确实需要可以采用off-document的方式进行
  • 先将元素从document中删除,完成修改后再把元素放回原来的位置
  • 将元素的display设置为”none”,完成修改后再把display修改为原来的值
  • 如果需要创建多个DOM节点,可以使用DocumentFragment创建完后一次性的加入
    //优化前
    var list=document.getElementById("list");
    for(var i=0;i<10;i++){
    var item=document.createElement("li");
    item.innerHTML="option "+(i+1);
    list.appendChild(item);
    } //优化后
    var list=document.getElementById("list");
    var fragment=document.createDocumentFragment();
    for(var i=0;i<10;i++){
    var item=document.createElement("li");
    item.innerHTML="option "+(i+1);
    fragment.appendChild(item);
    }
    list.appendChild(fragment);
  • 集中修改样式
    优化前:
    function selectAnchor(element){
    var changeDiv = document.getElementById(element);
    changeDiv.style.color = ‘#093′;
    changeDiv.style.background = ‘#fff’;
    changeDiv.style.height = ’100px’;
    } 优化后:
    CSS:
    changeDiv {
    background: #fff;
    color: #093;
    height: 100px;
    }
    JavaScript:
    function selectAnchor(element) {
    document.getElementById(element).className = ‘changeDiv’;
    }

6、避免全局的搜索

var $button=$(".button");
$buttons.find( "a.mybutton" );替代$( "a.mybutton" );

7、优先dom搜索,然后再过滤

  • 优先使用原生的getElementById、getElementsByTagName
  • 例如.find( "a" ).filter( "[href=*'url_fragment']" )替换.find( "a[href=*'url_fragment']"

8、绑定多个事件到一个元素

//优化前
var $elem = $( "#element" );
$elem.on( "mouseover", function( event ) {
// mouseover
});
$elem.on( "mouseout", function( event ) {
// mouseout
});
//优化后
$( "#elem" ).on( "mouseover mouseout", function( event ) {
if ( event.type === "mouseover" ) {
// mouseover
} else {
// mouseout
}
});

9、Property深度

  • object.name<object.name.name
  • 这个property越深,获取时间越长
 



 

js代码优化的更多相关文章

  1. 前端js代码优化

    今天给大家分享下js代码优化的相关技巧. 1.使用"+"转换为数值     我们平时开发过程中需要将数字字符串创转为number类型,大多数都会用JavaScript parseI ...

  2. js 代码优化 (写的可以)

    Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容 ...

  3. 你所未知的3种 Node.js 代码优化方式

    from:https://cnodejs.org/topic/56cc2fd6c045c3743304bec6 Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢.从 CPU ...

  4. JS代码优化及技巧

    案例一  对象参数独立化 情景:为多个日期文本框添加日期选择器 源代码: $('#PropertySalesAdviceExchnagedDate1').datepicker({ showOn: 'b ...

  5. js 代码优化

  6. JS代码的加载

    HTML页面中JS的加载原理:在加载HTML页面的时候,当浏览器遇到内嵌的JS代码时会停止处理页面,先执行JS代码,然后再继续解析和渲染页面.同样的情况也发生在外链的JS文件中,浏览器必须先花时间下载 ...

  7. 使用r.js优化静态资源

    r.js主要功能:优化项目的静态资源.可以简化压缩代码,减少体积.指定模块将多个组件合并为一个文件,减少HTTP请求数量.具体使用步骤如下: 先把 r.js 文件放到项目根目录,再于项目根目录内新建一 ...

  8. js怎么动态加载js文件(JavaScript性能优化篇)

    下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...

  9. 从架构层面谈web加载优化(个人整理)

    最近听了阿里一位大牛的讲座,讲web架构优化对网页加载的影响,看完之后对他所讲的一些优化方法进行一些总结和整理,发现收获还是蛮多的,下面多为个人整理和个人见解,希望有说的不对的,能及时指出 1.DNS ...

随机推荐

  1. sql查询,如何增加一列

    select * from (select 'finish_order_info' as table_name,count(1)as num from fraudorder.finish_order_ ...

  2. Codeforces Round #223 (Div. 2) C

    C. Sereja and Prefixes time limit per test 1 second memory limit per test 256 megabytes input standa ...

  3. HttpWebRequest访问时,错误:(401)未经授权。

    HttpWebRequest访问时,错误:(401)未经授权. 某网页,我不想做登录界面,直接使用域的帐号密码来访问.如果网站设置成Window身份验证,单独的页面都没问题,而是通过使用HttpWeb ...

  4. GUI创建各常用控件(二)

    继续接着上一篇! 在我看来有一点需要申明:由于是GUI的相关知识,所以我只是在复习中粗略的总结而已,因此参考价值可能有限,更多的是当作自己学习的一个记录以及便于自己查阅. 好啦!干货继续: 1.类似于 ...

  5. 压缩上传并预览 flash

    最近研究一个功能:用as3写的上传图片并实现预览.觉得花了很多时间也学到很多知识,将自己的所得记录下来供大家分享. 首先是预览功能的实现,大家自然而然就想到了loader来加载图片并显示,由于项目没有 ...

  6. Oracle建立表空间和用户

    Oracle建立表空间和用户 建立表空间和用户的步骤: 用户 建立:create user 用户名 identified by "密码"; 授权:grant create sess ...

  7. Collection集合之六大接口(Collection、Set、List、Map、Iterator和Comparable)

    首先,我们先看一下Collection集合的基本结构: 1.Collection接口 Collection是最基本集合接口,它定义了一组允许重复的对象.Collection接口派生了两个子接口Set和 ...

  8. js中的条件语句

    //js中的条件语句 ; //example1 单分支语句 ){ console.log("你已经不年轻了!"); }else{ console.log("你依然很有活力 ...

  9. 【Linux】freetds安装配置连接MSSQL

    我使用的是freetds-0.91,下载地址:http://pan.baidu.com/s/1hq68rZY 安装编译(根据需要unixodbc): [root@zabbixserver / ]# t ...

  10. OSI(Open System Interconnection)网络模型

    OSI模型是国际互连网标准化组织(International Standards Organizations ISO)所定义的,为了使网络的各个层次有标准.这个模型一般被称为“ISO OSI(Open ...