高效提升WEB前端性能,快速提升前端性能

高速提高前端品质

2015/09/26 · HTML5,
JavaScript · 1
评论 ·
性能

本文由 伯乐在线 –
cucr
翻译,唐尤华
校稿。未经许可,禁止转发!
英文出处:Jonathan
Suh。欢迎参加翻译组。

二零一八年,小编写了壹篇文章Need for
Speed,分享了在支付本身的网址中使用的劳作流程和技能(包括工具)。从这时起,小编的网址又通过了一次重构,完结了过多干活流程和服务器端革新,同时本身对前者性能也予以了额外关心。以下便是自小编做的办事,为啥小编要这么做,以及自笔者在网址上用来优化前端品质的工具。

对前端开发工程师来说,前端质量优化的最首要是强烈的,最为我们所知的是YSLOW的23条优化规则,在自家的接头中,品质优化不纯粹是指用户访问网址的速度,也囊括支付的频率,那里本身总括下自家理解中的WEB前端质量优化。

对前端开发工程师来说,前端品质优化的重大是显著的,最为大家所知的是YSLOW的二三条优化规则,在自家的知情中,品质优化不纯粹是指用户访问网站的速度,也囊括开发的功效,这里自身总括下自家清楚中的WEB前端质量优化。

对前端开发工程师来说,前端质量优化的主假如明摆着的,最为大家所知的是YSLOW的2三条优化规则,在自家的知情中,品质优化不纯粹是指用户访问网址的速度,也囊括开发的频率,这里本人总计下自家领悟中的WEB前端特性优化。

最小化请求

所有在您的网址加载时用来渲染页面(外部CSS或JS文件、web字体、图片等等)的财富,都以见仁见智的HTTP请求。1般的网址平均有 93个请求!

自作者的靶子是压缩HTTP请求。1种方法是分别编写翻译或延续(组合、合并)CSS和javascript到贰个文本中。让这几个历程自动化(例如利用创设筑工程具 Grunt 或 Gulp)是名不虚传的功能,但至少也相应在生产条件动手动完成。

其三方脚本是扩展额外请求最普遍的首恶祸首,很多得到额外的文本如脚本、图像或CSS的央浼都不住3个。浏览器内置的开发者工具得以支持你发现这个元凶。

ca888亚洲城手机版 1
谷歌 Chrome开发者工具的互联网选项卡

诸如,Instagram的脚本发起贰遍呼吁。测试环境中动用一些出自盛名社交网址的交际分享脚本,能够见到他们急忙扩大:

站点 文件 大小
Google+ 1 15.1KB
Facebook 3 73.3KB
LinkedIn 2 47.7KB
Pinterest 3 12.9KB
Tumblr 1 1.5KB
Twitter 4 52.7KB
Total 14 203.2KB

来源:更有效的社会分享链接

那有额外的17个HTTP请求,共20叁.2KB。相反,笔者看看 “share-intent” 以此url,它基本上是由此传递和塑造数据来生成一个共享,能够只使用HTML来创设社交共享链接。它让自家舍弃用于共享的第一方脚本,这么些本子供给5次呼吁。我在Responsible
Social Share
Links那篇小说有愈来愈多的演说。

评估每一个第3方脚本并分明其首要。或者存在1种不借助第3方的不二秘诀来形成它。你也许会错过一些意义(例如like、tweet、分享数量),不过请问一下协调:“像数量总括就那么主要吗?”

HTML部分

HTML部分

服务器部分

压缩、优化

近年来自家找到了滑坡请求的章程,我起先寻找种种办法来减重。文件越小,加载速度越快。经常平均的页面大小为一玖5〇KB。根据内容分类:

图片:1249KB HTML:58KB CSS:60KB JS:303KB 字体:87KB Flash:67KB
其它:126KB

