让 Chrome 崩溃的一行 CSS 代码

一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS,它可以直接让你的 Chrome 页面挂掉 :)

复现

  1. 在 Chrome 里打开一个稍复杂的页面,比如知乎或者掘金
  2. 打开开发者工具,为页面
    <body>
    增加样式
    style: "width:1px; height:1px; transform:scale(10000)"
  3. 欣赏任务管理器里 Chrome 崩溃前的内存占用

其实这台机器只有 8GB 内存,不过这不重要了。和让 JS 崩溃的红线容量 4GB 比起来,果然还是 CSS 更强大呢 :)

故事

这行代码的发现,源自于我们的编辑器项目在实现画布尺寸调节时的一个诡异现象:用户调节画布尺寸时,只要新旧尺寸之比超过一定幅度,Chrome 就会卡死

虽然这个问题很难由普通用户的操作路径触发,不过它所导致的后果确实比较严重。排查时我们首先考虑了 JS 阻塞和 DOM 重绘过频等方面的可能性,但它们都不是问题所在。一个突破点在于调试器 Rendering 工具中 FPS Meter 的输出:

这里 GPU Memory 被占满了。虽然这个提示信息现在看来很明显是与硬件加速有关的,但在没有相关经历的情况下我们还是没有确定它与具体代码之间的关联。直到我们偶然查看 Chrome 设计文档中关于 Compositing 的介绍时,发现了一个行为:Blink 会将 DOM 节点映射到 LayoutObject 的渲染树,这棵树中的节点理论上每个都能具备到渲染后端的上下文,但为了节约资源 Chrome 会将它们做一些合并后再渲染。而这时存在 CSS 定位(如绝对定位与 transform)的元素是不能合并的,这会造成对显存的额外开销。

基于这个信息的提示,我们使用 Layout 工具来调试当时的页面,果然找到了一个特殊的地方:

图中最大的矩形 Layer 通过一般的 DOM 调试是无法看见的,因此我们推测它的过大尺寸所导致的 RAM 开销是罪魁祸首。基于这个信息,我们最后找到了一个宽高都很合理但 transform 的 scale 值可能在逻辑中被修改得很大的 DOM 节点,限制它的 scale 上限即可解决问题:我们不难发现 scale 的值和最终对应像素数量之间有着 O(N^2) 的关系,1 个像素只放大 100 倍也有 10000 个像素了。因此 scale 很大时对内存 / 显存的过度使用也就是有可能的了(当然浏览器会做 Tiling 等工作,因此这不符合一般情况下的实际情形,Safari / Firefox 这时候也没有出现问题)。最后给 Chrome 提了个 bug 见 #894115

总结

需要注意的是,因为缺乏对浏览器内核的深度了解,上面的调试思路很可能是不准确的。简单的总结:

  • 硬件加速是有代价的,最好能知道代价在哪
  • 浏览器的文档里藏着很多有意思的东西
  • 调试工具的一些冷门功能其实很强大,平时可以多试试

希望大佬指正,谢谢 XD

edit: 似乎不是所有设备必现的,让配置太好挂不掉的吃瓜同学们失望了。想更确定地复现的同学,在 bug 链接中有更容易复现问题的用例哈

edit-2: Chrome 团队可以复现并 assign 了这个问题,见 #894115

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367460.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

oracle块空间的使用,Oracle管理存储架构(二)--Oracle管理数据块空间

1、数据块的概念数据块是数据库中最小的分配单元&#xff0c;块是数据库使用的最小的I/O单元&#xff0c;由一个或多个操作系统block组成。数据块由block header 、free space 、data 组成&#xff0c;oracle 10g 标准块是8k&#xff0c;支持2~32k。块头&#xff1a;包含块地址…

在JBoss 7中使用HA Singleton

不久前&#xff0c;我不得不更改Quartz Scheduler的标准集群行为&#xff0c;并使其能够在不同步数据库的情况下工作。 当然&#xff0c;有很多选择可以做到这一点&#xff0c;但是由于我是简单性的忠实拥护者&#xff0c;因此我决定使用标准的Spring Scheduled配置&#xff0c…

软件目录结构规范

软件目录结构规范 为什么要设计好目录结构? "设计项目目录结构"&#xff0c;就和"代码编码风格"一样&#xff0c;属于个人风格问题。对于这种风格上的规范&#xff0c;一直都存在两种态度: 一类同学认为&#xff0c;这种个人风格问题"无关紧要"…

软件工程的基本步骤

&#xff11;问题定义 问题定义阶段必须回答的关键问题&#xff1a;“要解决的问题是什么&#xff1f;”如果不知道问题是什么就试图解决这个问题&#xff0c;显然是盲目的&#xff0c;只会白白浪费时间和金钱&#xff0c;最终得出 的结果很可能是毫无意义的。尽管确切地定义问…

matlab norm函数使用_matlab norm(a-b)

