让 Chrome 崩溃的一行 CSS 代码
我要评论一般的 CSS 代码只会出现 UI 版式或者兼容性方面的小问题。但这里我们要分享一行有趣的 CSS，它可以直接让你的 Chrome 页面挂掉 :)
复现
- 在 Chrome 里打开一个稍复杂的页面，比如知乎或者 掘金
- 打开开发者工具，为页面 <body> 增加样式 style: "width:1px; height:1px; transform:scale(10000)"
- 欣赏任务管理器里 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
总结
需要注意的是，因为缺乏对浏览器内核的深度了解，上面的调试思路很可能是不准确的。简单的总结：
- 硬件加速是有代价的，最好能知道代价在哪
- 浏览器的文档里藏着很多有意思的东西
- 调试工具的一些冷门功能其实很强大，平时可以多试试
以上所述是小编给大家介绍的让 Chrome 崩溃的一行 CSS 代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
Chrome浏览器Shockwave Flash总是崩溃的两种解决办法
Chrome浏览器Shockwave Flash老是崩溃该怎么办？这是因为兼容性存在问题，尤其是在谷歌Chrome浏览器升级到45以上版本后，经常出现崩溃的问题，下面分享Chrome浏览器Shockwa2015-09-21- Chrome庞大数量的用户也为Chrome自己找到了许多漏洞，其中有些漏洞看起来非常诡异。雷锋网消息，据外媒venturebeat报道，近日有工程师发现了一个可以让Chrome直接崩溃的162015-09-21
想让Google Chrome浏览器瞬间崩溃？只需16个字节
想让Google Chrome浏览器瞬间崩溃？真的很简单，最近有网友发现，Chrome竟然可以被简单的16个字符（URL）给折腾到崩溃，如果你感到好奇，不妨试着在Chrome地址栏输入下文的2015-09-21Win10 Build 10532发布 64位Chrome程序启动时崩溃
刚才，微软推送了Win10 Build 10532快速版，修复了之前的Bug，并带来了三项改进，主要来说，这次的更新改进了右键菜单的UI，使其更具Modern风格。此外，更新增加了Windows2015-08-28谷歌Chrome浏览器64位在Win10预览版10525中将修复崩溃
微软近日正式推送了win10预览版10525，不过在大家刚成功进行更新升级后却发现自己的谷歌Chrome浏览器却用不了了，这个问题主要的64位Chrome浏览器在win10预览版10525中遭遇2015-08-22谷歌Chrome浏览器在Win10预览版10525中崩溃的解决办法
谷歌浏览器在Win10预览版10525中遭遇兼容性问题。这一问题主要出现在64位Chrome浏览器中，具体内容及解决办法见本文2015-08-20英伟达为解决Chrome崩溃等问题 发布GeForce热修复驱动
自发布了GeForce 353.30 WHQL认证优化版驱动，出现了一些驱动问题，有可能会造成谷歌Chrome浏览器崩溃或停止响应，所以英伟达发布GeForce热修复驱动，那么接下来随脚本之家2015-06-28- Chrome号称拥有最强的内存管理,标签之间互不影响,带来了更高的稳定性. 但是您只要在Chrome的URL栏里输入或者复制字符“:%”,就可以将整个Chrome浏览器2008-10-20
- 大多数人都会在怨恨Google Chrome的多线程吃内存吧？而且即使标签独立进程，它的稳定性也不见得高到哪里去，经常遇到要崩溃就一起崩溃的情况，不如让他老实点~这里是一2008-10-20
最新评论