Web front-end design pattern--Dom reconstruction to improve display performance

1. Design scene

There is a product browsing section on the homepage that displays all my hidden frame items during lazy loading (as shown in the picture, My original intention was to display two rows of images, but the loading got stuck and some hidden elements below were displayed). The overall picture was rough and messy, and the time delay for the entire webpage to fully load and run smoothly was more than 5 seconds. In this kind of interaction, The extremely sexual online printing website is very fatal, which gives users an extremely bad web experience, and is attributed to the instability of the website...

At this time, we cannot blame the company's bad server, and the network speed Cards and the like, that will probably result in the boss beating me up or even deducting my bonus...
So we can only improve the website performance...

2. Design Goal
Reduce unnecessary elements when loading the page and build a lightweight Web page...

3. Solution
When I accepted When it comes to this case, the initial design plan is undoubtedly the hidden frame method. This is the best and easiest to use. Its method is to correspond to the four label tabs (picture album, handbag, wall calendar, packaging) All four Divs are loaded into the page, and the Div of the first tab (picture album) is displayed when loading. When the mouse wheel slides over the tab, the Div of the corresponding tab label is displayed, and the Div of other tab labels is hidden...
That’s why the above situation occurred. I remembered a book on Web design patterns I read the night before. The above passage caught my attention: using page element updates to reconstruct the Dom tree is often better than hiding frames. The performance is much higher... So my idea at this time is to reconstruct the Dom tree...

The source code of the Web page is very simple. The important thing is the Div with id="tabcontent", which is The key is that the transformation of the elements inside it depends on the four

tags above. When the mouse passes over, different content is updated into the Div. This eliminates the need for the page to load all the elements at the beginning and proceed. Take the trouble to hide and show, the implementation code is as follows. . .
In this way, there are four IDs tabcontent1, tabcontent2, tabcontent3, tabcontent4, which are continuously rotated into the Div with id="tabcontent". Try it, and the performance is indeed much higher...

Copy code The code is as follows:

< /div>

Copy code The code is as follows:

/hide tag
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 ="< ;/div>";
str ="

";
str ="

< /div>

";
$("#tabcontent").html(str);
}

이걸로 끝이어야 하는데 갑자기 질문이 생각났습니다. 이 접근 방식은 실제로 jQuery의 호버 아이디어와 동일하며, 여기에는 마우스가 레이블을 이동할 때마다 Dom 요소 업데이트에 대한 폴링이 포함됩니다. 전송 및 수신할 데이터가 있어야 하며 위의 작은 데이터에는 영향을 미치지 않습니다. 그러나 Dom 요소 업데이트가 10kb 또는 심지어 수십kb. 이는 의심할 여지 없이 웹 페이지의 성능에 큰 도전을 가져옵니다...

그래서 저는 또 다른 작은 변화를 주었습니다. 즉, Dom을 사용하여 숨겨진 프레임 사용법을 재구성한 것입니다. 페이지에서 처음 로드 시 첫 번째 태그에 해당하는 Div, 즉 앨범에 해당하는 Div가 먼저 로드됩니다. 다른 탭 태그로 마우스를 이동하면 해당 태그에 해당하는 요소가 추가됩니다. 요소가 존재하는 경우 숨겨진 요소 제거) 그리고 존재하지 않는 경우 추가)를 표시하고 다른 탭 태그에 해당하는 Div 태그를 숨깁니다... 이 방법에는 "다단계 다운로드..."라는 이름이 있으므로 매번 요소를 업데이트할 필요가 없다는 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. 다음:

//태그 숨기기
함수 탭(i)
{
for(var j=1;j<5;j )
{
$("#tabcontent" j).hide();
}
$("#tabcontent" i).show()
var num,ids,ordnum; ("#tabcontent" i).length;//이 문장은 매우 중요합니다. 요소를 반복적으로 로드한다는 판단을 없애줍니다. (요소가 있으면 다시 추가할 필요가 없습니다.)
if(len== 0)
{
스위치(i)
{
케이스 1 :{ 추가(1,1,"f") break;}
케이스 2:{ 추가(2,5) ,"s"); 중단;}
사례 3:{ 추가(3,9, "t"); 중단;}
사례 4:{ 추가(4,13,"fo"); }
}
}
}

//load 데이터 입력
function Append(i,j,type)
{
var str="

";
str ="

"
str ="

";
str ="

";
str ="";
str ="

";
str = "

"
str ="

"; >$("#tabcontent").append(str);
}

4. 디자인 요약
웹사이트 성능이 개선되었습니다. 첫 번째 로드 시 페이지 요소의 과부하나 Dom 트리로 인한 지연이 발생하지 않습니다. 지속적인 업데이트로 인해 페이지 표시 성능이 저하됩니다...
그림과 같이:

Web front-end design pattern--Dom reconstruction to improve display performance_jquery

Web front-end design pattern--Dom reconstruction to improve display performance_jquery

소스코드 다운로드
/201010/yuanma/DomForm.rar

Related labels：

Dom重构

source：php.cn

Previous article：A simple JavaScript data caching system implementation code_javascript skills Next article：Javascript type conversion method_javascript skills

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn