部是女性的第二特征，在某種意義上，它代表著女性的美。很多女性都希望自己的胸部飽滿堅挺，曲線曼妙。

但有一群女孩卻因為「胸大」而煩惱，買不到合適內(nèi)衣在她們的煩惱清單中根本不值一提。

從青春期起，她們中很多人就要忍受同齡人異樣的眼光，遭受過不同程度的性騷擾，社會偏見一直伴隨著她們成長。

一度她們希望通過做縮胸手術(shù)來改變這些偏見。

我們和兩位 G 罩杯以上的女孩聊了聊，面對自己的「大胸」，她們做了不同的選擇。

燕子， H 罩杯， 29 歲

24 歲的燕子進(jìn)入電梯，在電梯按鈕上摁數(shù)字「2」，電梯緩緩上行。

這是她第一次進(jìn)美容院，心里有些忐忑。電梯門開，燕子看到整潔干凈的大廳，休息區(qū)里面放置黑色皮沙發(fā)，暖黃色的燈光讓燕子緊張的心稍稍放松了一些。

跟著服務(wù)人員指引，燕子見到醫(yī)生：「我想縮胸，不想胸部那么大。」她對醫(yī)生說。

燕子向我回憶起她第一次進(jìn)入整容院的經(jīng)歷。過多的細(xì)節(jié)燕子不記得了，只是醫(yī)生的一句話：「縮胸手術(shù)費(fèi)用五六萬，比隆胸還貴。」

她暫時退縮了。

燕子剛剛大專畢業(yè)時

▼

圖片來源：受訪者供圖

「90 H」，「胸罩脫下來，乳房快下垂到肚臍的位置」，燕子這樣描述自己的胸部。

她帶著超重的乳房生活了 20 多年。從青春期開始，胸大的「煩惱」一直沒停過。

12 歲的年紀(jì)，其他女孩的胸部只是微微隆起，燕子已經(jīng)有 B 罩杯。

女孩們偷偷地給燕子起外號：「大奶牛」、「童顏巨乳」。

這些看似的玩笑話，讓青春期的燕子變得敏感。為了看上去和別的女孩一樣，她把胸罩穿在里面，再裹上一個小背心，「這樣看上去胸部會小一些」。

隨著成長，燕子甚至偏激地認(rèn)為胸大就是一種錯。

小學(xué)畢業(yè)的時候，燕子坐火車沒有座位，她在過道里站著。一個三十多歲的男性趁下車擁擠，抓了她的胸。燕子的腦袋當(dāng)場就懵了，覺得一陣惡心。

隨著身體發(fā)育，燕子的胸部越來越大，騷擾也越來越多。初中畢業(yè)去親戚家開的店里幫忙，一群成年男性圍著她，對她開玩笑：「胸那么大，真的假的？」、「不會是被別人摸大的吧。」

燕子想反抗，但她的反駁在這些男人的眼里，顯得更加輕佻與放蕩。

讀大學(xué)后，因胸部帶來的噩夢也沒有結(jié)束。

在讀書的時候，燕子有兩段印象深刻的戀愛。

在第一段戀愛中，燕子真心喜歡那個男孩。懷著對戀愛的憧憬，燕子全身心投入到感情里。這段感情維持的很短，一個月后，分手了。

回憶起與前男友相處的點(diǎn)滴，燕子隱約覺得男孩和她談戀愛只是喜歡她的身體，尤其是胸。

「是不是除了胸大，我一無是處。」燕子那一刻既憤怒又無力。

第二段感情是在畢業(yè)的時候，燕子認(rèn)識了一個學(xué)校里的男孩。因為一些事情，燕子惹他不開心。為了報復(fù)，男孩把她的不雅照發(fā)在社交網(wǎng)絡(luò)上。

她的胸部在那張照片上顯得格外突兀。那段時間，燕子成了學(xué)校里的「名人」。

提起燕子沒人知道，但要說那個大胸女孩，人人都知道。

臨近畢業(yè)的那兩個月，燕子時不時冒出輕生的念頭。

走在校園里，總覺得有人在對她指指點(diǎn)點(diǎn)，她不敢抬頭走路。這件事讓她的心境跌落谷底。

直到現(xiàn)在，燕子仍然認(rèn)為這件事情成了她自卑的源頭。「若不是胸，我的人生肯定不會是現(xiàn)在這樣。」燕子說。

畢業(yè)那年，燕子沒有做成縮胸手術(shù)。但這個念頭從來沒有消失，「每周都有好幾天想要去做手術(shù)，尤其是走在路上被別人議論的時候。」

即便是現(xiàn)在，她去便利店買水，店里老板都會說些輕浮的話：「你奶子真大。」

2019 年 4 月，燕子又一次來到整形醫(yī)院咨詢縮胸的事情，醫(yī)生對她說：「最好生育結(jié)束，給孩子哺乳完再考慮。」

燕子現(xiàn)在的樣子

▼

圖片來源：受訪者供圖

