美文网首页
<<高性能Javascript>>总结

<<高性能Javascript>>总结

作者: 小强不是蟑螂啊 | 来源:发表于2019-03-22 21:52 被阅读0次

    一 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,因为当判断增多时,

    相关文章

      网友评论

          本文标题:<<高性能Javascript>>总结

          本文链接:https://www.haomeiwen.com/subject/jrtdvqtx.html