网页奔溃的原因查找

来源：2-7 使用Chrome DevTools分析性能【最大法宝】

wibc666

2022-01-18

相关截图:
老师，我观察这个DOM Nodes稳稳地在增加，是不是导致我网页奔溃的原因？这个也是占内存的是吗？
如果是具体怎么定位呢？

写回答

1回答

Mr_Max

2022-01-20

同学你好！

DOM节点数不应太高, 控制一下代码的写法，当然如果页面本身就是很复杂，只能尽力优化。

* 减少DOM结构里没用的节点，有些工程师会喜欢加很多的<div>my content</div>无用嵌套。

* 考虑多使用CSS伪元素(:before, :after)。

* 在React里，代码片段用<></>包起来，而不要用<div></div>等，和第一条同理。

* 可以加定时任务做页面DOM清理。

* 不要有detached DOM，这里本课程里有讲怎么定位。

//img.mukewang.com/szimg/61e85d6a096739b411200408.jpg

Mr_Max

wibc666

可以setInterval，定时对你动态添加的元素进行“扫描”和删除，这个也是有开销的，频率不要太高。

2022-02-01

共2条回复

前端性能优化企业级解决方案 6大角度+大厂视野

只要项目还在线，性能优化永远是时刻要关注的问题

1109 学习 · 226 问题

相似问题

回答 2

回答 1

回答 1

回答 1

回答 1