• 性能优化之-reflow,repaint.


    前端性能控制是衡量一个前端工程师的重要参考点,一个作品的成功离不开不断追求性能的优化,为什么三星手机出现了爆炸事件之后销量急剧下降,为什么德国的工艺产品收到世界的推举。这些一定离不开不断的优化产品,提高产品的性能指标。作为一个工程师,你一定要在能做到的基础上去追求如何去做的更好。提升性能也是提升自己。

    1.什么是reflow,repaint。

      我们知道页面渲染是这样进行的首先确定页面的位置即position,然后进行render,即dom的颜色,text-align等等。那么由此我们可以推断出什么是relfow,repaint。

      reflow:页面回流--什么时候会触发呐?当dom的位置宽度等等改变时候就会触发。众所周知,操作dom是需要很大的成本的。所以我们应该尽量减少reflow。

      repaint:页面重绘--什么时候会触发呐?当dom的颜色改变等不影响布局的属性发生变化的时候,但是backgroud改变会导致reflow。
    2。我们知道了这些概念,也知道了为什么会导致性能问题,那么我们该如何去避免呐?我们该从哪些方面入手呐?

      (1)html:尽量简单的html结构,不要弄的很臃肿繁杂。减少渲染的深度和时间。

      (2)css:1,把操作style的多条语句通过class来处理。2,尽量不要使用内联的样式。3,设置了动画的dom尽量采用absolute或者fixed布局减少reflow。4,适当的牺牲平滑度         来提高性能,即当我们设置动画的时候以一个像素为单位进行移动cpu就会被占完,而以3个像素为单位就会好很多。5,避免table布局,table布局的子元素的改                                     变都会引起reflow。

      (3)js:1,缓存dom选择与计算,2,尽量使用id选择器,id选择器具有更高的性能。3,使用事件委托来优化事件绑定。4,添加节点利用framegment或者字符串来出来。
    目前知道的就是这样了,网友们如果知道,麻烦评论一下。我们总是在分享中得到提升。
     

  • 相关阅读:
    Docker生态会重蹈Hadoop的覆辙吗?
    刘志强博士:专业涵养 奉献情怀
    Sublime Text3前端必备插件
    JVM性能调优监控工具jps、jstack、jmap、jhat、jstat、hprof使用详解
    jvm的stack和heap,JVM内存模型,垃圾回收策略,分代收集,增量收集(转)
    Eclipse安装MAT插件
    tomcat内存泄漏存入dump文件
    CSS中behavior属性语法简介
    get/post时中文乱码问题的解决办法
    Java序列化的机制和原理
  • 原文地址:https://www.cnblogs.com/hjdjs/p/7542395.html
Copyright © 2020-2023  润新知