vue文字内容高频更新优化方案

Question

业务场景是一个服务器状态监控系统，需要通过websocket高频实时渲染页面，主要是文本内容更新，和DOM样式更新，所以因该是有很高频的重绘和回流。目前系统需要优化性能。
我能想到的优化方式是用input作为文本内容的容器，感觉这样不会重绘和回流？

Answer 1

样式更新，这不可避免的会触发重绘。
现在已经造成卡顿了吗？使用开发工具看看是哪里的卡顿，讲道理不应该是内容更新造成的。

其实可以考虑使用absolute+z-index来让内容有层级，只触发单个层级的重绘

Answer 2

1. 理论上，只要你修改 dom，就极大可能触发 relayout 和 repaint
2. 但是，可以使用一些方式降低对系统的消耗
3. input 和 textarea 并不能降低消耗，而且也很难加样式
4. 一般的方式是减少 DOM 数，把数据放到内存里。比如有 100w 行，只显示 500 行，滚屏的时候修改显示的部分

Answer 3

有效果图的展示吗？
建议一下方式：
1.控制展示的数量，不要输出和渲染全部的内容，建立回收机制清理超出屏幕的内容！
譬如，你屏幕可以显示的上限是 20 条，那么 100 条之后的内容对你来说基本是没有意义的！
整一个缓存池，和渲染的池子，搞这个吧 ... 代码满嫌弃的我就不贴了，
基本上这个能保证自动加载类型的需求正常应用！

2.如果你渲染的内容有动画效果，带图片，
建议可以使用 transform:translate3D, 实现 GUI 的加速，和缩小重绘的范围

下面是笔记的内容：
Q：如何减少重绘和回流的消费？
A：答案是独立的图层，DOM元素重绘和回流的影响只会在这个图层中，而不是全局！

 在 Chrome 浏览器中，以下情况都会创建图层：
      1）3D或透视变换（perspective transform）CSS属性
      2）使用加速视频解码的<video>节点
      3）拥有3D（WebGL）上下文或加速的2D上下文的<canvas>节点
      4）混合插件（如Flash）
      5）通过 opacity 实现 CSS 动画或者使用一个动画 webkit 变换的元素
      6）拥有加速CSS过滤器的元素（指 -webkit-filter 或者 filter 属性）
      7）元素和所有的子孙元素作为一个图层
      8）元素的兄弟元素的 z-index 较低
 注意！video、canvas都是独立的图层
 注意！拥有 transform:translateZ(0); 或者 will-change:transform; 属性的元素会被作为：独立的图层

Q：关于UI渲染的其他优化或者建议
A：下面是常见的优化方式：

1）虽然独立图层有这样那样的优点，但是浏览器图层合成也会花比较多的时间
2）用 transform: translate (不会导致父元素容器的变形，不会触发回流)替代top(会触发回流)
3）用 opacity (不会触发重绘) 替代 visibility (会触发重绘)
4）合并预备修改的 DOM样式 或者 Class
5）将 DOM 离线后修改（先增加：display: none，然后修改，最后取消 diaplay: none）
6）禁止将 DOM 的属性作为循环中的变量
7）不使用 table 布局（即使单个元素的回流，也会导致整个table 的回流）
8）渲染动画时，新建一个独立的图层
9）启用GPU硬件加速（transform:translate3d(0,0,0)、transform:translateZ(0)）