(示例: X(1:10,1:10)zeros(10,10),LX[X,X;X,X]) Matlab 中冒号(: )的使用方法小结: (1)用于生成向量,a:b,一般要求 a一、matlab 基本操作 Matlab 概率论与数理统计 1. ...概率密度函数 1 (1) 均匀分布:unifpdf(x,a,b)...{X 3}, p1normcdf(5,3,2)- normcdf(2,3,......[A B];rank…

解决MyEclipse JAVA EE无法识别Base64问题

第一步&#xff1a;右击项目选择Build Path,选择Configure Build Path第二步:点击JRE System Library选择右边的Edit第三步&#xff1a;选择Alternate JRE,点击Install JREs第四步&#xff1a;移出原有的MyEclipse自带的 JRE&#xff0c;&#xff08;选中后点击remove&#xff…

JavaFX的响应式设计

使用CSS技术&#xff0c;为您的网站创建响应式设计相对容易。 根据屏幕的大小&#xff0c;您可以使用其他CSS文件和布局。 在JavaFX中&#xff0c;乍一看这似乎有点困难&#xff0c;因为CSS仅负责样式&#xff0c;而不负责布局。 但是&#xff0c;为各个屏幕尺寸使用不同的FXML…

用Vue Node从零开始实现拼多多前后端商城项目 — 记录踩坑之旅(上篇)

前言 本人移动端开发妹子工程师一枚 &#xff0c;因为公司项目需要用到前端的技术(主要是vue)&#xff0c;自己自学了一段时间&#xff0c;最近花了半个月在工作之余的时间终于自己完完整整写下来一整个前后端商城项目(当然是跟了一个线上项目直播班&#xff0c;不要嘲笑我)&am…

python自动补全库_这个库厉害了,自动补全Python代码,节省50%敲码时间

近日&#xff0c;Reddit 上的一篇帖子引起了网友的热议。帖子作者「mlvpj」称&#xff1a;「我们使用深度学习完成了一个简单的项目&#xff0c;可以自动进行 Python 代码补全。」根据介绍&#xff0c;该项目基于 LSTM 模型&#xff0c;训练后&#xff0c;负责对代码的缺失部分…

matlab 小波 cdd,[Matlab] 单导联心电数据的小波(包)消噪及压缩

% 用小波(包)对MitbihCmprTstExample_08730_01(软硬阈值)进行消噪与压缩clear all;clc;close all;disp(用小波(包)对MitbihCmprTstExample_08730_01(软硬阈值)进行消噪和压缩);load MitbihCmprTstExample_08730_01.mat;countlength(sig);xsig(:,1); ysig(:,2); zsig(:,3);TSx(2…

系统重装助手教你如何在Microsoft Edge中恢复“关闭所有选项卡”警告

在Microsoft Edge中&#xff0c;当您打开多个选项卡时&#xff0c;浏览器将显示“您要关闭所有选项卡吗&#xff1f;” 警告&#xff0c;以防止您意外关闭重要标签。 通常&#xff0c;在没有第二个想法的情况下&#xff0c;您会立即禁用此功能&#xff0c;检查提示中的“始终关…

受JAAS保护的JAX-RS端点

随着RESTFUL&#xff08;JAX-RS&#xff09;作为创建Web服务端点的“首选”方式的问世&#xff0c;很长一段时间以来&#xff0c;我一直想知道人们如何围绕它实现安全机制。 归根结底&#xff0c;我假设JAX-RS的基础实现是servlet&#xff0c;因此其安全性也可能围绕容器&…

es springboot 不设置id_springboot整合ES_文档ID删除

1.本课程涵盖**SpringBoot2.x版本10个常用技术点适应企业开发要求&#xff0c;学习IDEA开发工具下的SpringBoot2.x开发学习SpringBoot2.x - 基于Restful接口开发规范学习SpringBoot2.x - 官方推荐模版引擎 - Thymeleaf开发学习SpringBoot2.x - MockMVC测试学习SpringBoot2.x - …

前端必须懂的计算机网络知识—(跨域、代理、本地存储)

前端必须懂的计算机网络知识系列文章&#xff1a; DNS服务器和跨域问题计算机网络的分层模型IP地址和MAC地址前端必须懂的计算机网络知识—(跨域、代理、本地存储)前端必须懂的计算机网络知识—(TCP)前端必须懂的计算机网络知识—(HTTP)前端必须懂的计算机网络知识—(XSS、CSR…

axios请求报Uncaught (in promise) Error: Request failed with status code 404

使用axios处理请求时&#xff0c;出现的问题解决 当url是远程接口链接时&#xff0c;会报404的错误&#xff1a; Uncaught (in promise) Error: Request failed with status code 404 解决方法&#xff1a; var instance axios.create({ headers: {content-type: application/…

php canvas 前端JS压缩,获取图片二进制流数据并上传

<?php if(isset($_GET[upload]) && $_GET[upload] img){//二进制数据流$data file_get_contents ( php://input ); // 不需要php.ini设置&#xff0c;内存压力小if(empty($data)){$data gzuncompress ( $GLOBALS [HTTP_RAW_POST_DATA] ); // 需要php.ini设…

如何给linux目录加密码,怎么只给一个文件夹的内容加密?

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼Encfs security information ││ ││ According to a security audit by Taylor Hornby (Defuse Security), the ││ current implementation of Encfs is vulnerable or potentially vulnerable ││ to multiple types of att…

cordova监听事件中调用其他方法_Laravel模型事件的实现原理详解

模型事件在 Laravel 的世界中&#xff0c;你对 Eloquent 大多数操作都会或多或少的触发一些模型事件&#xff0c;下面这篇文章主要给大家介绍了关于Laravel模型事件的实现原理&#xff0c;文中通过示例代码介绍的非常详细&#xff0c;需要的朋友可以参考借鉴。前言Laravel的ORM…

MongoDB和Web应用程序

当今时代是数据大规模增长的时代。 数据存储不是问题&#xff0c;是的&#xff0c;但是结构化和存储的方式可能会增加或减少所需数据块的查找时间。 不断增长的非结构化数据的用例 脸书&#xff1a; 7.5亿用户处于活跃状态&#xff0c;三分之一的互联网用户拥有Facebook帐户 …

【译】10个有趣的JSCSS库(2018.10)

Tutorialzine每月都会给我们精心挑选优秀的web开发资源&#xff0c;这些资源可以帮助我们解锁最新和最炫酷的网络开发姿势。前端er,让我们一起先睹为快吧&#xff01; WatermelonDB WatermelonDB是用于构建React和React Native应用程序的下一代数据库。快速&#xff0c;高度可…