前言：
????一直都沒有寫文章隨筆的習(xí)慣，簡書也是因為在饑人谷學(xué)習(xí)延曙，強(qiáng)制要求寫blog才申請的賬號吠架，記錄學(xué)習(xí)的知識點。說來也是可惜搂鲫，沒有把寫總結(jié)，記錄問題的習(xí)慣保持下來磺平。
????到現(xiàn)在魂仍，工作一年多了，一直在做h5游戲拣挪，之前學(xué)習(xí)前端的東西也好久沒有用擦酌，都忘了七七八八。工作一年菠劝，總感覺自己這半年里都在原地踏步赊舶。所以決定開始寫blog，記錄自己的工作學(xué)習(xí)歷程。輸出自己的工作心得之類的笼平，記錄一些知識點园骆，以這種方式提醒自己不可偷懶。
對一年工作的一些回憶
????2017.9.14寓调，入職中青寶锌唾，做的h5游戲開發(fā)工程。也是前端夺英，但是跟前端關(guān)系不大晌涕，主要是做游戲，h5游戲痛悯，用的是egret引擎余黎。那時候，我也是第一次使用egret载萌。那是我egret入門惧财。
????剛?cè)肼毮菚谝粋€星球基本就是按照egret官網(wǎng)炒考，將里面的demo全跑一遍可缚。因為那時候?qū)俜轿臋n琢磨的比較多，現(xiàn)在對官方的文檔都很熟悉斋枢。那時候帘靡，還有寫日志的入職習(xí)慣，部門新入職員工每天寫一份工作總結(jié)瓤帚，我那時候還滿滿寫了三個月的工作日志描姚，記錄自己學(xué)習(xí)egret，到使用egret的歷程戈次。轉(zhuǎn)正之后就基本沒有寫了轩勘，這也是一個小可惜。每天寫一點東西怯邪，總結(jié)一下每天的工作绊寻，反思一下自己的工作狀態(tài)，這樣通過第三方的視角去觀察自己悬秉，才能更好的發(fā)現(xiàn)自己不足之處澄步。用一些大拿的話說，就是將自己的知識輸出和泌。在輸出的過程中村缸，無形中就復(fù)習(xí)工作中所運用到的知識點，有利于提高自己武氓。
????再說回工作梯皿，那時候在中青寶做的是棋牌項目仇箱，也就是麻將，牛牛东羹，斗地主這些剂桥。那時候，棋牌非嘲傩眨火渊额，深圳這邊工作做棋牌的工作一抓一大把。我在項目里面主要負(fù)責(zé)維護(hù)一個已經(jīng)開發(fā)好麻將項目垒拢。那時候旬迹，整體開發(fā)已經(jīng)完成，架構(gòu)也穩(wěn)定了求类，我也只需要做一些修修補補的小工作奔垦。但是在這個成熟的項目中，還是可以學(xué)到很多東西的尸疆。我那時候算是比較勤奮椿猎，剛工作，熱情也比較大寿弱。一有空閑時間都在看整個項目的代碼犯眠，看里面的源碼，看底層的架構(gòu)症革，學(xué)到了很多東西筐咧。還是很感謝在中青寶的日子。
????在中青寶噪矛，說是做h5量蕊，更多的是利用h5的便捷性，迅速完成游戲邏輯開發(fā)艇挨，然后打包成app和ios残炮。這也是egret的一大優(yōu)勢，一套代碼缩滨，三端發(fā)行势就，大大提高了開發(fā)效率。也是在那時候脉漏，我對前端的概念也有了更廣泛的認(rèn)知苞冯。所有與用戶交互的界面，都可以稱之為前端鸠删，包括pc端，web端贼陶。也是從那開始刃泡，入了游戲的坑巧娱，出不來了，現(xiàn)在已經(jīng)完全不會寫web界面了烘贴。當(dāng)然禁添，收獲就是，熟練掌握了typescript桨踪。
????后來老翘，就是離職到了現(xiàn)在工作，繼續(xù)做h5游戲锻离，繼續(xù)使用egret铺峭。這次就是完全的h5小游戲了，打包成網(wǎng)頁小游戲汽纠，而不是app卫键。
????在現(xiàn)在公司工作了快一年了，一直都在開發(fā)休閑游戲虱朵，一直是一個人負(fù)責(zé)項目莉炉，對于egret，游戲也有了更深的認(rèn)知碴犬。首先絮宁，開發(fā)一款游戲，首先最重要的服协，就是一個整體架構(gòu)绍昂，對游戲更個部分的劃分，這個是很重要蚯涮，對后期幫助很大治专。一開始劃分不清晰，后面就是改之不盡的bug了遭顶，各種各個部分之間的交互张峰，通信，消息出來棒旗，各種麻煩喘批。整體框架的思想，就是大而化小铣揉，各個部分之間解耦饶深。這樣開發(fā)起來，效率就會很高了逛拱。
h5游戲的優(yōu)化之路
????在公司開發(fā)了幾款小游戲之后敌厘，滿滿的，開始處理游戲性能朽合，體驗方面的問題俱两，包括游戲資源加載速度饱狂，用戶交互之類的。最近處理的比較多宪彩，頗有些感觸休讳，所以，才會有了寫一寫的想法尿孔。這篇blog算是一個開始俊柔，寫一寫學(xué)習(xí)計劃，工作總結(jié)之類的東西活合，對自己進(jìn)行總結(jié)雏婶，反思，才能才編程的路上走得更遠(yuǎn)芜辕。
- 1.資源分步加載
????游戲和web界面不同尚骄，是有很多動畫，圖片資源侵续，這部分的體積占了游戲的90%倔丈，如何處理好游戲資源的加載，這對游戲的加載速度體驗很關(guān)鍵状蜗。
????針對游戲的分為各個部分需五，模塊，資源也可以相應(yīng)的劃分為各個組轧坎，egret在資源這塊處理的很好宏邮，提供了RES這個模塊進(jìn)行資源的處理，資源分組缸血。相應(yīng)的蜜氨，在游戲中，進(jìn)行分步加載也變得更加簡單捎泻。比如飒炎，我把游戲資源分為三個組，游戲主場景笆豁，比賽場景郎汪，以及一些二級彈窗資源，這樣劃分之后闯狱，就可以對資源進(jìn)行分步加載煞赢。一開始進(jìn)入游戲，只加載主場景資源哄孤，提高游戲啟動速度照筑，加快進(jìn)入游戲時間，避免在加載界面停留過長而流失用戶。進(jìn)入游戲之后再進(jìn)行加載比賽場景和一些二級彈窗凝危。當(dāng)然饭弓，這樣做的話，也會有一些弊端媒抠，在二級彈窗和比賽資源還沒加載完成時，這時進(jìn)入比賽或者點彈窗咏花，就需要一些處理趴生，等待資源加載完成后再進(jìn)入，可以采用promis異步昏翰，或者添加事件監(jiān)聽苍匆。這樣會造成一定的體驗不好，需要取舍棚菊。如果資源整體不大浸踩，就無需分步加載。 - 2.對象池
????對一些復(fù)用的組件统求，建立對象池检碗，這是一個很常見的做法，也是最需要做的事情码邻。雖然現(xiàn)在瀏覽器的性能有了很大提升折剃，但是，對于一低端機(jī)型像屋，對象池還是很有必要怕犁。建立對象池，對一些重復(fù)使用的組件進(jìn)行回收利用己莺，而不是直接銷毀奏甫，這對頁面性能提升很大。這是因為js的垃圾回收不是及時的凌受，如果在一些密集渲染的情況下阵子，就會出現(xiàn)卡頓，設(shè)備發(fā)燙的現(xiàn)象出現(xiàn)胁艰，影響用戶體驗款筑。
????比如，我之前做的一個戰(zhàn)艦戰(zhàn)斗的場景腾么，10艘戰(zhàn)艦進(jìn)行隨機(jī)發(fā)射炮彈奈梳，魚雷和火箭筒，還伴隨著爆炸效果動畫解虱，轟炸的聲音攘须。這么多的圖片動畫渲染，對設(shè)備性能要求是很高的殴泰，在一些低端機(jī)上于宙，會出現(xiàn)卡頓浮驳，發(fā)熱現(xiàn)象。我統(tǒng)計過捞魁，webgl的drawcall達(dá)到了300+至会，這是一個很恐怖的數(shù)字，內(nèi)存的占用也達(dá)到了一個恐怖的數(shù)字谱俭》罴總之，這是一個糟糕的用戶體驗昆著。后來县貌，我做了一些處理，寫一個對象池凑懂，對炮彈進(jìn)行復(fù)用煤痕，提升很大，卡頓接谨，發(fā)熱現(xiàn)象沒有了摆碉，畫面也流暢了，內(nèi)存占用也大大減少脓豪。 - 3.屏幕適配
????針對不同的機(jī)型兆解，進(jìn)行適配一直是件很頭疼的事情。市面的手機(jī)太多了跑揉，各種不同尺寸的屏幕锅睛，還有一些劉海屏，全面屏历谍，適配是很麻煩的事情现拒。屏幕適配這塊，egret提供一些見簡單的適配方案望侈，比如拉伸占滿屏幕印蔬，按寬度適配，高度適配脱衙，縮放保持原寬高比侥猬。這些方案都有些不足，會出現(xiàn)圖片拉伸變形捐韩，黑邊等等問題退唠。所以，手機(jī)端的適配最好的方法是背景拉伸占滿屏幕荤胁，而里面的組件就按照相對位置進(jìn)行擺放瞧预。所以，在設(shè)置各個組件位置的時候，就必須寫相對坐標(biāo)垢油，而不是絕對坐標(biāo)盆驹，在一開始就解決屏幕適配問題。
????pc端的話滩愁，就更加麻煩躯喇，所以，我的處理是之間縮放占滿屏幕硝枉。 - 4.其他一些小坑
????圖片資源一定要壓縮玖瘸，能壓縮很多。之前美術(shù)提供的圖片沒壓縮檀咙，一張圖片就達(dá)到了2M多，幾張圖片就十幾M璃诀，這加載速度肯定很慢弧可。壓縮之后，只有幾十k劣欢，速度一下子就上去了棕诵。
????對于圖片進(jìn)行合并，這是常規(guī)做法凿将，但是需要注意的點是注意合圖尺寸校套，手機(jī)端不要超過2048。目前發(fā)現(xiàn)在蘋果6s和小米黑鯊手機(jī)上會出現(xiàn)圖片加載黑塊的問題牧抵。幀動畫的合圖也是笛匙。
????還有就是，寫界面時犀变，劃分一定要清晰妹孙，哪怕多寫幾個類也要分清楚，這對后期需求變更修改起來方便很多获枝。都知道蠢正，需求變更這種事情是很常見的。
定個小目標(biāo)
????上面算是對自己的一點小總結(jié)省店，一直懶于動手嚣崭，今天總算是寫出來了，算是克服了自己的懶墮懦傍。以后要堅持下去雹舀，保持每周寫篇總結(jié)。
????按照慣例粗俱，到最后總要給自己定個計劃的葱跋。學(xué)習(xí)go也是一直沒有動手寫代碼，一直在看別人的代碼，看書娱俺，作為碼農(nóng)還是要多動手稍味，所以，為了督促自己的學(xué)習(xí)進(jìn)度荠卷，給自己定個小目標(biāo)模庐，利用業(yè)余時間多寫寫go，用go搭建個blog油宜，在年前完成掂碱。
