-
Notifications
You must be signed in to change notification settings - Fork 2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
如何使用 CSS 让你的浏览器卡死 #47
Comments
知道一个js的,蛤蛤
|
chrome更新了好像崩不了了 |
的确 会抛异常不会导致真的卡死 |
@nanachiOwQ 啊哈哈 是的,文章还没写完,bug 已经被修复了~ |
我偏不信,我2w 买的电脑会卡死 |
n年后又一次见到这个话题 |
活捉智爷 |
mac m2芯片毫无影响,运行丝滑 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
本文写作中,未完成...
使用 CSS 让你的浏览器卡死,听起来好像很奇怪。这里的卡死包括但不局限于浏览器crash崩溃、浏览器无响应、内存不足等等浏览器已经失去响应,用户已经卡到无法进行操作的行为。
能造成卡死无响应的,前端而言,通常都是 JavaScript 脚本的问题,死循环、内存泄漏、堆栈溢出等等导致的。
今天,我们就来聊聊不涉及 JS,仅仅是使用 CSS 的情况下,有没有可能让浏览器崩溃或者卡死。当然,使用 CSS 让浏览器卡死不是说页面同时渲染几千万个 div,给它们加上各种耗性能样式,那谁顶得住。
这里说的使用 CSS 让浏览器卡死,应该是局限在只使用少量几个标签,用特定 CSS 代码让 webview 在极短时间内卡死或者崩溃。
CraSSh
第一个方法,额,源自 CraSSh,巧妙的使用
calc()
以及CSS变量var(--xx)
。原理就是通过将一个指数级递增长的对
calc()
以及var(--xx)
调用的表达式,赋给一个具体的元素样式。现代浏览器在短时间内进行大量的运算,将导致内存不足而使浏览器崩溃。额,描述很费力,具体看一下代码,我们只有一个简单的 div:
CSS 样式如下:
可以看到,从
--level-1
到--level-30
,每次的运算量都是成倍的增长,最终到--level-final
变量,展开将有 2^30 = 1073741824 个--initial-level-0
表达式的内容。并且,每个
--initial-level-0
表达式的内容 --calc(1vh + 1% + 1px + 1em + 1vw + 1cm)
,在浏览器解析的时候,也已经足够复杂。混合在一起,就导致了浏览器的 BOOM,为了能看到效果,我们将上述样式赋给某个元素被 hover 的时候,得到如下效果:
你可以点下面的链接 Demo 尝试一下,更详细的原理介绍可以戳原文链接:
CodePen Demo -- CraSSh
box-shadow
box-shadow
,在众多 CSS 属性中属于耗性能样式。同时,
box-shadow
有个特点,单个元素可以叠加多重阴影。所以即便只有一个<div>
标签,通过填充 N 重阴影,当 N 足够大时,即可以轻易让浏览器卡死。当然,为了有趣一点。我们希望填充的多重阴影有意义而不是毫无章法。有一个小技巧很多同学都知道,就是使用阴影去模拟一张图片。
理论上任意一张图片,每一个像素点都可以由一重 1px*1px 的 box-shadow 来表示。
为了完成这个任务,
canvas
刚好提供了一个方法CanvasRenderingContext2D.getImageData
可以获取到图片每一个像素点的 rgba 值,那么图片转为一个完全由 box-shadow 表示的图片是完全可行的。下面这个小插件可以实现图片向单div标签的转换:
img2Div
我尝试转换了一张 1920*1080 的图片,也就是相当于给单个标签 2073600 重阴影,在等待的过程中 JavaScript 运算已经接近崩溃。转换完成后,图片正确被渲染,但是整个页面卡到无法操作,感兴趣的可以自行尝试下。:)
mix-blend-mod
mix-blend-mod
混合模式,另外一个性能杀手。CodePen Demo -- CSS WAVE MOVE
filter
最后,新开通的公众号求关注,形式希望是更短的篇幅,质量更高一些的技巧类文章,包括但不局限于 CSS:
The text was updated successfully, but these errors were encountered: