我们使用Javascript写WebApp的时候，一般都不会考虑对象的生命周期，不太关注内存“泄露”的问题，依赖JS引擎的垃圾回收机制就可以运行的很好，基本上很少会出现浏览器崩溃的情况。但在Web端显示大规模三维模型的时候，内存/显存就是一个非常紧张的资源，需要综合考虑模型数据组织、任务调度、资源管理、浏览器兼容等方方面面的问题。本文针对我们在开发基于WebGL的三维应用中遇到到几种导致浏览器崩溃的情况进行分析并提供解决方案。

异步请求过多

浏览器对并发异步请求是有限制的。如果程序不做处理，“同时”发送几百个请求就可能导致浏览器崩溃。

解决办法：

使用请求队列：把需要多次请求得到的数据重新组织，在一次或几次请求完成。如果非得需要很多次(几百上千的情况)请求，可以把请求排队，用多个异步请求队列加载数据。

并发异步请求资源死锁

若一个资源被多个异步请求同时请求的时候就可能导致浏览器死锁，死锁的结果就是浏览器崩溃。默认浏览器都是启用cache的，而浏览器在从cache中读取数据的时候会加锁。

解决办法：

在组织异步请求队列的时候，把相同的资源放在相同的队列中，而不是放在不同的队列中。

GPU进程崩溃

Chrome是多进程架构，每个Tab都会启用单独的进程来处理页面。但所有的进程都会公用一个GPU进程。那么问题来了，如果开启多个WebGL应用页面，每个页面占用一定的GPU资源，GPU进程的内存加起来总的就会轻轻松松超过1.5G，结果就是GPU进程崩溃。使用64位Chrome情况会稍有改善，但依赖本机的GPU显存大小。在实际中用WebGL显示大模型会轻轻松松的撑爆GPU进程。

解决办法：

优化Mesh数据

Mesh简化

Mesh共享

使用对象池

限制同时绘制对象的数量

JS对象过多导致崩溃

在上图中的浏览器管理器中可以看到多个内存：内存、GPU内存、Javascript内存。其中Javascript内存是JS对象占用的内存，JS垃圾回收的是这部分内存。

Javascript代码和垃圾回收运行在同一个线程的环境，当垃圾回收的时候，js代码不会执行。如果js对象过多，(占用内存过多)，垃圾回收的过程也会变得漫长。所以Chrome简单粗暴的限制了Javascript内存的占用，在x64下最大~1.4G。

解决办法：

优化数据结构

增加数据动态管理的机制。

JS代码运行超时

如果JS运行时间过长，超出一定的时间，浏览器就弹个对话框，让用户选择是否结束。相同的代码在chrome中没有问题，而在firefox中就可能无响应。

解决方法：

把耗时的算法设计成分步执行，使用requestAnimationFrame模拟多线程。

总结

相对桌面应用程序开发，浏览器是一个资源受限的环境：JS执行效率，内存，线程等。对于大规模的Web应用，我们经常需要在性能和资源上做平衡。

