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

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

推荐阅读

jquery
实现页面自动加载更多内容功能：类微博和Pinterest的设计

在现代Web应用中，当用户滚动到页面底部时，自动加载更多内容的功能变得越来越普遍。这种无刷新加载技术不仅提升了用户体验，还优化了页面性能。本文将探讨如何实现这一功能，并介绍一些实际应用案例。 ... [详细]

蜡笔小新 2024-12-23 17:01:04
jquery
使用JS、HTML5和C3创建自定义弹出窗口

本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例，详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]

蜡笔小新 2024-12-20 21:22:27
jquery
解决Uploadify在IE浏览器中的兼容性问题

本文详细介绍了如何解决Uploadify插件在Internet Explorer（IE）9和10版本中遇到的点击失效及JQuery运行时错误问题。通过修改相关JavaScript代码，确保上传功能在不同浏览器环境中的一致性和稳定性。 ... [详细]

蜡笔小新 2024-12-27 22:07:40
jquery
如何使用JavaScript或jQuery检测文本框焦点状态和鼠标悬停事件

本文介绍了如何利用JavaScript或jQuery来判断网页中的文本框是否处于焦点状态，以及如何检测鼠标是否悬停在指定的HTML元素上。 ... [详细]

蜡笔小新 2024-12-27 21:33:33
jquery
360SRC安全应急响应：从漏洞提交到修复的全过程

本文详细介绍了360SRC平台处理一起关键安全事件的过程，涵盖从漏洞提交、验证、排查到最终修复的各个环节。通过这一案例，展示了360在安全应急响应方面的专业能力和严谨态度。 ... [详细]

蜡笔小新 2024-12-27 11:10:05
js
如何在ASP.NET中操作没有runat='server'属性的HTML元素

本文探讨了在不使用服务器控件的情况下，如何通过多种方法获取并修改页面中的HTML元素值。除了常见的AJAX方式，还介绍了其他可行的技术方案。 ... [详细]

蜡笔小新 2024-12-27 06:30:46
jquery
基于jQuery的用户注册页面表单验证代码分享

本文介绍了一段使用jQuery实现的用户注册页面表单验证代码，适用于前端开发人员学习和参考。该示例结合了HTML、CSS和JavaScript，确保用户输入的数据格式正确。 ... [详细]

蜡笔小新 2024-12-24 14:37:46
jquery
jQuery HooRay：一款自创的实用 jQuery 工具插件

这款插件主要由作者在工作中积累的常用功能开发而成，旨在解决现有插件间的冲突及浏览器兼容性问题。通过整合和优化现有插件，确保其稳定性和高效性。 ... [详细]

蜡笔小新 2024-12-24 12:14:47
jquery
在网站制作中随时可用的10个 HTML5 代码片段

HTML很容易写，但创建网页时，您经常需要重复做同样的任务，如创建表单。在这篇文章中，我收集了10个超有用的HTML代码片段，有HTML5启动模板、空白图片、打电话和发短信、自动完 ... [详细]

蜡笔小新 2024-12-23 15:26:50
jquery
基于JQuery实现的评分插件

本文介绍了一个使用JQuery创建的交互式评分控件。当用户将鼠标悬停在星星上时，左侧的星星会变为实心，右侧保持空心，并显示对应的评分等级；移开鼠标后，所有星星恢复为空心状态。 ... [详细]

蜡笔小新 2024-12-23 10:09:44
jquery
使用jQuery实现客户端页面跳转的最佳实践

本文探讨了如何利用jQuery在客户端实现页面跳转，并详细介绍了如何确保页面在浏览器的顶层窗口中打开，而不是局限于当前框架内。 ... [详细]

蜡笔小新 2024-12-23 03:35:09
console
深入理解Vue.js：从入门到精通

本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例，帮助开发者全面掌握这一流行的前端框架。 ... [详细]

蜡笔小新 2024-12-22 11:07:54
jquery
JSON 解析失败问题排查

在PHP后端开发中遇到一个难题：通过第三方类文件发送短信功能返回的JSON字符串无法解析。本文将探讨可能的原因并提供解决方案。 ... [详细]

蜡笔小新 2024-12-21 18:39:23
jquery
如何在Kendo UI for jQuery中将行标题显示为可点击链接

本文详细介绍了如何在Kendo UI for jQuery的数据管理组件中，将行标题字段呈现为锚点（即可点击链接），帮助开发人员更高效地实现这一功能。通过具体的代码示例和解释，即使是新手也能轻松掌握。 ... [详细]

蜡笔小新 2024-12-21 17:07:41
jquery
Spring Boot 中静态资源映射详解

本文深入探讨了 Spring Boot 如何简化 Web 应用中的静态资源管理，包括默认的静态资源映射规则、WebJars 的使用以及静态首页的处理方法。通过本文，您将了解如何高效地管理和引用静态资源。 ... [详细]

蜡笔小新 2024-12-20 20:02:31

空城旧梦-虎哥_919

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

Tags | 热门标签

RankList | 热门文章