zoukankan      html  css  js  c++  java
  • 浏览器的reflow和repaint

      1.   Change classes on the element you wish to style (as low in the dom tree as possible)

    尽可能限制reflow的影响范围。以上面的代码为例,要改变p的样式,class不要加在div上,通过父级元素影响子元素不好。最好直接加在p上。

    2   Avoid setting multiple inline styles 
    通过设置style属性改变结点样式的话,每设置一次都会导致一次reflow。所以最好通过设置class的方式。

    3  Apply animations to elements that are position fixed or absolute 
    实现元素的动画,它的position属性应当设为fixed或absolute,这样不会影响其它元素的布局。

    4  Trade smoothness for speed 
    权衡速度的平滑。比如实现一个动画,以1个像素为单位移动这样最平滑,但reflow就会过于频繁,CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多。

    5   Avoid tables for layout 
    不要用tables布局的另一个原因就是tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合,可以设置table-layout为auto或fixed,这样可以让table一行一行的渲染,这种做法也是为了限制reflow的影响范围。

    6   Avoid JavaScript expressions in the CSS (IE only)
    很多情况下都会触发reflow,如果css里有expression,每次都会重新计算一遍。

  • 相关阅读:
    搭建基本的React Native开发环境
    Java跨平台原理
    MySQL主从复制与Atlas读写分离
    自动生成和安装requirements.txt依赖
    Mac 证书错误
    zabbix报警信息设置
    zabbix自定义监控项数据类型错误
    Centos7.6 双网卡,修改默认路由
    linux 安装 websocketd
    土豆聊天 机器人
  • 原文地址:https://www.cnblogs.com/chentao5211314/p/1937096.html
Copyright © 2011-2022 走看看