FE.WX-小程序「無聊廣場」遊戲前端性能優化與踩坑攻略

背景

一個交互不復雜，對刷新頻率和動畫效果要求不高的小遊戲，不須要使用canvas主導的解決方案，使用dom操做同樣能夠完成。節省了cocos creater的學習成本，值得一試。本文主要針對小程序「無聊廣場」的前端開發內容作總結，記錄常見的一些老生常談的進階手法，對小程序中的動畫音頻等踩坑作出解決方案。

按鈕與字體優化

雪碧圖歷史

在早期雪碧圖盛行的年代，推崇切圖大法好的時期，咱們一般把按鈕的選中與普通狀態切圖，但因爲多張圖片http請求消耗太大，故切在一張圖用css sprite騷操做完成圖標顯示。

雪碧圖優缺點

優勢	缺點
減小服務器請求次數	無用空白佔用內存
提升頁面的加載速度	使CSS的編寫變得困難
減小鼠標滑過的一些bug	拼圖維護比較麻煩

字體圖標時代

現現在使用工具將單一顏色的圖標作成字體庫，諸如font awesome 等優秀的圖標庫有不少。字體文件只須要考慮瀏覽器兼容問題，在顏色大小上均可以根據項目內容自定義，相比切圖的侷限性要優雅不少。

交互中有中文字體怎麼破

經過壓縮字庫，提煉個別須要用到的按鈕標題等，這樣既解決了樣式大小顏色自定義的問題，修改字操做也不用從新切圖修改大小。（例以下圖在「無聊廣場中用到的字體」）

在小程序中字體文件上傳不了，怎麼辦

在開發小程序時，開發工具告訴你那個字體文件忽略沒有上傳。解決方案是轉成base64硬編碼到css文件中。

字體壓縮工具

字蛛

壓縮效果

font-face就沒有缺點了嗎

優勢	缺點
開發速度快	大量中文字不如單圖
縮放不失真，顏色可自定義	不支持彩色細節的圖案
內存佔用小	複雜樣式排版耗費人力

Dom優化-僞元素

能夠看到早在css2中就有僞元素了，然而學術尚淺的開發者只會div。上圖列舉了經常使用的僞元素。本文以:before,after爲例帶你優雅佈局。

原來點也也能夠這麼寫

如上圖中的遊戲規則，左右各有1個黑點，佈局的時候如何優雅的在先後畫圓呢？用border-radius:50%固然能夠。那用字符●也何嘗不可。代碼如圖。

氣泡樣式也不難

如上圖的文字氣泡，只須要一個45°旋轉的正方形和一個圓角矩形拼接就能夠了，代碼就本身腦補一下。

難的來了，排行榜

如圖列表左側有獎牌形狀的圖標，按常理切圖也是能夠的，但用css實現既能夠控制顏色又能夠放大不失真，一勞永逸。實現方式也很簡單。

經過上圖能夠看到，先類選擇器寫通用的灰色索引。再用before+after畫出兩個三角形。最後用nth-child選擇對應的金銀銅獎牌自定義，完美。

什麼，你問我三角形怎麼畫？

用盒模型啊，給你張圖本身體會。

黑白柵格實現

音頻兼容問題

小程序兼容方案
SysModel=='iphone'?'aac':'ogg'

背景圖大小問題

在「無聊廣場」小程序中，擼禿頭的素材拼接在1張圖上，在超過4k*4k後發現會出現跳幀，閃爍，背景消失等狀況。
最終的解決方案是：壓縮到4K*4K如下。

其餘

小圖片壓成css不用放cdn服務器