還未生育的燕子有點(diǎn)猶豫，但她對我說：「別人說我自私也罷，但我真的很想做縮胸手術(shù)。」

「為什么沒做？」我問。

「一方面可能是因為錢，縮胸手術(shù)真的很貴。」燕子還說了另一個原因：「害怕，擔(dān)心出意外。」

魏坤 ，J 罩杯 ，31歲

魏坤的青春期，伴隨著胸部瘋狂生長。

16 歲年紀(jì)，她的胸部已經(jīng)長到 E 罩杯。

別的女孩可以穿漂亮的吊帶衫，可以在游泳池穿著泳衣肆意展現(xiàn)好看的身材，也可以在 400 米的塑膠跑道上盡情奔跑。這些簡單的小事，魏坤從來沒做過。

22 歲的時候，魏坤的胸部長到了 J 罩杯。

「大胸」這件事給魏坤帶來無盡的苦惱。因為胸部過大，她被同學(xué)稱做「大咪咪」。

魏坤在《超級演說家》上的自述

▼

圖片來源：視頻截圖

中學(xué)的時候，她曾被一個男孩圍堵。男孩用蠻力把她拖到一個小黑屋，試圖猥褻她。魏坤心里充滿了恐懼，使勁掙脫，踹了男生一腳，才僥幸逃脫。

這件事情讓魏坤意識到，她的胸已經(jīng)成為某些不懷好意男性眼里的獵物。

18 歲的時候，她就開始在網(wǎng)絡(luò)上搜索「縮胸」相關(guān)的信息。「這是一個冷門手術(shù)。」魏坤說：「當(dāng)時網(wǎng)絡(luò)上可靠的信息幾乎沒有。」

盡管如此，想變成一個正常女孩的欲望并沒有消失。她打算做縮胸手術(shù)，但不敢問家里開口要錢。

為了攢錢，魏坤做了很多兼職。2010 年，魏坤拿著好不容易賺來的錢走進(jìn)了山西太原某民營醫(yī)院。

「這只是一個小手術(shù)，絕對安全，沒有后遺癥。」穿著白大褂的醫(yī)生對魏坤說。

護(hù)士熱情的詢問和解答，讓魏坤開始憧憬未來的正常生活。在醫(yī)院呆了 3 天，魏坤做了縮胸手術(shù)，她從 J 罩杯變成了 G 罩杯。

正當(dāng)魏坤以為自己能像一個普通女孩那樣生活的時候，卻發(fā)現(xiàn)噩夢開始了。

當(dāng)繃帶拆除的那一刻，魏坤看到了右乳房下發(fā)有部分發(fā)黑發(fā)硬。醫(yī)生用一根很長的針直插進(jìn)去，魏坤沒有任何感覺。

她問醫(yī)生：「這是怎么回事？」醫(yī)生說：「術(shù)后正常反應(yīng)。」

魏坤心里有些隱隱不安，又過了幾天，黑色的位置開始擴(kuò)大，乳頭開始潰爛，甚至出血。

魏坤再次詢問醫(yī)生，醫(yī)生打著馬虎眼回應(yīng)：「正常反應(yīng)。」

魏坤意識到手術(shù)可能失敗了，她開始瘋狂求醫(yī)。

之后，魏坤做了 3 次清創(chuàng)手術(shù)，去除壞死組織。右乳因為延誤治療太久了，幾乎挖空乳房下半部分的所有組織。

為了保住乳房，魏坤找了很多醫(yī)生，最終在上海龍華醫(yī)院，醫(yī)生盡全力保住了她的乳房，盡管她的乳房已經(jīng)不再完整——失去了乳頭乳暈，還留下了一個大大的傷疤。

面對丑陋的乳房，23 歲的魏坤有些絕望：「我還那么年輕，那么丑的乳房誰會喜歡？」

就在這時，她看到一檔電視節(jié)目——《許愿清單》，這是一檔可以提供免費(fèi)整形的綜藝節(jié)目。

「里面有一個案例和我特別相似，但修復(fù)得特別特別好，那一刻我覺得我有救了。」魏坤說。她毫不猶豫地報名，被節(jié)目組選中。

2013 年 12 月 9 日，魏坤一直記得這個日子。整容節(jié)目的專家握著她的手說：「我可以幫你修復(fù)胸部，并且還要給你一張完美的臉。」

那一刻魏坤激動萬分，就像黑暗中抓住了救命稻草一樣，盡管臉部整形是院方為了宣傳做的附加項目，但魏坤還是答應(yīng)了。

「感覺自己像中了超級大樂透。」三個月后，魏坤摘掉紗布，以為縮胸帶來的噩夢終于可以結(jié)束。

但現(xiàn)實給了她狠狠一擊。

她看著鏡子里完全扭曲的自己，有些不敢相信：鼻子和下巴向兩個不同的地方歪著，下嘴唇不受控制地向右牽扯，整個下巴都是麻木的。

魏坤講述整容失敗后的感受

▼

圖片來源：視頻截圖

