zoukankan      html  css  js  c++  java
  • 如何减少回流,重绘

    1. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器)

    // 不好的写法
    var left = 1;
    var top = 1;
    el.style.left = left + "px";
    el.style.top = top + "px";// 比较好的写法
    el.className += " className1";
     
    // 比较好的写法
    el.style.cssText += "; left: " + left + "px; top: " + top + "px;";
    

      

    2. 让要操作的元素进行”离线处理”,处理完后一起更新

    a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;
    b) 使用display:none技术,只引发两次回流和重绘;
    c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘

    3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

    // 别这样写,大哥
    for(循环) {
    el.style.left = el.offsetLeft + 5 + "px";
    el.style.top = el.offsetTop + 5 + "px";
    }
     
    // 这样写好点
    var left = el.offsetLeft,
    top = el.offsetTop,
    s = el.style; 
    for (循环) { 
    left += 10; 
    top += 10; 
    s.left = left + "px"; 
    s.top = top + "px"; 
    }

    4. 让元素脱离动画流,减少回流的Render Tree的规模

    //推荐
    $("#block1").animate({left:50});
    //不推荐
    $("#block2").animate({marginLeft:50});
    
    
  • 相关阅读:
    DS博客作业02--栈和队列
    DS博客作业01--线性表
    c博客06-结构体&文件
    C博客作业05--指针
    C语言博客作业04--数组
    C语言博客作业03--函数
    JAVA面向对象设计大作业——QQ联系人系统
    DS博客作业05--查找
    DS博客作业04--图
    DS博客作业03--树
  • 原文地址:https://www.cnblogs.com/xuanbingbingo/p/8669403.html
Copyright © 2011-2022 走看看