大规模WebGL应用引发浏览器崩溃的几种情况及解决办法

article/2025/11/10 19:18:12

一般的Web应用基本上不会导致浏览器崩溃,写Javascript代码也不需要管理内存资源,基本也不需要考虑内存“泄露”的问题。随着H5的崛起,越来越多的原本在桌面端的软件也改头换面迁移到Web上来,比如三维图形类的应用。在Web端显示大规模三维模型不仅仅是三维显示引擎的问题,也涉及到数据组织、任务调度、资源管理、浏览器兼容等方方面面。这里针对在项目中遇到到几种把浏览器高挂的情况简要列举了一下。


异步请求过多

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

  解决这样的问题涉及到数据管理的问题。有的需要多次请求得到的数据可以重新组织在一次或几次请求完成。如果就是需要若干次请求,就需要把请求排队,用多个异步请求队列加载数据。


并发异步请求资源死锁

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

  就需要在组织异步请求队列的时候,相同的资源不能在不同的队列中出现


GPU进程崩溃

Chrome是多进程架构,每个Tab都会启用单独的进程来处理页面。但,所有的进程都会公用一个GPU进程。


那么问题来了,如果开启多个WebGL应用页面,每个页面占用一定的GPU资源,GPU进程的内存加起来总的就会轻轻松松超过1.5G,结果就是GPU进程崩溃,即使是64位Chrome。

在实际中用WebGL显示大模型会轻轻松松的撑爆GPU进程。这就需要显示引擎要处理好顶点数据的内存占用。方法有很多种,这里就不多赘述了。


JS使用内存过多导致崩溃

在上图中可以看到多个内存:内存、GPU内存、Javascript内存。其中Javascript内存是JS对象占用的内存,垃圾回收会影响这部分内存。Javascript代码和垃圾回收运行在同一个线程的环境,当垃圾回收的时候,js代码不会执行。如果js对象过多,(占用内存过多),垃圾回收的过程也会变得漫长。所以Chrome简单粗暴的限制了Javascript内存的占用,在x64下最大~1.4G。解决这样的问题需要优化数据结构或者增加数据动态管理的机制。


JS代码运行Timeout

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

解决方法就是把耗时的算法设计成分部执行,结合setTimeout或者requestAnimationFrame使用。


总结

相对桌面应用,浏览器仍然是一个资源受限的环境:JS执行效率,内存管理,线程……。对于大规模的Web应用,需要不断的在效率性能和资源占用上做平衡。

一年半下来,大部分精力花在了debugging中。深深感到,前端能做的事情越来越多,程序的规模也越来越大,对JS程序员的要求也越来越高。




http://chatgpt.dhexx.cn/article/8e97Kovw.shtml

相关文章

浏览器的底层机制、CRP优化技巧、如何解决DOM消耗性能、同步异步、进程和线程

文章目录 浏览器的底层机制:步骤一:生成DOM树「DOM TREE」步骤二:生成CSSOM树「CSSOM TREE」步骤三:合成渲染树 「RENDER TREE」步骤四:Layout布局 & 回流/重排步骤五:分层步骤六:Painting绘…

浏览器页面性能分析指南(chrome)

1.首先我们需要无痕模式打开一个新的chrome标签,可以按CtrlShiftN开启一个无痕模式的chrome 选择无痕模式是为了不让其他的插件干扰你 我们先写一个html的小例子,里面有一些js代码用来做性能分析的用例 html文件的代码如下: 这里是使用vsc…

浏览器兼容性问题,前端性能优化、SEO优化

目录 一、常见浏览器兼容性问题及解决二、前端性能优化三、SEO优化 一、常见浏览器兼容性问题及解决 不同浏览器的内核不尽相同,所以各个浏览器对网页的解析存在一定的差异。 浏览器内核主要分为两种,一是渲染引擎,另一个是js 引擎&#xff…

Chromium浏览器的一些使用总结

Chromium浏览器的一些使用总结 1.快捷键 一般使用快捷键插件实现快捷键的定义、修改、禁用。 关于禁用快捷键插件,在网上找到disable-keyboard-shortcuts插件。正常插件是在google商店上安装的crx格式,国内上不去。有很多第三方插件,考虑到开…

浏览器原理 38 # 加载阶段性能:使用 Audits(Lighthouse) 来优化 Web 性能

说明 浏览器工作原理与实践专栏学习笔记 什么是 Web 性能? Web performance:https://en.wikipedia.org/wiki/Web_performance Web 性能描述了 Web 应用在浏览器上的加载和显示的速度。 性能检测工具:Performance vs Audits Performance 和 Audits&am…

浏览器兼容性 问题产生原因 厂商前缀 滚动条 css hack 渐近增强 和 优雅降级 caniuse

目录 浏览器兼容性问题产生原因厂商前缀滚动条 css hack渐近增强 和 优雅降级caniuse 浏览器兼容性 问题产生原因 市场竞争标准版本的变化 厂商前缀 比如:box-sizing, 谷歌旧版本浏览器中使用-webkit-box-sizing:border-box 市场竞争,标准…