從那之后，為了修復(fù)，魏坤不得不進(jìn)行了多次手術(shù)。現(xiàn)在，魏坤臉上的骨頭全部截開過，現(xiàn)在靠釘子固定著，有 12 顆。她的臉上做過 17 項手術(shù)，切了 20 多刀。

「一開始只想縮胸，但現(xiàn)在就像換了張臉。」她說。

「人多的時候，我會躲開，因為我特別擔(dān)心鼻子被撞塌了，臉被撞歪了。」魏坤坦言：「今年還會打算去修復(fù)鼻子。」

女人最美好的幾年青春，魏坤都耗費(fèi)在維權(quán)和修復(fù)上。身上的皮膚組織無數(shù)次的被抽取、切開，按照魏坤的話來說，她經(jīng)歷了從人到鬼，又從鬼到人的過程。

除了忍受身體的傷痛，還要忍受心理的傷痛和折磨。魏坤記不清自己有多少次想要自殺，爬上醫(yī)院的窗臺，又被媽媽拽了回來。

胸部讓魏坤的人生變得越來越糟糕。

2016 年，她在北京衛(wèi)視的一檔節(jié)目《我是演說家》，講述自己的整形故事。

憑著演講，一些整形醫(yī)療機(jī)構(gòu)注意到她，希望能夠讓魏坤代言，甚至開出高薪。

魏坤近照

▼

圖片來源：采訪者供圖

魏坤一一拒絕：「我不想昧著良心掙錢。」現(xiàn)在的魏坤從事演藝工作，自稱「十八線」小演員，忙起來連軸轉(zhuǎn)。

「只有當(dāng)演員，我才能忘記自己糟糕的人生。」魏坤說。

我問：「你后悔做過那次縮胸手術(shù)嗎？」

魏坤說：「這件事情肯定會做，但后悔自己的無知。如果當(dāng)年能夠多一點(diǎn)時間了解縮胸手術(shù)的知識，考慮到所有的可能性，理性地選擇醫(yī)院和醫(yī)生，也許結(jié)局會好一些。」

（燕子系化名）

燕子和魏坤的苦惱都源自她們的胸。實際上，她們的胸并不會危害健康，只是相比于普通女孩尺寸大了一些。

「乳房」作為女性的象征，它的大小似乎是評價女性的重要標(biāo)準(zhǔn)。

大胸，在一些人的眼里成為了放蕩和輕佻的代名詞，這些世俗偏見無時無刻不在影響著她們的生活。

明明不會威脅到身體健康，但為了撕掉標(biāo)簽，這些女孩們，她們或是選擇冒著高風(fēng)險做手術(shù)，或者無奈地接受現(xiàn)實，承受著精神折磨。

胸大有錯嗎？她們和其他女孩一樣，努力地生活，善良地對待身邊的人。

我們評價女性的標(biāo)準(zhǔn)只有外貌嗎？為什么不能丟掉偏見的眼光，帶著善意來看待這些女性。

胸大胸小都是美，請不要一邊說她們大胸妹，一邊盯著她們胸口看。

乳房縮小術(shù)

乳房下垂是一種生理現(xiàn)象，由于胸部腺體和結(jié)締組織增生肥大和萎縮后胸部的皮膚彈性降低，支撐韌帶拉長，使胸部皮膚彈性降低，給女性的工作和生活帶來不便。

縮胸是指從乳房上移除部分脂肪、乳腺組織或者皮膚。在大多數(shù)情況下，它可同時提升乳房和縮小乳暈（乳頭周圍深色的皮膚）。

手術(shù)會切除多余的組織、脂肪和皮膚。大多數(shù)女性的乳頭以及乳暈都被移到了一個新的位置，這可能導(dǎo)致完全和永久性的感覺喪失，并且可能會失去哺乳能力。

※ 如果因乳房過大造成生活或工作困擾，請去正規(guī)醫(yī)院就診。

本文經(jīng)由 南京鼓樓醫(yī)院整形美容科住院醫(yī)師 莫然 審核

策劃Ant

責(zé)編羅布君

封面圖來源站酷海洛

— 參考文獻(xiàn) —

[1] 安東尼.L.科馬羅夫（哈佛醫(yī)學(xué)院博士、內(nèi)科教授）. 哈佛家庭醫(yī)學(xué)全書[M]. 2017.

[2] 李尚善, 欒杰. 巨乳縮小整形術(shù)的研究進(jìn)展[J]. 中國美容整形外科雜志, 2017(11):24-25+33.

[3] https://www.haodf.com/zhuanjiaguandian/zhongqiandoctor_4583607795.htm

[4]https://v.qq.com/x/page/g0521xc3bjo.html

春賀歲，金猴送禮。伴隨著農(nóng)歷春節(jié)的臨近，《航海王》游戲正版手游《航海王 啟航》也為廣大玩家準(zhǔn)備了繽紛豪禮。在開啟節(jié)日十大福利活動的同時，游戲還于今日為廣大玩家開展新年“夢想許愿季”，只要你說出自己的心愿，即可免費(fèi)獲得價值不菲的游戲禮包，更能有機(jī)會贏取限量典藏手辦。

