jsf tree組件

這篇博客文章起源于一個大型Web應用程序中的性能問題。 每個人都優化Java代碼，但似乎沒有人嘗試優化JavaScript代碼。 奇怪，因為在客戶端有很多改進的空間。 我會說，甚至比服務器端還要多。 我們將分析可編輯的JSF標準組件（有時稱為“舊版”）和具有豐富JavaScript小部件的現代PrimeFaces組件的性能。 這是中立的分析，不能怪任何圖書館或任何人。 只有事實。

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

整個測試項目可在GitHub上找到 。 簡單克隆或下載它，然后使用內置的Maven Jetty插件運行。 頁面加載速度是通過新的Navigation Timing JavaScript API進行測量的，以準確地測量網絡性能。 該API提供了一種獲取準確而詳細的時序統計信息的簡單方法。 比使用JS Date對象更精確。 導航定時JavaScript API在Internet Explorer 9和更高版本以及最新版本的Google Chrome和Firefox中可用。 在GitHub上顯示了用于測量從當前響應到達到觸發窗口onload事件為止的時間的代碼。

JavaScript是單線程的，因此讓我們看看順序腳本塊的執行如何減慢顯示網頁的速度。 如果我們只測試
h：inputText和p：inputText，差別很小。 頁面加載時間幾乎相同。 在Windows 7和Firefox 20.0.1上運行，我只能看到帶有p：inputText的表需要ca。 比使用h：inputText的表多200-300 ms。 這是一個很好的結果，這意味著一個p：inputText的JS腳本執行時間不到1毫秒。 真的很好 恭喜PrimeFaces。 使用輸入和選擇進行的混合測試顯示，帶有PrimeFaces組件的頁面大約需要1.5 sek。 不只是包含標準組件的頁面。 添加更多PrimeFaces選擇組件會降低頁面渲染時間。 極端的情況是只有p：selectOneMenu組件。 這是性能殺手，也是我們的Web應用程序太慢的原因。 Internet Explorer顯示眾所周知的錯誤消息“此頁面上的腳本導致Internet Explorer運行緩慢”。 看一下頁面加載時間本身。

h：selectOneMenu

p：selectOneMenu

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

h：selectOneMenu

p：selectOneMenu

結論

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

在大型可編輯表中使用標準JSF選擇組件。 但是主題是什么？ 沒問題。 所有現代瀏覽器（包括IE8或更高版本）都允許設置本機HTML選擇元素的樣式。 您可以調整邊框，背景的顏色，并根據所應用的主題讓選擇看起來或多或少時尚。 當然前提是前提是，您不需要高級功能，例如選定組件中的自定義內容（過濾器功能或其他功能）。

PrimeFaces中的單元格編輯功能可呈現本機選擇元素，并且速度很快。

PrimeFaces中的行編輯功能可呈現本機選擇元素，而且看起來也很快。

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

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

參考： JSF：我們的JCG合作伙伴 Oleg Varaksin在“ 軟件開發思想”上的 遺留組件和時尚性能殺手之間進行選擇 。

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

jsf tree組件

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。