JSF 性能改进 [英] JSF Performance improvement

问题描述

我正在使用 JSF 2.2 + Primefaces 开发 WebApp... 项目增长很快，第一次性能测试非常糟糕(由于我对 JSF 生命周期以及非功能性需求的了解不足 - 即完全 ajax网站)，那么我们可以改进一点，但结果仍然不如预期.(根据动作，我们有 300~1500 毫秒的时间，想法是在 500 毫秒左右的表现，给予或接受).主要是Restore View 阶段和Render Response 是时间消费者(在其他阶段，花费的时间毫无价值).对于某些操作，调用应用程序也需要时间(由于数据库调用).

I'm working on a WebApp using JSF 2.2 + Primefaces... project is growing fast, and first performance test was very poor (due to my poor knowledge on JSF lifecycle in combination to non-functional requirements - i.e. fully ajax website), then we could improve a little but results still, are not as expected. (We are having a time of 300~1500 ms depending on the action, idea is to have a performance around 500ms, give or take). Mainly the Restore View phase and the Render Response are the time consumers (on other phases, time spent is worthless). For some actions, Invoke Application also takes time (due to DB calls).

在网上阅读了大量文章后，有很多很棒的技巧需要考虑(当然很多来自 StackOverflow)，例如:

After reading lots of articles on the web, there were a lot of awesome tips to be taken into account (many of course from StackOverflow) such as:

• 改进数据库查询

我们有一些复杂的，它们是通过两个 Hibernate Criteria 查询完成的，所以我们必须在这里工作.(也许使用纯 SQL 查询，复杂的使用子查询?)

we have some complex ones which are done with two Hibernate Criteria queries so we have to work here. (maybe use pure SQL queries, and on complex ones use sub-querying?)

• 永远不要在 Bean 的 getter 上定义业务逻辑

知道了！

• 为 bean 设置适当的范围并在其中存储一些必要的东西

我们有一个完整的 ajax 站点，所以 View Scoped 对我们来说几乎和 Session Scoped 一样，我们使用 SessionBeans 作为一种缓存"来存储我们不想每次都从 DB 获取的关键数据 +在这里定义业务逻辑.

We have a full ajax site, so View Scoped are almost as Session Scoped to us, we are using the SessionBeans as a sort of 'Cache' to store key data which we don't want to get from DB every time + define businesses logic here.

• 选择正确的 JSF 状态保存方法 - 客户端 Vs 服务器

为此，我必须进行更多研究，检查其优缺点的可能性，然后测试每一个的性能.

For this, I have to research some more, check on the possibilities with their pros and cons, then test performance on each one.

到目前为止非常清楚，现在是一些我有一些疑问的额外提示.

So far very clear, now some extra tips on which I have some doubts.

• 尽可能使用原生 HTML，最好使用 h: 标签而不是 p: 标签

纯 HTML 清晰且有意义，现在在 h: 和 p: 之间它值多少钱?例如.

Plain HTML is clear and make sense, now between h: and p: how much is it worthy? For example.

<p:commandButton value="Value" 
             styleClass="class" 
             actionListener="#{myBean.doStuff()}"
             ajax="true" process="@form" update="@form" 
             onsuccess="jsFunction()" />

对比

<h:commandButton value="Value" 
             styleClass="class" 
             actionListener="#{myBean.doStuff()}" >
       <f:ajax execute="@form" render="@form" event="onclick" />
</h:commandButton>

或

<ui:fragment... vs <p:fragment...

或

<p:outputLabel value="#{myBean.value}" rendered="#{myBean.shouldRender}" />

对比

<ui:fragment rendered="#{myBean.shouldRender}">
    <label>#{myBean.value}</label>
</ui:fragment>

我一直在混合使用带有 Jsf 标签的 Primefaces 和一些纯 HTML 一段时间.(主要是 PF 由于它们的组件的特性)我现在纯 HTML 总是会更快，但在 JSF 和另一个框架?如果我这样做，更改它将需要大量时间，而且我不喜欢知道它根本不会产生相关差异的结果.

I've been using a mix of Primefaces with Jsf tags and some plain HTML here and there for a while now.(mainly PF due to their component's features) I now that plain HTML will always be faster, but between JSF and another Framework? If I go for this, changing it will take plenty of time and I wouldn't like the outcome of knowing it doesn't make a relevant difference at all.

