优化网站设计：减少DOM元素的数量

news/2024/5/9 18:13:14/文章来源:https://blog.csdn.net/weixin_34183910/article/details/91933557

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议。这方面的研究一直没有停止过，我在不同的场合也分享过这样的话题。

作为通用的原则，雅虎的工程师团队曾经给出过35个最佳实践。这个列表请参考  Best Practices for Speeding Up Your Web Sitehttp://developer.yahoo.com/performance/rules.html，同时，他们还发布了一个相应的测试工具Yslow http://developer.yahoo.com/yslow/

我强烈推荐所有的网站开发人员都应该学习这些最佳实践，并结合自己的实际项目情况进行应用。 接下来的一段时间，我将结合ASP.NET这个开发平台，针对这些原则，通过一个系列文章的形式，做些讲解和演绎，以帮助大家更好地理解这些原则，并且更好地使用他们。

准备工作

为了跟随我进行后续的学习，你需要准备如下的开发环境和工具

  1. Google Chrome 或者firefox ，并且安装 Yslow这个扩展组件.请注意，这个组件是雅虎提供的，但目前没有针对IE的版本。
    1. https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh
    2. https://addons.mozilla.org/en-US/firefox/addon/yslow/
    3. 你应该对这些浏览器的开发人员工具有所了解，你可以通过按下F12键调出这个工具。
  2. Visaul Studio 2010 SP1 或更高版本，推荐使用Visual Studio 2012
    1. http://www.microsoft.com/visualstudio/eng/downloads
  3. 你需要对ASP.NET的开发基本流程和核心技术有相当的了解，本系列文章很难对基础知识做普及。

本文要讨论的话题

这一篇我和大家讨论的是第十六条原则：Reduce the Number of DOM Elements （减少DOM元素的数量）

在这个系列文章的前面部分，我们谈到的很多有关设计的高级别的知识（例如如何拆分内容，并行下载等等），并且大量讨论到了脚本、样式表、图片的一些优化设计。这一篇文章我们要来讨论的是页面本身的细节设计：我们应该尽可能地使得页面的DOM元素数量少一些，这样有助于减小页面体积，并且也降低了维护这份DOM树的成本。

什么是DOM？

好吧，如果你不太清楚这个概念，也没有什么大不了的。DOM的全称为：Document Object Model ，中文翻译过来叫文档对象模型。我们这里所探讨的DOM，其实有一个隐含的意思是指HTML DOM。关于它的定义，可以参考下面这个链接

http://www.w3school.com.cn/htmldom/index.asp

  1. HTML DOM 定义了访问和操作 HTML 文档的标准方法。
  2. DOM 以树结构表达 HTML 文档。

从上面的定义中，我们可以知道HTML文档的结构本身就是有一套规范的（例如可以有哪些节点，必须有哪些节点等等），而且对于HTML文档的访问也是有规范的（例如要想改变某个元素的位置，则需要修改left,或者top属性），这套规范就是DOM。这是由W3C确定，并且在所有主流浏览器中都共同遵守的一套标准。http://www.w3.org/TR/DOM-Level-2-Core/introduction.html

什么是DOM树？

实际上并不真的存在DOM树，这只是我们程序员对于DOM的一种理解方式。一个HTML文档，由于其独有的特性，它有且只能有一个根元素，所有其他元素都是根元素的子元素，然后子元素又可以有子元素。对于这种数据结构，为了便于构造以及日后的访问（包括查询、修改），我们会采用一种树形结构来表示它。DOM树从逻辑上说大致上像下面这样

DOM HTML TREE

【备注】该截图来自于http://www.w3school.com.cn/htmldom/index.asp

 

如果有了上述的概念，那么对于“DOM元素应该尽量少”这条原则应该是不难理解的。问题的关键在于

  1. 多少才算少
  2. 如何减少

 

多少才算少？

很抱歉，这是一个没有标准答案的问题。没有谁规定我们的页面必须要少于某个数量的DOM元素。雅虎的团队当年声称他们的主页只有700个元素（对于一个门户页面来说，这个真的算很少了），但是最近我再去看这个页面，我发现目前有1527个元素。

