當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

【原创】原来你竟然是这样的Chrome？！Firefox笑而不语

發(fā)布時間：2025/7/14 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了【原创】原来你竟然是这样的Chrome？！Firefox笑而不语小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

書接上文

上一篇文章《【原創(chuàng)】用事實說話，Firefox 的性能是 Chrome 的 2 倍，Edge 的 4 倍，IE11 的 6 倍！》，我們對比了不同瀏覽器下FineUIPro一個頁面的性能，發(fā)現(xiàn)Firefox的加載速度最快，而眾望所歸的Chrome卻表現(xiàn)的差強人意，加載速度僅僅是Firefox的一半！

最近我們重新對測試和代碼進(jìn)行了優(yōu)化和整理，有如下三個發(fā)現(xiàn)：

1. 測試代碼將開始時間放在<head>標(biāo)簽的做法有失偏頗，如下所示：

<!DOCTYPE html> <html> <head><title></title><script>var __STARTTIME = new Date();</script> </head>

這會導(dǎo)致所計算的時間包含HTML頁面，CSS文件和JavaScript文件的網(wǎng)絡(luò)傳輸時間，實際上這部分是我們測試案例所不關(guān)心的，我們僅關(guān)心頁面的渲染速度！

因此，優(yōu)化后的代碼將開始時間放到頁面底部，如下所示：

</form><script>// 等所有JS資源下載完畢后開始var __STARTTIME = new Date();// 表格渲染完畢后結(jié)束function onGridRender() {F.ui.Grid1.setTitle('表格（23列，500行，行高不同） - 渲染：' + ((new Date() - __STARTTIME) / 1000).toFixed(2));}</script> </body> </html>

2. 前面一篇文章《【原創(chuàng)】這一次，Chrome表現(xiàn)和IE11一樣令人失望，圍觀群眾有：Edge，Firefox》，我們發(fā)現(xiàn)Chrome解析如下結(jié)構(gòu)時遇到問題：

2.1 頁面結(jié)構(gòu)如下：

2.2 頁面樣式包含：

.f-grid-cell {overflow: hidden; } .f-grid-cell-inner {position: relative; }

這樣的 CSS 設(shè)置會導(dǎo)致滾動時頁面出現(xiàn)白屏，并且CPU占用率飆升。

不僅如此，在去除 td 的 overflow:hidden 樣式后，我們發(fā)現(xiàn) Chrome 下的頁面渲染速度也有明顯的提升，這一點對接下來的Chrome性能提升也很重要！

3. FineUIPro 代碼中有強制 Chrome 重繪的瀏覽器特定代碼，這也是對 Chrome 之前版本存在滾動條不顯示的應(yīng)急策略：

在最新版的Chrome下測試，相應(yīng)的瀏覽器滾動條不顯示問題已經(jīng)得到了修正，所以可以把相關(guān)的強制重繪代碼去掉了（之前出問題的好像是Chrome v58前后的一些版本，現(xiàn)在Chrome都升級到75了）。這也進(jìn)一步提升了頁面的渲染速度。

經(jīng)過上面三方面的改進(jìn)，我們再來看下不同瀏覽器下的頁面渲染性能的對比數(shù)據(jù)。

優(yōu)化后的對比數(shù)據(jù)

和第一篇文章的測試類似，我們將表格行增加到 500 多行，列增加到 20 多列，并且行高不固定，來測試下各個瀏覽器的性能。

測試使用的電腦是 MacBook Pro 筆記本（英特爾 i7-8750H，32GB內(nèi)存，512GB SSD），單獨拆分出一個新的 256GB 分區(qū)用來安裝 Windows 10 Pro（64位）系統(tǒng)，并更新至最新補丁。

參與測試的瀏覽器都是最新版，分別為：

Chrome 75
Firefox 68?
Edge 44

由于 IE11 有明顯的卡頓，進(jìn)行本測試意義不大，所以這次不再對 IE11 進(jìn)行測試。

下面是測試結(jié)果（第一張是 FineUIPro v5.5.0 的截圖，第二張是代碼優(yōu)化后的截圖）：

Firefox：

Chrome：

Edge：

下面對上述結(jié)果進(jìn)行一個綜述：

