?2016-2026 Matools All rights reserved,
粵ICP備17059708號
書接上文
上一篇文章《【原創(chuàng)】用事實說話，F(xiàn)irefox 的性能是 Chrome 的 2 倍，Edge 的 4 倍，IE11 的 6 倍！
<https://www.cnblogs.com/sanshi/p/11237226.html>
》，我們對比了不同瀏覽器下FineUIPro一個頁面的性能，發(fā)現(xiàn)Firefox的加載速度最快，而眾望所歸的Chrome卻表現(xiàn)的差強人意，加載速度僅僅是Firefox的一半！
最近我們重新對測試和代碼進行了優(yōu)化和整理，有如下三個發(fā)現(xiàn)：
1. 測試代碼將開始時間放在<head>標簽的做法有失偏頗，如下所示：
<!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，F(xiàn)irefox
<https://www.cnblogs.com/sanshi/p/11233442.html>》，我們發(fā)現(xiàn)Chrome解析如下結(jié)構(gòu)時遇到問題：
2.1 頁面結(jié)構(gòu)如下：
<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 設(shè)置會導(dǎo)致滾動時頁面出現(xiàn)白屏，并且CPU占用率飆升。
不僅如此，在去除 td 的 overflow:hidden 樣式后，我們發(fā)現(xiàn) Chrome
下的頁面渲染速度也有明顯的提升，這一點對接下來的Chrome性能提升也很重要！
?
3. FineUIPro 代碼中有強制 Chrome 重繪的瀏覽器特定代碼，這也是對 Chrome 之前版本存在滾動條不顯示的應(yīng)急策略：
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下測試，相應(yīng)的瀏覽器滾動條不顯示問題已經(jīng)得到了修正，所以可以把相關(guān)的強制重繪代碼去掉了（之前出問題的好像是Chrome
v58前后的一些版本，現(xiàn)在Chrome都升級到75了）。這也進一步提升了頁面的渲染速度。
?
經(jīng)過上面三方面的改進，我們再來看下不同瀏覽器下的頁面渲染性能的對比數(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 有明顯的卡頓，進行本測試意義不大，所以這次不再對 IE11 進行測試。
?
下面是測試結(jié)果（第一張是 FineUIPro v5.5.0 的截圖，第二張是代碼優(yōu)化后的截圖）：
Firefox：
?
?
Chrome：
?
Edge：
?
下面對上述結(jié)果進行一個綜述：
瀏覽器 原始的渲染時間（秒） 優(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的性能有明顯的提升，但即使如此，F(xiàn)irefox還是比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)很簡單：
<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); }
這段CSS代碼我看了很久很久，實在找不到可以優(yōu)化的地方，因為這個做法也是業(yè)內(nèi)所公認的，通過將 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哪個版本能修正類似的問題？
?
?
不忘初心，砥礪前行！
?
?
?
?
熱門工具 換一換