活動參加地址：http://op.mobage.cn/html/opnewyear

說出熱血夢想 100%獲得專屬禮包

路飛說過：“我是要成為海賊王的男人!”是的，人若沒有夢想，和咸魚有什么區(qū)別。春節(jié)辭舊迎新之際，《航海王 啟航》將為所有玩家開展“夢想許愿季”。從2月5日到19日，玩家只要登錄活動頁面，即可輸入自己的新年愿望。這之后點(diǎn)擊提交按鈕，即可輕松參與進(jìn)來。同時游戲還會給所有提交愿望的玩家送出價值不菲的游戲禮包碼，用來兌各類超人氣道具。值得注意的是活動會在5號的晚上正式上線，無須著急。

競猜好友心愿 搶獲正版典藏手辦

玩家提交完心愿后，還可將自己的內(nèi)容朋友圈等處，邀請他人前來競猜。當(dāng)好友進(jìn)入活動頁面后，系統(tǒng)會出現(xiàn)三個備選問題，其中有一個是正確答案，好友點(diǎn)擊勾選即可完成競猜。當(dāng)然，邀請進(jìn)來的好友自己也可以進(jìn)行許愿，同樣能夠得到價值不菲的游戲禮包碼。那么最終游戲會在所有使用過禮包碼的玩家中，隨機(jī)抽選3名幸運(yùn)兒，送出萬代游戲超限量手辦，讓夢想照進(jìn)現(xiàn)實。

冥王雷利登場 新春活動繽紛賀歲

“冥王”西爾巴茲-雷利是原著中的超人氣角色，原羅杰海賊團(tuán)副船長。不過在羅杰死后，雷利一直留在香波地諸島當(dāng)膜工匠，后來成為路飛導(dǎo)師，教會其使用“霸氣”。同樣在《航海王 啟航》中，雷利也將霸氣登場。從2月4日到7日，玩家累計充值即可獲得不同數(shù)量的雷利碎片，將冥王招入麾下。同樣游戲還會陸續(xù)開啟10大新春賀歲活動，給玩家送出新春福袋、餃子、爆竹、海量鉆石、晶石包等豪華獎勵。

系列角色收集 群雄匯聚春節(jié)酒館

當(dāng)然除了“冥王”雷利外，也會有其他各種人氣角色登場。活動期間，每天的活動酒館都有幾率獲得角色碎片和專屬碎片，包含了馬爾高、羅、大熊等強(qiáng)力角色。并且有一定概率過的30個碎片的暴擊，心愛人物瞬間抱回家。不僅如此，春節(jié)假期連續(xù)充值和消費(fèi)的話，更可以獲得羅賓、路飛、喬茲等，還有雙倍風(fēng)暴和免費(fèi)活動等待著玩家。

猴年狂歡，加入《航海王 啟航》夢想許愿季，參與十大新春活動。實現(xiàn)心中的夢想，贏取全民百萬福利。

背景

隨著互動游戲業(yè)務(wù) DAU 量級增加，性能和體驗重要性也越發(fā)重要，好的性能和體驗不僅可以增加用戶使用體感，也可以增加用戶對于互動游戲的使用粘性。

對現(xiàn)狀分析，主要存在首屏渲染速度慢、打開頁面存在白屏、頁面加載過多資源等問題，核心手段是增加骨架、接口優(yōu)先級調(diào)整、預(yù)渲染、減小包體積等。

優(yōu)化后，互動游戲簽到功能做到同類業(yè)務(wù)性能體驗 Top 級別，下面是優(yōu)化后數(shù)據(jù)：

首屏渲染速度：優(yōu)化后提升首屏渲染速度 39%。

首屏骨架：骨架體積大小減少 44%（壓縮后減少 50%）。

首次加載總資源：資源總體積優(yōu)化后，大小減少 69%。

二

骨架

骨架屏是指在頁面加載時，臨時顯示出頁面的主要結(jié)構(gòu)，可以讓用戶在等待頁面加載完成時，得到視覺上的反饋，提升頁面的用戶體驗。

骨架示意圖vs數(shù)據(jù)渲染

可以看出在接口返回數(shù)據(jù)之前，可以先使用骨架得到一些界面反饋。

三

緩存

雖然骨架屏可以讓用戶在視覺上得到反饋，畢竟不是真實的數(shù)據(jù)，總體還是有一些簡陋，用戶也可能并不知道這塊區(qū)域?qū)嶋H渲染的是什么樣的內(nèi)容，若是網(wǎng)絡(luò)環(huán)境不好，很可能會長時間的停留在骨架屏階段，為了增強(qiáng)一些體感，使用緩存進(jìn)一步對頁面進(jìn)行優(yōu)化。

使用緩存渲染具備以下優(yōu)勢：

