【原創】這一次，Chrome表現和IE11同樣使人失望，圍觀羣衆有：Edge，Firefox

前言

俗話說，常在河邊走哪能不溼鞋，每天和瀏覽器打交道，發現瀏覽器居然也隱藏BUG也不是新鮮事了。能夠看下我以前的文章：

【原創】分享IE7一個神奇的BUG（不是封閉標籤的問題，的確是IE7的BUG）

【原創】Chrome53 最新版驚現無厘頭卡死 BUG！

【原創】Chrome最新版（53-55）再次爆出BUG！

【原創】三招搞死你的IE11，可重現代碼下載（IE Crash keyframes iframe）！

【原創】抓個Firefox的小辮子，圍觀羣衆有：Chrome、Edge、IE8-11

【續】抓個Firefox的小辮子，jQuery表示不背這黑鍋，Chrome,Edge,IE8-11繼續圍觀中

這類BUG之因此被你們所深惡痛絕，在於其隱蔽性，不少時候不能用常規的邏輯去分析。另外一個緣由是開發人員通常都很善良，出現問題老是從自身找緣由，不多會懷疑到IDE，瀏覽器這些開發工具上面來。

事實狀況是，瀏覽器也是開發人員開發的，是個軟件就有BUG！

 

今天公開的這個Chrome BUG一直長期存在，而且行爲表現的和IE11下的如出一轍，而Edge和Firefox沒有這個問題，下面就聽我詳細道來......

 

原由

最初這個問題是咱們的一個客戶發現的，爲了測試性能，客戶修改了官網示例的代碼：

https://pro.fineui.com/#/gridpaging/gridpaging_pageitems_pagesize_database.aspx

增長到每頁 100 行數據，就有以下的聊天截圖：

總結下來，這個問題有以下特色：

1. 滾動時卡頓，CPU佔用率飆升至 27%，滾動結束後CPU佔用率降低

2. IE11下滾動中有白屏

 

爲了重現這個效果，咱們加大了測試力度，把列增長到100列，行調整爲190行，在Chrome下的效果以下：

 

在滾動過程當中，能夠明顯看到白屏！！

 

分析問題

因爲這個白屏發生在滾動的過程當中，因此首先懷疑 FineUIPro 註冊的滾動事件，以下所示：

me._fjs_gridBodyctEl.on('scroll', function (event) {
    return;
    
        ......
}

scroll事件處理函數中直接返回，測試發現白屏依舊！

 

既然不是JavaScript代碼致使的，那就多是CSS代碼，由於 FineUIPro 中用到了 CSS3 動畫，而白屏多是動畫過程，這是極有可能的：

/*
.f-animation .f-calendar-header .f-calendar-nav,
.f-animation .f-tool,
.f-animation .f-btn,
.f-animation .f-tab-header .f-tool.f-tool-close .f-tool-icon,
.f-animation .f-checkbox,
.f-animation .f-radiobutton {
    -webkit-transition: background-color .3s, border-color .3s, color .3s;
    transition: background-color .3s, border-color .3s, color .3s;
}

....

*/

經測試白屏依舊！！

 

既然不是JavaScript的影響，也不是CSS3 動畫的影響，莫非是某些CSS規則致使的？

爲了便於分析問題，咱們將頁面生成的HTML拷貝到一個獨立的文件中，在頁面中只引用 FineUIPro 的CSS文件，通過一點一點的對CSS進行刪除測試，最終發現了以下代碼會對頁面滾動產生影響：

因爲表格有近200行100列，因此這個測試文件有 3M 左右，文末會提供下載，你也能夠自行測試。

 

簡單來講，就是以下兩個CSS規則：

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

其中，f-grid-cell 是表格的 td 元素，而 f-grid-cell-inner 是表格 td 裏面的 div 元素，以下所示：

<td class="f-grid-cell">
    <div class="f-grid-cell-inner">楊婷婷</div>
</td>

在Chrome中測試效果以下：

 

這裏觀察到兩個顯現：

1. 滾動中有明顯的白屏

2. Chrome的CPU佔用率由最初的 0%，隨着滾動的進行一路飆升到 19%

 

如今修改頁面上的CSS規則以下：

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

也便是註釋掉表格td元素的 overflow 樣式規則，刷新頁面，再次測試：

僅僅是註釋掉 td 的 overflow:hidden 屬性，此次的現象大相徑庭：

1. 滾動過程當中已沒有白屏現象

2. Chrome的CPU佔用率在滾動過程當中最高不超過 5%

 

說明Chrome在解析以下兩個屬性時出現了問題，至少目前發現的這個問題是因爲這兩個屬性衝突致使的：

1. TD 上的 overflow 屬性

2. TD 內部 DIV 上的 position:relative

 

瀏覽器對比

爲了肯定是否其餘瀏覽器也有相似問題，咱們分別對 Edge，IE11，Firefox進行測試，這些瀏覽器都是目前最新版，版本以下：

1. Chrome：75.0.3770.100（正式版本） （64 位）

2. Firefox：68.0.1 (32 位)

3. Edge：44.18362.1.0

4. IE11：11.239.18362.0

測試代碼是以下兩個CSS屬性同時存在的狀況：

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

 

Chrome：前面已經測試過了。

Edge：

 

 

IE11：

 

Firefox：

 

 

下面對比下各個瀏覽器的表現：

• Chrome：滾動時出現白屏，CPU 在滾動過程當中會飆升到 19%
• Edge：滾動時不會出現白屏，CPU 在滾動過程當中會升到到 9%
• IE11：滾動時出現白屏，CPU 在滾動過程當中會飆升到 17%
• Firefox：滾動時不會出現白屏，CPU 在滾動過程當中會升到到 5%

 

而把CSS樣式改成：

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

則在滾動時，四個瀏覽器都不會出現白屏現象，CPU佔用率也會提高，但已經沒有那麼明顯，看下Chrome下的表現：

 

IE11下的表現：

 

這裏的效果和以前的有天壤之別，簡單概述下，在Chrome下：

• 添加 TD 的 overflow 屬性：滾動時有白屏現象，CPU佔用率會飆升到 19%
• 去掉 TD 的 overflow 屬性：滾動時沒有白屏，CPU佔用率小於3%

在IE11下：

• 添加 TD 的 overflow 屬性：滾動時有白屏現象，CPU佔用率會飆升到 19%
• 去掉 TD 的 overflow 屬性：滾動時沒有白屏，CPU佔用率會升到10%

 

解決辦法

目前的解決辦法也很簡單，去掉 TD 的 overflow 屬性，這個設置應該屬於歷史遺留代碼，暫時也沒有什麼用處。

 

最後，再來對比下修改先後，在Chrome 下 FineUIPro 測試頁面的運行效果：

修改前：

 

修改後：

 

性能提高明顯！

 

注意：不是說td有 overflow:hidden 屬性就會出現這個滾動問題，而是要同時知足以下幾個條件：

1. 頁面結構以下：

<td class="f-grid-cell">
    <div class="f-grid-cell-inner">楊婷婷</div>
</td>

2. 頁面樣式包含：

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

3. 表格包含大量的元素，本示例包含200行100列。

 

你也能夠自行測試：

測試頁面下載

 

不忘初心，砥礪前行！

 

 

本系列：

=======================

【原創】用事實說話，Firefox 的性能是 Chrome 的 2 倍，Edge 的 4 倍，IE11 的 6 倍！

【原創】這一次，Chrome表現和IE11同樣使人失望，圍觀羣衆有：Edge，Firefox

【原創】原來你居然是這樣的Chrome？！Firefox笑而不語