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. ubuntu中VNC的安装配置笔记

    使用服务器时,利用远程桌面是非常方便的,否则需要跑到服务器机房操作非常的费事,或者需要远程操作机器是也可以使用,一般的操作系统都会带有远程桌面功能,但是不如第三方的的软件好用,对于linux系统常用的 ...

  2. ASP.Net软件工程师基础(一)

    本人目前是一名有1年左右ASP.Net开发经验的的软件开发工程师,目前公司用的是MVC+EF+...做的网站.写这套总结性系列文章的目的有两个:一是帮助自己总结一下自己到底有多少斤两,而不是一味的学新 ...

  3. Redis集群功能概述

    在单机Redis中介绍过Redis的复制特性以及Redis Sentinel和twemproxy,其中: 复制:可以创建指定服务器的复制品,这些复制品可以用户扩展系统处理读请求的能力: Redis S ...

  4. Oracle 启动状态解说

    oracle 启动状态由nomount-mount-open 一. nomount状态下操作 08:09:49 idle> startup nomount; ORACLE instance st ...

  5. C与Lua互相调用的时候,栈变化分析

    1  C调用Lua函数的堆栈变化 例子 Lua文件中的函数 function testNewCounter2() return "第四个结果" end C中的例子 void t_n ...

  6. Mysql 自动增长 重置

    重置 MySQL 自增列 AUTO_INCREMENT 初时值 注意, 使用以下任意方法都会将现有数据删除. 方法一: delete from tb1; ALTER TABLE tbl AUTO_IN ...

  7. 深度分析DB2修改表

    DB2修改表操作相信大家都不陌生,下文对DB2修改表方面结合了一些例子进行了详细的分析讨论,供您参考学习. DB2修改表使用ALTER TABLE语句来更改列属性,例如可空性.LOB选项.作用域.约束 ...

  8. 处理程序“WebServiceHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”

    开发web项目时需要安装IIS,在安装好IIS的Windows7本上发布asp.net网站时,web程序已经映射到了本地IIS上,但运行如下错误提示“处理程序“PageHandlerFactory-I ...

  9. 详解H264视频格式-2016.01.28

    专业名词解释 VCL(Video Coding Layer)视频编码层 NAL(Network Abstraction Layer)网络提取层 SPS(Sequence Parameter Set) ...

  10. SQLServer、MySQL、Oracle语法差异小集锦

    一.差异集锦 在建表的时候,只有自增的语法不同. 下面给出3种数据库通用的建表与初始化测试语句: CREATE TABLE Country( Id int PRIMARY KEY, Name ) ); ...