整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多小伙伴不知道怎么寫代碼或者修改代碼，做出自己想要的效果，所以特意花了點時間 整理了一下比較全的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轉義字符，看官只需要記住以下兩個即可！<和>。
<對應的是html代碼中的<，也就是左尖括號；
>對應的是html代碼中的>，也就是右尖括號。
3.1、html轉義字符
還是來舉一個例子吧！代碼如下：
<div class="box" style="position:relative;color:#f00">這是一個div標簽，文字是紅色。</div>
下面我們將上面的代碼保存到阿里巴巴店鋪中來驗證下吧。登錄步驟就省略了，進入店鋪后，鼠標放到任意一個自定義內容區的右上角，然后點擊編輯，接著就直接把代碼粘貼進來，然后點擊確定即可。完整流程圖：
在自定義內容區中直接粘貼代碼
此時點擊預覽可以看到效果了，效果如圖：
預覽時代碼沒有過濾，效果顯示正常
3.2、為什么不點擊源碼
如果看官習慣了其他平臺的裝修流程的話，肯定會問一個問題：“為什么不點擊源碼，然后在源碼模式下粘貼代碼”？
這么說吧，其實最早這個方法是可行了。就在藝靈寫完本文開頭提到的那篇文章后不久，就變成現在就這樣了。在源代碼模式下粘貼是沒有多大作用的。
我不信！
不信？上圖：
現在是源代碼模式下粘貼代碼
看官注意看我粘貼進去的代碼。
粘貼后點擊確定，然后在預覽頁面看下效果。效果如圖：
預覽時看似正常
喲，有效果，代碼沒有屏蔽，鑒定完畢！
看官確定？要不來看看源碼？上圖：
看源碼時才發現部分css屬性已被過濾掉了
怎么樣，有沒有發現相對定位的屬性被過濾掉了？？
3.3、原來這么簡單！
好吧！那我現在知道了：就是在編輯模式下將左右尖括號轉義下，然后再粘貼代碼就可以了，原來這么簡單！
如果看官有這種想法的話，藝靈要恭喜看官了：你咋不上天呢！有本事你寫個css內部樣式表！
30秒后
不科學啊，怎么又被過濾了，這什么破原理......如圖：
編輯模式下粘貼內聯樣式表會被直接過濾
怎么樣，是不是有點懵？
3.4、html轉十進制
其實繞過style樣式表的方法有很多，藝靈就再介紹一種，算是拋磚引玉下吧。至于剩下的一些方法，此處不便直說。不要問為什么，因為你知道的太多了！會被......
剛我們將左右尖括號進行了字符轉義，下面我們還可以轉成十進制。
左尖括號<轉義后就是<；
右尖括號>轉義后就是>。
好，轉義完成后的代碼如下：
<style>.box{position:relative;background:#ccc}</style>
還是同樣的操作，直接復制上面的代碼，然后扔到自定義模塊中即可。如圖：
將左右尖括號轉成十進制即可
怎么樣，這回css樣式表成功顯示了吧！
為了安全起見，我們可以用十進制來修改我們的源碼。至于上面的演示代碼，藝靈已整理好，有興趣的看官可以直接復制后放到店鋪中看下效果。
<div class="box" style="position:relative;color:#f00">這是一個div標簽，文字是紅色。</div>
<style>.box{position:relative;background:#ccc}</style>
上面的代碼最終效果如圖：
最終效果是灰色背景的盒子中顯示紅色字
下面藝靈就本文的方法錄制了一個小視頻，可以看下里面文字總結。由于系統在pc端對視頻不友好，所以想看視頻的看官用手機訪問即可。
灝 大淘寶技術 2024年07月15日 18:04 浙江
最近做了一些移動端頁面的首幀優化的工作，有很多心得和感受，其中有很多共性的東西，總結成一篇文章希望可以幫助到更多業務，也希望引起讀者一起討論。
為何要做首幀優化
作為程序匠人，一直在努力追求做一款好的產品，打磨各個細節，做好用戶體驗，而首幀是用戶接觸到產品的第一個頁面，是體驗的重中之重。也正因是產品的第一個頁面，轉化率接近100%，從ROI的角度來說，做好首幀優化也是一個很劃算的deal。
做好首幀優化，至少可以帶來以下好處：
首幀口徑和衡量標準
做優化前我們需要先想想，用戶對首幀體驗預期是怎樣的？首幀定義是什么，起始范圍是什么。不同的口徑會影響我們的指標，設計方案，工作量。定義了口徑之后，我們可以確定優化事項范圍以及邊界。
Loading圖：
即開始出現loading、展現灰底圖或是頁面框架圖，如果這頁面展示也比較久的話，則說明用戶交互出現卡頓、假死，遲遲沒收到反饋，用戶交互被阻塞，屬于嚴重影響用戶體驗的行為。所以建議在展示骨架圖之前，除了framework以外，不要有io、網絡等耗時的前置依賴，也不需要有中轉頁的行為邏輯。
內容主體呈現：
即頁面大部分的內容已經渲染出來，用戶可以得到足夠的信息，這是一個比較符合用戶體感的口徑，大多數業務選取的就是這個口徑。不過不同業務對于“大部分”，“主體”的定義有所不同，業務可以結合自身需求進行合理選擇：
頁面可交互：
這個階段表示頁面已經完全渲染完成，并且用戶可以進一步交互，如點贊、分享、收藏、加購等行為。
絕對耗時：
指定口徑下的絕對耗時時長，單位一般是ms，多是用于單機線下的驗證和比較，不同機型之間、不同場景下的差異較大，如高端機與低端機之間的差別可以相差好幾倍，如要反應樣本的整體性，多用分位值或者秒開率來衡量。
分位值/秒開率：
取值標準：
如何分析排查性能問題（以Android為例）
首先要掌握自身產品以及行業競品的首幀數據，了解在行業中的一個排名情況，再決策是否要進一步做優化，做到什么樣的程度。為了保證自身和競品采用的同一種口徑獲取首幀耗時，我們這邊采用了錄屏的方式。
錄屏分析方案：在同一臺手機上使用特定幀率錄屏（如30fps，即1幀33ms），再通過數幀數的方式來計算出首幀耗時的時間，錄屏的越高越精確。
自動化腳本方案：
通過自動化錄屏腳本工具、使用模擬點擊 + OCR文字識別/圖像識別的方案，識別首/尾幀、進而自動化生成耗時的中位數、平均值。
在分析問題之前，我們要搞清楚系統是如何將首幀繪制在屏幕上的，了解了這些我們才能針對性的分析問題。
從代碼、資源等細粒度的維度（如方法級別、事件級別），來定量分析程序對CPU、內存、網絡IO等核心計算資源的消耗情況，可以比較完整、全面的分析啟動過程，但這種方式得到的數據比較細碎、散點，需要經過一定的歸納、合并才能得到一個具體可實施的方案。
如果我們的頁面是通過第二/三方的頁面框架所構建，如weex/rn/flutter等框架。我們可以通過第二方框架提供的性能分析工具、插件去分析和歸因。
有時為了彌補官方工具火焰圖太細碎、難以聚類、需要花費更多時間去分析和追蹤，我們可以根據業務視角、使用自定義的業務階段/流程，去粗粒度的去分析各個階段的耗時。
常見的優化方案和策略
分析完原因后，我們需要對不同原因給出優化方案，首幀優化的核心思想用一句話總結是：在盡可能在短的時間里準備好首幀渲染所需要最小的資源模型。圍繞“最短時間”和“最小的模型”兩個中心思想下，總結了一些常見的優化策略：
在前置頁面的合理時機（一般是閑時）提前獲取數據、下載資源，并解析，然后緩存到內存或者磁盤里，以便后置頁面快速讀取數據和資源。
這個策略可能帶來以下副作用：
與首幀無關的代碼邏輯、資源可以在首幀渲染后進行初始化，具體的初始化時機可以在使用時再初始化，如某些二級頁面的創建、多余tab的創建等。
并行處理：充分利用多核CPU，通過多線程并行處理耗時的任務，提升CPU的負荷。如容器初始化和數據請求解析可以同時進行。
異步化：一些比較耗時、IO任務，不要占用寶貴的主線程資源。
Android里面ViewTree構建和渲染是比較耗時過程的，如下：
優化方案：
為了加快數據獲取，我們可以從前一個頁面借用一部分數據過來將主體內容做填充，隨后再用真實數據刷新。這個方案多適用于列表進入詳情的場景。
這里的數據不僅包含文字和圖片，也可以延伸到媒體播放器、camera取景器等其他一些文件流、數據流，甚至可以是widget組件（共享元素動畫）。
如果頁面元素比較多，數據量比較大，一次性請求加載的時間比較長，這個時候我們可以通過分塊的方式，將大頁面拆成若干個小頁面模塊、將服務端接口拆成若干個小接口，各個頁面模塊獨立渲染。可以有效降低服務端RT耗時，以及頁面渲染耗時。
使用骨架圖作為打底圖和純白底圖相比，有了布局樣式等信息，更加接近于首幀的效果，正式數據刷新時，頁面也不會出現明顯刷新，體驗比較好。
線上驗收
線下的優化，并不意味著線上真實用戶也能同步看到優化的結果，因為業務路徑的差異、機型的差異，你線下的優化可能不具備普遍性，所以需要線上真實結果的反饋。
包含：版本、設備分、業務場景、機型、時間等盡可能多的數據維度的數據大盤，可以盡量還原優化or劣化的信息全貌，提供更多的歸因信息。
長尾數據、小眾case往往容易被整體數據給覆蓋，不足以引起重視，為了我們應該分別分析中位數、分位數。
這樣做不僅能控制變量確保優化項的嚴格有效，還能借此來觀察性能優化所帶來的業務指標收益，這些都可以作為規劃后續啟動優化方向的參考指導。
防劣化
人無完人，人都會失誤犯錯，絕對不能把系統性能交給某一個人身上，一個人犯錯概率高，一群人都犯錯的概率低，應該交給一群人共同協作的機制和流程。
防劣化相比于優化是更能持久有益的，所以更應該在較早期建立起防劣化機制：
結語
首幀優化并非一蹴而就，而是一個需要持續迭代與打磨的過程，在初期階段優化空間相對較大，只需要投入一些不多的資源，即可看到較大的收益，但隨著優化不斷深入，到了中期階段，就需要有相當程度的投入，去攻堅各個難點，聚少成多，才能看到收益。后期隨著業務越來越復雜，分支越來越多，要做防劣化工作，同時也要和業務一起做好精細化管理，將有限的資源，分配給最優先級的業務，要做好ab實驗管控、優先級管理、及時下線等。
為了將達到最優的啟動速度，我們運用了各式各樣的策略，將時間和空間塞得滿滿的，但是這改變了原來的常規流程，帶來了額外代碼復雜度提升，比如預加載策略，后面維護同學需要考慮，預加載失敗以及成功兩種情況，又或者是緩存策略，后面維護的同學需要考慮緩存命中、不命中的情況，如果不斷使用if堆積代碼，那代碼最終將無法維護。所以我們需要通過框架來管理復雜度，盡量讓業務層無感知。比如數據中間層，業務無需關心數據是否來自緩存還是實時請求，拿來使用即可。
通常我們以啟動速度來衡量啟動性能。為了提升啟動速度，我們可能會把一些原本在啟動階段執行的任務進行延后或者按需，這種方式能夠有效優化啟動速度，但同時也可能損害后續的使用體驗。比如，如果將某個啟動階段的后臺任務延后到后續使用時，如果首次使用是在主線程，則可能會造成使用卡頓。因此，我們在關注啟動性能的同時，也需要關注其他可能影響的指標。性能上我們需要有一個能體現全局性能的宏觀指標，以防止局部最優效應。
參考資料
團隊介紹
我們是淘天集團-內容技術團隊，專注于推動淘寶內容生態和電商體驗的深度融合。我們致力于為全球用戶提供豐富、多樣性、高品質的購物內容體驗，旨在通過技術創新，更好地連接用戶和商品，以提升用戶的購物滿意度和平臺的商業價值。通過尖端技術提升內容創作、分發與消費的效率，賦能內容創作者、商家與消費者，構建一個繁榮、健康、可持續發展的內容生態圈。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