高效提升WEB前端性能,快速提升前端性能。本身使用这几个多少作为参照和比较的起源,同时找到小编得以用来为网址减负的措施。 自小编的网址花费的流量有个别许?是叁个由Tim
Kadlec编纂的很棒的工具,能够用来接济您测试和可视化,来自世界外省的拜会在你的网址上海消防耗的流量。

  1. 语义化HTML:好处在于能够使代码简洁清晰,协助差别装备,利于搜索引擎,便于团队开发;
  2. 削减DOM节点:加快页面渲染;
  3. 给图片加上不利的宽高值:那足以减小页面重绘,同时防止图片缩放;
  4. 防护src属性和link的href属性为空:当班值日为空时,浏览器很大概会把当下页面当成其属性值加载;
  5. ca888亚洲城手机版,没有错的密闭标签:如防止采纳<div/>,浏览器会多多少个将它解析成<div\></div\>的过程;
  6. 链接为目录或首页的地点前边加”/”,如
  7. 用LINK而不用@import情势导入样式;
  8. 体制放在页头,JS放在页尾;
  9. 缩小favicon.ico并缓存;
  1. 语义化HTML:好处在于能够使代码简洁清晰,帮衬不一样装备,利于搜索引擎,便于团队开发;
  2. 削减DOM节点:加快页面渲染;
  3. 给图片加上不利的宽高值:这能够减去页面重绘,同时幸免图片缩放;
  4. 谨防src属性和link的href属性为空:当班值日为空时,浏览器很或然会把当下页面当成其属性值加载;
  5. 科学的关闭标签:如防止使用<div/>,浏览器会多多个将它解析成<div\></div\>的过程;
  6. 链接为目录或首页的地方前边加”/”,如
  7. 用LINK而不用@import格局导入样式;
  8. 体制放在页头,JS放在页尾;
  9. 缩小favicon.ico并缓存;

尽只怕合并CSS、JS文件,或将其一直写在页面上,减弱HTTP请求;

CSS和JavaScript

压缩样式表和JavaScript文件能够显然减小文件大小,小编仅在减小上就从二个文本上节省了57%的长空。

压缩前 压缩后 节省比例
CSS 135KB 104KB 23.0%
JS 16KB 7KB 56.3%

我使用 BEM (代码、元素、修饰符)
方法论编写CSS,那将促成冗长的类名。重构笔者的有的代码变得更简便(“navigation”为
“nav”, “introduction” 为
“intro”),那让本身节约了有些上空,但和本身愿意的末期压缩比较并不是那么强烈。

冗长的类 精简后 节省比例
104KB 97KB 6.7%

本人也再度评估了使用jQuery的需求性。对于滑坡的135KB的JavaScript,大概玖⑥KB是jQuery库——7一%之多!那里并从未过多亟需借助于jQuery,所以小编花时间重构了代码。小编经过剥离jQuery和在Vanilla重写它,去除了122KB,末了减掉后的文件大小缩短到一三KB。

jQuery Vanilla JS 节省比例
135KB 13KB 122KB (90%)

从那时起,笔者灵机一动去掉越来越多空间(压缩后7KB),最终脚本在回落和gzipped后只有0.365KB。

CSS部分

CSS部分

压缩CSS、JS文件,收缩文件传输时间;

图片

图片常常占到一个网址的银元。常备网址平均有124九KB的图纸。

自家抛弃了图标字体,取而代之的是内联SVG。其它,任何能够矢量化的图纸都选取内联SVG替换。我的网址先前版本的二个页面仅仅图标web字体就加载了145KB,同时对于几百个web字体,小编只使用了一小部分。相比较之下,当前网址的一个页面只加载拾KB内联SVG,那然而九三%的反差。

SVG
sprites看起来很有意思,它或许是笔者在全路网址使用普普通通内联SVG图标的二个使得的替代消除方案。

在大概的情状下行使CSS代替图片,现在的CSS能做的早已重重了。但是,浏览器包容性或然是现代CSS使用的2个题材;因而,充足利用 caniuse.com 和日益改善。

您也足以透过优化图片来压缩字节。有三种艺术来优化图片:

  1. 有损压缩:降低图像的品质
  2. 无损压缩:不影响品质

要同时利用二种办法得到最佳的功能,顺序是很要紧的。首先应用有损图像压缩方法,比如在不当先须求大小的状态下调整图像大小然后在略低品质且不降价扣太多的场地下导出如作者一般在八二– 92%下导出JPG图片

ca888亚洲城手机版 2

ImageOptim是OS X下的二个图像优化学工业具

