- 在基于vue的项目中，如果某个数据更改引起大面积或频繁的vuex相关的变动，会非常影响性能。举例：在一个关系图组件中，数据格式是{nodes:[],links:[]}，nodes数组很大，在组件内部会频繁修改nodes数组中元素的属性，组件外如果监控nodes并跟vuex绑定，会导致节点（nodes元素）在界面上拖动的时候非常卡顿，因为每次属性的修改（往往是批量修改），都会引起vuex的变动。
- 由于浏览器会把批量的dom改动集中一次性处理，所以dom的读写操作不要写在一起，因为读操作极可能会触发写操作的执行。
- 层级越高的dom的样式修改，影响越大（看重排、重绘）。
- 通过class name或style.cssText的方式批量修改样式。
- 通过document fragment或者cloneNode的方式修改dom样式。
- 先将display设置为none，多次dom操作后，再恢复display。
- visibility:hidden不会影响重排。
- 通过类似vue或react中的虚拟dom技术最大程度减少dom操作。
- 将dom的写操作放在requestAnimationFrame中。
- 将dom操作放在requestIdleCallback中，也即放在在每一帧空闲时间里操作。
- dom中css、js加载的影响：再谈 load 与 DOMContentLoaded
代码性能问题
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
