• 1. Reduce Http requests:

    • Sorting out the logic, avoid single page multiple interface calls, single page calls more than 5, consider optimization;
    • Multi-page public data, also avoid repeated requests (add judgment when there is this data will not send interface request, if there is no, the normal request), use data cache;

  • 2. Interface abnormality prediction and necessary hints:

    The interface returns data. If the code value is 0, the interface connection is normal and data exists; 2, the login is abnormal; 3, the parameter is incorrect; 4, the back-end service reports an error; 5, the data cannot be obtained. Therefore, only when the code value is 0, it is normal. In other abnormal cases, abnormal information should be returned, and the page should not be blocked by abnormal conditions (special data fields should be added when abnormal conditions occur). To unify the interface call format, the exception handling format is as follows:

VueX:

state: {
    test: {
        ary: []}},actions: {
    [Types.GET](ctx,params){
	Vue.http.get().then(data= > {
            ctx.commit(Types.SET,data);
	}).catch(err= >{
            Vue.prototype.$message({
                message: err.msg,
    		type: 'warning'}); }); }},mutations: {
    [Types.SET](state,payload){
        if(payload.code == 0){
            test = payload.data;
        }else {
            state.test = {
                ary:[]
            }
            Vue.prototype.$message({
                message: payload.msg,
                type: 'warning'}); }}}Copy the code

  • 3. Data cache:

    1. Vuex is used for data caching. The premise is to divide modules into data. If the data also exists on other pages, it is necessary to add judgment to determine whether the data has been requested.

    2. Use browser storage to prevent data loss after refreshing;

  • 4. Avoid redraw reflow:

  1. When part (or all) of the Render Tree needs to be rebuilt due to changes in element size, layout, hiding, etc. This is called reflow. Each page needs to be refluxed at least once, the first time the page loads. On backflow, the browser invalidates the affected portion of the render tree and reconstructs that portion of the render tree. When backflow is complete, the browser redraws the affected portion of the render tree onto the screen, a process called redraw.

  2. When some elements in the Render Tree need to update their attributes, these attributes only affect the appearance and style of the elements, not the layout, such as background-color. It’s called redrawing.

    Note: backflow will always cause repainting, and repainting will not necessarily cause backflow.

When backflow occurs: Backflow is needed when the page layout and geometry properties change. Browser backflow occurs when:

Add or remove visible DOM elements. 2. Element position changes; 3. Element size changes -- margins, padding, borders, width and height 4. Content changes -- such as changes in text or image size resulting in changes in the width and height of calculated values; 5. Page rendering initialization; 6, the browser window size changes -- when the resize event occurs;Copy the code

The general rule

The simpler the stylesheet, the faster it can be rearranged and redrawn; The higher the level of DOM elements rearranged and redrawn, the higher the cost; Table elements cost more to rearrange and redraw than div elements.

An optimization method

Changing styles via class to avoid line-by-line changes; The operation on display: None does not cause reordering and redrawing, so elements that require multiple operations can change their display properties and display them after the operation is complete, requiring only two reordering and redrawing. Additionally, the visibility: hidden element operation only redraws; Rearrangement of elements out of the document flow is less expensive (e.g., position is absolute or fixed, float elements) because it has no effect on the elements in the document flow.