• 與骨架屏相比，緩存渲染十分接近用戶最終所見，因為每次接口返回數(shù)據(jù)都會更新緩存，用戶再次進(jìn)入時看到的都是自己上次進(jìn)入時的數(shù)據(jù)。
• 當(dāng)用戶處在弱網(wǎng)或者斷網(wǎng)等不可抗力的環(huán)境中時，可以得到較為完整的頁面數(shù)據(jù)展示，可以很好減弱用戶環(huán)境帶來的網(wǎng)絡(luò)營銷。

使用緩存注意事項：

• 一些緩存渲染應(yīng)屏蔽事件響應(yīng)，避免造成不必要的報錯和客訴。比如商品的緩存渲染，由于商品存在下架、優(yōu)惠券調(diào)整等情況，緩存的數(shù)據(jù)和實際數(shù)據(jù)會存在一定的偏差。
• 緩存渲染邏輯需要更加前置，不應(yīng)該將緩存渲染的邏輯放在原本的位置，這樣會拖慢渲染的時機(jī)。

四

接口后置

瀏覽器對同一時間內(nèi)的請求數(shù)量是有限制的，既并發(fā)請求限制。當(dāng)一個頁面首次渲染時需要瀏覽器發(fā)起很多接口請求，用于填充頁面渲染需要的數(shù)據(jù)，若是對于頁面渲染時的請求數(shù)量不加以控制，便可能導(dǎo)致一些問題出現(xiàn)。

現(xiàn)在有 home 和 info 兩個接口，home 接口返回的數(shù)據(jù)是首屏渲染需要依賴的，info 接口返回的數(shù)據(jù)則不是首屏必須依賴的。假設(shè)現(xiàn)在還有一些其他請求占據(jù)了并發(fā)請求限制的數(shù)量，導(dǎo)致 home 接口請求變慢。

若是 info 接口響應(yīng)慢，長時間占據(jù)這瀏覽器的請求進(jìn)程，會導(dǎo)致頁面首屏渲染速度更慢，那么就需要有個一套方案可以根據(jù)接口的優(yōu)先級進(jìn)行加載順序控制，可以將順序變?yōu)槿缦隆?/span>

方案：當(dāng)頁面加載完成后一定時間后，進(jìn)行低優(yōu)先級接口的請求，或者觸發(fā)頁面的滾動、點(diǎn)擊等時立即進(jìn)行接口請求。

此方案適用于：確定接口延遲加載并不會阻塞用戶的交互和操作。

將其封裝為一個 hooks，便于復(fù)用，直接先看代碼再解釋：

import { useRM, createRM } from 'xxx'


const listen=(type: string, listener: ()=> void)=> {
  const l=()=> {
    listener()
    document.removeEventListener(type, l)
  }
  document.addEventListener(type, l)
}


const pageFlowModule=createRM(
  {
    assemble(state) {
      const reactionObserver=()=> {
        state.isUserReactioned=true
      }


      ;['scroll', 'mousedown', 'touchstart'].forEach((type)=> {
        listen(type, reactionObserver)
      })
      setTimeout(reactionObserver, 4000)
    },
  },
  { isUserReactioned: false },
)


pageFlowModule.actions.assemble()


export const usePageFlow=()=> {
  const [state]=useRM(pageFlowModule)
  return state
}

使用：

import { usePageFlow } from 'xxx'




const Demo=()=> {

    const { isUserReactioned }=usePageFlow()




    const fetchHanlder=useCallback(()=> {

        // 接口請求數(shù)據(jù)

    }, [])




    useEffect(()=> {

        if(isUserReactioned) {

            fetchHanlder()

        }

    }, [isUserReactioned, fetchHanlder])




    return <div>{/* 渲染接口返回的數(shù)據(jù) */}</div>

}

從上面代碼可以看到，會將一些非首屏需要的請求后置，后置的接口可以在頁面加載完成 4s 后自動觸發(fā)調(diào)用，也會在用戶有觸屏、滾動頁面等行為的時觸發(fā)接口的調(diào)用。

五

骨架優(yōu)化

簽到和許愿樹目前主文檔中除了骨架部分還包含了一些公共的 JS 和 CSS，對不同資源類型進(jìn)行拆分、匯總后發(fā)現(xiàn)，不管是簽到還是許愿樹，實際包含 HTML + JS 部分僅占極小比例，大量的流量消耗在了 CSS 上。

對 HTML 中 CSS 部分再進(jìn)行梳理發(fā)現(xiàn)，文件中包含的除了骨架的 CSS 部分和公共組件庫的 CSS 部分之外，還包含了大量彈框的 CSS。這三類中，骨架的 CSS 要保留，公共組件庫的 CSS 可以拆分但是難度較大，剩下的就是彈框或者非骨架部分的 CSS。

• 需要把彈框部分組件做異步加載，保證預(yù)渲染的時候這部分 CSS 文件不會被加載到。
• 拆分骨架組件，把骨架組件從業(yè)務(wù)組件中剝離，預(yù)渲染的時候只渲染和加載骨架部分，不加載其余主文件部分 CSS，進(jìn)一步縮小骨架。

