zoukankan      html  css  js  c++  java
  • 前端js性能优化的要点

    1 尽量少使用全局查找,比如全局变量,如果要多次使用,可以将全局变量存为局部变量再使用
    eg:function(){
    var body=document.body;
    alert(body):
    body.innerHTML="hello world"
    }
    2.优化循环 (1)减值循环 i--(2)do-while比for循环快 (3)简化循环条件 比如循环条件少计算
     
    3 Dom层-最小化现场操作,
    就是比如新增很多dom 可以先for循环创建个整体的dom碎片 然后再一次性添加进去 会比一个个dom添加要快
    var list=document.getElementById("mylist");
    var frament=document.createDocumentFragment();
    for (var i=0;i<10;i++){
    var item=document.creatElement('li')
    frament.appendChild(item)
    }
    list.appendChild(frament)
    4 Dom层 --少使用HTMLCollection
    比如循环中获取dom的length
    var images=document.getElementsByTagName('img')
    for(i=0,len=images.length;i<len;i++){
     
    }
    这样就不用总访问images的HTMLCollention
    会访问HTMLCollention 的一些情况
    (1)进行了getElementsByTagName()调用
    (2)获取了元素的childNodes属性
    (3)获取了元素的 attributes属性
    (4)访问了特殊的集合 如documet.forms ,document.images
    5 布局抖动问题
    var h1 = element1.clientHeight
    element1.style.height = (h1 * 2) + 'px'
    
    var h2 = element2.clientHeight
    element2.style.height = (h2 * 2) + 'px'
    
    var h3 = element3.clientHeight
    element3.style.height = (h3 * 2) + 'px'
    布局抖动是指 DOM 元素被 JavaScript 多次反复读写,导致文档多次无意义重排。我们知道浏览器很“懒”,它会收集(batch)
    当前操作,统一进行重排。可是,如果在当前操作完成前,从 DOM 元素中获取值,这会迫使浏览器提早执行布局操作,
    这称为强制同步布局。这样的副作用对于低配置的移动设备来说,后果是不堪设想的。
    初步优化方案:
    // 读
    var h1 = element1.clientHeight
    var h2 = element2.clientHeight
    var h3 = element3.clientHeight
    
    // 写(无效布局)
    element1.style.height = (h1 * 2) + 'px'
    element2.style.height = (h2 * 2) + 'px'
    element3.style.height = (h3 * 2) + 'px'
    加强版(所有 DOM 的写操作在下一帧一起执行):
    var h1 = element1.clientHeight
    // 写
    requestAnimationFrame(() => {
        element1.style.height = (h1 * 2) + 'px'
    })
    
    // 读
    var h2 = element2.clientHeight
    // 写
    requestAnimationFrame(() => {
        element2.style.height = (h2 * 2) + 'px'
    })
    
    // 读
    var h3 = element3.clientHeight
    // 写
    requestAnimationFrame(() => {
        element3.style.height = (h3 * 2) + 'px'
    }
    

      

  • 相关阅读:
    mysql小白系列_04 datablock
    mysql小白系列_04 binlog(未完)
    mysql小白系列_03 体系结构-线程池
    mysql小白系列_02 mysql源码安装标准化
    国庆小长假来点不一样的,如何用Python爬取了全国近5000家旅游景点,一起来看
    python爬取p站排行榜并自动发送邮件-这个项目赚了500
    利用Azure backup备份和恢复Azure虚拟机(1)
    定制化Azure站点Java运行环境(5)
    定制化Azure站点Java运行环境(4)
    定制化Azure站点Java运行环境(3)
  • 原文地址:https://www.cnblogs.com/bing1991/p/11275428.html
Copyright © 2011-2022 走看看