The Easyui framework is simple, easy to use, and rich in functions, which can meet the requirements of most management website development. But the more it develops to the back,
It always feels that page loading is getting slower and slower. Sometimes it takes several seconds or even ten seconds to open a page. This experience is very bad.
At first, I thought it was because there were too many things loaded, which caused the page to load slowly. Through the debugging tool of the IE browser (press F12 to call up in IE),
After network debugging, I found that most of the time was spent on the datagrid and combobox or combotree components. own page
In $(function(){ XXX });, components such as combobox and combotree are generated before the page loads.
The reason for the location
After debugging, I learned that components such as combobox, combotree, and datagrid take a lot of time to load. through preliminary testing
Now: If the combobox is not generated by ajax, but the option item is directly written in the page, the loading time is almost zero, it can be concluded that this
The same conclusion, easyui performs ajax in $(function(){}) to fetch combobox data from backend, which will cause slowness. Again, test again
This is also the case with combotree.
Second, the solution
Since it is developed in java, the json data of combobox \ combotree can be generated from the background when the servlet is requested for the first time.
And store it as a servlet variable, and directly initialize components such as combobox or combotree after getting it in the page. instead of using ajax requests
way to initialize related components.
3. Avoid repeating datagrid requests
Sometimes I see some datagrid requests through the log, and the request is repeated twice. This is due to a design problem with easyui: if in
The div defined in the page specifies class="easyui-datagrid", and then in the javascript code, pass
$("#userDg").datagrid to request data will request data twice. And the parameters of the two collections are somewhat different. The solution is to put
The class="easyui-datagrid" attribute of the div defined in the page can be deleted