六

localStorage性能問題

在做優(yōu)化之前，并未意識到 localStorage 所隱藏的性能問題，業(yè)務(wù)中使用了大量的本地存儲，使用 Performance 記錄一下存儲消耗的時間。

記錄核心代碼：

export const setMallFlowStoreData=(data: any)=> {

  performance.mark('start_localstorage_operation')

  // localStorage 操作.....

  performance.mark('end_localstorage_operation')




  performance.measure('localstorage_operation_duration', 'start_localstorage_operation', 'end_localstorage_operation')

}

輸出記錄的時間：

const entries=performance.getEntriesByName('localstorage_operation_duration')

const TOTAL_TIME=entries.reduce((current, next)=> {

return current + next?.duration

}, 0)




console.log('全部記錄:', entries, '共耗時:', TOTAL_TIME)

輸出結(jié)果：

可以看到通過 localStorage 進(jìn)行一次存儲操作，大致需要耗時 0.2-0.5ms 之間，若是當(dāng)頁面存在大量的前端的存儲操作時，低端機(jī)型在存儲操作上消耗甚至達(dá)到 10-20ms，若是代碼寫的不合理，導(dǎo)致頁面 reload、反復(fù)觸發(fā)獲取操作等情況，這個時間又將會成倍的增加。

接下來先一起看看為何會存在性能方面的問題和解決方案。

存儲數(shù)據(jù)

問題：

localStorage 的存儲是同步的操作，因此在存儲大量數(shù)據(jù)時，可能會導(dǎo)致阻塞 UI 線程，影響用戶體驗。

方案：

核心思路便是將同步操作轉(zhuǎn)換為異步操作，這樣就不會阻塞 UI 線程。

• 使用 Web Worker ，會增加一些項目維護(hù)的復(fù)雜度，且其是 HTML5 標(biāo)準(zhǔn)中新增的技術(shù)，存在一定的兼容性（ChatGPT 給的，應(yīng)該是錯誤答案，并未在 MDN 中看到）。

• 使用 setTimeout、setInterval，兼容性絕對的好，但是并未從根本解決問題。
• 不用 localStorage，直接上 IndexDB，但是由于代碼項目原因，不能改動原有的太多邏輯。

綜合解決方案和歷史原因，只能退而求其次選擇 setTimeout 的方式解決這個問題。

讀取數(shù)據(jù)

問題：

每次讀取 localStorage 數(shù)據(jù)時，都需要從磁盤中讀取數(shù)據(jù)，因此在處理大量數(shù)據(jù)時，可能會出現(xiàn)性能問題。

方案：

可以將數(shù)據(jù)進(jìn)行放到內(nèi)存中緩存處理，在用戶的整個操作周期內(nèi)只從 localStorage 獲取一次數(shù)據(jù)，需要注意的是每次對數(shù)據(jù)進(jìn)行操作時，需要將 localStorage 和內(nèi)存緩存的數(shù)據(jù)同步更新。

數(shù)據(jù)類型轉(zhuǎn)換

問題：

在存儲和讀取數(shù)據(jù)時，需要將數(shù)據(jù)進(jìn)行序列化和反序列化操作。這些操作可能會導(dǎo)致性能問題。

方案：

使用 JSON.stringify() 和 JSON.parse() 函數(shù)來處理數(shù)據(jù)的序列化和反序列化。

經(jīng)過對 localStorage 存儲優(yōu)化以后，在紅米 note 11 上面進(jìn)行了簡單測試，首屏打開速度提升，對于整體提升首屏提升約 2%。

七

動效執(zhí)行時機(jī)

頁面存在漸入漸現(xiàn)的動效，在頁面首次加載時，由于漸現(xiàn)動效的存在，會延遲用戶感知該模塊，從而導(dǎo)致感覺頁面存在更多時間的白屏，動效如下：

核心問題是首次渲染直出 DOM 結(jié)構(gòu)，不走漸現(xiàn)動效便可，這個比較偏向于邏輯處理，屬于體驗優(yōu)化的范疇，主打的就是在后續(xù)有相關(guān)首屏動效時，有意識對其做一下處理，保證首屏首次渲染的完整度。

八

渲染模塊的取舍

首先看一下兩種狀態(tài)各自的樣式：未簽到 VS 已簽到。

簽到業(yè)務(wù)的日歷會根據(jù)用戶當(dāng)天簽到狀態(tài)進(jìn)行渲染，存在已簽到和未簽到兩種渲染邏輯，由于當(dāng)前的架構(gòu)限制，并不能在預(yù)渲染時感用戶的簽到狀態(tài)，導(dǎo)致日歷部分的渲染會滯后，嚴(yán)重影響頁面的首屏渲染速度。

第一版本優(yōu)化

將簽到狀態(tài)進(jìn)行緩存，當(dāng)用戶進(jìn)入簽到時的大致流程如下：

