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

三生石上(FineUI控制元件)發表於2019-07-24
FirefoxChromeIE11

前言

每個瀏覽器新版本釋出，都號稱效能有顯著提升，並且市面有各種測試工具，測試結果也是大相徑庭，比如下面這篇文章：

https://www.oschina.net/news/97924/browser-benchmark-battle

測試結果就很有意思，請看下如下兩幅截圖：

一言以蔽之：Google 的測試引擎 Chrome 勝，Mozilla 的測試引擎 Firefox 勝！

 

這樣的測試結果不免讓人大跌眼鏡，這裡面的水分也不少阿，至少對自家的瀏覽器有優化來著。

 

公平的比賽

最近在優化 FineUIPro 的表格效能，一般來說表格行數在 100 條之內都不會有問題。但為了效能調校，我們將表格行增加到 500 多行，列增加到 20 多列，並且行高不固定，來測試下各個瀏覽器的效能。

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

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

  • Chrome 75
  • Firefox 68 
  • Edge 44
  • IE11

測試頁面程式碼如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script>
        var __STARTTIME = new Date();
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <f:PageManager ID="PageManager1" AutoSizePanelID="Grid1" runat="server" />
        <f:Grid ID="Grid1" IsFluid="true" CssClass="blockpanel" Margin="20px" ShowBorder="true" ShowHeader="true" Title="表格（23列，500行，行高不同）" 
            EnableCollapse="false" runat="server" DataKeyNames="Id" EnableCheckBoxSelect="true" KeepCurrentSelection="true">
            <Columns>
                <f:RowNumberField />
                <f:BoundField Width="80px" DataField="ID" HeaderText="標識" />
                <f:BoundField Width="100px" DataField="Name" HeaderText="姓名" />
                ......
            </Columns>
            <Listeners>
                <f:Listener Event="render" Handler="onGridRender" />
            </Listeners>
        </f:Grid>
    </form>
    <script>
        function onGridRender() {
            
            F.ui.Grid1.setTitle('表格（23列，500行，行高不同） - 渲染：' + 
                ((new Date() - __STARTTIME) / 1000).toFixed(2));
            
        }
    </script>
</body>
</html>

這裡面有兩個關鍵點：

1. 在 <head> 標籤中記錄一個開始時間。

2. 在表格的渲染完成事件（render）中記錄一個結束時間，並渲染耗時更新到表格標題欄。

 

下面是測試結果：

Firefox：

 

Chrome：

 

Edge：

 

IE11：

 

本來在我心目中 Chrome 應該是最快的，實際開發中也一直在用 Chrome ，但是結果卻很意外。下面對上述結果進行一個綜述：

 
瀏覽器 表格渲染需要的時間（秒）
Firefox 1.2
Chrome 2.7
Edge 5.1
IE11 9.6

 

 

 

 

 

 

 

 

這也就來到了本文標題的結論，在我這個特定頁面的測試中：

Firefox的效能是Chrome的2倍，Edge的4倍，IE11的6倍！

 

你也可以自己試一試，看看是不是Firefox要比Chrome快，線上測試地址：

https://pro.fineui.com/#/grid/_grid_many_columns.aspx

 

後記

每次關於瀏覽器的對比都會引來不同的聲音，沒關係，所謂蘿蔔青菜各有所愛，效能並不是瀏覽器的全部，並且這裡的效能測試也只是具體到一個特定頁面的載入速度，可能和你的實際瀏覽體驗大相徑庭。

不過就本測試案例而已，Firefox的效能確實優於Chrome很多，就在結束本文的時候，我還發現另外一個有趣的現象，那就是選中行的延遲：

1. 在Chrome選中一行時，可以感覺到明顯的卡頓

2. 在Firefox選中一行時，非常絲滑，幾乎沒有卡頓

Chrome：

 

Firefox：

 

這又該作為解釋，因為是相同的程式碼相同的邏輯，不至於 Chrome 比 Firefox 差那麼多吧，這也算是一個開放的問題，等後期我有了進一步的發現，再回來。

 

至於上面 FineUIPro 測試頁面的效能，我還在進一步調優，你也可以過段時間回來看看，我會進一步分享調優的過程和結果。

 

不忘初心，砥礪前行！

 

相關文章