這篇博客文章起源于一個(gè)大型Web應(yīng)用程序中的性能問題。 每個(gè)人都優(yōu)化Java代碼，但似乎沒有人嘗試優(yōu)化JavaScript代碼。 奇怪，因?yàn)樵诳蛻舳擞泻芏喔倪M(jìn)的空間。 我會(huì)說，甚至比服務(wù)器端還要多。 我們將分析可編輯的JSF標(biāo)準(zhǔn)組件（有時(shí)稱為“舊版”）以及具有豐富JavaScript小部件的現(xiàn)代PrimeFaces組件的性能。 這是中立的分析，不能怪任何圖書館或任何人。 只有事實(shí)。

好。 我們要測(cè)試什么？ 目標(biāo)是測(cè)量PrimeFaces的JS腳本塊執(zhí)行的客戶端性能（無后端邏輯）
p：inputText / p：selectOneMenu。 我們想用輸入/測(cè)試一個(gè)可編輯的p：dataTable 選擇表單元格中的組件。 該表有25行和16列，表示25 * 16 = 400個(gè)單元格。 每個(gè)單元格都包含輸入或選擇組件。 有6個(gè)測(cè)試用例。 標(biāo)準(zhǔn)的h：inputText和h：selectOneMenu沒有JS腳本塊，因此有趣的是看看JS小部件有什么影響。

整個(gè)測(cè)試項(xiàng)目可在GitHub上找到 。 簡(jiǎn)單克隆或下載它，然后使用內(nèi)置的Maven Jetty插件運(yùn)行。 使用新的Navigation Timing JavaScript API測(cè)量頁面加載速度，以準(zhǔn)確地測(cè)量Web上的性能。 該API提供了一種獲取準(zhǔn)確而詳細(xì)的時(shí)序統(tǒng)計(jì)信息的簡(jiǎn)單方法。 比使用JS Date對(duì)象更精確。 導(dǎo)航定時(shí)JavaScript API在Internet Explorer 9和更高版本（最新版本的Google Chrome和Firefox）中可用。 在GitHub上顯示了用于測(cè)量從當(dāng)前響應(yīng)到達(dá)到觸發(fā)窗口onload事件為止的時(shí)間的代碼。

JavaScript是單線程的，因此讓我們看看順序腳本塊的執(zhí)行如何會(huì)減慢顯示網(wǎng)頁的速度。 如果我們只測(cè)試
h：inputText和p：inputText，區(qū)別是微不足道的。 頁面加載時(shí)間幾乎相同。 在Windows 7和Firefox 20.0.1上運(yùn)行，我只能看到帶有p：inputText的表需要ca。 比使用h：inputText的表多200-300 ms。 這是一個(gè)很好的結(jié)果，這意味著一個(gè)p：inputText的JS腳本執(zhí)行時(shí)間不到1毫秒。 真的很好 祝賀PrimeFaces。 使用輸入和選擇進(jìn)行的混合測(cè)試顯示，帶有PrimeFaces組件的頁面大約需要1.5 sek。 不只是包含標(biāo)準(zhǔn)組件的頁面。 添加更多PrimeFaces選擇組件會(huì)降低頁面渲染時(shí)間。 極端的情況是只有p：selectOneMenu組件。 這是性能殺手，也是我們的Web應(yīng)用程序太慢的原因。 Internet Explorer顯示眾所周知的錯(cuò)誤消息“此頁面上的腳本導(dǎo)致Internet Explorer運(yùn)行緩慢”。 看一下頁面加載時(shí)間本身。

h：selectOneMenu

p：selectOneMenu

如果我們假設(shè)組件渲染器花費(fèi)大約相同的時(shí)間來渲染HTML輸出，那么我們可以計(jì)算單個(gè)p：selectOneMenu的JS腳本塊執(zhí)行時(shí)間。 這個(gè)時(shí)間是11.3毫秒。 這太多了。 原因可能是窗口小部件的構(gòu)造函數(shù)中有許多效率低下的jQuery選擇器。 我不知道，在這里也沒關(guān)系。 在裝有Ubuntu的筆記本上，我的時(shí)差很大。 10瑞典克朗。 具有400個(gè)p：selectOneMenu標(biāo)簽的瀏覽器幾乎“凍結(jié)”。

h：selectOneMenu

p：selectOneMenu

結(jié)論

有人說“ JSF很慢，JSF不是正確的技術(shù)”。 錯(cuò)誤。 JSF足夠快。 這取決于如何使用此框架。 一次編輯所有內(nèi)容都很好，但是顯然不建議使用帶有豐富JSF組件的大型可編輯DataTable。 什么是可編輯DataTable的替代方案？ 有多種方法，具體取決于個(gè)人喜好。 我將嘗試提出一些建議。

在大型可編輯表中使用標(biāo)準(zhǔn)JSF選擇組件。 但是主題是什么？ 沒問題。 所有現(xiàn)代瀏覽器（包括IE8和更高版本）都可以設(shè)置本機(jī)HTML選擇元素的樣式。 您可以調(diào)整邊框，背景的顏色，并根據(jù)應(yīng)用的主題讓選擇看起來或多或少地顯得時(shí)尚。 當(dāng)然前提是前提是，您不需要高級(jí)功能，例如選定組件中的自定義內(nèi)容（過濾器功能或其他功能）。

PrimeFaces中的單元格編輯功能可呈現(xiàn)本機(jī)選擇元素，并且速度很快。

PrimeFaces中的行編輯功能可呈現(xiàn)本機(jī)選擇元素，而且看起來也很快。

在一個(gè)視圖中使用主從方法。 您選擇一行并查看要編輯的詳細(xì)信息。 詳細(xì)信息可以顯示在表格的外部–在右側(cè)或頂部，具體取決于表格的寬度/高度。

具有不同視圖的主從方法。 您選擇一行并切換視圖。 您可以在PrimeFaces Extensions的MasterDetail組件中看到詳細(xì)信息，而不是表格。 您可以從詳細(xì)信息轉(zhuǎn)到其他級(jí)別來創(chuàng)建/編輯更多詳細(xì)信息，然后最后再次跳至概覽表。

參考： JSF： JCG合作伙伴 Oleg Varaksin在軟件開發(fā)博客上的想法中， 在傳統(tǒng)組件和時(shí)尚性能殺手之間進(jìn)行選擇 。

翻譯自: https://www.javacodegeeks.com/2013/05/jsf-choice-between-legacy-components-and-fashionable-performance-killers.html

總結(jié)

以上是生活随笔為你收集整理的JSF：在传统组件和时尚性能杀手之间进行选择的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。