當(dāng)用戶進(jìn)入頁面時，會優(yōu)先獲取緩存中的數(shù)據(jù)進(jìn)行渲染，確保用戶可以第一時間看到日歷部分的渲染，這里需要注意：1. 緩存需要結(jié)合用戶 token 一起判斷，避免造成切換賬號時造成數(shù)據(jù)污染。2. 若是用戶第一次進(jìn)入或者當(dāng)天未簽到，會使用系統(tǒng)時間作為小日歷上的數(shù)字展示，當(dāng)用戶修改了系統(tǒng)時間設(shè)置時，日期判斷會存在誤差。

緩存數(shù)據(jù)必然會先于接口響應(yīng)數(shù)據(jù)，因此頁面第一時間看到的肯定是緩存數(shù)據(jù)（沒有緩存數(shù)據(jù)，會默認(rèn)使用未簽到數(shù)據(jù)）所渲染的頁面，那么當(dāng)接口響應(yīng)完成時，需要使用真實的數(shù)據(jù)觸發(fā)頁面的 rerender，需要注意處理，避免造成頁面閃爍。

雖然這樣做可以提高頁面的渲染體感，當(dāng)進(jìn)入頁面時，頂部區(qū)域還是會存在一定時間的空白，畢竟還是需要執(zhí)行 JS 后才能執(zhí)行骨架渲染邏輯，本質(zhì)提升速度為：接口響應(yīng)時間 - JS 執(zhí)行時間，在低端機(jī)表現(xiàn)會較為好一些，高端機(jī)體感并非太明顯。

第二版優(yōu)化

日歷部分由于已簽到和未簽到的樣式存在著較大的出入，不能像某些競品一樣：已簽、未簽的整體頁面布局并未有區(qū)分，使用一套公用的渲染邏輯，這樣也導(dǎo)致簽到業(yè)務(wù)需要將渲染日歷部分的動作滯后，那么核心就是怎么解決這個問題。

綜合考慮后，決定將未簽到樣式作為預(yù)渲染時直接生成 DOM，這樣可以保證用戶未簽到的狀態(tài)下進(jìn)入到頁面可以第一時間對的狀態(tài)，也可以更快的完成首屏的渲染。

若是用戶已簽到，便在此基礎(chǔ)之上復(fù)用今日簽到的邏輯，就是會在簽到完成后展示一個小的動效，將小日歷變成大日歷的樣式。這樣做的好處可以是獲取到用戶真實狀態(tài)后，自動切換到大日歷狀態(tài)，效果如下。

結(jié)合用戶行為分析：多數(shù)用戶一天不會多次訪問，也就是在即不怎么犧牲高頻率訪問用戶的體驗之下，提高了絕大多數(shù)用戶的體驗。

九

首屏數(shù)據(jù)優(yōu)先請求

前置小知識：最大并發(fā)請求數(shù)

為了避免瀏覽器過度占用系統(tǒng)資源，瀏覽器對于同一域名下的請求數(shù)量是有一定限制的，也就是常見的瀏覽器最大請求數(shù)量。

以 Chrome 瀏覽器舉例：同一域名下，HTTP 協(xié)議最多允許同時存在 6 個 TCP 連接進(jìn)行，HTTPS 協(xié)議最多為 4 個。

業(yè)務(wù)現(xiàn)狀

簽到進(jìn)入頁面共計加載許多接口。

其中首屏渲染需要的幾個核心接口如圖紅色標(biāo)記所示，核心的接口滯后會導(dǎo)致頁面數(shù)據(jù)渲染的更慢，嚴(yán)重影響體驗，那么到底影響多少呢？可以在瀏覽器 Network 中查看 Waterfall。

核心接口是在其他完成后開始，是因為其沒有趕上瀏覽器第一批次接口請求隊列中，需要等待前面某些接口結(jié)束后，才會將其放到請求隊列中。

動作

有了問題，接下來便是如何做：

• 首先是制定方案，如何確保接口的請求可以搭上瀏覽器請求隊列的第一班車，本質(zhì)是將之前散落在各個組件內(nèi)的 useEffect 中的初始化邏輯進(jìn)行提取，統(tǒng)一觸發(fā)。
• 梳理接口和首屏渲染的關(guān)聯(lián)度，確定哪些接口的優(yōu)先級權(quán)重更高。

核心代碼如下：

export const StartModule=createRM(

  {

    init() {

      SigninTopModule?.actions?.getHomeData()

      AdModule?.actions?.reqAdInfoList()

      HomeModule?.actions?.getBubbleList()

    },

  }

)

在頁面初始化時執(zhí)行 StartModule?.actions?.init()，將核心接口優(yōu)化執(zhí)行，通過控制接口請求順序，簽到業(yè)務(wù)在此提升了大致 6-8% 的首屏渲染速度。

十

字體使用和優(yōu)化

字體加載和優(yōu)化是前端開發(fā)中的一個重要問題，特別是在移動端和低網(wǎng)絡(luò)狀況下。下面是一些字體加載和優(yōu)化的技巧。

FOUT問題

