当前位置: 开发笔记 > 前端 > 正文

Web前端设计模式--Dom重构提高显示性能

作者：空城旧梦-虎哥_919 | 来源：互联网 | 2022-10-13 18:14

首页那边有一个产品浏览的版块在延迟载入的时候，将我所有的隐藏帧的项都显示出来，因为慢导致页面变形。

1. 设计场景

首页那边有一个产品浏览的版块在延迟载入的时候，将我所有的隐藏帧的项都显示出来（如图，我本意是显示两行图片，可是在载入卡住，将下面一些隐藏元素都显示出来了），整体画面粗糙凌乱，整个网页完全载入并顺利运行的时间延迟超过5秒，在这种交互性极强的在线印刷网站是非常致命的，这给用户一种极其糟糕的Web体验，并归结为网站的不稳定...

此时不能责怪公司的服务器烂，网速卡之类的，那样很可能会导致老大对我一顿胖揍甚至扣奖金...
所以只能从网站性能方面进行改良...

2.设计目标
减少页面载入时不必要的元素，构建一个轻量级的Web页面...

3.解决方案
当初我接到这个Case的时候，最初的设计方案毫无疑问是隐藏帧做法，这是最好用也是最容易简单的，它的方法就是将四个标签tab（画册，手提袋，挂历，包装）所对应的四个Div全部载入页面，并在载入时显示第一个tab（画册）的Div，在鼠标轮滑过tab的时候显示相应tab标签的Div，隐藏其他tab标签的Div...
因此才会出现上述的情况，我想起我前一天晚上看的一本Web设计模式的书，上面的一段话引曾起我的注意：使用页面元素更新来重构Dom树往往比隐藏帧的性能要高得多...所以此时我的想法便是重构Dom树...

Web页面的源码很简单，重要的在于 id="tabcontent" 的那个Div，它是关键，它里面元素的变换取决于上面的四个

标签,当鼠标经过时就将不同的内容更新到Div里面，这使得页面不用一开始就将所有的元素都载入，并进行不厌其烦的隐藏和显示，实现代码如下。。。
这样，就有四个id分别tabcontent1,tabcontent2,tabcontent3,tabcontent4为Div不断的轮换替换进id="tabcontent"的 Div里面，尝试一下，确实性能高了很多...

代码如下:

/隐藏标签
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;}
}
}

//更新数据
function append(i,j,type)
{
var str="

";
str+="

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

到这里应该算结束，可是我突然想起一个问题，这种做法其实和jQuery中的hover思想是一样的，而这边是进行轮询的Dom元素更新，也就是说每一次鼠标移动标签都要有一些数据要发送和接收，相对与上面小段数据是没什么影响，但是大的Case中使用这种方法就不可行，因为它的Dom元素更新可能是十几kb甚至几十kb的数据流，这无疑给Web页面的性能带来极大的挑战...

因此，我又做了一个小小的改动，那就是使用Dom重构+隐藏帧用法，在页面第一次载入的时候，先载入的是第一个标签所对应的Div，即画册所对应的Div，当鼠标移到其他tab标签时候，追加该标签所对应的元素（该元素若存在则去掉隐藏并显示，不存在则追加），并隐藏其他Tab标签所对应的Div标签...该方法有个名称，叫做“多阶段下载...”，这样就不用每次都进行元素更新，代码如下...

代码如下:

//隐藏标签
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;//这句话很重要，它是杜绝将元素重复载入的判断（如果该元素存在，就不需再次追加）
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;}
}
}
}

