吴小迪的博客

content-visibility:新的CSS属性，可以提高渲染性能。通过跳过屏幕外内容的呈现来改善初始加载时间。在Chromium 85中推出的content-visibility属性可能是对提高页面加载性能最有影响的新CSS属性之一。内容可见性允许用户代理跳过元素的呈现工作，包括布局和绘制，直到需要它为止。因为会跳过呈现，如果大部分内容不在屏幕上，那么利用content-visibility属性可以使初始用户加载速度更快。它还允许与屏幕上的内容进行更快的交互。很整洁。

国内React项目大多数人选择配套的UI库的时候都会选择Antd。如果是非常简单的页面用Antd的话其实是完全没问题的，性能感觉不到什么瓶颈，样式也还是非常好看的。但如果数据量大起来了的话，其实就会暴露出来问题了。如下图一个实际项目，下面的可编辑表格里面的数据量大概在四千左右，这个时候就出现了比较严重的性能问题是需要解决的。尤其是这个页面做了多人协同操作的功能，性能对于这个页面来讲是非常重要的，否则别人一个操作可能会导致我这边卡顿就是用户不可以接受的了。

今天给朋友们详细介绍react如何进行性能优化。首先要了解网页性能不好的罪魁祸首  浏览器的重绘和重排版(reflows&repaints)(DOM操作都会引起)才是导致网页性能问题的关键。  而React虚拟DOM的目的就是为了减少浏览器的重绘和重排版。一：react中的问题有时候组件的render方法会在不必要的情况下被调用。比如：  组件渲染的过程中，并没有使用prop...

笔者做项目时遇到了轮播图莫名奇妙的出现了抖动的问题。根本就不知道为什么它会抖动。最后给轮播图的外层容器加了一个css样式就解决了抖动的问题。比如最外层的盒子的类名叫wrapBox，那么我们就只需要给其加上这句css就好了：.wrapBox { transform: translateZ(0);}这样你就会发现轮播图的抖动问题解决了。...

在我们开发的过程中，应该始终考虑性能。而本文列举了有效提高系统性能的12个方法，如果朋友们有更多的技巧请在吴小迪的博客下方评论，谢谢。性能是创建网页或应用程序时最重要的一个方面。没有人想要应用程序崩溃或者网页无法加载，或者用户的等待时间很长。根据Kissmetrics，47%的访问者希望网站在不到2秒的时间内加载，如果加载过程需要3秒以上，则在40%的访问者会离开网站。考虑到以上这些数字，你在...

项目开发的过程中经常会遇到树状的数据，比如：选城市，选分类，选公司部门等等等等。。。基本上都是保存的树状结构。下面的图就是一个典型的树型结构，id，唯一值name，名字isLeaf，是否是最末级的叶子节点idPath，当前节点与所有父级节点的id以“，”拼接parentId, 父节点id(如果没有父节点则此字段返回值为null)children，孩子节点(如果没有孩子节点则此字段返...