鍓嶈█灏忚枃鏄釜寰堟湁璐ｄ换蹇冪殑鍓焊鐢峰锛屾渶杩戞亱鐖变簡銆備竴涓槼鍏夋槑濯氱殑鏃ュ瓙锛屼笅鐝墠鍗婂皬鏃讹紝灏忚枃姝ｇ浖鐫€涓嬬彮鍚庡拰灏忕編绾︿細銆傝繖鏃讹紝浜у搧缁忕悊澶ф槑鎵惧埌浜嗗皬钖囷細绔炲搧鐨凥5椤甸潰閮芥湁鍗犱綅绗︼紙楠ㄦ灦灞忥級锛岃€屾垜浠殑鍙湁涓€寮犺強鑺卞浘銆傜綉缁滀笉濂界殑鏃跺€欙紝鐢ㄦ埛鍗充娇鐪嬪埌鑿婅姳鍥剧墖涔熶細鍏抽棴椤甸潰锛屽奖鍝嶆垜浠〉闈㈢殑uv銆備笉灏戜簬锛堭煓勶笍锛夈€備簬鏄紝鍦ㄥぇ鏄庝箟姝ｈ█杈烇紙濞侀€煎埄璇憋級鐨勮姹備笅锛岋紙璋﹁櫄锛夎礋璐ｏ紙寰級鐨勫皬浼熷紑濮嬩簡浠栫殑楠ㄦ灦灞忓紑鍙戜箣鏃呫€傛柟妗堢爺绌剁殑鑿婅姳鍥?0澶氶〉锛屽熀鏈兘鏄璺敱椤甸潰銆備竴涓竴涓啓锛熸樉鐒朵笉鏄竴涓ソ鐨勮В鍐虫柟妗堛€傝仾鏄庯紙鎳掞級鐨勫皬浼熸湰鐫€涓嶉噸澶嶉€犺疆瀛愮殑鎬濊矾锛堢櫧鐧金煓勶笍锛夌爺绌朵簡浠ヤ笅楠ㄦ灦灞忚嚜鍔ㄥ寲鏂规銆俠aidu-vue-skeleton-webpack-plugin瀹炵幇鍘熺悊鏄€氳繃vueSSR锛坴ue鏈嶅姟绔覆鏌擄級缁撳悎webpack鍦ㄦ瀯寤烘椂娓叉煋鍐欏ソ鐨剉ue楠ㄦ灦灞忕粍浠讹紝灏嗛娓叉煋鐢熸垚鐨凞OM鑺傜偣鍜岀浉鍏虫牱寮忔彃鍏ュ埌鏈€缁堢殑杈撳嚭html銆傞娓叉煋楠ㄦ灦灞忕粍浠堕渶瑕佸紑鍙戣€呰嚜宸卞啓锛堝浜庢兂鍋锋噿鐨勫皬寰潵璇存樉鐒朵笉鏄渶浼樻柟妗堭煓勶笍锛夎鏂规鍙€傜敤浜巚ue椤圭洰锛堝皬寰殑H5椤圭洰鏃㈡湁react涔熸湁vue锛変含涓?dps瀹炵幇鍘熺悊鍦ㄥ紑鍙戞椂浣跨敤puppeteer鎺у埗server绔痟eadlessChrome鎵撳紑闇€瑕佺敓鎴愰鏋堕〉闈㈢殑椤甸潰锛岀瓑寰呴〉闈㈠姞杞芥覆鏌撳畬鎴愬悗锛屾墽琛岄亶鍘哾om鏍戠殑鑴氭湰浠ｇ爜锛岄€夋嫨target鑺傜偣閫氳繃绠€鍗曠殑DOM鎿嶄綔锛岀敓鎴愰鏋跺睆html鍜宑ss浠ｇ爜涓嶈冻浠ラ€夋嫨鐢熸垚楠ㄦ灦灞忕殑鏃舵満銆傚綋椤甸潰鏈夐噸瀹氬悜鏃讹紙H5闇€瑕侀壌鏉冿級锛岀敓鎴愮殑楠ㄦ灦灞忎笌棰勬湡鐨勫唴閮ㄥ疄鐜版湁杈冨ぇ宸紓銆傛湁浜涘厓绱犳瘮濡備吉鍏冪礌鏄笉鑳界敓鎴愰鏋跺睆鐨勩€傛煇浜涢〉闈緷璧栦簬娴忚鍣ㄧ殑jsbridge鎺ュ彛銆傝宸ュ叿鏃犳硶浣跨敤銆備綘楗夸簡鍚楋紵-page-skeleton-webpack-plugin瀹炵幇鍘熺悊浣跨敤puppeteer鍦ㄦ湇鍔″櫒绔帶鍒秇eadlessChrome鎵撳紑寮€鍙戜腑闇€瑕佺敓鎴愰鏋堕〉闈㈢殑椤甸潰銆傜瓑寰呴〉闈㈠姞杞芥覆鏌撳畬鎴愬悗锛屽湪淇濈暀椤甸潰甯冨眬鏍峰紡鐨勫墠鎻愪笅锛屾帴涓嬫潵閫氳繃鍒犻櫎鎴栨坊鍔犻〉闈腑鐨勫厓绱狅紝灏嗗凡鏈夌殑鍏冪礌鐢ㄥ眰鍙犳牱寮忚鐩栵紝浠庤€屽疄鐜板浘鐗囥€佹枃瀛椼€佸浘鐗囩殑鏄剧ず鍦ㄤ笉鏀瑰彉椤甸潰甯冨眬鐨勬儏鍐典笅闅愯棌锛岄€氳繃鏍峰紡瑕嗙洊鍧楁樉绀轰负鐏拌壊銆傚苟灏嗕慨鏀瑰悗鐨凥TML鍜孋SS鏍峰紡鎻愬彇鍑烘潵锛岄€氳繃webpack鎻掍欢鐨勫舰寮忔敞鍏ュ埌鏈€缁堢敓鎴愮殑html涓紝涔熷彲浠ュ惎鍔║I鐣岄潰涓撻棬璋冩暣楠ㄦ灦灞忎唬鐮併€備笉瓒崇敱浜庣敓鎴愮殑楠ㄦ灦灞忚妭鐐规槸鏍规嵁椤甸潰鏈韩鐨勭粨鏋勫拰鏍峰紡锛屽湪涓€浜涘祵濂楄緝娣辩殑椤甸潰涓紝楠ㄦ灦灞忕殑浠ｇ爜閲忎笉浼氬皬锛岃€屽浜庡璺敱鐨勯〉闈紝鐢熸垚鐨勪唬鐮侀噺浼氭瘮杈冨潎鍖€鏇村ぇ銆傞€夋嫨浣曟椂鐢熸垚楠ㄦ灦灞忓箷銆傚綋椤甸潰鏈夐噸瀹氬悜鏃讹紙H5闇€瑕侀壌鏉冿級锛岀敓鎴愮殑楠ㄦ灦灞忓拰棰勬湡鐨勫樊鍒緢澶с€傚浜庝竴浜涗緷璧栨祻瑙堝櫒jsbridge鎺ュ彛鐨勯〉闈紝鏃犳硶浣跨敤璇ュ伐鍏凤紝鍙敮鎸佸巻鍙茶矾鐢便€傛垨澶氭垨灏戦兘鏈夐棶棰樸€傛姮澶翠竴鐪嬶紝宸茬粡鏄櫄涓?1鐐瑰浜嗭紝灏忚枃宸茬粡閿欒繃浜嗗拰灏忕編鐨勬櫄椁愶紝浼间箮涔熸病鏈夌幇鎴愮殑瑙ｅ喅鏂规鍙互瀹屽叏鏀惧績浣跨敤銆傚浜庤鐪熻礋璐ｇ殑灏忚枃鏉ヨ锛岃繖浠朵簨灏卞儚鏄皬钖囧績涓殑涓€鏍瑰埡銆備簬鏄皬浼熸敼鍙樹簡涓绘剰锛屽紑濮嬩簡宸ュ叿鑷爺涔嬭矾銆傞渶姹傛敹闆?.鐢ㄦ埛鍙互鎺у埗鐢熸垚楠ㄦ灦灞忕殑鏃舵満锛堜繚璇佸綋鍓嶉〉闈㈡槸鐩爣椤甸潰锛?.涓嶄笌鏌愪釜妗嗘灦寮鸿€﹀悎3.鐢熸垚鐨勯鏋跺睆浠ｇ爜灏藉彲鑳藉皬4.鑷姩闆嗘垚锛堢敓鎴愰鏋跺睆浠ｇ爜鏃犻渶鎵嬪姩copy鍒癶tml鏂囦欢锛?.鏀寔椤甸潰澶氳矾鐢憋紙鍖呮嫭hash璺敱鍜宧istory璺敱锛?.鍙互鍦ㄧ湡鏈轰笂瑙﹀彂鐢熸垚寮€鍏筹紙鏈嶅姟浜庝竴浜涢噸搴︿緷璧栭〉闈級鏈嶅姟绔帴鍙ｆ垨鑰呭鎴风jsbridge鐜锛夎В鍐虫柟妗堝疄鐜伴」鐩浣曟帴鍏ュ伐鍏疯鑷姩鐢熸垚楠ㄦ灦灞忥紝蹇呴』瑕佸緱鍒扮湡姝ｇ殑dom缁撴瀯锛岃璁╁紑鍙戣€呰嚜鐢遍€夋嫨鐢熸垚鐨勬椂鏈猴紝闇€瑕佷竴涓€滃紑鍏斥€濓紝鏈€濂借繖涓紑鍏虫槸鍙鐨勩€傝繖娑夊強鍒板浣曞皢寮€鍏冲拰楠ㄦ灦灞忕敓鎴愯剼鏈泦鎴愬埌鐢ㄦ埛椤圭洰涓€傞潪渚靛叆寮忚闂殑鏈€浣虫柟寮忓繀椤荤粨鍚堟瀯寤哄伐鍏凤紝杩欐牱鎵嶈兘淇濊瘉寮€鍙戜唬鐮佸拰宸ュ叿浠ｇ爜涓嶈€﹀悎鍦ㄤ竴璧枫€傚叿浣撳疄鐜颁唬鐮?浠ebpack鎻掍欢涓轰緥瀛?//webpackv4/v5compatibility://https://github.com/webpack/webpack/issues/11425#issuecomment-690387207if(webpack.version.startsWith('5.')){//濡傛灉鏄痺ebpack5compiler.hooks.compilation.tap(TAP_NAME,(compilation)=>{compilation.hooks.processAssets.tapAsync({name:TAP_NAME,stage:webpack.Compilation.PROCESS_ASSETS_STAGE_SUMMARIZE,},(assets,callback)=>{this.replaceCode(compilation,assets);callback();},);});}else{//webpack4compiler.hooks.emit.tapAsync(TAP_NAME,(compilation,callback)=>{this.replaceCode(compilation,compilation.assets);callback();});}replaceCode(compilation,assets){const{options={}}=this;const{htmlName=DEFAULT_HTML_NAME}=閫夐」锛汷bject.keys(assets).forEach((name)=>{if(name===htmlName){//鍙戠幇鏄洰鏍噃tml锛屾墽琛岃剼鏈彃鍏onstcontent=this.getReplaceCode(compilation,name);updateAsset锛堢紪璇戯紝鍚嶇О锛屽唴瀹癸級锛泒});}濡備綍鐢熸垚楠ㄦ灦灞忎唬鐮佹垜浠緱鍒板畬鏁寸殑dom缁撴瀯涔嬪悗锛屾帴涓嬫潵瑕佽€冭檻鐨勫氨鏄浣曠敓鎴愰鏋跺睆浠ｇ爜鐢熸垚鐨勬楠ゆ棤闈炲氨鏄互涓嬩袱姝ワ細1.閫夋嫨鐩爣dom鑺傜偣2.灏嗙洰鏍嘾om鑺傜偣杞崲鎴愰鏋跺睆浠ｇ爜鍙兘姣旇緝灏忥紝鎴戜滑鍙€夋嫨鐢ㄦ埛棣栧睆鍙鐨勮妭鐐癸級node鐢ㄦ埛鍙互鑷畾涔夛紙淇濊瘉鏈€缁堢敓鎴愮殑楠ㄦ灦灞忎唬鐮佹槸鐢ㄦ埛鎯宠鐨勶級楠ㄦ灦灞忎唬鐮佸敖閲忓皬锛屽彧閬嶅巻棣栧睆鍙鐨刣om鑺傜偣/***鍏冪礌鏄惁闅愯棌*/functionisHidden(node){constcomputedStyle=getComputedStyle(node);const{display,visibility,opacity}=computedStyle;杩斿洖鏄剧ず==='鏃?||鍙鎬?=='闅愯棌'||涓嶉€忔槑搴?=='0'||node.hidden;}/***鍏冪礌鏄惁鍑虹幇鍦ㄥ彲瑙佺獥鍙ｄ腑*@param{Object}鑺傜偣HTML鍏冪礌鑺傜偣*@return{Boolean}鍏冪礌鏄惁鍑虹幇鍦ㄥ彲瑙佺獥鍙ｄ腑闂?/functionisInViewPort(node){const{涓娿€佸彸銆佷笅銆佸乏}=node.getBoundingClientRect();return!isHidden(node)&&bottom>=0&&right>=0&&left<=WINDOW_WIDTH&&top<=WINDOW_HEIGHT;}浠呴€夋嫨鐩爣鑺傜偣鍜屾湁鏁堝唴瀹硅妭鐐癸細锛堣儗鏅級鍥剧墖銆佹枃鏈€佽〃鍗曢」銆侀煶棰戝拰video,Canvas,浼厓绱燾onstTARGET_TAG_NAME=['audio','button','canvas','code','img','input','pre','svg','textarea','video','xmp',];/***dom鑺傜偣鏄惁鍖呭惈鏌愪釜鏍囩*@param{Object}nodeHTML鑺傜偣node*/consthasTargetLabel=(node)=>TARGET_TAG_NAME.includes(node.tagName.toLowerCase());/***鍒ゆ柇dom鑺傜偣鐨刢ss灞炴€ackgroundImage涓槸鍚︽湁url鍙傛暟锛屽苟鍗犳弧灞忓箷浣滀负鍏ㄥ眬*@param{Object}鑺傜偣HTML鑺傜偣node*/constbackgroundHasurl=(node)=>{consthasBackgroundImage=/url\(.+?\)/.test(getComputedStyle(node).backgroundImage);const{瀹藉害锛岄珮搴=鑺傜偣銆俫etBoundingClientRect();returnhasBackgroundImage&&!(width===WINDOW_WIDTH&&height===WINDOW_HEIGHT);};/***鍒ゆ柇dom鑺傜偣鐨勫瓙鑺傜偣鏄惁瀛樺湪鏈夋晥鍐呭鑺傜偣*@param{Object}nodeHTMLNode鑺傜偣*/consthasTextNode=(node)=>Array.prototype.some.call(node.childNodes,(v)=>isTextNode(v));鐩爣鑺傜偣鐢ㄦ埛鍙互鑷畾涔変换浣曞伐鍏凤紝鏃犺澶氫箞瀹岀編锛屽湪澶嶆潅鐨勯〉闈㈠満鏅笅閮藉彲鑳藉瓨鍦ㄤ竴浜涚己闄凤紝鎵€浠ラ渶瑕佺暀涓嬩竴涓潯鐩紝浠ヤ究鐢ㄦ埛鍙互鑷娣诲姞鎴栧垹闄ょ洰鏍囪妭鐐广€傝缃粦鐧藉悕鍗?***@param{String}attName*@param{Object}nodenodenode*@return{Boolean}nodenodecontainsattName*/constcurryCheckNode=(attName)=>(node)=>node.hasAttribute(attName);/***鏄惁鍦ㄩ粦鍚嶅崟涓?/constisInBlackList=curryCheckNode('unneed-node');/***鏄惁鍦ㄧ櫧鍚嶅崟涓?/constisInWhiteList=curryCheckNode('need-node');dom鑺傜偣杞寲涓洪鏋跺睆浠ｇ爜杩欓噷鍊熺敤浜咼D-dps鐨勭敓鎴愭柟寮忋€?br/>瀵逛簬绗﹀悎鏉′欢鐨勫尯鍩燂紝鈥滀竴瑙嗗悓浠佲€濅細涓虹浉搴斿尯鍩熺敓鎴愯壊鍧椼€傗€滅瓑鍚屽鐞嗏€濇槸鎸囨牴鎹尯鍩熶笌瑙嗗彛鐨勭粷瀵硅窛绂诲€肩粺涓€鐢熸垚div鐨勮壊鍧楋紝涓嶈€冭檻绗﹀悎鏉′欢鐨勫尯鍩熺殑鍏蜂綋鍏冪礌銆佺粨鏋勫眰绾с€佹牱寮忋€傚彧闇€瑕佽幏鍙杁om鑺傜偣鍒皏iewport鐨勮窛绂伙紝鍏冪礌鐨勫楂樺拰鍦嗚灏卞彲浠ョ敓鎴愰鏋跺睆浠ｇ爜銆傚苟灏嗚窛绂汇€佸搴﹀拰楂樺害杞崲鎴愮櫨鍒嗘瘮锛屼篃鍙互瑙ｅ喅楠ㄦ灦灞忎唬鐮佸湪涓嶅悓鏈哄瀷涓嬬殑鍏煎鎬ч棶棰樸€?***鏍规嵁鑺傜偣node鐢熸垚html*@param{Object}node*/generateHtml(node){constcomputedStyle=getComputedStyle(node);璁﹞椤堕儴銆佸乏渚с€佸搴︺€侀珮搴=node.getBoundingClientRect();const{boxSizing,paddingTop,paddingLeft,paddingBottom,paddingRight,borderRadius}=computedStyle;constisStandardBoxModel=boxSizing==='杈规妗?;瀹藉害=isStandardBoxModel锛熷搴︼細瀹藉害-parseInt(paddingLeft,10)-parseInt(paddingRight,10);楂樺害=isStandardBoxModel?楂樺害锛氶珮搴?parseInt(paddingTop,10)-parseInt(paddingBottom,10);top=isStandardBoxModel?椤堕儴锛氶《閮?parseInt(paddingTop,10);宸?isStandardBoxModel?宸︼細宸?parseInt(paddingLeft,10);this.htmlQueue.push(drawBlock(width,height,top,left,borderRadius));}閬嶅巻鏂瑰紡姝ゆ椂閬嶅巻鏍戞湁涓ょ閫夋嫨锛歜fs锛堝箍搴︿紭鍏堢畻娉曪級鍜宒fs锛堟繁搴︿紭鍏堢畻娉曪級鍙兘鏈夋湅鍙嬩細鏈夌枒闂紝杩欎袱绉嶆柟寮忓浜庢渶缁堢敓鎴愮殑浠ｇ爜鏈変粈涔堝尯鍒憿锛熷弽姝ｄ粠鐢ㄦ埛鐨勮搴︾湅鏄竴鏍风殑锛屽洜涓哄彧瑕佺‘瀹氫簡鐩爣鑺傜偣锛屽崟涓猟om鑺傜偣鐢熸垚鐨勯鏋跺睆浠ｇ爜鏄竴鏍风殑銆?瀵逛簬鍗曚釜鐩爣鑺傜偣锛岀敓鎴愮殑楠ㄦ灦灞忎唬鐮佺‘瀹炴槸涓€鏍风殑锛屼絾鏄繖涓ょ鏂规硶涓妭鐐瑰拰鑺傜偣鐨勭粍鍚堥『搴忔湁寰堝ぇ鐨勪笉鍚屻€傜敱浜庢垜浠互pick鐨勫舰寮忛€夋嫨鑺傜偣锛屾墍浠ョ敓鎴愮殑楠ㄦ灦灞忎唬鐮佺殑缁撴瀯浼氬拰涔嬪墠鐨勯〉闈唬鐮佹湁寰堝ぇ鐨勪笉鍚屻€備娇鐢╠fs娣卞害閬嶅巻鍙互淇濊瘉鐢熸垚鐨勮妭鐐瑰湪dom鏍戜腑鐨勪笂涓嬮『搴忎笌涔嬪墠椤甸潰閬嶅巻鐨勭粨鏋勪竴鑷?){while(this.queue.length){constnode=this.queue.shift();濡傛灉锛坕sTextNode锛堣妭鐐癸級||node.id===INSERT_IMG_ID锛墈缁х画锛泒//闈炵洰鏍囪妭鐐规垨闈炲彲瑙嗙獥鍙ｇ殑鍙鍏冪礌涓嶅鐞唅f((node.nodeType===3&&node.textContent.trim().length===0)||!isTargetNode(node)||!isInViewPort(node))缁х画锛?/鐩爣鑺傜偣if(isAppointed(node)||hasTargetLabel(node)||backgroundHasurl(node)||hasTextNode(node)){this.generateHtml(node);缁х画;}this.queue.unshift(...Array.from(node.childNodes));}}濡備綍鏀寔澶氳矾鐢憋紝褰撶敤鎴峰彲浠ユ帶鍒堕鏋跺睆鐨勭敓鎴愭椂搴忥紝澶氳矾鐢变笉鏄棶棰樸€傚彧瑕佺敤鎴峰湪涓嶅悓鐨勮矾鐢变腑鐐瑰嚮鐢熸垚寮€鍏筹紝宸ュ叿灏变細閫氳繃url閾炬帴鑾峰彇褰撳墠璺敱锛屾墽琛岄鏋跺睆鐢熸垚鑴氭湰锛岀劧鍚庡皢璺敱ID浼犻€掔粰宸ュ叿鐨勬湇鍔″櫒锛屽伐鍏锋牴鎹互ID浣滀负鏂囦欢鍚嶃€傚浣曞皢鐢熸垚鐨勯鏋跺睆浠ｇ爜鎻掍欢闆嗘垚鍒伴」鐩腑鎴戜滑灏嗛鏋跺睆浠ｇ爜淇濆瓨鍒扮敤鎴烽」鐩腑鍚庯紝涔熷彲浠ヤ娇鐢ㄦ瀯寤哄伐鍏锋彃浠剁殑鍔熻兘閬嶅巻楠ㄦ灦灞忔枃浠跺す鑾峰彇鎵€鏈夐鏋舵埅鍙栦唬鐮佸苟鎻掑叆鍒伴」鐩殑html涓紝鍏跺疄灏辨槸涓€涓畝鍖栫増鐨凥tmlWebpackPlugin銆傚伐鍏锋彃浠朵富瑕佹祦绋嬩唬鐮佸涓嬶紙webpack-plugin锛夛細apply(compiler){assert(compiler.hooks,'璇峰皢webpack鐗堟湰鍗囩骇鍒?浠ヤ笂锛?);//鐢熶骇鐜->鎻掑叆楠ㄦ灦灞忥紝寮€鍙戠幆澧?>鍚姩鏈嶅姟锛屾彃鍏ョ敓鎴愰鏋跺睆闇€瑕佺殑浠ｇ爜if(isProd(compiler)){this.insertSkeleton(compiler);杩斿洖;}//鍚姩鏈嶅姟this.startServer(compiler);//缂栬瘧閿欒鎴杦atch瀹屾垚鍚庡叧闂湇鍔his.watchCompile(compiler);//鏇挎崲璧勬簮this.replaceSource(compiler);}鎴愬姛瀹屾垚锛熷畬鎴愪簡楠ㄦ灦灞忚嚜鍔ㄥ寲宸ュ叿鍚庯紝灏忚枃鍏撮珮閲囩儓鐨勫紑濮嬩簡宸ュ叿鐨勫疄璺点€傞殢鐫€娴嬭瘯鐢ㄤ緥锛圚5椤甸潰锛夌殑澧炲锛屽皬寰彂鐜颁簡涓€涓柊鐨勯棶棰橈細鐢熸垚鐨勯鏋跺睆铏界劧杩樺師浜嗙湡瀹炵殑椤甸潰缁撴瀯锛屼絾鏄垏鎹㈤鏋跺睆鍔ㄧ敾鏁堟灉杩樹笉澶熷ソ銆備篃寰堥夯鐑︺€傛瘡娆″垏鎹㈤兘闇€瑕佸湪鎻掍欢涓厤缃姩鐢诲弬鏁帮紝閲嶆柊鐢熸垚淇敼鐢熸垚鐨勯鏋跺睆浠ｇ爜銆傞渶瑕佸埛鏂版祻瑙堝櫒鎵嶈兘鐪嬪埌鏁堟灉锛屽姣斾竴涓嬮鏋跺睆椤甸潰鍜岀湡瀹炵殑H5椤甸潰銆傛潵鍥炲垏鎹紝瀵逛簬鍗婂睆H5椤甸潰锛屽満鏅紑鍙戣€呬笉婊℃剰鐨刣om鑺傜偣涔熷緢闅捐繕鍘熴€傞渶瑕侀€氳繃娣诲姞鑺傜偣榛戝悕鍗曠殑鏂瑰紡閲嶆柊鐢熸垚锛屾搷浣滈潪甯哥箒鐞愩€傝繖浜涢棶棰樼殑鍑虹幇锛岃灏忎紵杩欎釜瀹岀編涓讳箟鑰呴櫡鍏ヤ簡娌夋€濓紝鎶ご鐪嬩簡鐪嬫椂闂达紝宸茬粡鏄櫄涓婂崄浜岀偣浜嗐€傚皬钖囧洜涓哄伐鍏风殑鐮斿彂锛屽凡缁忎竴涓槦鏈熸病鏈夊拰灏忔涓€璧峰悆楗簡銆傛兂鍒拌繖閲岋紝涓€鑲℃贰娣＄殑鎮蹭激娑屼笂蹇冨ご銆傜瓑绛夛紝濡傛灉宸ュ叿鏈夌紪杈戝櫒锛岄偅涔堣繖浜涜皟浼樻搷浣滄槸涓嶆槸鍙互蹇€熷畬鎴愶紵鎯冲埌杩欓噷锛屽皬浼熷紑濮嬩簡浠栫殑缂栬緫鍣ㄥ紑鍙戜箣鏃呫€傞鏋跺睆缂栬緫鍣ㄩ渶姹傞泦鍚堝彲浠ユ嫋鎷姐€佸垹闄ゃ€佸鍒剁敓鎴愮殑楠ㄦ灦灞忚妭鐐广€備竴閿垏鎹㈠姩鐢讳竴閿繚瀛樺疄鏃堕瑙堬細鏀寔鐑噸杞斤紝淇濆瓨楠ㄦ灦灞忎唬鐮佸悗绔嬪嵆鍒锋柊缂栬緫鍣ㄩ〉闈€侱evtool淇敼鏍峰紡浠ｇ爜锛岀偣鍑讳繚瀛樺悗锛屾牱寮忎唬鐮佷細鍚屾鏇存柊鍒伴」鐩腑銆傝В鍐虫柟妗堝疄鐜板浣曟嫋鎷介鏋跺睆鐨刣om鑺傜偣锛屽緢瀹规槗瀹炵幇銆傛棤闈炲氨鏄粰dom鍏冪礌缁戝畾榧犳爣浜嬩欢锛岃绠楃Щ鍔ㄨ窛绂伙紝瀹屾垚鍏冪礌鐨勭Щ鍔ㄣ€傝繖閲岃娉ㄦ剰涓ょ偣锛氱敱浜庨鏋跺睆鑺傜偣鍙兘寰堝锛屾垜浠噰鐢ㄤ簨浠跺鎵樼殑鏂瑰紡鏉ュ鐞嗛紶鏍囦簨浠躲€傛垜浠箣鍓嶈杩囷細楠ㄦ灦灞廳om鑺傜偣璺濈viewport鐨勯暱搴︽槸鐧惧垎姣斻€傛墍浠ユ垜浠湪鎷栧姩杩囩▼涓浆鎹㈢殑杞崲鍗曚綅涔熷簲璇ユ槸鐧惧垎姣斻€傛垜浠湪绐楀彛涓Щ鍔ㄨ妭鐐癸紝璁＄畻鍑虹殑鍒拌鍙ｇ殑璺濈涔熷簲璇ユ槸鍒伴瑙堢獥鍙ｇ殑璺濈锛屾墍浠ユ垜浠渶瑕佷娇鐢╥frame浣滀负楠ㄦ灦灞忛瑙堢獥鍙ｃ€?divclass="edit-wrap":style="{width:width+'px',height:height+'px'}">