html页面会出现浏览器崩溃,大规模WebGL应用引发浏览器崩溃的几种情况及解决办法...相关推荐

  1. IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法

    转载自  IE8浏览器缓存问题导致Ajax的GET请求只能执行一次的解决办法 最近在测试兼容性问题的时候发现,使用Ajax的GET请求向后台获取响应结果时,如果是IE8浏览器,第一次发送请求时会得到正 ...

  2. WampServer + phpcms 开发中，浏览器 localhost 出现 Cannot to connect to mySQL server 的原因分析和解决办法？

    首先,确定你phpcms的文件已经都已经放置在对应的文件目录下! 注意: 本文针对 Wampserver + phpcms 开发中出现的此类问题.其他情况仅供参考. 在安装软件**WampServer ...

  3. safari 浏览器版本升级后提示“此网页出现问题，已重新载入网页” 解决办法

    safari 浏览器版本升级后提示"此网页出现问题,已重新载入网页" 解决办法 safari回退条件 版本回退的前提是关闭电脑的SIP机制,命令行 csrutil status 检 ...

  4. Mac遇到浏览器能上网，大部分软件无法上网，恢复后共享网络给手机又上不了网的情况及解决办法

    Mac遇到浏览器能上网,大部分软件无法上网,恢复后共享网络给手机上不了网的情况及解决办法 一.问题描述: ​ 某一天在用腾讯QQ的时候,突然无法收到别人发的图片(一直显示重新加载),自己的表情包也发不 ...

  5. 谷歌浏览器或者采用Chromium内核浏览器，枫树，金山猎豹等等不显示复选框的解决办法

    谷歌浏览器或者采用Chromium内核浏览器不显示复选框的解决办法,在网上找了好久可以使用下面方法: 在系统任务栏空白处点右键,然后点击属性,然后点击确定,然后刷新一下网页就好啦.  不要问我为什么, ...

  6. asp.net页面中Menu控件下拉菜单被frame挡住和iframe自适应高度的解决办法

    当你在做一个仿windows程序的顶部菜单框架的时候,在asp.net中你可能会使用两个frame,一个frame在上面用来放菜单一个frame在下面用来方菜单点击后打开的页面.页面实现很简单,单运行 ...

  7. alert导致ajax数据交互问题,用ajax获得数据,可是页面显示的时不加个alert就显示不出来,随意加个alert就可以 解决办法...

    这是因为Ajax的异步处理的引起的 只需要把jquery中的$.ajaxSettings.async = false; 就可以了 默认为true; AJax可以通过两种方法访问服务器,即同步(脚本会停 ...

  8. 浏览器下载文件时，总是中断然后重头开始重复下载的解决办法

    1. 问题: 最近使用chrome浏览器下载较大的文件时,下载过程中总是下载一部分后又重新下载,而且一直重连下载. 搜索解决方案 比如: 下载文件过程中遇见下载一半重新下载,而且一直重连下载 说是因为 ...

  9. Chrome浏览器访问EasyDSS报错“无法访问此网站”的排查步骤及解决办法

    我们也时常会有接到用户的反馈,在使用EasyDSS时会出现报错"无法访问此网站,网址为 http://demo.easydss.com:10080/ 的网页可能暂时无法连接,或者它已永久性地 ...

  10. centos7 无法启动，停留在开机页面，报错 A start job is running for /etc/rc.d/rc.local compatibility 解决办法

    问题描述 centos7 部署的服务因服务器IP更换,出现报错"A start job is running for /etc/rc.d/rc.local compatibility &qu ...

最新文章

  1. 算法------------存在重复元素 II(Java 版本)
  2. 点量OTT TV 点播软件模式为何受海外华人运营者喜爱？
  3. Mac本地生成SSHKey的方法
  4. HDU 1232：流问题（并检查集合）
  5. html 获得文本节点,JavaScript获取节点——获取文本节点
  6. 算法（伪代码）的书写
  7. c# 检测cpu使用率[测试通过]
  8. 如何快速上手mysql_mysql快速上手3
  9. 怎样做高质量的财务分析?
  10. git subtree 管理项目子模块
  11. YUI3学习笔记 ( 8 )
  12. spring框架总结
  13. 星尘小组第六周学习笔记—如何在各类控件中输入/输出数据
  14. 强大的网页数据库管理工具Adminer
  15. 和小松一起聆听遥唤根本上师
  16. js中使用jQuery读/写cookie的值
  17. android迅雷下载搭建开发环境
  18. 方法引用错误：reason: no instance(s) of type variable(s) exist so that String conforms to Person
  19. 讨论▍数据分析师（非数据挖掘，偏业务）是青春饭吗？
  20. 力争上游 ——我眼中的“计算机产业链”

热门文章

  1. toMap函数 java.lang.IllegalStateException: Duplicate key 123 (attempted merging values 123 and 124)
  2. 无线网络dns服务器设置,netgear 无线dns设置教程
  3. 将字符串数组含有特定字符的值输出{“张三丰“,“张翠山“,“张无忌“,“宋远桥“,“莫声谷“,“俞正声“}
  4. 配置 PO SLD步骤
  5. 如何利用turtle制作一个滑稽表情
  6. git cherry-pick的使用
  7. Python生成 一维条码
  8. 申请SSL证书，并给域名配置SSL证书，并部署服务器；SSL证书的下载和安装
  9. 服务器IP被封怎么办
  10. 虚幻四C++入坑指南09:C++实现FPS游戏（3）Pitch Yaw Roll的作用 视角旋转 跳跃