There is a product browsing section on the home page that shows all the items of hidden frames when loading at a delay. The page deformation is caused by slow loading.
1. design scenarios
There is a product browsing section on the home page that shows all the items of my hidden frames during Delayed loading (I meant to display two rows of images, but loading got stuck, some of the following hidden elements are displayed.) The overall screen is rough and messy. the time delay for the entire webpage to fully load and run smoothly exceeds 5 seconds, this highly interactive online printing website is very fatal, which gives users an extremely bad Web experience and comes down to website instability...
At this time, we can't blame the company for the bad server, network speed card, and so on. This will probably lead the boss to beat me up and even deduct the bonus...
So we can only improve the website performance...
2. design objectives
Reduce unnecessary elements during page loading to build a lightweight Web page...
3. Solution
When I first received this Case, the original design scheme was undoubtedly a frame hiding method. This is the best and easiest way to use it. The four tab labels (album, the four divs corresponding to the handbag, calendars, and packages are loaded into the page, and the Div of the first tab (album) is displayed during loading, when you move the mouse over a tab, The Div of the corresponding tab is displayed, and the Div of other tab labels is hidden...
This is why the above situation occurs. I think of a Web design model book I read the night before. The above passage reminds me of my attention: using page element update to reconstruct the Dom tree is often much higher than hiding frames... so now my idea is to refactor the Dom tree...
The source code of the web page is very simple. What is important is the Div of id = "tabcontent", which is the key. The Element Transformation in it depends on the preceding four
Tag. When the mouse passes through, different content is updated to the Div, so that the page does not need to load all the elements at the beginning and hide and display them tirelessly, the implementation code is as follows...
In this way, four IDs are tabcontent1, tabcontent2, tabcontent3, and tabcontent4 are replaced by the Div id = "tabcontent". Try again, indeed, the performance is much higher...
The Code is as follows:
- Packing Box
- Album
- Handbag
- 3-fold page
The Code is as follows:
/Hide tags
Function tabs (I)
{
Var num, ids, ordnum;
Switch (I)
{
Case 1: {append (1, 1, "f"); break ;}
Case 2: {append (2, 5, "s"); break ;}
Case 3: {append (3,9, "t"); break ;}
Case 4: {append (4,13, "fo"); break ;}
}
}
// Update data
Function append (I, j, type)
{
Var str ="
";
Str + ="
";
Str + ="
";
Str + ="
";
Str + = "";
Str + = "";
Str + = "";
Str + = "";
Str + ="
";
Str + ="";
Str + ="";
$ ("# Tabcontent" pai.html (str );
}
It should end here, But I suddenly think of a problem. In fact, this approach is the same as the hover idea in jQuery, and here we will update the Dom element for polling, that is to say, each time the mouse moves the label, some data needs to be sent and received, which has no effect on the above small data segment, but this method is not feasible in large cases, because its Dom element update may be a data stream of dozens of kb or even dozens of kb, this will undoubtedly bring great challenges to the performance of web pages...
Therefore, I made another small change, that is, using Dom refactoring + hiding frame usage. when loading the page for the first time, the Div corresponding to the first tag is first loaded, that is, the Div corresponding to the album. When you move the cursor to another tab, append the element corresponding to the tab. (If this element exists, it is hidden and displayed. If it does not exist, append it ), hide the Div tag corresponding to other Tab labels... this method has a name called "multi-phase download... in this way, you do not need to update the elements every time. The Code is as follows...
The Code is as follows:
// Hide tags
Function tabs (I)
{
For (var j = 1; j <5; j ++)
{
$ ("# Tabcontent" + j). hide ();
}
$ ("# Tabcontent" + I). show ();
Var num, ids, ordnum;
Var len = $ ("# tabcontent" + I ). length; // This sentence is very important. It is used to prevent the judgment of repeatedly loading elements (if this element exists, it does not need to be appended again)
If (len = 0)
{
Switch (I)
{
Case 1: {append (1, 1, "f"); break ;}
Case 2: {append (2, 5, "s"); break ;}
Case 3: {append (3,9, "t"); break ;}
Case 4: {append (4,13, "fo"); break ;}
}
}
}
// Load data
Function append (I, j, type)
{
Var str ="
";
Str + ="
";
Str + ="
";
Str + ="
";
Str + = "";
Str + = "";
Str + = "";
Str + = "";
Str + ="
";
Str + ="";
Str + ="";
$ ("# Tabcontent"). append (str );
}
4. design summary
The performance of the website is improved, so there will be no latency caused by the heavy load of page elements during the first loading, or the poor page display performance caused by the constant update of the Dom tree...
Source code download/201010/yuanma/DomForm.rar