通過設(shè)置 Font-Display 屬性可以控制字體加載時的顯示效果，包括 Auto、Swap、Block、FallBack 和 Optional 幾種模式，可以減少字體加載時間和防止文本閃爍。

設(shè)置屬性為FallBack時效果：

可以看到日期存在明顯的 FOUT（無樣式文本閃現(xiàn)）問題，設(shè)置 Swap 也是類似效果，并不符合預(yù)期。

設(shè)置屬性為 Block 時效果：

可以看到第一時間并沒有渲染日期，而是有點(diǎn)的短暫空白，因為其可以避免 FOUT，字體文件必須在后臺下載完全后，文本才能顯示。

最終選擇了 font-display: block；效果會更好一些。

注意，并不是整個頁面都使用 Block 屬性，對于一些非首屏關(guān)鍵渲染的樣式，使用 fallback 更為合適一些，因為其會使用瀏覽器默認(rèn)字體，所以還是需要結(jié)合業(yè)務(wù)、場景合理使用。

字體庫大小，你得懂

先看一個 GPT 對于簽到業(yè)務(wù)常用字體庫打下的統(tǒng)計：

DIN Condensed 字體庫的大小在幾百KB 到幾MB之間

Helvetica Neue 字體庫的大小在幾MB到十幾MB之間

也就是這兩種字體的大小，如果不加以處理，全部加載的大小在幾 MB 到十幾 MB 之間，對于前端項目而言，這是挺夸張的一件事。

可以和設(shè)計人員溝通，將字體庫中常用的字體導(dǎo)出，前端項目僅僅引入需要的字體就好，比如 DIN Condensed 字體都是使用在阿拉伯?dāng)?shù)字上，并不會在其他字上使用，那么只需要將阿拉伯?dāng)?shù)字導(dǎo)出即可。比如漢字，根據(jù)《現(xiàn)代漢語通用字表》（GB/T 13000-2018），常用漢字（包括簡體字和繁體字）共計 3500 個，其中常用的一般是指前 1000 個左右的漢字，那么在使用字體庫的時候，是不是可以默認(rèn)只需要導(dǎo)出部分即可。

經(jīng)過處理后的字體庫大小如下圖：

字體庫數(shù)量，你得控制

上面說了一個字體庫的大小是多大，就算是經(jīng)過處理，最少也會有 30KB 大小，所以項目引入的字體種類是需要控制的，不能設(shè)計同學(xué)使用了多少種類字體設(shè)計，我們就要照單全收。

當(dāng)設(shè)計同學(xué)新增字體庫時，如果字體使用在 3 次以內(nèi)，是不是可以使用圖片來代替文字，或者使用現(xiàn)有的字體庫來平替。

十一

慎用三方庫

業(yè)務(wù)中存在一些簡單的校驗、轉(zhuǎn)換和動效并不需要引入三方庫，尤其是因為一個較為簡單的功能引入了一個較為大且冷門的庫時，不僅會增加項目的打包體積，還會增加項目后續(xù)維護(hù)的溝通、學(xué)習(xí)成本。

例如下面一個簡單切換動效：

是一個比較常規(guī)的切換動效，卻在項目中引入了一個第三方庫來實現(xiàn)，該庫的使用也是有一些學(xué)習(xí)成本，因為其具備實現(xiàn)比較復(fù)雜的動效能力，在業(yè)務(wù)動效具備一定復(fù)雜度且非首屏的場景下，是可以考慮引入使用的，否則類似這種首屏便需要加載的動效，還是慎重。

上述的切換動效 CSS 實現(xiàn)代碼如下：

@keyframes bigScale {

  0% {

    opacity: 0;

    transform: scale(0.95);

  }




  to {

    transform: scale(1);

    opacity: 1;

  }

}




@keyframes smallScale {

  0% {

    transform: scale(1);

    opacity: 1;

  }




  to {

    transform: scale(0.95);

    opacity: 0;

  }

}




.squareInCenter {

  animation: 0.3s linear 0s 1 normal forwards running bigScale;

}




.squareOutCenter {

  animation: 0.3s linear 0s 1 normal forwards running smallScale;

}

在業(yè)務(wù)開發(fā)的過程中，尤其是 C 端的頁面，在實現(xiàn)功能時對于引入額外的庫是一件需要十分謹(jǐn)慎的事情，在內(nèi)部就看到不少項目在引入關(guān)于日期處理方面的庫時，DayJS、MomentJS 同時都會引用到項目中，B 端項目都不能忍，更何況 C 端項目。

十二

總結(jié)

本文僅僅介紹得物前端增長團(tuán)隊在互動游戲側(cè)一些體驗優(yōu)化實踐心得，后續(xù)還在不斷迭代和優(yōu)化，將實踐經(jīng)驗應(yīng)用擴(kuò)大至多個業(yè)務(wù)中，將整個互動游戲性能體驗優(yōu)化至 TOP 級別。

作者:來駿

來源:微信公眾號:得物技術(shù)

出處:https://mp.weixin.qq.com/s/18ejopngp7hmyz0VTncKgw