讓 Chrome 崩潰的一行 CSS 代碼
我要評(píng)論一般的 CSS 代碼只會(huì)出現(xiàn) UI 版式或者兼容性方面的小問題。但這里我們要分享一行有趣的 CSS，它可以直接讓你的 Chrome 頁面掛掉 :)
復(fù)現(xiàn)
- 在 Chrome 里打開一個(gè)稍復(fù)雜的頁面，比如知乎或者 掘金
- 打開開發(fā)者工具，為頁面 <body> 增加樣式 style: "width:1px; height:1px; transform:scale(10000)"
- 欣賞任務(wù)管理器里 Chrome 崩潰前的內(nèi)存占用
其實(shí)這臺(tái)機(jī)器只有 8GB 內(nèi)存，不過這不重要了。和讓 JS 崩潰的紅線容量 4GB 比起來，果然還是 CSS 更強(qiáng)大呢 :)
故事
這行代碼的發(fā)現(xiàn)，源自于我們的編輯器項(xiàng)目在實(shí)現(xiàn)畫布尺寸調(diào)節(jié)時(shí)的一個(gè)詭異現(xiàn)象：用戶調(diào)節(jié)畫布尺寸時(shí)， 只要新舊尺寸之比超過一定幅度，Chrome 就會(huì)卡死 。
雖然這個(gè)問題很難由普通用戶的操作路徑觸發(fā)，不過它所導(dǎo)致的后果確實(shí)比較嚴(yán)重。排查時(shí)我們首先考慮了 JS 阻塞和 DOM 重繪過頻等方面的可能性，但它們都不是問題所在。一個(gè)突破點(diǎn)在于調(diào)試器 Rendering 工具中 FPS Meter 的輸出：
這里 GPU Memory 被占滿了。雖然這個(gè)提示信息現(xiàn)在看來很明顯是與硬件加速有關(guān)的，但在沒有相關(guān)經(jīng)歷的情況下我們還是沒有確定它與具體代碼之間的關(guān)聯(lián)。直到我們偶然查看 Chrome 設(shè)計(jì)文檔中關(guān)于 Compositing 的介紹時(shí)，發(fā)現(xiàn)了一個(gè)行為：Blink 會(huì)將 DOM 節(jié)點(diǎn)映射到 LayoutObject 的渲染樹，這棵樹中的節(jié)點(diǎn)理論上每個(gè)都能具備到渲染后端的上下文，但為了節(jié)約資源 Chrome 會(huì)將它們做一些合并后再渲染。而這時(shí)存在 CSS 定位（如絕對(duì)定位與 transform）的元素是不能合并的，這會(huì)造成對(duì)顯存的額外開銷。
基于這個(gè)信息的提示，我們使用 Layout 工具來調(diào)試當(dāng)時(shí)的頁面，果然找到了一個(gè)特殊的地方：
圖中最大的矩形 Layer 通過一般的 DOM 調(diào)試是無法看見的，因此我們推測它的過大尺寸所導(dǎo)致的 RAM 開銷是罪魁禍?zhǔn)??；谶@個(gè)信息，我們最后找到了一個(gè)寬高都很合理但 transform 的 scale 值可能在邏輯中被修改得很大的 DOM 節(jié)點(diǎn)，限制它的 scale 上限即可解決問題：我們不難發(fā)現(xiàn) scale 的值和最終對(duì)應(yīng)像素?cái)?shù)量之間有著 O(N^2) 的關(guān)系，1 個(gè)像素只放大 100 倍也有 10000 個(gè)像素了。因此 scale 很大時(shí)對(duì)內(nèi)存 / 顯存的過度使用也就是有可能的了（當(dāng)然瀏覽器會(huì)做 Tiling 等工作，因此這不符合一般情況下的實(shí)際情形，Safari / Firefox 這時(shí)候也沒有出現(xiàn)問題）。最后給 Chrome 提了個(gè) bug 見 #894115
總結(jié)
需要注意的是，因?yàn)槿狈?duì)瀏覽器內(nèi)核的深度了解，上面的調(diào)試思路很可能是不準(zhǔn)確的。簡單的總結(jié)：
- 硬件加速是有代價(jià)的，最好能知道代價(jià)在哪
- 瀏覽器的文檔里藏著很多有意思的東西
- 調(diào)試工具的一些冷門功能其實(shí)很強(qiáng)大，平時(shí)可以多試試
以上所述是小編給大家介紹的讓 Chrome 崩潰的一行 CSS 代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
Chrome瀏覽器Shockwave Flash總是崩潰的兩種解決辦法
Chrome瀏覽器Shockwave Flash老是崩潰該怎么辦？這是因?yàn)榧嫒菪源嬖趩栴}，尤其是在谷歌Chrome瀏覽器升級(jí)到45以上版本后，經(jīng)常出現(xiàn)崩潰的問題，下面分享Chrome瀏覽器Shockwa2015-09-21Chrome瀏覽器千萬別打開這個(gè)地址:否則立即整體崩潰
Chrome龐大數(shù)量的用戶也為Chrome自己找到了許多漏洞，其中有些漏洞看起來非常詭異。雷鋒網(wǎng)消息，據(jù)外媒venturebeat報(bào)道，近日有工程師發(fā)現(xiàn)了一個(gè)可以讓Chrome直接崩潰的162015-09-21想讓Google Chrome瀏覽器瞬間崩潰？只需16個(gè)字節(jié)
想讓Google Chrome瀏覽器瞬間崩潰？真的很簡單，最近有網(wǎng)友發(fā)現(xiàn)，Chrome竟然可以被簡單的16個(gè)字符（URL）給折騰到崩潰，如果你感到好奇，不妨試著在Chrome地址欄輸入下文的2015-09-21Win10 Build 10532發(fā)布 64位Chrome程序啟動(dòng)時(shí)崩潰
剛才，微軟推送了Win10 Build 10532快速版，修復(fù)了之前的Bug，并帶來了三項(xiàng)改進(jìn)，主要來說，這次的更新改進(jìn)了右鍵菜單的UI，使其更具M(jìn)odern風(fēng)格。此外，更新增加了Windows2015-08-28谷歌Chrome瀏覽器64位在Win10預(yù)覽版10525中將修復(fù)崩潰
微軟近日正式推送了win10預(yù)覽版10525，不過在大家剛成功進(jìn)行更新升級(jí)后卻發(fā)現(xiàn)自己的谷歌Chrome瀏覽器卻用不了了，這個(gè)問題主要的64位Chrome瀏覽器在win10預(yù)覽版10525中遭遇2015-08-22谷歌Chrome瀏覽器在Win10預(yù)覽版10525中崩潰的解決辦法
谷歌瀏覽器在Win10預(yù)覽版10525中遭遇兼容性問題。這一問題主要出現(xiàn)在64位Chrome瀏覽器中，具體內(nèi)容及解決辦法見本文2015-08-20英偉達(dá)為解決Chrome崩潰等問題 發(fā)布GeForce熱修復(fù)驅(qū)動(dòng)
自發(fā)布了GeForce 353.30 WHQL認(rèn)證優(yōu)化版驅(qū)動(dòng)，出現(xiàn)了一些驅(qū)動(dòng)問題，有可能會(huì)造成谷歌Chrome瀏覽器崩潰或停止響應(yīng)，所以英偉達(dá)發(fā)布GeForce熱修復(fù)驅(qū)動(dòng)，那么接下來隨腳本之家2015-06-28- Chrome號(hào)稱擁有最強(qiáng)的內(nèi)存管理,標(biāo)簽之間互不影響,帶來了更高的穩(wěn)定性. 但是您只要在Chrome的URL欄里輸入或者復(fù)制字符“:%”,就可以將整個(gè)Chrome瀏覽器2008-10-20
Google Chrome瀏覽器單線程節(jié)省內(nèi)存方法
大多數(shù)人都會(huì)在怨恨Google Chrome的多線程吃內(nèi)存吧？而且即使標(biāo)簽獨(dú)立進(jìn)程，它的穩(wěn)定性也不見得高到哪里去，經(jīng)常遇到要崩潰就一起崩潰的情況，不如讓他老實(shí)點(diǎn)~這里是一2008-10-20