瀏覽器	原始的渲染時間（秒）	優(yōu)化后的渲染時間（秒）
Firefox	0.75	0.70
Chrome	1.85	1.08
Edge	5.53	2.47

?

注：

1. 每次頁面刷新結(jié)果都有一定的差異，這個取的是多次運行的中間值。

2. 優(yōu)化后的結(jié)果需要等FineUIPro v5.6.0 發(fā)布后自行到官網(wǎng)示例測試，目前沒有在線測試鏈接。

可以看到，經(jīng)過代碼優(yōu)化后，Chrome的性能有明顯的提升，但即使如此，Firefox還是比Chrome有性能優(yōu)勢，只不過不再那么辣眼睛了。

發(fā)現(xiàn)新問題

看似一個問題的結(jié)束，卻是另一個問題的開始，還記得上一篇文章中我們提到 Chrome 下選中卡頓的問題嗎？

即使在上述數(shù)據(jù)優(yōu)化之后，Chrome的渲染性能有明顯提升的情況下（從1.85s提升到1.08s之后），Chrome下的行選中依然有明顯的卡頓現(xiàn)象，對比下幾個瀏覽器下的動圖：

Chrome：

Firefox：

Edge：

Chrome你這是要鬧哪樣？即使頁面渲染慢得多的Edge都沒有卡頓，選中行時非常絲滑，而Chrome就像被卡著脖子一樣，每次點擊都有差不多0.5秒的延遲！

真不省心，真不省心.....

解決問題

這個問題的解決可以說是費盡周折，因為已經(jīng)明確知道是Chrome瀏覽器的BUG，而Firefox和Edge都正常，所以根本不能按照常規(guī)思路去解釋。

后來，一個偶爾的機會，發(fā)現(xiàn)去掉第一列（包含復(fù)選框的那一列），問題神奇般的消失了，所以我一度懷疑是復(fù)選框的樣式問題，來看一下。
復(fù)選框的HTML結(jié)構(gòu)很簡單：

CSS代碼：

.f-checkbox {position: relative;top: 0;left: 0;display: inline-block;width: 14px;height: 14px;min-width: 14px;margin: 3px 1px;border-width: 1px;border-style: solid;border-radius: 2px; } .f-checkbox:after {display: table;position: absolute;left: 4px;top: 1px;width: 5px;height: 8px;border-width: 2px;border-style: solid;border-color: #fff;border-top: 0;border-left: 0;content: " ";-webkit-transform: rotate(45deg) scale(0);transform: rotate(45deg) scale(0);opacity: 0;filter: alpha(opacity=0); } .f-checkbox.f-checked {background-color: #007465;border-color: #007465; } .f-checkbox.f-checked:after {width: 5px;height: 8px;left: 4px;top: 1px;-webkit-transform: rotate(45deg) scale(1);transform: rotate(45deg) scale(1);opacity: 1;filter: alpha(opacity=100); }

這段CSS代碼我看了很久很久，實在找不到可以優(yōu)化的地方，因為這個做法也是業(yè)內(nèi)所公認(rèn)的，通過將 f-checkbox:after 的 L 型邊框旋轉(zhuǎn) 45 度來實現(xiàn)對勾的效果。

接下來，神奇的事情發(fā)生了，一個偶然的機會，我會外層的 .f-grid-cell-inner 的 position: relative 去掉，所有的卡頓不見了，一切都像Firefox一樣絲滑：

現(xiàn)在來看下去掉這個 CSS 屬性之后，行選中的效果，絲滑的就像Firefox一樣：

問題解決了，是不是很高興？

可惜一點都高興不起來，首先不知道這個 td -> div 的 position:relative 挨著誰的事了，這么不受 Chrome 的待見。

其次這個屬性雖然FineUIPro沒有大用處，還是有一點用處的，比如這里：

所以遇到這種情況，就先加個例外好了。

不管怎么說，也算是暫時畫上一個句號，看Chrome哪個版本能修正類似的問題？

不忘初心，砥礪前行！

轉(zhuǎn)載于:https://www.cnblogs.com/sanshi/p/11247741.html

總結(jié)

以上是生活随笔為你收集整理的【原创】原来你竟然是这样的Chrome？！Firefox笑而不语的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。