Problem description

This is a composite page that combines old and new frameworks; The list page is on the left and the details page is on the right; The list page uses vUE; The details page uses jquery;

The first request took a long time, about seven seconds, blocking other requests;

Only the first request will return, then load other CSS, JS, IMGS, XHR;

Optimization: Split the first request

  • Separate the second request from a time-consuming back-end fetch history list data;

This request returns an HTML page that uses PHP’s display to load data into the specified HTML page template. The returned HTML page is inserted into the detail page via append;

  • Why does the second request return an HTML page instead of an array of data?

Array data, because you’re using jquery; Without the V-for instruction of Vue, you need to write a lot of NEW DOM JS, which feels very complicated. So I’ll just request a page, load it with PHP’s display, and embed it.

  • Will the second request block the rendering of the detail page?

Nested details page using iframe

The disadvantage of iframe is that switching pages requires reloading all CSS and JS

Optimization 1: Strongly cache all static resources

  • When static resource changes, how to handle?

The project was old and did not use webpack as an engineering package. The solution used in existing conditions is to manually maintain a version variable.

  • Follow-up: After using it for a while, manually maintaining a version is often forgotten, as shown below
<script type="text/javascript" src="***.js? v=
      "></script>

Copy the code

Optimization 2: Change iframe to V-HTML; First use Ajax request to get HTML application, then use V-HTML rendering.

  • The new problem is that the JS in the requested HTML is not executed.

The solution is to write the JS in a separate JS file, import the js file in an outer layer (and outside of the IFame), and then call the relevant JS. Solution is not compatible with large changes in iframe embedded page display alone, regardless of abandon.

Suppose the user frequently toggles the list on the left

Each switch loads a new detail page, and each detail page sends two Ajax requests; In Chrome, up to six TCP connections can be connected to each domain name. Frequent and fast switching causes Ajax requests to queue; You can store ajax requests in a single variable; Ajax requests can be cancelled when leaving the page (beforeunload);

varAjaxGet = $. Get (" comet_server. PHP ", {id:1},function(data){}); ajaxGet.abort();Copy the code