js代码优化
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代码优化的更多相关文章
- 前端js代码优化
今天给大家分享下js代码优化的相关技巧. 1.使用"+"转换为数值 我们平时开发过程中需要将数字字符串创转为number类型,大多数都会用JavaScript parseI ...
- js 代码优化 (写的可以)
Javascript是一门非常灵活的语言,我们可以随心所欲的书写各种风格的代码,不同风格的代码也必然也会导致执行效率的差异,开发过程中零零散散地接触到许多提高代码性能的方法,整理一下平时比较常见并且容 ...
- 你所未知的3种 Node.js 代码优化方式
from:https://cnodejs.org/topic/56cc2fd6c045c3743304bec6 Node.js 程序的运行可能会受 CPU 或输入输出操作的限制而十分缓慢.从 CPU ...
- JS代码优化及技巧
案例一 对象参数独立化 情景:为多个日期文本框添加日期选择器 源代码: $('#PropertySalesAdviceExchnagedDate1').datepicker({ showOn: 'b ...
- js 代码优化
- JS代码的加载
HTML页面中JS的加载原理:在加载HTML页面的时候,当浏览器遇到内嵌的JS代码时会停止处理页面,先执行JS代码,然后再继续解析和渲染页面.同样的情况也发生在外链的JS文件中,浏览器必须先花时间下载 ...
- 使用r.js优化静态资源
r.js主要功能:优化项目的静态资源.可以简化压缩代码,减少体积.指定模块将多个组件合并为一个文件,减少HTTP请求数量.具体使用步骤如下: 先把 r.js 文件放到项目根目录,再于项目根目录内新建一 ...
- js怎么动态加载js文件(JavaScript性能优化篇)
下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完 ...
- 从架构层面谈web加载优化(个人整理)
最近听了阿里一位大牛的讲座,讲web架构优化对网页加载的影响,看完之后对他所讲的一些优化方法进行一些总结和整理,发现收获还是蛮多的,下面多为个人整理和个人见解,希望有说的不对的,能及时指出 1.DNS ...
随机推荐
- ubuntu中VNC的安装配置笔记
使用服务器时,利用远程桌面是非常方便的,否则需要跑到服务器机房操作非常的费事,或者需要远程操作机器是也可以使用,一般的操作系统都会带有远程桌面功能,但是不如第三方的的软件好用,对于linux系统常用的 ...
- ASP.Net软件工程师基础(一)
本人目前是一名有1年左右ASP.Net开发经验的的软件开发工程师,目前公司用的是MVC+EF+...做的网站.写这套总结性系列文章的目的有两个:一是帮助自己总结一下自己到底有多少斤两,而不是一味的学新 ...
- Redis集群功能概述
在单机Redis中介绍过Redis的复制特性以及Redis Sentinel和twemproxy,其中: 复制:可以创建指定服务器的复制品,这些复制品可以用户扩展系统处理读请求的能力: Redis S ...
- Oracle 启动状态解说
oracle 启动状态由nomount-mount-open 一. nomount状态下操作 08:09:49 idle> startup nomount; ORACLE instance st ...
- C与Lua互相调用的时候,栈变化分析
1 C调用Lua函数的堆栈变化 例子 Lua文件中的函数 function testNewCounter2() return "第四个结果" end C中的例子 void t_n ...
- Mysql 自动增长 重置
重置 MySQL 自增列 AUTO_INCREMENT 初时值 注意, 使用以下任意方法都会将现有数据删除. 方法一: delete from tb1; ALTER TABLE tbl AUTO_IN ...
- 深度分析DB2修改表
DB2修改表操作相信大家都不陌生,下文对DB2修改表方面结合了一些例子进行了详细的分析讨论,供您参考学习. DB2修改表使用ALTER TABLE语句来更改列属性,例如可空性.LOB选项.作用域.约束 ...
- 处理程序“WebServiceHandlerFactory-Integrated”在其模块列表中有一个错误模块“ManagedPipelineHandler”
开发web项目时需要安装IIS,在安装好IIS的Windows7本上发布asp.net网站时,web程序已经映射到了本地IIS上,但运行如下错误提示“处理程序“PageHandlerFactory-I ...
- 详解H264视频格式-2016.01.28
专业名词解释 VCL(Video Coding Layer)视频编码层 NAL(Network Abstraction Layer)网络提取层 SPS(Sequence Parameter Set) ...
- SQLServer、MySQL、Oracle语法差异小集锦
一.差异集锦 在建表的时候,只有自增的语法不同. 下面给出3种数据库通用的建表与初始化测试语句: CREATE TABLE Country( Id int PRIMARY KEY, Name ) ); ...