• 自定义 Facelets 标签与复合组件

我认为这是关键.仍然对它们的差异有些怀疑，在两者的实现上，CC 使用起来非常简单和灵活，但缺点是它们完全包含在 ViewTree 中，并且 JSF 会为每个请求重新生成(如果我没记错的话)，虽然自定义标签使用起来似乎有点复杂(不是那么复杂)，但优点是只有实际呈现的内容才包含在 ViewTree 中，仅此而已，使 RESTORE VIEW 耗时更少.我们有几个复合组件，但没有 Facelets 标签，所以这里有很多工作要做.我仍然没有找到一篇很好的文章来解释它们的差异，什么时候应该使用一个，什么时候使用另一个(已经阅读了输入，消息使用标签和更复杂的东西 CC).如果我的想法是更喜欢标签 vs CC，那么在这种情况下，我除了使用 CC 之外别无选择?是否可以在 CC 中使用自定义标签使它们更易于 JSF 处理?

I think here's the key. Still have some doubts about their differences, on the implementation of both, CC are pretty simple and flexible to use but have the disadvantage that they are fully included on the ViewTree and JSF re-generates for each request (if I'm not mistaken), while custom tags seems a little bit more complex to use (not that much) but has the advantage that only what is actually rendered is included on the ViewTree and nothing more, making the RESTORE VIEW less time consuming. We have several composite components and none Facelets Tags, so here it will be much of the work to do. I still haven't found a good article explaining differences on them, when one should be used and when the other one (have read that for inputs, messages use TAGS and for more complex things CC). If the idea is to prefer tags vs CC, which would be the case on which I would have no option rather than using CC? Is it ok to use custom tags inside CC to make them lighter to JSF for processing them?

我即将进入修改hole项目的旅程，以获得更好的性能，这需要我几天的时间，这次想法是获得更好的结果；所以每一个提示，建议和建议都非常受欢迎！感谢您的时间！

I'm about to get into a journey of modifying hole project in order to get a better performance which will take me a couple of days, idea is to get better results this time; so every tip, advice and suggestion is very welcomed! Thanks for your time guys!

推荐答案

您可以采取一些措施来提高屏幕性能

There are a couple of things you can do to improve performance of your screens

1. GZIP 过滤器 将显着减少初始加载时间.它在传输到客户端浏览器的同时压缩页面内容.参考 https://stackoverflow.com/a/35567295/5076414
2. 您可以另外实现一个 cacheFilter 以提高性能您的屏幕与基于 JavaScript 的 UI 相当.这将缓存屏幕的静态内容，例如图标、图像、样式表、javascripts 等.您可以控制要缓存的内容和排除的内容.参考 https://stackoverflow.com/a/35567540/5076414
3. 对于客户端 UI 组件，您可以使用 Primefaces，即 JQuery基于用户界面.

1. GZIP filter will reduce the initial load time significantly. It compresses the page contents while transferring to client browser. Refer to https://stackoverflow.com/a/35567295/5076414
2. You can additionally implement a cacheFilter to bring performance of your screens at par with JavaScript based UI. This will cache the static content of your screen such as icons, images, stylesheets, javascripts etc. You can control what to cache and what to exclude. Refer to https://stackoverflow.com/a/35567540/5076414
3. For client side UI components, you can use Primefaces which is JQuery based UI.

如何验证我的屏幕是否使用 gzip 和缓存

要查看您的内容是否已经使用 gzip 和缓存，请在您的 Google Chrome 浏览器中 -> 右键单击​​您的屏幕 -> 检查 -> 单击网络选项卡 -> 刷新您的屏幕.点击图片、图标、样式表，看看您是否在响应标题

How to verify if my screen is using gzip and cache

To see if your contents are already usign gzip and cache, In your Google Chrome Browser -> right click on your screen -> inspect -> click network tab -> refresh your screen. Click on the images, icons, stylesheets and see if you see following in response header

Cache-Control:max-age=2592000 如果元素的状态是 304(来自缓存)

Cache-Control:max-age=2592000 if the status of element is 304 (coming from cache)

Content-Encoding:gzip 如果元素的状态是 200

Content-Encoding:gzip if the status of element is 200

这篇关于JSF 性能改进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！