接下去,使用无损图像优化学工业具比如 ImageOptim拓展拍卖,从而通过删除不要求的音信,如元数据或颜色配置文件来尤其缩减图像文件大小。

  1. 幸免使用 CSS Expressions(CSS表明式):如background-color: expression(
    (new Date()).getHours()%贰 ? “#B8D4FF” : “#F08A00″ ) ;
  2. 制止使用 CSS Filter(CSS滤镜);
  3. 利用CSS缩写,收缩代码量;
  4. 通过CSSCoca Colas把同类图片合成一张,减少图片请求;
  5. 减少查询层级:如.header .logo要好过.header .top .logo;
  6. 压缩查询范围:如.header>li要好过.header li;
  7. 避免TAG标签与CLASS或ID并存:如a.top、button#submit;
  8. 删去重复的CSS;
  9. a标签的多样情况排序原则,love hate原则,即l(link)ov(visited)e
    h(hover)a(active)te。
  1. 防止采纳 CSS Expressions(CSS表明式):如background-color: expression(
    (new Date()).getHours()%② ? “#B8D4FF” : “#F08A00″ ) ;
  2. 幸免采纳 CSS Filter(CSS滤镜);
  3. 应用CSS缩写,裁减代码量;
  4. 由此CSSCoca Colas把同类图片合成一张,减弱图片请求;
  5. 缩减查询层级:如.header .logo要好过.header .top .logo;
  6. 削减查询范围:如.header>li要好过.header li;
  7. 避免TAG标签与CLASS或ID并存:如a.top、button#submit;
  8. 去除重复的CSS;
  9. a标签的多种景况排序原则,love hate原则,即l(link)ov(visited)e
    h(hover)a(active)te。

避免40四错误:特别要幸免给40四点名三个停摆页面,否则持有40四不当都将会加载2遍页面;

页面渲染

在那点上,经过工作和汗液得出这几个细节,小编坚信本身的 Google PageSpeed
Insights 的分数将是90s。

ca888亚洲城手机版 3

在移动平台PSI分数为7三成0,而桌面平台上好1些在88/100。它提出我“消除render-blocking的JavaScript和CSS”。

render-blocking文件扩张了浏览器呈现内容的小时,因为那个文件要求先下载并拍卖。七个render-blocking文件要求浏览器选用多少个线程去获取和处理它们,等待时间尤其扩大。

ca888亚洲城手机版 4

优化JavaScript、CSS和web字体的传输,可以增加页面包车型大巴“第一时半刻间渲染。将那个日子降到最低,驾驭“关键的渲染路径”很重大,它描述了在当页面包车型客车率先个字节被接到,与页面第3遍渲染成像素之间时有产生了怎样。

WebPagetest 是用来援助您安顿网址和页面质量最棒的可视化学工业具。

ca888亚洲城手机版 5

About页面在渲染优化前的WebPagetest结果

当最小化第三回渲染时间时,大家越来越多的钟情以尽可能快的快慢渲染内容,然后允许额外的“东西”在处理进度中国和东瀛益渲染。

Javscript部分

Javscript部分

一般要求压缩DNS查询次数,仿佛三个页面的央求财富尽量少的使用不相同的主机名,那能够减掉网址并行下载的数据,但广大网址为了加紧下载财富其实是特意用了几个主机名,那里要做3个度量;

CSS

暗中同意境况下,浏览器将CSS作为渲染阻塞;由此,当它加载时,浏览器暂停渲染,等待CSS已经被下载和拍卖。外部体制表意味着更加多的网络线程,它增加了等待时间,同时大型样式表也会增多等待时间。

大家能够通过在<head>标签内联“关键CSS”来革新页面渲染时间,这样浏览器能够毫不再等待下载整个样式表,就足以便捷地渲染页面内容,然后通过non-rendering-blocking情势加载完整的样式表。

XHTML

<head> <style> /* inline critical CSS */ </style>
</head>

1
2
3
4
5
<head>
  <style>
    /* inline critical CSS */
  </style>
</head>

规定什么CSS是非同一般必要(1)查看移动或桌面下页面视口(viewport
)大小,(二)识别视口中可知的元素(三)选拔那些成分关联的CSS。

那也许有点困难,尤其是手工业达成,不过有局部神奇的工具得以协理加速甚至自动化那么些历程。我动用 Filament
Group编写的 grunt-criticalcss来赞助自个儿为页面生成最主要CSS,然后再手动优化壹些CSS(合玉石俱焚复的媒体询问和删除小编认为不须求的CSS)。

ca888亚洲城手机版 6

About页面只加载关键CSS(左边)和加载整个CSS(左边)的相比较

前几日重大CSS已经内联到<head>标签内,小编使用loadCSS工具来异步加载样式表的其他部分。

XHTML

<head> <style> /* inline critical CSS */ </style>
<script> // inline the loadCSS script function loadCSS( href,
before, media, callback ){ … } // then load your stylesheet
loadCSS(“/path/to/stylesheet.css”); </script> <noscript>
<link href=”/path/to/stylesheet.css” rel=”stylesheet”>
</noscript> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
  <style>
    /* inline critical CSS */
  </style>
  <script>
   // inline the loadCSS script
   function loadCSS( href, before, media, callback ){ … }
   // then load your stylesheet
   loadCSS("/path/to/stylesheet.css");
  </script>
  <noscript>
    <link href="/path/to/stylesheet.css" rel="stylesheet">
  </noscript>
</head>

谷歌(谷歌(Google))也提交non-render-blocking加载CSS的 另3个示范 。

  1. 尽量少用全局变量;
  2. 应用事件代理绑定事件,如将事件绑定在body上进展代理;
  3. 幸免频仍操作DOM节点;
  4. 不使用EVAL;
  5. 减掉对象查找,如a.b.c.d那种查找方法极度耗质量,尽或者把它定义在变量里;
  6. 类型转换:把数字转换来字符串使用”” +
    一,浮点数转换到整型使用Math.floor()恐怕Math.round();
  7. 对字符串实行巡回操作,譬如替换、查找,应使用正则表明式;
  8. 去除重复的JS;
  1. 尽量少用全局变量;
  2. 行使事件代理绑定事件,如将事件绑定在body上开始展览代理;
  3. 防止频繁操作DOM节点;
  4. 不使用EVAL;
  5. 削减对象查找,如a.b.c.d那种查找方法卓殊耗品质,尽也许把它定义在变量里;
  6. 类型转换:把数字转换到字符串使用”” +
    一,浮点数转换到整型使用Math.floor()或许Math.round();
  7. 对字符串进行巡回操作,譬如替换、查找,应使用正则表明式;
  8. 去除重复的JS;

使用CDN加速,使用户从离自身近期的服务器下载文件;

JavaScript

JavaScript也会造成render-blocking故此它的加载也应有优化能够选择以下的诀窍:

  1. 小的内联脚本。
  2. 在文书档案头部加载外部脚本。
  3. 运用defer属性推迟执行脚本。
  4. 动用async属性异步加载的本子。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script
src=”/path/to/independent-script.js” async> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script src="/path/to/independent-script.js" async>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

在解析HTML时 defer推迟下载脚本,一旦页面渲染完成执行脚本。defer支持很不错,但据报道存在不一致和不可靠性,所以最好同时使用defer并把脚本放置在文档底部。

在HTML解析和执行时异步下载脚本文件。这允许多个脚本文件并发下载和执行;然而,他们不能保证在一个特定的顺序加载。如果相互依赖可能需要在这些场景下修改任意脚本。

async支持大不比defer,那便是干什么笔者选取采用loadJS,用来异步加载JS文件的剧本。它帮助老式浏览器,同时有3个一蹴而就的特色,即依照规则加载脚本。

XHTML

<head> <script> // small inline JS </script>
</head> <body> … <script> // inline loadJS function
loadJS( src, cb ){ .. } // then load your JS
loadJS(“/path/to/script.js”); </script> <script
src=”/path/to/parent-script.js” defer> <script
src=”/path/to/dependent-script.js” defer> </body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<head>
  <script>
    // small inline JS
  </script>
</head>
<body>
  …
  <script>
    // inline loadJS
    function loadJS( src, cb ){ .. }
    // then load your JS
    loadJS("/path/to/script.js");
  </script>
  <script src="/path/to/parent-script.js" defer>
  <script src="/path/to/dependent-script.js" defer>
</body>

服务器部分

服务器部分

减少Cookie的轻重,使用无cookie的域,客户端请求静态文件的时候,减弱Cookie的屡屡传输对主域名的熏陶;

Web字体

Web字体使内容更为鲜明和出彩,然而也对页面渲染发生了负面影响。在加载页面时,特别是移动端的连接,你恐怕曾经注意到文本在1段时间看不见。那被称为 FOIT(不可知文本闪动)。

ca888亚洲城手机版 7

本人的网址出现FOIT的典范

当浏览器尝试下载三个web字体,它将隐藏文本一段时间,直到它做到字体下载,才显得文本。在最倒霉的意况下,文本Infiniti期地不可知,使内容完全不能够读书。

我处理FOIT 的不二秘籍是稳步加载字体,首先信赖暗中同意和系统字体(例如Helvetica和吉优rgia)允许急速展现的内容。Web字体然后利用loadCSS异步加载,同时经过 Font
Face
Observer库来检查测试字体曾几何时下载成功。一旦字体下载且可用,二个类被添加到文书档案中,用于安装页面正确的书体。

JavaScript

<head> <style> body { font-family: Helvetica, Arial,
sans-serif; } .fonts-loaded body { font-family: Roboto, Helvetica,
Arial, sans-serif; } </style> <script> // inline loadCSS
function loadCSS( href, before, media, callback ){ … } // load
webfonts
loadCSS(“//fonts.googleapis.com/css?family=Roboto:400,500,700”); //
inline FontFaceObserver (function(){ … } // detect loading of fonts
var roboto400 = new FontFaceObserver(“Roboto”, { weight: 400 }); var
roboto700 = new FontFaceObserver(“Roboto”, { weight: 700 });
Promise.all([ roboto400.check(), roboto700.check() ]).then(function()
{ document.documentElement.className += ” fonts-loaded”; });
</script> </head>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<head>
  <style>
    body { font-family: Helvetica, Arial, sans-serif; }
    .fonts-loaded body { font-family: Roboto, Helvetica, Arial, sans-serif; }
  </style>
  <script>
    // inline loadCSS
    function loadCSS( href, before, media, callback ){ … }
    // load webfonts
    loadCSS("//fonts.googleapis.com/css?family=Roboto:400,500,700");
    // inline FontFaceObserver
    (function(){ … }
    // detect loading of fonts
    var roboto400 = new FontFaceObserver("Roboto", {
      weight: 400
    });
    var roboto700 = new FontFaceObserver("Roboto", {
      weight: 700
    });
 
    Promise.all([
      roboto400.check(),
      roboto700.check()
    ]).then(function() {
      document.documentElement.className += " fonts-loaded";
    });
  </script>
</head>

逐步加载字体将导致FOUT(未有样式的文件闪动)和FOFT(仿文本闪动),那取决它是哪些做的。

ca888亚洲城手机版 8

字体逐步加载,不爆发FOIT

只是,好处是内容向来可知,而不会冒出看不见的景况。关于什么制伏FOIT,小编写了一篇的深入作品
采用字体育赛事件加载字体。

  1. 尽可能合并CSS、JS文件,或将其一向写在页面上,收缩HTTP请求;
  2. 压缩CSS、JS文件,减少文件传输时间;
  3. 幸免40④破绽百出:尤其要防止给404钦赐3个停摆页面,不然全体40四错误都将会加载3次页面;
  4. 诚如供给削减DNS查询次数,就像3个页面包车型大巴请求财富尽量少的应用差异的主机名,那足以减去网址并行下载的数额,但众多网址为了加速下载财富实际是专门用了七个主机名,那里要做三个权衡;
  5. 选取CDN加快,使用户从离自个儿多年来的服务器下载文件;
  6. 减掉Cookie的轻重,使用无cookie的域,客户端请求静态文件的时候,收缩Cookie 的一再传输对主域名的熏陶;
  7. 为文件头钦命Expires,使内容有所缓存性;
  8. 利用gzip压缩内容;
  1. 尽心尽力合并CSS、JS文件,或将其平素写在页面上,收缩HTTP请求;
  2. 压缩CSS、JS文件,裁减文件传输时间;
  3. 幸免40四谬误:尤其要幸免给40四钦点几个停摆页面,不然全数40四荒谬都将会加载叁回页面;
  4. 貌似须求裁减DNS查询次数,就如1个页面包车型地铁伸手能源尽量少的选取不一致的主机名,那足以减弱网址并行下载的数码,但许多网站为了加快下载能源实际是尤其用了两个主机名,那里要做二个权衡;
  5. 应用CDN加快,使用户从离自个儿近年来的服务器下载文件;
  6. 削减Cookie的大小,使用无cookie的域,客户端请求静态文件的时候,减少Cookie 的往往传输对主域名的震慑;
  7. 为文件头钦定Expires,使内容有着缓存性;
  8. 采纳gzip压缩内容;

为文件头内定Expires,使内容具有缓存性;

其它

任何情势,如启用gzip和缓存、配置SSL和从内容分发网络(CDN)获取财富,能够加强前端品质,但须求有的劳务器端援助。基于篇幅所限,作者不会深切他们。然则笔者想强调的是,小编推荐使用这个点子,他们将会对您的网址质量有多少个周密和积极性的影响。

自己将涉嫌,因为小编的网站的访问量百分比13分部分源点美利坚联邦合众国以外,而本人的服务器是放在London,小编于是决定把本身的有的能源发表到CDN上。他们安插到一个 Amazon
S3  bucket上,绑定到一个CloudFront版本。

选拔gzip压缩内容;

综述

在过去的多少个月初本人直接在做质量创新,就算这有许多干活,作者实在注意到了出入。我有时得到关于本人的网址速度的褒贬,那是性质调整的结果。

自家还从未在目标跟踪上做得很好(越发是初期),但让我们看看基于已有数量的壹部分相比。

平均大小 我的站点 差别
Requests 93 19 -87.6%
Page size 1950KB 524KB -73.1%
HTML 58KB 2.8KB -95.1%
Images 1249KB 66.3 -94.7%
CSS 60KB 14.6KB -75.7%
JS 303KB 6.1KB -98.0%
Fonts 87KB 10.2KB -88.3%

完全上八七.5%降价平均水平!不是很坏。未来谷歌PageSpeed也给自己的网站一个不错的分数。

ca888亚洲城手机版 9

优化后谷歌(谷歌(Google))PageSpeed的结果

关于WebPagetest的结果**,**笔者留意到,固然About页面字节扩充了,但开头渲染和加载的时间大大收缩。

ca888亚洲城手机版 10

About页面在渲染优化后的WebPagetest结果

性格立异将永久是进行时,在 HTTP/二到来的旅途其间1部分将改成,从前好用的技巧大概不再好用,同时有个别或者完全弃用。

本身认为在过去的多少个月,笔者获得了非常大的进展,也学到了成都百货上千。笔者的网址在Github上是开源的,所以我们能够每日看一看。小编还尚未弄了然那总体,但期待自身所享用的所做所学,会给您有的理念。假如你有此外难点或想聊一聊,随时侵扰笔者的照片墙 @jonsuh依然给自身发 邮件。

ca888亚洲城手机版 11

资源

此地是增进的有用财富,让您深深领会网址品质。

  • 深深谷歌PageSpeed
  • SpeedCurve
  • WebPagetest
  • 本身的网站费用的流量有微微?
  • 网页设计师和前端开发人士须要关爱的前端品质
  • 哪些让兰德酷路泽WD网址的快慢飙起来
  • 升迁Smashing
    Magazine的性质:案例学习
  • 网址更庞大并不意味着更多的等候时间
  • 优化品质
  • PAJEROWD 膨胀 第一某个 和
    第二局部
  • 谷歌PageSpeed模块
  • 负总责的社交分享链接
  • 第叁次访问的内联关键CSS
  • async 和
    defer属性的相比较
  • 采用字体育赛事件加载字体
  • 应用字体育赛事件再次加载字体
  • 有关字体加载后续——仿文本闪动
  • 播客——通往高品质网址

    1 赞 9 收藏 1
    评论

Javscript部分

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图