整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

(原创整理)淘宝店招和自定义区的CSS样式大全

(原创整理)淘宝店招和自定义区的CSS样式大全

多小伙伴不知道怎么写代码或者修改代码,做出自己想要的效果,所以特意花了点时间 整理了一下比较全的CSS样式。有任何问题或者交流都可以加我个人微信:laiwang16

使用方法:

一:样式表 .miser { font-weight: bold; } /*将样式完整的写入样式表进行调用*/ 格式:属性名:属性值;

二:行内样式

<div style="font-weight: bold;">样式具体应用

字体属性:(font)

大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX、PD

样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常)

行高 {line-height: normal;}(正常) 单位:PX、PD、EM

粗细 {font-weight: bold;}(粗体) lighter;(细体) normal;(正常)

变体 {font-variant: small-caps;}(小型大写字母) normal;(正常)

大小写 {text-transform: capitalize;}(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)

修饰 {text-decoration: underline;}(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)

常用字体: (font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana

背景属性: (background)

色彩 {background-color: #FFFFFF;}

图片 {background-image: url();}

重复 {background-repeat: no-repeat;}

滚动 {background-attachment: fixed;}(固定) scroll;(滚动)

位置 {background-position: left;}(水平) top(垂直);

简写方法 {background:#000 url(..) repeat fixed left top;} /*简写·这个在阅读代码中经常出现,要认真的研究*/

区块属性: (Block) /*这个属性第一次认识,要多多研究*/

字间距 {letter-spacing: normal;} 数值 /*这个属性似乎有用,多实践下*/

对齐 {text-align: justify;}(两端对齐) left;(左对齐) right;(右对齐) center;(居中)

缩进 {text-indent: 数值px;}

垂直对齐 {vertical-align: baseline;}(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;

词间距word-spacing: normal; 数值

空格white-space: pre;(保留) nowrap;(不换行)

显示 {display:block;}(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题) /*display 属性的了解很模糊*/

方框属性: (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序:上右下左

边框属性: (Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;

边框宽度:border-width:; border-color:#;

简写方法border:width style color; /*简写*/

列表属性: (List-style)

类型 list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;

位置list-style-position: outside;(外) inside;

图像 list-style-image: url(..);

定位属性: (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;

clip: rect(12px,auto,12px,auto) (裁切)

一 CSS文字属性:

color : #999999; /*文字颜色*/

font-family : 宋体,sans-serif; /*文字字体*/

font-size : 9pt; /*文字大小*/

font-style:itelic; /*文字斜体*/

font-variant:small-caps; /*小字体*/

letter-spacing : 1pt; /*字间距离*/

line-height : 200%; /*设置行高*/

font-weight:bold; /*文字粗体*/

vertical-align:sub; /*下标字*/

vertical-align:super; /*上标字*/

text-decoration:line-through; /*加删除线*/

text-decoration: overline; /*加顶线*/

text-decoration:underline; /*加下划线*/

text-decoration:none; /*删除链接下划线*/

text-transform : capitalize; /*首字大写*/

text-transform : uppercase; /*英文大写*/

text-transform : lowercase; /*英文小写*/

text-align:right; /*文字右对齐*/

text-align:left; /*文字左对齐*/

text-align:center; /*文字居中对齐*/

text-align:justify; /*文字分散对齐*/

vertical-align属性

vertical-align:top; /*垂直向上对齐*/

vertical-align:bottom; /*垂直向下对齐*/

vertical-align:middle; /*垂直居中对齐*/

vertical-align:text-top; /*文字垂直向上对齐*/

vertical-align:text-bottom; /*文字垂直向下对齐*/

二、CSS边框空白

padding-top:10px; /*上边框留空白*/

padding-right:10px; /*右边框留空白*/

padding-bottom:10px; /*下边框留空白*/

padding-left:10px; /*左边框留空白

三、CSS符号属性:

list-style-type:none; /*不编号*/

list-style-type:decimal; /*阿拉伯数字*/

list-style-type:lower-roman; /*小写罗马数字*/

list-style-type:upper-roman; /*大写罗马数字*/

list-style-type:lower-alpha; /*小写英文字母*/

list-style-type:upper-alpha; /*大写英文字母*/

list-style-type:disc; /*实心圆形符号*/

list-style-type:circle; /*空心圆形符号*/

list-style-type:square; /*实心方形符号*/

list-style-image:url(/dot.gif); /*图片式符号*/

list-style-position: outside; /*凸排*/

list-style-position:inside; /*缩进*/

四、CSS背景样式:

background-color:#F5E2EC; /*背景颜色*/

background:transparent; /*透视背景*/

background-image : url(/image/bg.gif); /*背景图片*/

background-attachment : fixed; /*浮水印固定背景*/

background-repeat : repeat; /*重复排列-网页默认*/

background-repeat : no-repeat; /*不重复排列*/

background-repeat : repeat-x; /*在x轴重复排列*/

background-repeat : repeat-y; /*在y轴重复排列*/

指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/

background-position : top; /*向上对齐*/

background-position : buttom; /*向下对齐*/

background-position : left; /*向左对齐*/

background-position : right; /*向右对齐*/

background-position : center; /*居中对齐*/

五、CSS连接属性:

a /*所有超链接*/a:link /*超链接文字格式*/

a:visited /*浏览过的链接文字格式*/

a:active /*按下链接的格式*/

a:hover /*鼠标转到链接*/

鼠标光标样式:

链接手指 CURSOR: hand

十字体 cursor:crosshair

箭头朝下 cursor:s-resize

十字箭头 cursor:move

箭头朝右 cursor:move

加一问号 cursor:help

箭头朝左 cursor:w-resize

箭头朝上 cursor:n-resize

箭头朝右上 cursor:ne-resize

箭头朝左上 cursor:nw-resize

文字I型 cursor:text

箭头斜右下 cursor:se-resize

箭头斜左下 cursor:sw-resize

漏斗 cursor:wait

光标图案(IE6) p {cursor:url("光标文件名.cur"),text;}

六、CSS框线一览表:

border-top : 1px solid #6699cc; /*上框线*/

border-bottom : 1px solid #6699cc; /*下框线*/

border-left : 1px solid #6699cc; /*左框线*/

border-right : 1px solid #6699cc; /*右框线*/

以上是建议书写方式,但也可以使用常规的方式 如下:

border-top-color : #369 /*设置上框线top颜色*/

border-top-width :1px /*设置上框线top宽度*/

border-top-style : solid/*设置上框线top样式*/

其他框线样式

solid /*实线框*/

dotted /*虚线框*/

double /*双线框*/

groove /*立体内凸框*/

ridge /*立体浮雕框*/

inset /*凹框*/

outset /*凸框*/

七、CSS表单运用:

文字方块

按钮

复选框

选择钮

多行文字方块

下拉式菜单 选项1选项2

八、CSS边界样式:

margin-top:10px; /*上边界*/

margin-right:10px; /*右边界值*/

margin-bottom:10px; /*下边界值*/

margin-left:10px; /*左边界值*/

CSS 属性: 字体样式(Font Style)

序号 中文说明 标记语法

1 字体样式 {font:font-style font-variant font-weight font-size font-family}

2 字体类型 {font-family:"字体1","字体2","字体3",...}

3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}

4 字体风格 {font-style:inherit|italic|normal|oblique}

5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}

6 字体颜色 {color:数值;}

7 阴影颜色 {text-shadow:16位色值}

8 字体行高 {line-height:数值|inherit|normal;}

9 字 间 距 {letter-spacing:数值|inherit|normal}

10 单词间距 {word-spacing:数值|inherit|normal}

11 字体变形 {font-variant:inherit|normal|small-cps }

12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}

13 字体变形 {font-size-adjust:inherit|none}

14 字体 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}】

文本样式(Text Style)

序号 中文说明 标记语法

1 行 间 距 {line-height:数值|inherit|normal;}

2 文本修饰 {text-decoration:inherit|none|underline|overline|line-through|blink}

3 段首空格 {text-indent:数值|inherit}

4 水平对齐 {text-align:left|right|center|justify}

5 垂直对齐 {vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}

6 书写方式 {writing-mode:lr-tb|tb-rl}

背景样式序号

中文说明 标记语法

1 背景颜色 {background-color:数值}

2 背景图片 {background-image: url(URL)|none}

3 背景重复 {background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}

4 背景固定 {background-attachment:fixed|scroll}

5 背景定位 {background-position:数值|top|bottom|left|right|center}

6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}

框架样式(Box Style)

序号 中文说明 标记语法

1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}

2 补  白 {padding:padding-top padding-right padding-bottom padding-left}

3 边框宽度 {border-width:border-top-width border-right-width border-bottom-width border-left-width}  宽度值: thin|medium|thick|数值

4 边框颜色 {border-color:数值 数值 数值 数值}  数值:分别代表top、right、bottom、left颜色值

5 边框风格 {border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}

6 边  框 {border:border-width border-style color}

上 边 框 {border-top:border-top-width border-style color}

右 边 框 {border-right:border-right-width border-style color}

下 边 框 {border-bottom:border-bottom-width border-style color}

左 边 框 {border-left:border-left-width border-style color}

7 宽  度 {width:长度|百分比| auto}

8 高  度 {height:数值|auto}

9 漂  浮 {float:left|right|none}

10 清  除 {clear:none|left|right|both}

分类列表序号

中文说明 标记语法

1 控制显示 {display:none|block|inline|list-item}

2 控制空白 {white-space:normal|pre|nowarp}

3 符号列表 {list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}

4 图形列表 {list-style-image:URL}

5 位置列表 {list-style-position:inside|outside}

6 目录列表 {list-style:目录样式类型|目录样式位置|url}

7 鼠标形状 {cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}

----------------------------------------- End ------------------------------------------

欢迎来交流:个人qq 635850491

微信公众号:laiwan16

全国电商设计师排名:762

http://alyssj.90sheji.com

/新浪微博认证账号:故事设计师

进入正文之前有必要说明下:艺灵分享的教程主要以装修经验为主,是为了解决看官在实际装修中遇到的代码问题和突破思维瓶颈。至于店铺收益这个问题不在范围之内,谢谢理解。

今天这篇文章主要讲的是:装修阿里巴巴店铺时,如何绕过过滤机制,成功让css显示出来

如果按正常流程来讲,这篇文章需要到一个月后才能发布。但由于某些原因,所以提前发布下,也希望看官在看完文章后能学到点什么。

一、阿里巴巴的店铺装修已经不像以前那么自由了

相对于淘宝和天猫装修而言,折腾阿里巴巴店铺的看官非常少。

早在16年6月的时候,艺灵曾写过一篇有关阿里巴巴装修的教程文章--《帮您节省千元的阿里巴巴1688店铺装修教程》

文章主要介绍了:阿里巴巴的装修方法以及可以写自定义css的事情

就在不久前,突然有不少小伙伴向艺灵反应代码失效的问题。经亲自验证后才发现:原来阿里巴巴店铺也开始走淘宝的老路了,什么绝对定位属性、自定义css啥的都已经被列到了装修黑名单中!

二、时效性

虽然现在的阿里巴巴在装修代码上已经做了过滤检测,但我们还是有办法绕过过滤的。

如果看官之前一直有看艺灵写的文章的话就会发现一个有趣的现象,那就是:“每次公布的破解方法很快就失效了......”这个确实有点尴尬,虽然本文是写阿里巴巴的方法,相信在很短的时间内,本文提供的方法也会被修复。所以呢,看官需要认真看下面的每一个字,因为,因为,内有乾坤!

三、破解之道

对于我们这群码农来说,谁还不会个html转义字符Unicode编码啊!想想之前玩淘宝的时候,很多大神都用这两把刷子得到了想要的结果!

咱们言归正传。对于html转义字符,看官只需要记住以下两个即可!&lt;&gt;

&lt;对应的是html代码中的<,也就是左尖括号;

&gt;对应的是html代码中的>,也就是右尖括号。

3.1、html转义字符

还是来举一个例子吧!代码如下:

&lt;div class="box" style="position:relative;color:#f00"&gt;这是一个div标签,文字是红色。&lt;/div&gt;

下面我们将上面的代码保存到阿里巴巴店铺中来验证下吧。登录步骤就省略了,进入店铺后,鼠标放到任意一个自定义内容区的右上角,然后点击编辑,接着就直接把代码粘贴进来,然后点击确定即可。完整流程图:


在自定义内容区中直接粘贴代码

此时点击预览可以看到效果了,效果如图:

预览时代码没有过滤,效果显示正常

3.2、为什么不点击源码

如果看官习惯了其他平台的装修流程的话,肯定会问一个问题:“为什么不点击源码,然后在源码模式下粘贴代码”?

这么说吧,其实最早这个方法是可行了。就在艺灵写完本文开头提到的那篇文章后不久,就变成现在就这样了。在源代码模式下粘贴是没有多大作用的。

我不信!

不信?上图:

现在是源代码模式下粘贴代码

看官注意看我粘贴进去的代码。

粘贴后点击确定,然后在预览页面看下效果。效果如图:

预览时看似正常

哟,有效果,代码没有屏蔽,鉴定完毕!

看官确定?要不来看看源码?上图:

看源码时才发现部分css属性已被过滤掉了

怎么样,有没有发现相对定位的属性被过滤掉了??

3.3、原来这么简单!

好吧!那我现在知道了:就是在编辑模式下将左右尖括号转义下,然后再粘贴代码就可以了,原来这么简单!

如果看官有这种想法的话,艺灵要恭喜看官了:你咋不上天呢!有本事你写个css内部样式表

30秒后

不科学啊,怎么又被过滤了,这什么破原理......如图:

编辑模式下粘贴内联样式表会被直接过滤

怎么样,是不是有点懵?

3.4、html转十进制

其实绕过style样式表的方法有很多,艺灵就再介绍一种,算是抛砖引玉下吧。至于剩下的一些方法,此处不便直说。不要问为什么,因为你知道的太多了!会被......

刚我们将左右尖括号进行了字符转义,下面我们还可以转成十进制

左尖括号&lt;转义后就是&#60;

右尖括号&gt;转义后就是&#62;

好,转义完成后的代码如下:

&#60;style&#62;.box{position:relative;background:#ccc}&#60;/style&#62;

还是同样的操作,直接复制上面的代码,然后扔到自定义模块中即可。如图:

将左右尖括号转成十进制即可

怎么样,这回css样式表成功显示了吧!

四、总结

为了安全起见,我们可以用十进制来修改我们的源码。至于上面的演示代码,艺灵已整理好,有兴趣的看官可以直接复制后放到店铺中看下效果。

&#60;div class="box" style="position:relative;color:#f00"&#62;这是一个div标签,文字是红色。&#60;/div&#62;

&#60;style&#62;.box{position:relative;background:#ccc}&#60;/style&#62;

上面的代码最终效果如图:

最终效果是灰色背景的盒子中显示红色字

五、视频

下面艺灵就本文的方法录制了一个小视频,可以看下里面文字总结。由于系统在pc端对视频不友好,所以想看视频的看官用手机访问即可。

灏 大淘宝技术 2024年07月15日 18:04 浙江




最近做了一些移动端页面的首帧优化的工作,有很多心得和感受,其中有很多共性的东西,总结成一篇文章希望可以帮助到更多业务,也希望引起读者一起讨论。




为何要做首帧优化


作为程序匠人,一直在努力追求做一款好的产品,打磨各个细节,做好用户体验,而首帧是用户接触到产品的第一个页面,是体验的重中之重。也正因是产品的第一个页面,转化率接近100%,从ROI的角度来说,做好首帧优化也是一个很划算的deal。


做好首帧优化,至少可以带来以下好处:

  1. 建立用户好感度:良好的第一印象,提升品牌形象
  2. 提升业务转化率:提升业务曝光率、点击率、带来更好的业务结果
  3. 更小的资源消耗、减少成本:更长的首帧启动时间意味着更多的资源消耗,更多的成本投入。优化首帧可以减少一些不必要的资源开销和损耗,节省技术成本。


首帧口径和衡量标准


?口径


做优化前我们需要先想想,用户对首帧体验预期是怎样的?首帧定义是什么,起始范围是什么。不同的口径会影响我们的指标,设计方案,工作量。定义了口径之后,我们可以确定优化事项范围以及边界。


Loading图:

即开始出现loading、展现灰底图或是页面框架图,如果这页面展示也比较久的话,则说明用户交互出现卡顿、假死,迟迟没收到反馈,用户交互被阻塞,属于严重影响用户体验的行为。所以建议在展示骨架图之前,除了framework以外,不要有io、网络等耗时的前置依赖,也不需要有中转页的行为逻辑。

内容主体呈现:

即页面大部分的内容已经渲染出来,用户可以得到足够的信息,这是一个比较符合用户体感的口径,大多数业务选取的就是这个口径。不过不同业务对于“大部分”,“主体”的定义有所不同,业务可以结合自身需求进行合理选择:

  • 对于“主体”定义:如头图、标题、相机取景器、
  • 对于“大部分”定义:如按照展示“面积”计算的,完整度80%、90%、100%(有一些分页加载策略的业务场景)


页面可交互:

这个阶段表示页面已经完全渲染完成,并且用户可以进一步交互,如点赞、分享、收藏、加购等行为。


?衡量标准


绝对耗时:

指定口径下的绝对耗时时长,单位一般是ms,多是用于单机线下的验证和比较,不同机型之间、不同场景下的差异较大,如高端机与低端机之间的差别可以相差好几倍,如要反应样本的整体性,多用分位值或者秒开率来衡量。


分位值/秒开率:

  • 多用于线上观测,反应样本的整体性和趋势,长尾数据、极端case不容易被忽略
  • 应该让P90P95分位值,接近于中位数,让整体样本的差异性小一些


取值标准:

  • 按照经验值
    • 绝对耗时<500ms,一般情况下页面切换动画300ms,所以页面首帧500ms以内渲染完成,能够有一个较好的体验,google官方也建议页面尽可能在500ms以内完成冷启动。
    • 秒开率>95%+,即95分位<=1000ms

  • 参考头部竞品
    • 能窥探出同等业务复杂度下,普遍用户能接受的一个范围
    • 通过屏幕录制方式可获取

  • 标准也并不是一成不变的,随着硬件性能不断提升、framework不断优化、亦或是业务形态的变化,而不断调整。


如何分析排查性能问题(以Android为例)


?了解现状


首先要掌握自身产品以及行业竞品的首帧数据,了解在行业中的一个排名情况,再决策是否要进一步做优化,做到什么样的程度。为了保证自身和竞品采用的同一种口径获取首帧耗时,我们这边采用了录屏的方式。


录屏分析方案:在同一台手机上使用特定帧率录屏(如30fps,即1帧33ms),再通过数帧数的方式来计算出首帧耗时的时间,录屏的越高越精确。


自动化脚本方案:

通过自动化录屏脚本工具、使用模拟点击 + OCR文字识别/图像识别的方案,识别首/尾帧、进而自动化生成耗时的中位数、平均值。


?了解原理


在分析问题之前,我们要搞清楚系统是如何将首帧绘制在屏幕上的,了解了这些我们才能针对性的分析问题。


  • Activity启动流程:https://juejin.cn/post/7063699032144609287
  • View渲染流程:
    • https://blog.csdn.net/u012216131/article/details/115704825
    • https://www.cnblogs.com/mysweetAngleBaby/p/15549126.html


?使用性能分析工具


  1. 官方工具:

从代码、资源等细粒度的维度(如方法级别、事件级别),来定量分析程序对CPU、内存、网络IO等核心计算资源的消耗情况,可以比较完整、全面的分析启动过程,但这种方式得到的数据比较细碎、散点,需要经过一定的归纳、合并才能得到一个具体可实施的方案。

  • TraceView:Instrumentation 模式下采用 AddListener 的方式注册 MethodError、MethodExited、MethodUnwind 的回调来采集方法起止时间;Sampling 模式下使用一个 SamplingThread 定时主权线程堆栈,通过对此的堆栈对比近似确定函数的进入和退出时间;虽然是官方提供的工具,但两种模式本身都存在比较大的性能损耗,可能带偏优化方向。
  • CPU Profiler:整体通过 JVM Agent 实现,具有完成方法调用栈输出,且支持 Java、C/C++方法的耗时检测,上手比较简单,但其同样存在性能损耗较大的问题,且一般仅用于 debug 包,release 包需要额外添加 debuggable 的配置。
  • Systrace:基于 Android 系统层的 Atrace 实现,Atrace 又基于 Linux kernal 层的 ftrace 实现,ftrace 在内核中通过函数插桩获取耗时;其自身性能损耗比较低、数据源丰富且具有较好的可视化页面,但其默认监控点较少,在 APP 自有代码中的监控点需要手动加入,比较麻烦。


  1. 二方/三方工具:

如果我们的页面是通过第二/三方的页面框架所构建,如weex/rn/flutter等框架。我们可以通过第二方框架提供的性能分析工具、插件去分析和归因。

  • rn:https://reactnative.dev/docs/performance
  • flutter:https://docs.flutter.dev/perf/ui-performance
  • compose ui: https://developer.android.com/develop/ui/compose/performance

  1. 业务自定义工具:

有时为了弥补官方工具火焰图太细碎、难以聚类、需要花费更多时间去分析和追踪,我们可以根据业务视角、使用自定义的业务阶段/流程,去粗粒度的去分析各个阶段的耗时。

  • 埋点/日志工具:核心链路节点performance日志,如:页面视图创建、网络耗时、数据处理、渲染
  • 切面/插装代码工具:面向常用对象/事务/流程,对业务无侵入式的观测和统计


常见的优化方案和策略


分析完原因后,我们需要对不同原因给出优化方案,首帧优化的核心思想用一句话总结是:在尽可能在短的时间里准备好首帧渲染所需要最小的资源模型。围绕“最短时间”和“最小的模型”两个中心思想下,总结了一些常见的优化策略:


?预加载/缓存策略


在前置页面的合理时机(一般是闲时)提前获取数据、下载资源,并解析,然后缓存到内存或者磁盘里,以便后置页面快速读取数据和资源。


这个策略可能带来以下副作用:

  • 提前获取的数据可能会引发服务端qps暴增,带来额外资源开销,和影响稳定性。
  • 如果页面点击率不高的话,缓存命中率会比较低,造成资源浪费的问题。
  • 可能会造成前置页面的性能受损。
  • 这个策略结合特定人群一起使用会更好一些。


?延迟初始化(懒加载)


与首帧无关的代码逻辑、资源可以在首帧渲染后进行初始化,具体的初始化时机可以在使用时再初始化,如某些二级页面的创建、多余tab的创建等。


?并行处理&异步化


并行处理:充分利用多核CPU,通过多线程并行处理耗时的任务,提升CPU的负荷。如容器初始化和数据请求解析可以同时进行。


异步化:一些比较耗时、IO任务,不要占用宝贵的主线程资源。


?View渲染优化


Android里面ViewTree构建和渲染是比较耗时过程的,如下:

  • 将 xml 文件解析到内存中 XmlResourceParser 的 IO 过程;
  • 根据 XmlResourceParser 的 Tag name 获取 Class 的 Java 反射过程;
  • 创建 View 实例,最终生成 View 树;
  • View渲染:layout、measure、draw

优化方案:

  • 层级优化/布局优化 (merge嵌套),减少布局层级,减少递归深度
  • 使用ViewStub,延迟按需inflate,降低inflate耗时
  • x2c:xml转code构建
  • 异步inflate,异步ui构建



?数据借用


为了加快数据获取,我们可以从前一个页面借用一部分数据过来将主体内容做填充,随后再用真实数据刷新。这个方案多适用于列表进入详情的场景。


这里的数据不仅包含文字和图片,也可以延伸到媒体播放器、camera取景器等其他一些文件流、数据流,甚至可以是widget组件(共享元素动画)。

?分块渲染


如果页面元素比较多,数据量比较大,一次性请求加载的时间比较长,这个时候我们可以通过分块的方式,将大页面拆成若干个小页面模块、将服务端接口拆成若干个小接口,各个页面模块独立渲染。可以有效降低服务端RT耗时,以及页面渲染耗时。



?骨架图优化


使用骨架图作为打底图和纯白底图相比,有了布局样式等信息,更加接近于首帧的效果,正式数据刷新时,页面也不会出现明显刷新,体验比较好。


线上验收


线下的优化,并不意味着线上真实用户也能同步看到优化的结果,因为业务路径的差异、机型的差异,你线下的优化可能不具备普遍性,所以需要线上真实结果的反馈。


  1. 较全面信息的数据大盘建立:

包含:版本、设备分、业务场景、机型、时间等尽可能多的数据维度的数据大盘,可以尽量还原优化or劣化的信息全貌,提供更多的归因信息。


  1. 分位值(数据聚合类别):

长尾数据、小众case往往容易被整体数据给覆盖,不足以引起重视,为了我们应该分别分析中位数、分位数。


  1. AB实验:

这样做不仅能控制变量确保优化项的严格有效,还能借此来观察性能优化所带来的业务指标收益,这些都可以作为规划后续启动优化方向的参考指导。


防劣化


人无完人,人都会失误犯错,绝对不能把系统性能交给某一个人身上,一个人犯错概率高,一群人都犯错的概率低,应该交给一群人共同协作的机制和流程。


防劣化相比于优化是更能持久有益的,所以更应该在较早期建立起防劣化机制:

  • 准入机制:
    • 禁止在启动核心阶段添加代码,一切代码添加需要走审查流程,启动阶段包含:
    • Windvane.execute,
    • Activity.onCreate,
    • Fragment.onCreate/onCreateView
    • 审查机制:提审/测试/核准/灰度/上线

  • 遵循严格规范
    • 代码约束
    • 框架约束
    • 检查工具
    • CR规范

  • 线上监控
    • 大盘监控:趋势分析
    • 分阶段监控:归因分析
    • 监控告警:及时止损


结语


?持续迭代


首帧优化并非一蹴而就,而是一个需要持续迭代与打磨的过程,在初期阶段优化空间相对较大,只需要投入一些不多的资源,即可看到较大的收益,但随着优化不断深入,到了中期阶段,就需要有相当程度的投入,去攻坚各个难点,聚少成多,才能看到收益。后期随着业务越来越复杂,分支越来越多,要做防劣化工作,同时也要和业务一起做好精细化管理,将有限的资源,分配给最优先级的业务,要做好ab实验管控、优先级管理、及时下线等。


?做好复杂度管理


为了将达到最优的启动速度,我们运用了各式各样的策略,将时间和空间塞得满满的,但是这改变了原来的常规流程,带来了额外代码复杂度提升,比如预加载策略,后面维护同学需要考虑,预加载失败以及成功两种情况,又或者是缓存策略,后面维护的同学需要考虑缓存命中、不命中的情况,如果不断使用if堆积代码,那代码最终将无法维护。所以我们需要通过框架来管理复杂度,尽量让业务层无感知。比如数据中间层,业务无需关心数据是否来自缓存还是实时请求,拿来使用即可。


?全局意识


通常我们以启动速度来衡量启动性能。为了提升启动速度,我们可能会把一些原本在启动阶段执行的任务进行延后或者按需,这种方式能够有效优化启动速度,但同时也可能损害后续的使用体验。比如,如果将某个启动阶段的后台任务延后到后续使用时,如果首次使用是在主线程,则可能会造成使用卡顿。因此,我们在关注启动性能的同时,也需要关注其他可能影响的指标。性能上我们需要有一个能体现全局性能的宏观指标,以防止局部最优效应。


参考资料


  • Profile性能追踪工具集:
  • https://developer.android.com/studio/profile
  • Android Performance 指南:
  • https://developer.android.com/topic/performance/overview
  • RN Performance 指南:
  • https://reactnative.dev/docs/performance
  • Flutter Performance 指南:
  • https://docs.flutter.dev/perf/ui-performance
  • Android Activity的创建流程:
  • https://juejin.cn/post/7063699032144609287
  • View 的渲染机制:
  • https://blog.csdn.net/u012216131/article/details/115704825
  • Android 底层渲染原理:
  • https://www.cnblogs.com/mysweetAngleBaby/p/15549126.html
  • 抖音Android启动优化之理论和工具篇:
  • https://mp.weixin.qq.com/s?__biz=MzI1MzYzMjE0MQ==&mid=2247491335&idx=1&sn=e3eabd9253ab2f83925af974db3f3072


团队介绍


我们是淘天集团-内容技术团队,专注于推动淘宝内容生态和电商体验的深度融合。我们致力于为全球用户提供丰富、多样性、高品质的购物内容体验,旨在通过技术创新,更好地连接用户和商品,以提升用户的购物满意度和平台的商业价值。通过尖端技术提升内容创作、分发与消费的效率,赋能内容创作者、商家与消费者,构建一个繁荣、健康、可持续发展的内容生态圈。