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

時間 2019-11-05

標籤原創原來居然這樣 chrome firefox 不語欄目 Chrome 简体版

原文原文鏈接

書接上文

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

最近咱們從新對測試和代碼進行了優化和整理，有以下三個發現：html

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

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

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

所以，優化後的代碼將開始時間放到頁面底部，以下所示：瀏覽器

</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 頁面結構以下：app

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

2.2 頁面樣式包含：性能

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

這樣的 CSS 設置會致使滾動時頁面出現白屏，而且CPU佔用率飆升。測試

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

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

function forceChromeRepaint(targetNode) {
    //:: Chrome的BUG（Firefox，IE都沒有此問題）
    //:: http://stackoverflow.com/questions/4394350/chrome-scrollbars-not-disappearing-when-content-is-smaller-than-container?rq=1
    if(F._fjs_isChrome) {
        var overflow = targetNode.css('overflow');
        if(overflow === 'auto' && targetNode._fjs_scrollLeft() == 0 && targetNode._fjs_scrollTop() == 0) {
            targetNode.css('overflow', 'hidden');
            //:: 強制瀏覽器從新繪製
            targetNode[0].scrollWidth;
            targetNode.css('overflow', 'auto');
        }
    }
}

在最新版的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結構很簡單：

<i class="f-icon f-iconfont f-grid-checkbox f-checkbox"></i>

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);
}