tabbox页签切换，反应缓慢，谢谢

Question

asked 2018-12-12 10:56:17 +0800

salmon
1 ● 1

updated 2018-12-12 10:56:51 +0800

我用tabbox做了一个多页签的应用，每次需要打开一个页面时，主viewModel，通过动态创建component的方式，动态在tabbox增加一个页签（tab、tabpanel），如果tabpanel的grid使用了多列（比如30列以上），打开非常缓慢，大概需要4、5秒的时间，打开多个类似的页签后，在切换各个tab时，响应也是非常慢，也需要4、5秒的时间，我使用chrome的performance来跟踪，得到下面的执行情况，主要是执行脚本和渲染组件消耗了很多的时间，这方面有什么更好的办法进行优化吗？谢谢！

Range: 2.93 s – 16.66 s 13729 ms

191.6 ms Loading

5165.8 ms Scripting

5981.3 ms Rendering

85.7 ms Painting

158.1 ms Other

2146.6 ms Idle

Answer 1

0

answered 2018-12-12 16:32:04 +0800

superium
29 ● 5

会不会是多列grid的渲染速度问题？ grid是否分页处理？

我的tab反应很快，不过用的是8.5的，换8.6也有部分页面（含有grid）非常缓慢，不过那个grid进行了分页处理，所以应该不是grid的问题。所以我怀疑是8.6本身的问题。不知道其他人是什么反应。

link publish delete flag offensive edit

Comments

8.6.0.1 contains several performance fixes, if you run into performance issue with 8.6.0, please upgrade to 8.6.0.1. Reference: https://www.zkoss.org/product/zk/releasenote/8.6.0.1

jeanher ( 2018-12-13 09:45:58 +0800 )edit

i've tried 8.6.0.1 this morning, but still some performance issue in this version. firefox says : " some pages slows your browser, stop or wait ?" and page is freezed after load some pages. and these pages has no problem in 8.5.0.

superium ( 2018-12-17 09:59:48 +0800 )edit

i'm working in an forum-like project, in 8.6.0, performance issue hapens when i open the thread list page(contains a grid ). in 8.6.0.1, it happens when i open the thread detail page (in the same zul page. just another grid) . i don't know how to debug it to find more details.

superium ( 2018-12-17 10:11:15 +0800 )edit

Answer 2

answered 2018-12-17 10:58:15 +0800

superium
29 ● 5

i've found something by delete some component one by one:

<vlayout
        viewModel="@id('vm') @init('myproject.viewmodels.PrListVM')"
        binder="@init(queueName='postNotice',queueScope='application')"
        apply="org.zkoss.bind.BindComposer"
        xmlns:n="http://www.zkoss.org/2005/zk/native"
        onBookmarkChange="@command('changeBookMark',bookmark=event.bookmark)">

        <!-- =============弹出详情页面 ================ -->
        <!-- 工具栏 -->
        <hlayout hflex="1" visible="@bind(vm.winvisible )"
            sclass="toolbar" renderdefer="200">
            <span sclass="gray-row">
                <label value="@load(vm.currentPr.pai_str)" hflex="min" />

                <label value="@load(vm.currentPr.cat_str)" /> //if change the value to normal string in these two label , the issuse not happen any more.
                <space hflex="1" />   //if delete this line , the issuse not happen any more.
            </span>
            <space hflex="1" />



        </hlayout>
....

我執行你上面這段頁面，並沒有發現效能問題，可否提供可重現範例？
hawk ( 2018-12-20 16:22:16 +0800 )edit

Answer 3

answered 2018-12-20 16:30:48 +0800

hawk
3250 ● 1 ● 5
http://hawkphoenix.blogsp... ZK Team

updated 2018-12-20 16:31:16 +0800

可先透過 chrome developer 中/network /Timing 檢查 waiting time

如果是點了某個 tab 很慢，除錯步驟為： 1. open developer tool 2. click a specific tab 3. select the zk au request that has "onSelect" 4. check its waiting time

如果 waiting time 較預期的長，就可能是 server 為瓶頸，如果不長，就可能 client 為瓶頸，得檢查 grid 的設定看有沒有會造成效能的原因。

image description

完整除錯步驟可參考：Step by Step Trouble Shooting

CORE FRAMEWORK

FEATURED COMPONENTS

TOOLS

EXPLORE ZK

RESOURCES

LEARN ZK

RESOURCES

GET HELP

RESOURCES

MORE ABOUT ZK

MORE ABOUT ZK

tabbox页签切换，反应缓慢，谢谢

3 Answers

Comments

Comments

Question tools

Stats

Related questions