What we have optimized goal is: as soon as the interface is displayed, whether the data is correct return to update the query can wait.
Foreword
The first part describes the direction of code optimization:
Remove the time-consuming jquery
Optimization personal code
Remove the time-consuming jquery
Jquery codes used in place of, the main selector function using jquery, Extend function, add function node.
Equivalent native operating jquery dom
Removed part jquery, although fast around 200ms, but the eggs and then, for a start screen blank or ugly.
The best effect is to optimize the timing of the back to the front of the red box red box. The following is the mode of operation, to asetTimeout
Optimization personal code
Examples of the last chapter we re-test next:
!function() {
var date = new Date();
var curDate = null;
do {
curDate = new Date();
} while (curDate - date < 2000);
setTimeout(function() {
var el = document.getElementById("page");
el.innerHTML = "This is a second page";
console.log(2);
}, 2000)
}()
When index.jslogic is above such a time, sometimes until the interface 2swill be rendered after the execution is complete, sometimes not. why? Because if Caton, then
may be the first implementation of the above Caton 2soperations. Here the first rendering interface or execute js, uncertain, but the timing analysis Timeline is fixed, the 2s
running time into account, the figure:
However, if we put the above index.jscontent into the following form:
!function() {
setTimeout(function() {
var date = new Date();
var curDate = null;
do {
curDate = new Date();
} while (curDate - date < 2000);
console.log(curDate - date);
}, 100);
setTimeout(function() {
var el = document.getElementById("page");
el.innerHTML = "This is a second page";
console.log(2);
}, 2000)
}()
The timing analysis results as shown below:
Can be seen in the phone, the timing is not the same show, the first interface out!
to sum up
Under this idea, we need to rewrite our htmlpage, modify the code as follows:
<!doctype html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="format-detection" content="telephone=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="white" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../tlibs/style.css">
</head>
<body style="overflow: hidden;margin:0;">
<div id="app"><h1 style="color: red;">Hello World</h1></div>
<div id="mask"></div>
</body>
<script type="text/javascript">
setTimeout(function() {
var urls = [
"../../libs/highcharts.js",
"../../tlibs/connect.js",
"../../tlibs/__tdx_vendor.js",
"../../tlibs/__tdx_client.js",
"./index_config.js"
];
for(var i = 0; i < urls.length; i++) {
var el = document.createElement("script");
el.setAttribute("src", urls[i]);
// el.setAttribute("defer", "defer");
document.body.appendChild(el);
}
setTimeout(function() {
var el = document.createElement("script");
el.setAttribute("src", "./index_func.js");
document.body.appendChild(el);
}, 300)
}, 10)
</script>
</html>
The first step, we confirm that htmlthe page is loaded, the interface will be displayed.
The second step, we need to be static pages, as is Mr. static pages.
Here it comes to Reactserver-side rendering, generating static files, the original here is to SEOoptimize the mentioned time.
import { renderToString } from "react-dom/server"