问题
首先什么是页面崩溃？如下，页面出现如图所示的情况就是页面崩溃。
那有哪些原因会导致页面崩溃呢，我总结了几点。在此和大家分享一下
内存泄漏
浏览器使用引用计数来为Native对象处理内存，而引用计数的对象无法被销毁，涉及Native对象的循环引用将会出现内存泄漏。配合下面的例子，理解这句话，基本上就可以理解JavaScript造成的内存泄漏了。
网页代码复杂和浏览器bug
通常不会出现。
网页数据过多
网页含有大量需要处理的数据，造成系统繁忙，如多图页面，超长页面等，或者网页内嵌的各种控件会导致浏览器处理大量数据，造成系统繁忙。如Flash游戏，ActiveX控件等。当浏览器访问网站的时候，如果网站的数据量大，会使得浏览器一般在处理过程中会占用很大的CPU使用率和内存、造成浏览器失去响应，甚至会使电脑系统死机。在网站开发的时候，如果充分考虑Web性能，很大程度上能避免这个问题。
Ajax请求（A synchronous J avascript And X ML）
Ajax的是基于XML的异步传输，文本格式的XML消息可能是二进制数据带宽量的两倍之多。传输XML消息所需的带宽越多，系统或应用程序用来执行其他任务的可用资源就越少。例如执行复杂算法来获取期望结果。过高的带宽可能导致由系统超载引起的性能减退。过高的带宽将导致Ajax应用程序输出破损的数据，因为没有足够的资源生成干净的数据。这意味着Web服务门户(Ajax应用程序属于其中的一部分)将把破损数据暴露给门户的其他部分，从而导致畸形消息和过度解析。如果威胁者利用了这个漏洞，则会引起浏览器崩溃。另外一方面，频繁的、较小的 HTTP 请求会加重后端服务器、负载均衡程序和防火墙的负担，结果是造成过高的带宽，最终导致性能降低。如果客户端长期停留在该页面或没有关闭浏览器，会使得浏览器的内存持续上涨，得不到释放，导致客户端浏览器崩溃。为此，在较多的时候Ajax的时候，我们要考虑通过专门的硬件加速器、优化软件、消除代码冗余、XML加速功能和解决互操作性问题等方式加速Ajax应用程序。另外，积极地监视通信流可以持续地度量Ajax应用程序的网络流量性能。通过将数据放入实时日志中，您可以查看在哪些位置何时出现大量的包丢失和抖动事件，响应变慢的原因以及如何通过修改应用程序的优先级来改善通信流性能。
其他原因
除以上提到的原因之外，还有其他许多原因，虽然有些不会导致浏览器直接崩溃，但也会造成网站无法访问，如日志文件导致磁盘已满、Web服务器C指针错误、进程缺乏文件描述符、线程死锁、数据库中的临时表不够用和服务器超载等。
那么又该如何分析具体是什么原因造成的呢？我们做了几个案列，下面给大家演示一下。
分析
内存泄漏：系统进程不再用到的内存，没有及时释放，就叫做内存泄漏（memory leak）。当内存占用越来越高，轻则影响系统性能，重则导致进程崩溃。
页面崩溃了，起初我们也不知道具体是什么原因造成的，只能按常见问题进行分析。那么如何具体分析呢？
代码块
JavaScript
node --inspect server.js
浏览器输入 chrome://inspect
查看内存占用情况。
进行压测模拟接口请求，ab -n 1000000 -c 100 http://localhost:8888/ ab是压力测试工具，向你的服务器以100的并发发送了10W个请求，模拟线上用户突增的使用场景。
内存在继续性暴涨，直到内存耗尽系统崩溃。
点击start开始录制。
看到问题出现在index.js文件21行，内存占用率高达99.79。
安装一个工具库 lru-cache，npm i lru-cache 继续ab -n 1000000 -c 100 http://localhost:8888/进行测试
可以看到内存正常增长最后稳定在10M左右。
那么这个问题就成功的解决了。
小结
对于页面崩溃的成因我们进行了一些分析，并实际做了一些案例实践，希望对大家平时的开发上有所帮助，谢谢。
首发于知乎2021-10-18
