當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2025/7/14 编程问答 24 豆豆

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

書接上文

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

最近我們重新對測試和代碼進行了優化和整理，有如下三個發現：

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

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

這會導致所計算的時間包含HTML頁面，CSS文件和JavaScript文件的網絡傳輸時間，實際上這部分是我們測試案例所不關心的，我們僅關心頁面的渲染速度！

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

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

2. 前面一篇文章《【原創】這一次，Chrome表現和IE11一樣令人失望，圍觀群眾有：Edge，Firefox》，我們發現Chrome解析如下結構時遇到問題：

2.1 頁面結構如下：

2.2 頁面樣式包含：

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

這樣的 CSS 設置會導致滾動時頁面出現白屏，并且CPU占用率飆升。

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

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

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

經過上面三方面的改進，我們再來看下不同瀏覽器下的頁面渲染性能的對比數據。

優化后的對比數據

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

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

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

Chrome 75
Firefox 68?
Edge 44

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

下面是測試結果（第一張是 FineUIPro v5.5.0 的截圖，第二張是代碼優化后的截圖）：

Firefox：

Chrome：

Edge：

下面對上述結果進行一個綜述：

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

?

注：

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

2. 優化后的結果需要等FineUIPro v5.6.0 發布后自行到官網示例測試，目前沒有在線測試鏈接。

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

發現新問題

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

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

Chrome：

Firefox：

Edge：

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

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

解決問題

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

后來，一個偶爾的機會，發現去掉第一列（包含復選框的那一列），問題神奇般的消失了，所以我一度懷疑是復選框的樣式問題，來看一下。
復選框的HTML結構很簡單：

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代碼我看了很久很久，實在找不到可以優化的地方，因為這個做法也是業內所公認的，通過將 f-checkbox:after 的 L 型邊框旋轉 45 度來實現對勾的效果。

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

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

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

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

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

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

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

不忘初心，砥礪前行！

轉載于:https://www.cnblogs.com/sanshi/p/11247741.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。