Web Front-end
JS Tutorial
Web front-end design pattern--Dom reconstruction to improve display performance_jquery
Web front-end design pattern--Dom reconstruction to improve display performance_jquery
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
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...
< /div>
/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 ="
str ="
str ="
![](img/" j ".png)
"; str ="
![](img/" ( j) ".png)
"; str ="
"; str ="
"; str ="< ;/div>";
str ="";
str ="
$("#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 ="
![](img/" ( j) ".png )
소스코드 다운로드
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Replace String Characters in JavaScript
Mar 11, 2025 am 12:07 AM
Detailed explanation of JavaScript string replacement method and FAQ This article will explore two ways to replace string characters in JavaScript: internal JavaScript code and internal HTML for web pages. Replace string inside JavaScript code The most direct way is to use the replace() method: str = str.replace("find","replace"); This method replaces only the first match. To replace all matches, use a regular expression and add the global flag g: str = str.replace(/fi
8 Stunning jQuery Page Layout Plugins
Mar 06, 2025 am 12:48 AM
Leverage jQuery for Effortless Web Page Layouts: 8 Essential Plugins jQuery simplifies web page layout significantly. This article highlights eight powerful jQuery plugins that streamline the process, particularly useful for manual website creation
Build Your Own AJAX Web Applications
Mar 09, 2025 am 12:11 AM
So here you are, ready to learn all about this thing called AJAX. But, what exactly is it? The term AJAX refers to a loose grouping of technologies that are used to create dynamic, interactive web content. The term AJAX, originally coined by Jesse J
10 jQuery Fun and Games Plugins
Mar 08, 2025 am 12:42 AM
10 fun jQuery game plugins to make your website more attractive and enhance user stickiness! While Flash is still the best software for developing casual web games, jQuery can also create surprising effects, and while not comparable to pure action Flash games, in some cases you can also have unexpected fun in your browser. jQuery tic toe game The "Hello world" of game programming now has a jQuery version. Source code jQuery Crazy Word Composition Game This is a fill-in-the-blank game, and it can produce some weird results due to not knowing the context of the word. Source code jQuery mine sweeping game
How do I create and publish my own JavaScript libraries?
Mar 18, 2025 pm 03:12 PM
Article discusses creating, publishing, and maintaining JavaScript libraries, focusing on planning, development, testing, documentation, and promotion strategies.
Load Box Content Dynamically using AJAX
Mar 06, 2025 am 01:07 AM
This tutorial demonstrates creating dynamic page boxes loaded via AJAX, enabling instant refresh without full page reloads. It leverages jQuery and JavaScript. Think of it as a custom Facebook-style content box loader. Key Concepts: AJAX and jQuery
jQuery Parallax Tutorial - Animated Header Background
Mar 08, 2025 am 12:39 AM
This tutorial demonstrates how to create a captivating parallax background effect using jQuery. We'll build a header banner with layered images that create a stunning visual depth. The updated plugin works with jQuery 1.6.4 and later. Download the
How to Write a Cookie-less Session Library for JavaScript
Mar 06, 2025 am 01:18 AM
This JavaScript library leverages the window.name property to manage session data without relying on cookies. It offers a robust solution for storing and retrieving session variables across browsers. The library provides three core methods: Session