image
我随意地打开另外几个门户网站（例如新浪）的主页，发现他们的元素数量就大大增加了。(而且也有很多错误）

image

我们也可以再来看一下博客园的主页，我发现他们的元素数量也在一个较小的级别。（1265）

image

所以，对于这个元素数量的问题，并没有什么固定的标准，应该尽可能地减小。当然，我们完全可以给自己一个小小的目标，例如1000左右？

 

如何减少DOM元素的数量？

我觉得有几个方面可以用来减少DOM元素的数量

  1. 避免不正确地使用服务器控件。
  2. 减少不必要的内容（并不是所有内容都必须放在页面上面的）
    • 如果数据量大，可以考虑分页，或者按需加载

 

避免不正确地使用服务器控件

这个问题被一次又一次地讨论（甚至是争论），ASP.NET给我们带来的服务器控件，从一开始诞生之日起，就充满了争议。服务器控件毫无疑问是简化了开发过程，因为通过拖拽就能实现复杂的功能。但服务器控件的代价也是相当大的（例如臃肿的代码，以及视图状态），并且从一开始就最被人诟病的是，因为服务器控件隐藏了很多细节，使得有一批网页的开发人员，只了解服务器控件，甚至连HTML的一些基础知识都不了解。

作为从ASP时代就开始做网站的人来说，包括我在内，我亲身经历了ASP.NET的整个发展过程。毋庸讳言，实际上微软也一直在改进ASP.NET。站在今天这样的时间节点，我个人给出的建议是

  1. 如果能用ASP.NET MVC做的，就不要用ASP.NET Web Forms。（关于他们各自的优缺点，可以参考这篇文章。）
    • 我们不想用ASP.NET Web Forms的原因不光是不想用服务器控件，而且是希望有更好的架构，来支持大型团队和项目的开发。
  2. 如果要用ASP.NET Web Forms，要慎重地使用服务器控件。尤其是一些复杂控件内部。
    • 大部分时候，我们都可以通过禁用视图状态来减小页面体积。

 

我们可以来看一个简单的例子。下面有一个页面，我们用一个表格来显示数据。注意，这里使用的是Repeater，而不是DataGrid或者GridView这一类更加复杂的控件。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:Repeater ID="data" runat="server"><ItemTemplate><tr><td><asp:Label runat="server" Text='<%# Eval("ID") %>'></asp:Label></td><td><asp:Label runat="server" Text='<%# Eval("FirstName") %>'></asp:Label></td><td><asp:Label runat="server" Text='<%# Eval("LastName") %>'></asp:Label></td><td><asp:Label runat="server" Text='<%# Eval("Company") %>'></asp:Label></td><td><asp:Label runat="server" Text='<%# Eval("Title") %>'></asp:Label></td></tr></ItemTemplate><HeaderTemplate><table border="1"><tr><th>ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Title</th></tr></HeaderTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater></div></form>
</body>
</html>

 

后台代码很简单，我只是实例化了1000个数据，然后将其绑定而已。

using System;
using System.Linq;namespace WebApplication2
{public partial class Default : System.Web.UI.Page{protected void Page_Load(object sender, EventArgs e){if (!IsPostBack) {//这里只是随机地绑定了1000行数据data.DataSource = Enumerable.Range(1, 1000).Select(x =>new{Id = x,FirstName = "ares",LastName = "chen",Company = "microsoft",Title = "SDE"});data.DataBind();}}}
}


页面运行起来之后，我们可以检测到它会有11016个元素。

image

你感到诧异吗？为什么会有这么多元素呢？我们来看看页面到底是如何构造控件的吧。首先，在页面的声明语句中，加入Trace=true这个属性

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default"  Trace="true"%>
然后在浏览器中向页面底部滚动，就可以看到一些跟踪信息

image

我们可以很清楚地发现，为了构造得到一行数据，其实会有12个控件。其最终生成的HTML内容为

image

那么，如何改进这一点呢？看看下面的代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><form id="form1" runat="server"><div><asp:Repeater ID="data" runat="server"><ItemTemplate><tr><td><%# Eval("ID") %></td><td><%# Eval("FirstName") %></td><td><%# Eval("LastName") %></td><td><%# Eval("Company") %></td><td><%# Eval("Title") %></td></tr></ItemTemplate><HeaderTemplate><table border="1"><tr><th>ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Title</th></tr></HeaderTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater></div></form>
</body>
</html>

然后我们再来看页面中有多少元素呢？6016个。比刚才足足少了5000个。

image

那么到底少了什么呢？请参考下图，对照一下前面的截图，我想你应该会明白的。

image

现在还有6016个元素，但其实还可以进一步优化，例如将下面红色的几行去掉，并且为服务器控件禁用视图状态。（在当前这个页面中，其实只是显示数据，用不着做提交的）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body>   <form id="form1" runat="server"><div><asp:Repeater ID="data" runat="server" EnableViewState="false"><ItemTemplate><tr><td><%# Eval("ID") %></td><td><%# Eval("FirstName") %></td><td><%# Eval("LastName") %></td><td><%# Eval("Company") %></td><td><%# Eval("Title") %></td></tr></ItemTemplate><HeaderTemplate><table border="1"><tr><th>ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Title</th></tr></HeaderTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater>
        </div></form>
</body>
</html>

这样又可以少掉几个元素。

image

是不是跃跃欲试了呢？不要着急，我们再来谈一个问题：这个页面上的1000行数据真的有必要进行一次性的加载和显示吗？答案通常是否定的，因为浏览器的尺寸本来就是有限的，对于用户来说，并不可能一次性阅读1000行数据。所以，我们需要了解如何通过分页或者按需加载的技术，来减少页面DOM元素的数量，提高加载和维护的效率。

 

使用分页加载内容

分页就是说，虽然数据很多，但我每次只显示一部分（例如20行），用户如果想看其他的行，则通过相应的按钮来导航切换。我们可以将上面的例子稍微改动一下

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server"><title></title>
</head>
<body><asp:Repeater ID="data" runat="server" EnableViewState="false"><ItemTemplate><tr><td><%# Eval("ID") %></td><td><%# Eval("FirstName") %></td><td><%# Eval("LastName") %></td><td><%# Eval("Company") %></td><td><%# Eval("Title") %></td></tr></ItemTemplate><HeaderTemplate><table border="1"><tr><th>ID</th><th>FirstName</th><th>LastName</th><th>Company</th><th>Title</th></tr></HeaderTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater>    <a href='default.aspx?p=<%= CurrentPageIndex+1 %>'>下一页</a>
</body>
</html>

作为演示目的，这里只是添加了一个链接，点击可以进入下一页。服务端代码也需要稍作修改

using System;
using System.Linq;namespace WebApplication2
{public partial class Default : System.Web.UI.Page{public int CurrentPageIndex { get; set; }protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){//这里检测是否要显示特定页面var p = Request.QueryString["p"];var index = 0;if (string.IsNullOrEmpty(p) || !int.TryParse(p, out index))CurrentPageIndex = 1;elseCurrentPageIndex = index;//这里只是随机地绑定了20行数据data.DataSource = Enumerable.Range((CurrentPageIndex - 1) * 20 + 1, 20).Select(x =>new{Id = x,FirstName = "ares",LastName = "chen",Company = "microsoft",Title = "SDE"});data.DataBind();}}}
}

 

如果用户没有提供p这个参数（或者是不正确的值），则默认显示第一页。如果提供了，则显示他想要的页面。每页显示20行。这个页面显示出来，只需要133个元素。如下图所示

image

当用户点击“下一页”的时候，实际上是一个新的请求。而且同样只需要133个元素。

image

对于分页，还有一些细节直接研究，并且也有一些现成的插件可以使用。例如 http://www.bing.com/search?setmkt=en-US&q=jquery+paging

 

按需加载内容

分页可以很好地解决大数据的问题。但由于分页需要用户额外的点击操作，对于用户来说，可能不是很方便。为了进一步提高用户体验，我们是否能做到：

  1. 默认显示20行
  2. 当用户往下滚动的时候，根据需要再显示另外20行
    • 这是一个循坏

现实世界中，有很多这样的例子，例如本文前面提到的雅虎主页，目前就是这样做的。还有国内比较火的新浪微博，也是这样做的。

按需加载！听起来很有点意思吧，由于讲解这个做法，相对来说篇幅较大。我希望大家可以自行参考一下下面这篇文章

Load Data From Server While Scrolling Using jQuery AJAX

http://www.codeproject.com/Articles/239436/Load-Data-From-Server-While-Scrolling-Using-JQuery

 

按需加载与分页是有根本区别的：分页之后页面的体积能够固定下来，而按需加载的做法中，页面体积是动态添加，而且也正因为是动态添加到，每次添加的内容有限，所以给用户的影响很小。

 

正确地使用JQuery

 

本文的最后部分，我要特别说明：我在之前的很多演示中都用到过jquery。（目前为止，它确实也是最好的一个javascript库，没有之一），但是对于jQuery，越来越多的人在学习，越来越多的人在滥用。这确实也是一个趋势。

关于如何正确地使用jQuery,国外和国内都有热心的网友做了总结，请参考

  1. http://www.cnblogs.com/huyh/archive/2009/03/30/1422976.html （国内的，翻译文档）
  2. http://www.cnblogs.com/huyh/archive/2009/03/31/1425430.html （国内的，翻译文档）
  3. http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/ （国外的）

转载于:https://my.oschina.net/afengzxf/blog/2251924

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_711202.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

阿里云服务器搭配宝塔面板安装Redis为网站提速

阿里云服务器搭配宝塔面板安装Redis为网站提速

一、Redis是什么&#xff1f; 按照网络上的解释&#xff1a;Redis是一款内存高速缓存数据库。Redis全称为&#xff1a;Remote Dictionary Server&#xff08;远程数据服务&#xff09;Redis以内存作为数据存储介质&#xff0c;所以读写数据的效率极高&#xff0c;远远超过数据库…
阅读更多...
如何利用URLOS和云存储打造一个不惧怕宕机的网站环境

如何利用URLOS和云存储打造一个不惧怕宕机的网站环境

现今大多数企业都具备开通网络业务的能力&#xff0c;不管是创建企业网站、企业在线服务、或者是交易平台、商城等等&#xff0c;这些技术都已经非常普及&#xff0c;只要投入相应的研发成本即可。所谓开国容易守国难&#xff0c;没有稳定在线能力&#xff0c;往往会让企业在关…
阅读更多...
一步步构建大型网站架构

一步步构建大型网站架构

之前我简单向大家介绍了各个知名大型网站的架构&#xff0c;亿万用户网站MySpace的成功秘密、Flickr架构、YouTube网站架构、PlentyOfFish 网站架构学习、WikiPedia技术架构学习笔记。这几个都很典型&#xff0c;我们可以从中获取很多有关网站架构方面的知识&#xff0c;看了之…
阅读更多...
大型网站技术架构（一）大型网站架构演化

大型网站技术架构（一）大型网站架构演化

看完了有一本书&#xff0c;就应该有所收获&#xff0c;有所总结&#xff0c;最近把《大型网站技术架构》一书给看完了&#xff0c;给人的印象实在深刻&#xff0c;再加上之前也搞过书本上讲的反向代理和负载均衡以及session独立存储和缓存&#xff0c;因此书本看起来还是挺通俗…
阅读更多...
大型网站技术架构（四）网站的高性能架构

大型网站技术架构（四）网站的高性能架构

网站性能是客观的指标&#xff0c;可以具体体现到响应时间、吞吐量、并发数、性能计数器等技术指标。 1、性能测试指标 1.1 响应时间 指应用执行一个操作需要的时间&#xff0c;指从发出请求到最后收到响应数据所需要的时间。如下列出了系统常用的操作响应时间表. 操作 响应…
阅读更多...
大型网站技术架构（五）网站高可用架构

大型网站技术架构（五）网站高可用架构

网站的可用性&#xff08;Avaliability&#xff09;描述网站可有效访问的特性。 1、网站可用性的度量与考核 网站不可用时间&#xff08;故障时间&#xff09;故障修复时间点-故障发现&#xff08;报告&#xff09;时间点 网站年度不可用时间&#xff08;1-网站不可用时间/年度…
阅读更多...
大型网站技术架构（六）网站的伸缩性架构

大型网站技术架构（六）网站的伸缩性架构

网站系统的伸缩性架构最重要的技术手段就是使用服务器集群功能&#xff0c;通过不断地向集群中添加服务器来增强整个集群的处理能力。“伸”即网站的规模和服务器的规模总是在不断扩大。 1、网站架构的伸缩性设计 网站的伸缩性设计可以分成两类&#xff0c;一类是根据功能进行…
阅读更多...
大型网站技术架构（七）网站的可扩展性架构

大型网站技术架构（七）网站的可扩展性架构

扩展性是指对现有系统影响最小的情况下&#xff0c;系统功能可持续扩展或提升的能力。 设计网站可扩展架构的核心思想是模块化&#xff0c;并在此基础上&#xff0c;降低模块间的耦合性&#xff0c;提供模块的复用性。模块通过分布式部署&#xff0c;独立的模块部署在独立的服务…
阅读更多...
大型网站技术架构（八）网站的安全架构

大型网站技术架构（八）网站的安全架构

从互联网诞生起&#xff0c;安全威胁就一直伴随着网站的发展&#xff0c;各种Web攻击和信息泄露也从未停止。常见的攻击手段有XSS攻击、SQL注入、CSRF、Session劫持等。 1、XSS攻击 XSS攻击即跨站点脚本攻击&#xff08;Cross Site Script&#xff09;&#xff0c;指黑客通过篡…
阅读更多...
微服务架构：搭建网站扫码登录的功能设计

微服务架构：搭建网站扫码登录的功能设计

微服务架构应该是什么样子在这之前先看一看一个微服务架构落地以后应该是什么样子的。平常所有的微服务架构更多的是从框架来讲的像Dubbo&#xff0c;SpringCloud等&#xff0c;从整个SpringCloud的生态来讲它也只包含微服务的一部分。因为微服务的拆分不可避免的造成了系统的复…
阅读更多...
Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅

Docker学习总结（6）——通过 Docker 化一个博客网站来开启我们的 Docker 之旅

通过 Docker 化一个博客网站来开启我们的 Docker 之旅 这篇文章包含 Docker 的基本概念&#xff0c;以及如何通过创建一个定制的 Dockerfile 来 Docker 化Dockerize一个应用。 Docker 是一个过去两年来从某个 idea 中孕育而生的有趣技术&#xff0c;公司组织们用它在世界上每个…
阅读更多...
PHP学习总结（10）——PHP入门篇之自定义网站根目录

PHP学习总结（10）——PHP入门篇之自定义网站根目录

阅读更多...
Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置

Nginx学习总结（2）——Nginx手机版和PC电脑版网站配置

考虑到网站的在多种设备下的兼容性&#xff0c;有很多网站会有手机版和电脑版两个版本。访问同一个网站URL&#xff0c;当服务端识别出用户使用电脑访问&#xff0c;就打开电脑版的页面&#xff0c;用户如果使用手机访问&#xff0c;则会得到手机版的页面。 1、判断客户端的设…
阅读更多...
wordpress网站换个云服务器,wordpress更换服务器

wordpress网站换个云服务器,wordpress更换服务器

wordpress更换服务器 内容精选换一换如果Linux操作系统云服务器未安装密码重置插件&#xff0c;可以参见本节内容重新设置密码。本节操作重置的是root用户的密码&#xff0c;您可以重置完root密码后登录云服务器后再更换秘钥或重置非root用户的密码。Windows操作系统请参见重置…
阅读更多...
VMware产品演示网站

VMware产品演示网站

2015年4月28日, 下午1:19 包括了vClould Suite、Virtual SAN、vSphere with Operations Management、vRealize、vSphere 6.0等。都为幻灯片模式&#xff0c;如下图所示。虽然不是视频&#xff0c;但也能基本了解此些产品的功能及配置界面。 网址&#xff1a;http://featurewa…
阅读更多...
定期删除网站日志php_tomcat实现定时删除日志

定期删除网站日志php_tomcat实现定时删除日志

具体方法&#xff1a;(推荐教程&#xff1a;apache)一、创建脚本vim /root/project/tomcat_logs_task/auto-del-15-days-ago-log.sh# /bin/bash#定期删除tomcat 定期删除15天前的已分割日志#日志路径apache_tomcat_api_8079/root/app/apache-tomcat-job36-api-8079/logsapache_…
阅读更多...
c++builder 运行网站的api_欧美音乐网站Python爬虫项目实战

c++builder 运行网站的api_欧美音乐网站Python爬虫项目实战

爬虫项目实战0x01 目标分析最近发现一个比较好的欧美音乐下载网站&#xff0c;可以下载大部分高质量欧美音乐。该爬虫项目要实现自动化批量获取用户想要下载的音乐。本文从网站分析、爬虫设计、代码实现三个方面出发&#xff0c;系统介绍该爬虫项目。项目完整代码在Github中可以…
阅读更多...
优秀常用网站汇总.txt

优秀常用网站汇总.txt

一、技术类 http://bbs.51cto.com http://www.epubit.com.cn/ https://www.printfriendly.com/ 浏览器插件&#xff0c;可下载51cto专栏等限制复制等页面为pdf https://www.csdn.net/ 二、Linux https://github.com http://www.ansible.com.cn(Ansible中文权威指南) h…
阅读更多...
网站图片全自动加密_外卖优惠平台内容加密参数分析！你见过一块钱买外卖的吗？...

网站图片全自动加密_外卖优惠平台内容加密参数分析！你见过一块钱买外卖的吗？...

Js 加密的内容其实大同小异&#xff0c;目前咸鱼也在不断学习 APP 逆向的知识&#xff0c;之后会出一部分关于 APP 逆向在爬虫中的应用相关的文章&#xff0c;这部分设计的技能栈较广&#xff0c;大家可以先预习 Java 基础与 Android 基础。抓包与加密定位这个网站的加密部分是…
阅读更多...
生日快乐网站_【总结 】文化自信源自基层贺房氏网站建站十五周年

生日快乐网站_【总结 】文化自信源自基层贺房氏网站建站十五周年

重要提醒&#xff1a;2004年起创建房氏网(房氏网站fang.org.cn)及QQ群&#xff0c;收集房氏家谱、源流、名人、企业&#xff0c;搭建寻根、联谊等一体文化平台&#xff0c;专业专注于房氏文化&#xff0c;为全球100多万房家人服务的一个综合体&#xff0c;欢迎大家的加入与参与…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业