//载入数据
function append(i,j,type)
{
var str="

";
str+="

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

4.设计小结
网站的性能提高了，既不会出现在首次载入的时候页面元素负荷过重而造成的延迟，也不会因为Dom树的不断更新而造成页面显示性能低下...

如图：

源码下载 /201010/yuanma/DomForm.rar

推荐阅读

js
JavaScript 实现图片文件转Base64编码的方法

本文详细介绍了如何使用JavaScript将用户通过文件输入控件选择的图片文件转换为Base64编码字符串，适用于Web前端开发中图片上传前的预处理。 ... [详细]

蜡笔小新 2024-11-19 12:43:15
js
JavaScript 跨域解决方案详解

本文详细介绍了JavaScript在不同域之间进行数据传输或通信的技术，包括使用JSONP、修改document.domain、利用window.name以及HTML5的postMessage方法等跨域解决方案。 ... [详细]

蜡笔小新 2024-11-22 16:27:56
js
web页面报表js下载,web报表软件

web页面报表js下载,web报表软件 ... [详细]

蜡笔小新 2024-11-16 18:37:21
js
如何高效渲染JSON数据

本文介绍了在控制器中返回JSON结果的方法，并详细说明了如何利用jQuery处理和展示这些数据，为Web开发提供了实用的技巧。 ... [详细]

蜡笔小新 2024-11-23 10:41:31
js
如何在没有提交按钮的情况下提交HTML表单？

探讨了在HTML表单中使用元素代替进行表单提交的方法。 ... [详细]

蜡笔小新 2024-11-22 17:48:42
js
H5技术实现经典游戏《贪吃蛇》

本文将分享一个使用HTML5技术实现的经典小游戏——《贪吃蛇》。通过H5技术，我们将探讨如何构建这款游戏的两种主要玩法：积分闯关和无尽模式。 ... [详细]

蜡笔小新 2024-11-21 20:16:59
js
Nginx 配置下 Chrome 和 Firefox 对静态资源缓存处理差异

在使用 Nginx 作为服务器时，发现 Chrome 能正确从缓存中读取 CSS 和 JS 文件，而 Firefox 却无法有效利用缓存，导致加载速度显著变慢。 ... [详细]

蜡笔小新 2024-11-21 19:57:43
js
SIP基础概览

本文介绍了SIP（Session Initiation Protocol，会话发起协议）的基本概念、功能、消息格式及其实现机制。SIP是一种在IP网络上用于建立、管理和终止多媒体通信会话的应用层协议。 ... [详细]

蜡笔小新 2024-11-21 17:42:08
js
Bootstrap 轮播图(Carousel)组件详解与应用

Bootstrap 的轮播图（Carousel）组件提供了一种简单而灵活的方法，用于在网站上实现响应式幻灯片效果。此组件不仅支持图片展示，还兼容嵌入式框架、视频等多媒体内容。 ... [详细]

蜡笔小新 2024-11-20 11:50:55
js
HTML前端开发：UINavigationController与页面间数据传递详解

本文详细介绍了如何在HTML前端开发中利用UINavigationController进行页面管理和数据传递，适合初学者和有一定基础的开发者学习。 ... [详细]

蜡笔小新 2024-11-20 09:46:39
js
使用 jQuery 实现页面加载进度条

页面加载进度条是提升用户体验的重要工具，通过在页面头部显示一个加载状态，并在页面完全加载后隐藏，可以有效减少用户的等待焦虑。本文将详细介绍如何使用 jQuery 实现这一功能。 ... [详细]

蜡笔小新 2024-11-18 20:00:09
button
jQuery 选择器与鼠标事件入门指南

本文介绍了 jQuery 的基本使用方法，包括文档就绪函数和常用的鼠标事件处理，以及各种选择器的详细说明。 ... [详细]

蜡笔小新 2024-11-17 11:22:23
button
Python 爬虫实战：获取京东手机价格和参数

本文通过一个具体的案例，展示了如何使用 Python 爬虫技术从京东网站爬取手机的价格和参数。最近发布的 iPhone X 虽然价格昂贵，但不妨碍我们探索其他高性价比的国产手机。 ... [详细]

蜡笔小新 2024-11-17 06:52:22
js
利用ChkBugReport工具分析Android Bugreport

本文介绍了如何使用开源工具ChkBugReport来解析和分析Android设备的Bugreport。ChkBugReport能够将复杂的Bugreport转换为易于阅读的HTML报告，并提供详细的图表和分析结论。 ... [详细]

蜡笔小新 2024-11-16 19:02:02
vue
如何使用 ASP.NET 和 Vue.js 构建单页面应用并处理复杂组件

作为一名新手开发者，我正在尝试使用 ASP.NET 和 Vue.js 构建一个单页面应用，涉及多个复杂组件（如按钮、图表等）。希望有经验的开发者能够提供指导。 ... [详细]

蜡笔小新 2024-11-16 18:00:22

空城旧梦-虎哥_919

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章