css优化--vue2和vue3中虚拟滚动，懒加载实现

重绘(repaint)：只是当页面的颜色、透明度等信息发生变化时会导致重绘。例如：color、background-color、visibility等，结构不变。
回流、重排(reflow)：整个dom树重新渲染。
假设实际开发中服务端一次响应10万条列表数据，此时设备屏幕只允许容纳10条，那么用户理论上只可以看见10条数据。此时如果前端将10万条数据全部渲染成DOM元素，可能造成程序卡顿，占用较大资源，非常影响用户体验，那么虚拟滚动技术就完美的解决了这一问题。
【虚拟滚动的实现】
1、获取滚动高度

2、列表单个item的高度

3、计算屏幕容纳几个item

4、计算滚动了几个item到顶部不可见区域

5、使用css3的transform属性将滚动到上方不可见区域的DOM元素偏移到可见区域，同时进行数据的更新(重绘操作节约性能)。
使用 react，vue 等页面框架来编写 view 页面，采用虚拟 DOM 技术，极可能的将多次重排浓缩成一次
vue2代码：

 

    
    
    
    
    
    
    

 

    

        
            
                20条
            
            
                一百条
            
            
                一千条
            
            
                十万条
            
        
        

            

                

                    {{item}}
                
            
        
    



 

vue3:

其他Css优化方法：
1，首推的是合并css文件，如果页面加载10个css文件，每个文件1k，那么也要比只加载一个100k的css文件慢。

2，减少css嵌套，最好不要套三层以上。

3，不要在ID选择器前面进行嵌套，ID本来就是唯一的而且人家权值那么大，嵌套完全是浪费性能。

4，建立公共样式类，把相同样式提取出来作为公共类使用，比如我们常用的清除浮动等。

5，减少通配符*或者类似[hidden=“true”]这类选择器的使用，挨个查找所有…这性能能好吗？当然重置样式这些必须 的东西是不能少的。

6，巧妙运用css的继承机制，如果父节点定义了，子节点就无需定义。

7，拆分出公共css文件，对于比较大的项目我们可以将大部分页面的公共结构的样式提取出来放到单独css文件里， 这样一次下载后就放到缓存里，当然这种做法会增加请求，具体做法应以实际情况而定。

8，不用css表达式，表达式只是让你的代码显得更加炫酷，但是他对性能的浪费可能是超乎你的想象的。

9，少用css rest，可能你会觉得重置样式是规范，但是其实其中有很多的操作是不必要不友好的，有需求有兴趣的 朋友可以选择normolize.css

10，cssSprite，合成所有icon图片，用宽高加上bacgroud-position的背景图方式显现出我们要的icon图，这是一种 十分实用的技巧，极大减少了http请求。

11，当然我们还需要一些善后工作，CSS压缩(这里提供一个在线压缩 YUI Compressor ，当然你会用其他工具来压缩是十 分好的)，

12，GZIP压缩，Gzip是一种流行的文件压缩算法