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 ...
随机推荐
- sql查询,如何增加一列
select * from (select 'finish_order_info' as table_name,count(1)as num from fraudorder.finish_order_ ...
- Codeforces Round #223 (Div. 2) C
C. Sereja and Prefixes time limit per test 1 second memory limit per test 256 megabytes input standa ...
- HttpWebRequest访问时,错误:(401)未经授权。
HttpWebRequest访问时,错误:(401)未经授权. 某网页,我不想做登录界面,直接使用域的帐号密码来访问.如果网站设置成Window身份验证,单独的页面都没问题,而是通过使用HttpWeb ...
- GUI创建各常用控件(二)
继续接着上一篇! 在我看来有一点需要申明:由于是GUI的相关知识,所以我只是在复习中粗略的总结而已,因此参考价值可能有限,更多的是当作自己学习的一个记录以及便于自己查阅. 好啦!干货继续: 1.类似于 ...
- 压缩上传并预览 flash
最近研究一个功能:用as3写的上传图片并实现预览.觉得花了很多时间也学到很多知识,将自己的所得记录下来供大家分享. 首先是预览功能的实现,大家自然而然就想到了loader来加载图片并显示,由于项目没有 ...
- Oracle建立表空间和用户
Oracle建立表空间和用户 建立表空间和用户的步骤: 用户 建立:create user 用户名 identified by "密码"; 授权:grant create sess ...
- Collection集合之六大接口(Collection、Set、List、Map、Iterator和Comparable)
首先,我们先看一下Collection集合的基本结构: 1.Collection接口 Collection是最基本集合接口,它定义了一组允许重复的对象.Collection接口派生了两个子接口Set和 ...
- js中的条件语句
//js中的条件语句 ; //example1 单分支语句 ){ console.log("你已经不年轻了!"); }else{ console.log("你依然很有活力 ...
- 【Linux】freetds安装配置连接MSSQL
我使用的是freetds-0.91,下载地址:http://pan.baidu.com/s/1hq68rZY 安装编译(根据需要unixodbc): [root@zabbixserver / ]# t ...
- OSI(Open System Interconnection)网络模型
OSI模型是国际互连网标准化组织(International Standards Organizations ISO)所定义的,为了使网络的各个层次有标准.这个模型一般被称为“ISO OSI(Open ...