一 script加载方式和位置
1 放在body标签底部,确保执行脚本前页面已经完成渲染
2 合并脚本,减少script标签数目,减少http请求数目,加载更快
3 无阻加载js的方法:
3.1 在script标签上添加defer属性
3.2 动态创建script标签加载并立即执行
3.3 使用ajax请求下载js代码并注入页面
二 数据存储的优化
1 执行一个函数会创建一个执行环境的内部对象,函数每次执行的执行环境都是独一无二的,多次调用一个函数会创建多个执行环境,当函数执行完毕,执行环境销毁
2 在函数执行的过程中,每次遇到一个变量,都会经历一次标识符解析过程。标识符位置越深,读写的速度就越慢。因此,函数中读取局部变量的速度是最快的,全局变量总是最慢的。
3 函数中尽量使用局部变量,如果有跨作用域调用其他作用域的变量使用多次,最好将其存储到局部变量
4 闭包因为函数执行完不能清除属性对象,带来额外的性能消耗
5 对象在创建是不但设置了自由的属性和方法,还继承了对象原型上的属性和方法,当对象嵌套的越深,在其原型链上越深,读取的速度越慢,执行locations.href总是比window.location.href要快,
6 如果要查找对象属性多次,最佳做法将其属性保存到局部变量中,这样做会显著提高性能
三 dom编程的优化
1 访问和修改dom
dom和js就像两座小岛,每次连接都会经过他们之间连接的收费大桥,会有性能损耗,
多次使用到相同的dom,使用缓存
querySelectAll()获取比getElementById这些选择器更快
修改同一个dom属性多次,代码放在一起多次修改会更快,或者做一次处理,或者修改class名称
2 批量修改dom
2.1 脱离文档流
2.2 应用多重改变
2.3 把元素带回文档
可以在操作前设置display:none,完成后设置为block或者重新创建一个dom,然后在此上操作最后添
加到文档上,还有一 种方法,操作的dom进行克隆,对其操作完成后,然后替换掉原先的dom
3 使用事件委托,可以将多个li点击在ul上触发事件
var oDiv = document.getElementsByTagName('ul')[0];
var li = document.getElementsByTagName('li');
oDiv.onclick = function(e){
var target = e.target;
alert(Array.prototype.indexOf.call(li,target))
}
四 算法和流程控制
4.1 for-in foreach算法比for while等其他几种循环要慢,因为每次迭代会同时搜索实例或者原型
4.2 在遍历中需要用到的变量要提前声明,减少次数和操作
4.3 if-else和switch的用法:当判断较少是用if-else,较多是用switch,因为当判断增多时,
网友评论