前端性能优化(二)02-页面性能优化之浏览器——浏览器是多进程的 浏览器的渲染机制

前端性能优化(二)02-页面性能优化之浏览器——浏览器是多进程的 & 浏览器的渲染机制 浏览器是多进程的 进程线程简单的理解:进程里面可以有多个线程,进程就是QQ,线程就是会话。 浏览器是多进程的浏览器之所以能够…

优化-浏览器缓存和压缩优化

一、减少HTTP请求 1.图片地图: 假设导航栏上有五幅图片,点击每张图片都会进入一个链接,这样五张导航的图片在加载时会产生5个HTTP请求。然而,使用一个图片地图可以提高效率,这样就只需要一个HTTP请求。 服务器端图片…

浏览器原理及性能优化

1. 影响页面性能的因素 HTTP 请求复杂的页面逻辑重度的DOM操作服务端响应大量的数据… 2. 优化网页性能 资源压缩与合并(代码打包)异步加载CDNDNS 预解析缓存… 一、浏览器 1.1 主要作用 浏览器的主要功能就是向服务器发出请求,在浏览器…

前端性能优化(三)——浏览器九大缓存方法

浏览器缓存是浏览器保存数据用于快速读取或避免请求重复资源,提升网页加载速度。缓存的数据到底放哪了呢?作为开发者,有时也需要检查一下缓存中的内容。所以介绍下缓存方法以及缓存内容在哪查找? 上一篇文章介绍的是《浏览器缓存…

chrome浏览器性能分析

匿名模式 匿名模式可以保证Chrome在一个相对干净的环境下运行。比如安装了许多chrome插件,这些插件可能会影响我们分析性能表现 使用快捷键ctrl shift N 即可代码匿名模式下的chrome新标签页 如果想分析移动设备 的页面性能,可用CPU控制器来模拟移动…

浏览器性能优化(初笔记后续修改补充)

参考:【前端工程师面试宝典】学习说明_互联网校招面试真题面经汇总_牛客网 (nowcoder.com) 性能优化 前端性能优化的手段 方面:加载优化、执行优化、渲染优化、样式优化、脚本优化 加载优化:减少HTTP请求、缓存资源、压缩代码、无阻塞、首屏加载、按需…

深入浏览器内部谈性能优化

1. 浏览器发展历史 a. 1995 年,美国网景公司因“网景浏览器”的发布而快速崛起 b. 同年,微软发布windows95,捆绑IE c. 2002年,微软占据了浏览器市场80%的份额 2. 浏览器三大进化路线(Web应用能做的事以及未来发展趋…

GreenPlum数据库数据脱敏

1、首先备份要操作的数据库表,防止对原表误操作。 2、例子:数据库表名:st_person,要操作的字段为:phone 3、select phone from st_person ; --看看表里该字段是否有数据,大概格式是什么,该表…

数据库防火墙、数据库加密、数据库脱敏真的可用吗?

数据库是所有信息系统的核心,数据库的安全通常是指其中所存数据的安全,是网络安全、信息安全的重要组成部分。目前有很多相关性产品,如数据库加密、数据库防火墙、数据库脱敏、数据库审计等。 一、数据库防火墙 数据库防火墙系统:…

mysql动态脱敏查询_数据库动态脱敏

原标题:数据库动态脱敏 产品简介 中安威士数据动态脱敏系统(简称VS-DM),通过截获并修改数据库通讯内容,对数据库中的敏感数据进行在线的屏蔽、变形、字符替换、随机替换等处理,达到对用户访问敏感数据真实内容的权限控制。对存储于…

MySQL 脱敏函数

项目场景: 示例:项目涉及到敏感数据,例如手机号、姓名等使用mysql存储函数解决。 解决方案: 提示:以下主要使用mysql函数CONCAT、LEFT、RIGHT。 1、CONCAT(str1,str2,…) CONCAT()函数返回结果为连接参数产生的字符串。如有任…

跨数据库跨系统,数据脱敏有新招

作者介绍 贝壳找房DBA团队,负责链家、贝壳找房的数据库服务治理及运维,包括MySQL、Redis、Kafka、RocketMQ、TiDB等产品。为保证线上服务高效、安全、稳定运行,面向研发同学提供一站式的数据库操作平台,建设了满足99.99%标准的高可…

imperva数据库脱敏-server2008

首先安装一个server2008其他的server也行 然后安装java环境 后安装tomcat中间件 一路默认就好 这就是tomcat的控制台 然后安装postgresql数据库 官方的要求是9.1-9.3的版本。 这个数据库也是默认安装就好。里面的密码我设的的Webco123 数据库安装完成 下一步安装发现脱敏的控…

《Sharding-JDBC》——数据库分表+数据库脱敏实现方案

本文从实际情况出发,解决生产中单表数据过大,和数据被拖库导致的问题,并进行的解决方案。本案例使用的框架为轻量型的jfinal,分表数据库脱敏,均采用了Apache的shardingsphere。 首先我们要先明确这样一个业务场景&…