绠€浠嬪骞村墠锛屾垜涓€鐩村浜庣粷鏈涚殑鐘舵€併€備笂鍛紝鎴戞帴鍒颁簡涓€涓揣鎬ヨ姹傦紝瑕佷负绗?8涓濂宠妭鍒朵綔涓€涓椿鍔ㄩ〉闈€備富瑕佸姛鑳芥槸鐢熸垚娴锋姤銆傝繖鏄垜绗竴娆″仛杩欑瑕佹眰锛屾垜涔熸槸涓汉銆傚崐妗舵按鍦ㄥ墠锛屽湪杩欓噷鍜屽ぇ瀹跺垎浜竴涓嬮亣鍒扮殑闂锛岃俯杩囩殑鍧戯紝浠ュ強濡備綍瑙ｅ喅銆傚鏋滆В閲婁笉鍒颁綅锛屾暚璇锋湡寰呫€傛晥鏋滄樉绀哄綋鍓嶆椿鍔ㄤ粛鐒跺湪绾裤€備笅闈㈡槸鏈€缁堢敓鎴愮殑娴锋姤鏁堟灉銆傛壂鎻忎簩缁寸爜杩涘叆椤甸潰銆傚疄鐜版柟妗堟渶鍒濈殑瀹炵幇鏂规鏄湪灞曠ず鐨勬椂鍊欑洿鎺ヤ娇鐢╟anvas锛岃绠楁墜鏈哄睆骞曠殑灏哄锛岃canvas甯冩弧鏁翠釜灞忓箷銆傜紪杈戝畬鎴愬悗锛岀敤鎴风洿鎺ヤ娇鐢ㄦ樉绀虹殑鐢诲竷鐢熸垚鍥剧墖銆傛渶鍚庡彂鐜拌繖绉嶅舰寮忓緢楹荤儲锛岄亣鍒伴€傞厤闂锛宑anvas璁＄畻璧锋潵姣旇緝楹荤儲銆傛渶鍚庣殑瑙ｅ喅鏂规鏄湪鏄剧ず鐨勬椂鍊欎娇鐢╤tml鍜宑ss锛岃繖鏍峰緢瀹规槗閫傞厤鐢ㄦ埛鐪嬪埌鐨勬樉绀哄拰缂栬緫椤甸潰銆傛渶鍚庣敓鎴愬浘鐗囩殑鏃跺€欎細鐢ㄥ埌canvas銆傝繖涓敾甯冩槸闅愯棌鐨勶紝瀵圭敤鎴蜂笉鍙銆傝繖杩樻湁鍙︿竴涓ソ澶勩€傛渶缁堢敓鎴愮殑娴锋姤灏哄鏄浐瀹氱殑锛屼笌鎵嬫満灞忓箷灏哄鏃犲叧銆傝繖涓鍒掔湅璧锋潵寰堢畝鍗曪紝浣嗘槸瀹炵幇璧锋潵鍗存湁鍚勭鍚勬牱鐨勭粏鑺傘€傝祫婧愰鍔犺浇H5娴锋姤娲诲姩灏卞儚涓€涓皬APP銆備綋楠屼竴瀹氬緢濂姐€傛渶閲嶈鐨勬槸璧勬簮鏄鍔犺浇鐨勩€傛暣涓簲鐢ㄥぇ灏忔湁30寮犲浘鐗囧拰瀛椾綋鏂囦欢銆傚瓧浣撴枃浠惰秴杩?MB銆侶owtodo鑹ソ鐨勮祫婧愰鍔犺浇鏋佸ぇ鍦板奖鍝嶄簡鏈娲诲姩鐨勪綋楠屻€傚浘鐗囬鍔犺浇鍥剧墖棰勫姞杞界殑鍘熺悊鏄埄鐢╤ttp鍗忚涓殑缂撳瓨锛屼富瑕佹槸鎸囧己缂撳瓨锛堝崗鍟嗙紦瀛樹篃闇€瑕佸埌鏈嶅姟绔紝鏈夌綉缁滀氦浜掞級銆傚湪娲诲姩棣栭〉鍓嶆坊鍔犲姞杞介〉闈紝鍔犺浇鎵€鏈夌敤鍒扮殑鍥剧墖锛屽悗闈㈠姞杞藉彧闇€鍑爉s銆傞鍔犺浇鍥剧墖锛屼娇鐢╨etimage=newImage()鍒涘缓鍥剧墖鏍囩锛屽湪image.src涓坊鍔犲浘鐗囬摼鎺ワ紝鍥剧墖鍔犺浇鎴愬姛璋冪敤image.onload浜嬩欢銆備竴寮犲浘杩樺ソ锛屼絾鏄浘鐗囧緢澶氱殑璇濓紝濡備綍浼橀泤鐨勫仛涓€涓繘搴︽潯鍛紵骞歌繍鐨勬槸锛屽€熷姪閾跺脊Promise锛屾垜浠彲浠ヨ交鏉惧疄鐜拌繘搴︽潯鏁堟灉銆俢lassPreloadedr{/****@paramimagesarray闇€瑕佸姞杞界殑鍥剧墖锛宎rray*@paramprocessCb鍑芥暟鍥炶皟鍑芥暟锛屽姞杞借繘搴︽湁鍙樺寲鏃惰皟鐢?@paramcompleteCbfunction鍥炶皟鍑芥暟锛屽姞杞藉畬鎴愭椂璋冪敤*/constructor(images,processCb,completeCb){this.imagesElement=[]this.loaded=0this.images=imagesthis.total=images.lengththis.processCb=processCbthis.completeCb=completeCb}/***寮€濮嬮鍔犺浇缂撳瓨鍥剧墖**@returns{Promise}Promisepromise鍖呭惈鎵€鏈夊浘鐗?/preloadImage(){letme=thisletpromises=[]me.loadedAction()me.images.forEach((img)=>{letp=newPromise((resolve,reject)=>{letimage=newImage()image.src=imgthis.imagesElement.push(image)image.onload=()=>{me.loadedAction(img)resolve(image)}image.onerror=()=>{resolve("error")}})promises.push(p)})returnPromise.all(promises)}/***杩涘害鍙樺寲鏃堕棿鍥炶皟锛宲rivate**@paramkeystring鎴愬姛鍔犺浇鍥剧墖鐨刄RL*/loadedAction(key){if(key){this.loaded++}this.processCb(this.total,this.loaded)if(this.total==this.loaded){this.completeCb()}}}姣忎竴寮犺鍔犺浇鐨勫浘鐗囬兘鏄竴涓狿romise锛屾墍鏈夌殑鍥剧墖promise閮芥墦鍖呮垚涓€涓ぇ鐨刾romise銆傚綋杩欎釜澶romise鐨勭姸鎬乫ulfill鏃讹紝璇存槑鍥剧墖鍔犺浇瀹屾垚锛岄渶瑕佹敞鎰忕殑鏄痮nerror鍦ㄥ寘瑁呭浘鐗嘝romise鐨勬椂鍊欎篃浼氳繑鍥瀞uccess銆傝繖鏄洜涓篜romise.all灏嗗寘瑁呬竴涓柊鐨凱romise銆傚彧瑕佽繖涓狿romise澶辫触浜嗭紝灏变細鐩存帴杩斿洖閿欒锛屾墍浠ュ嵆浣垮け璐ヤ篃浼氳繑鍥瀞uccess(resolve)銆傛湁鍑犲紶鍥剧墖鍔犺浇涓嶆垚鍔燂紝褰卞搷涓嶅ぇ銆備娇鐢ㄨ捣鏉ヤ篃寰堢畝鍗曪細(async()=>{letimgLoader=newPreloadedr(["//avatar-static.segmentfault.com/606/114/606114310-5c10a92c87f07_huge256","//image-static.segmentfault.com/203/994/2039943300-5c515b79c91f1_articlex",],(total,loaded)=>{console.log("process:image"+Math.floor(100*loaded/total)+"%")},()=>{console.log("complete:image"+100+"%")})awaitimgLoader.preloadImage()console.log("loadingcomplete")})()鍙互鐪嬪埌杈撳嚭濡備笅锛氳繃绋嬶細image0%Promise{}process:image50%process:image100%complete:image100%loadingcompleted鑷虫锛屽浘鐗囬鍔犺浇瀹炵幇銆傛帴涓嬫潵鎴戜滑鐪嬩竴涓嬪瓧浣撶殑棰勫姞杞姐€傚瓧浣撲篃鏄竴绉峢ttp闈欐€佽祫婧愶紝涔熷彲浠ヤ娇鐢ㄧ紦瀛橈紝浣嗘槸棰勫姞杞界殑瀹炵幇杩滄病鏈夊浘鐗囩畝鍗曘€侳ontpreloading瀛椾綋棰勫姞杞斤紝娌℃湁鍍廔mage閭ｆ牱鏂逛究鐨勫嚱鏁板洖璋冿紝鏌ヨ祫鏂欙紝鏈変竴涓疄楠屽睘鎬ocument.fonts锛岃瘯璇曞熀鏈敮鎸侊紝鍦╥os涓婂彲鑳芥湁鐐归棶棰橈紝鍔犺浇鍚庢湁缂撳瓨涓€娆★紝绗簩娆″姞杞芥椂鍙兘涓嶄細瑙﹀彂onloadingdone浜嬩欢銆傚彟澶栵紝杩欎釜灞炴€у拰浜嬩欢杩樻槸瀹為獙鎬х殑灞炴€с€傛祻瑙堝櫒鏀寔鏈煡锛屽彲鑳藉緢宸€傛煡浜嗗緢澶氳祫鏂欙紝鏃犳剰涓湅鍒版湁浜鸿webfontloader杩欎釜椤圭洰鏄€氳繃鍧戠埞鐨勬柟寮忓疄鐜扮殑銆傚師鐞嗗氨鏄笅闈袱鍙ヨ瘽锛氫笉鍚岀殑瀛椾綋锛屽綋鎶奻ontSize璁剧疆鐨勬瘮杈冨ぇ鏃讹紙姣斿300px锛夛紝鍚屾牱鐨勪竴娈垫枃瀛楋紝瀹冩樉绀虹殑瀹藉害鏄笉涓€鏍风殑銆傚浜庝袱涓枃鏈唴瀹圭浉鍚岀殑div锛屼负绗竴娈佃缃袱绉嶅瓧浣撱€傝鍔犺浇鐨勫瓧浣撴槸棣栭€夛紝榛樿瀛椾綋鏄彲閫夌殑銆傜浜屼釜鍙缃粯璁ゅ瓧浣擄紝瀹氭椂鍣ㄦ壂鎻忓畠銆傝〃绀烘柊瀛椾綋鍔犺浇鎴愬姛锛屽彲浠ヤ娇鐢ㄤ簡銆傚ぇ姒傜湅浜嗕竴涓媤ebfontloader锛屼唬鐮佷贡锛屽悕瀛楀鎬紝娉ㄩ噴灏戯紝涔熸病鏈夌炕璇戯紙馃槀锛屽彲鑳芥槸鎴戣兘鍔涗笉澶燂級锛屼絾鏄€冭檻鐨勮繕鏄瘮杈冨畬鏁寸殑銆傞櫎浜唗rick鏂规硶澶栵紝杩樹娇鐢ㄤ簡font瀹炵幇銆備笂闈㈡彁鍒扮殑document.fonts锛屾湁鍏磋叮鐨勫彲浠ヨ缁嗛槄璇汇€傜湅涓€涓嬫垜瀹炵幇鐨勭畝鍗曚唬鐮侊細if("object"==typeofdocument.fonts){//浣跨敤榛樿鐨刣ocument.fonts锛屽吋瀹规€у彲鑳芥湁闂锛屾垜鍙戠幇ios涓婂彲鑳芥湁闂returnthis.defaultWatcher()}else{//浣跨敤Trick鏂规硶monitoringreturnthis.trickWatcher()}}/***杩斿洖trick鏂规硶鐩戞帶鐨凱romise**@returns{Promise}*/trickWatcher(){letme=this/***鐢熸垚瀛椾綋鏄剧ず瀹藉害璺ㄥ害鍏冪礌*@paramfont*@returns{HTMLSpanElement}*/letgenSpanWithFont=(font)=>{letspan=document.createElement("span")span.style.cssText=`display:block;浣嶇疆锛氱粷瀵癸紱椤堕儴锛?9999px锛涘乏锛?9999px锛涘瓧浣撳ぇ灏忥細500px锛涘搴︼細鑷姩锛涢珮搴︼細鑷姩锛涜楂橈細姝ｅ父锛涗繚璇侀噾锛?锛涘～鍏咃細0锛涘瓧浣撳彉浣擄細姝ｅ父锛?瀛椾綋绯诲垪锛?{font}`span.innerHTML="BESbswy"if(typeofdocument.body.append=="function"){document.body.append(span)}elseif(typeofdocument.body.appendChild=="function"){鏂囨。.body.appendChild(span)}returnspan}/***鐢ㄦ瘮杈冪殑瀛椾綋*@type{string[]}*/letfontDefault=["serif","sans_serif"]letdefaultWidth=[]letfontWidth=[]fontDefault.forEach(font=>{letspanDefault=genSpanWithFont(font)defaultWidth.push(spanDefault)letspanFont=genSpanWithFont(me.fontFamily+`,${font}`)fontWidth.push(spanFont)})letclearUp=()=>{defaultWidth.forEach(e=>{document.body.removeChild(e)})fontWidth.forEach(e=>{document.body.removeChild(e)})}returnnewPromise((resolve,reject)=>{letcheck=()=>{for(leti=0;i{if(times>maxTimes){clearUp()reject("鍔犺浇瀛椾綋閿欒")}times++if(check()){clearUp()resolve([me.fontFamily])}else{window.setTimeout(loop,1000)}}loop()})}/***鏀寔鍘熺敓鏂规硶鐨勪娇鐢ㄥ師鐢熸柟娉?@returns{Promise}*/defaultWatcher(){returnnewPromise((resolve,reject)=>{璁﹍oadedFamily=[]document.fonts.onloadingdone=(e)=>{e.target.forEach((font)=>{if(font.status=="loaded"){loadedFamily.push(font.family)}})resolve(loadedFamily)}document.fonts.onloadingerror=(e)=>{reject("loadfontserror")}})}}涓ょ褰㈠紡灏佽鍚庣粺涓€杩斿洖Promise锛岃皟鐢ㄨ€呴€氳繃寮傛鍑芥暟awaitwatcher()绛夊緟瀛椾綋杩欓噷鍞竴鐨勭己鐐瑰氨鏄瓧浣撳彲鑳芥湁濂藉嚑MB锛屽姞杞藉緢鎱紝杩涘害鏉″緢涓嶅潎鍖€銆傝繖閲屾垜灏嗗姞杞藉垎涓轰袱閮ㄥ垎锛屼竴娈垫槸鍥剧墖锛屼竴娈垫槸瀛椾綋锛岃繘搴︽潯鍗曠嫭灞曠ず锛屽悇浣嶈瘎濮旀湁鏇村ソ鐨勫姙娉曪紝涓嶅Θ涓€璧疯璁恒€侰anvas鐢荤敾鐢诲竷鎴戠敤鐨勬槸pixi.js绫诲簱锛屼絾鏄疄闄呬娇鐢ㄨ捣鏉ヤ笉涓€瀹氬緢鏂逛究o(鈺枴鈺?o锛屽鏋滄槸绠€鍗曠敾鐢伙紝鍘熺敓鐨勪篃寰堝ソ鐢ㄣ€傚鏋滀娇鐢ㄦ煇浜涚被搴擄紝鍙兘浼氶亣鍒伴棶棰橈紝鍥犱负鏂囨。灏戯紝缈昏瘧灏戯紝瑙ｅ喅璧锋潵鍙兘浼氭瘮杈冮夯鐑︺€傚浘鐗囪法鍩熸€庝箞瑙ｅ喅鐢昏繖涓捣鎶ョ殑鏃跺€欏ぇ閮ㄥ垎鍥剧墖閮芥槸鑷繁鐨勶紝璁剧疆鍏佽璺ㄥ煙锛屽彧鏈夌敤鎴峰ご鍍忕殑鍥剧墖鏄叾浠栭儴闂ㄨ幏鍙栫殑瀹炴椂鐢ㄦ埛澶村儚锛屽苟涓旇法鍩熷煙鏄笉鍏佽鐨勩€傝嫤涓嶅牚瑷€锛岃瘯浜嗗緢澶氭柟娉曪紝鏈€鍚庤繕鏄敤鏈嶅姟鍣ㄤ紶杈撹В鍐充簡杩欎釜闂銆傛楠ゅ涓嬶細鑾峰彇鍥剧墖閾炬帴銆傞€氳繃鎺ュ彛灏嗗浘鐗囬摼鎺ヤ紶缁欐垜浠嚜宸辩殑鏈嶅姟鍣紝鍦ㄦ湇鍔″櫒涓婅幏鍙栧浘鐗囩殑base64锛屾垚鍔熷悗杩斿洖缁檞eb銆傚皢base64缁樺埗鍒扮敾甯冧笂銆傝繖鏍峰氨瑙ｅ喅浜嗗埆浜虹殑鏈嶅姟鍣ㄤ笉鍏佽缁樺埗璺ㄥ煙鍥剧墖鍒癉ataURL瀵煎嚭涓嶅畬鏁村浘鐗囩殑闂銆傛捣鎶ョ敱10涓簿鐏电粍鎴愩€傜粯鍒跺畬鎴愬悗绔嬪嵆璋冪敤toDataURL锛屽彂鐜扮敓鎴愮殑鍥剧墖娌℃湁鍐呭锛屾垨鑰呭浘鐗囩己灏戜竴浜涚簿鐏点€傝繖鏄垜鐢诲畬涔嬪墠瀵煎嚭鐨勶紝鎬庝箞鑳界湅鍒板憿锛熷綋鎴戝欢杩熷嚑绉掑悗瀵煎嚭鏃讹紝娌℃湁闂銆備负浜嗕繚闄╄捣瑙侊紝鎴戜竴寮犱竴寮犲湴鐢汇€傛瘡骞呯敾閮芥槸涓€涓壙璇恒€傜瓑寰呯姸鎬佷负fullfield鍚庯紝鍐嶇敾涓嬩竴寮犲浘銆傛渶鍚庝竴寮犵敾濂藉悗锛岀瓑寰呭嚑鐧炬绉掑啀瀵煎嚭銆傚疄闄呮晥鏋滃緢濂斤紝娌℃湁鍑虹幇瀵煎嚭鍥剧墖涓嶅畬鏁存垨绌虹櫧鐨勯棶棰樸€備笅闈㈡槸缁樺浘鐨勫皝瑁咃細asyncdrawImage(sprite){returnnewPromise((resolve,reject)=>{letimg=newImage()img.setAttribute("crossOrigin",'Anonymous')img.onload=()=>{console.log("yes")letitem=newPIXI.Sprite.from(newPIXI.BaseTexture(img))item.x=sprite.xitem.y=sprite.yitem.width=sprite.widthitem.height=sprite.heightthis.app.stage.addChild(item)resolve("0")}img.src=sprite.image})}鎴戣繖閲岀敤鐨勬槸pixi.js锛宻prite浠ｈ〃涓€涓簿鐏碉紝鍏朵腑鍖呭惈鍥惧儚鍦板潃銆佸潗鏍囥€佸搴﹀拰楂樺害淇℃伅銆俹nload鍚庣粯鍒讹紝鐒跺悗resolve銆傜敤浜庢眽瀛楁崲琛岄棶棰樼殑绫诲簱涓嶆敮鎸佹眽瀛楁崲琛屻€傛眽瀛楁崲琛岀殑闂闇€瑕佽嚜宸辫绠椼€傝繖閲屾垜浠娇鐢╟anvas鐨刴easureText鏂规硶銆傝鏂规硶浼氭牴鎹瓧浣撳ぇ灏忓拰鏍峰紡璁＄畻瀛椾綋姝ｅ父娓叉煋鎵€闇€鐨勫搴︺€傛垜鍙渶瑕佷娇鐢ㄨ繖涓搴﹀氨鍙互閫愯娓叉煋姹夊瓧浜嗐€傞渶瑕佽嚜宸辨帶鍒惰绠楋紝鑷繁鎺у埗缁樺浘鐨勮捣鐐广€俰os閿洏鐩稿叧鐨勯棶棰樹綔涓哄悗鍙帮紝鍗婃《姘村墠绔紝姣忔閬囧埌杩欑濂囨€殑闂锛屽緢鏄ご鐤硷紝浣嗘槸浣滀负鍚庡彴锛屽垢濂戒笉鐢ㄩ潰瀵硅繖浜涢棶棰樼粡甯革紝鍝堝搱鍝堝搱杩欐閬囧埌鐨勯棶棰樻槸ios涓婄殑閿洏涓嶈兘姝ｅ父寮瑰嚭锛屾敹璧锋潵閿洏鍗℃銆傚叿浣撴槸鐢ㄦ埛鐐瑰嚮鎸夐挳鏄剧ず杈撳叆妗嗗悗杞敭鐩樹笉寮瑰嚭锛屽湪ios杞敭鐩樹笂鐐瑰嚮纭畾鎸夐挳鍚庡崱浣忋€傞渶瑕佹粦鍔ㄦ墠鑳界户缁Е鎽哥殑闂銆傞亣鍒拌繖涓棶棰樼湡鐨勬槸鑰佽檸鍚冨ぉ锛屽挰涓嶅姩銆傛渶鍚庡悇绉嶈祫鏂欐悳绱紝鍚勭灏濊瘯锛岃В鍐虫柟娉曞涓嬶細寮圭獥闂锛屾垜鐢ㄧ殑鏄痸ue锛岃緭鍏ユ鏄剧ず鍚庣珛鍗冲嚭鐜扮劍鐐归棶棰橈紝闇€瑕佺敤$鍖呰９涓€灞俷extTick()锛屼笅涓€杞覆鏌撳氨鏄覆鏌撱€傚崱椤块棶棰橈紝姣忓綋杈撳叆妗嗗け鍘荤劍鐐规椂锛屾粴鍔ㄦ潯婊氬姩鍒伴《閮╠ocument.body.scrollTop=0.寮瑰嚭瑕嗙洊闂銆傚湪鏌愪簺鎯呭喌涓嬶紝閿洏浼氬脊鍑哄苟瑕嗙洊杈撳叆妗嗐€傚悓鏍凤紝鍑虹幇杩欑鎯呭喌鍚庯紝鎵цdocument.body.scrollTop=1000锛屽皢婊氬姩鏉℃粴鍔ㄥ埌搴曢儴銆傞亣鍒扮被浼奸棶棰樼殑鍙互鎸夌収杩欎釜鎬濊矾瑙ｅ喅锛屾瘮濡傚欢杩熻Е鍙戯紝鎵ц涓嬩竴涓惊鐜紝婊氬姩绛夌瓑銆傚皬缁撶粡杩囪繖娆″紑灞曪紝鎴戝娴锋姤娲诲姩鏈変簡涓€涓畬鏁寸殑璁よ瘑锛屽涔犲拰宸╁浐浜嗗緢澶氱煡璇嗐€傜浉淇＄湅瀹屼箣鍚庯紝灏忎紮浼翠滑鍙互杞绘澗瀹炵幇娴锋姤鍒朵綔銆傛渶鍚庯紝绁濆ぇ瀹剁帺寰楁剦蹇紝涓嶅Θ鍏虫敞鎴戠殑寰崥锛屽搱鍝堝搱銆?/p>
