娴忚鍣ㄦ槸澶氳繘绋嬬殑锛屾湁娴忚鍣ㄤ富杩涚▼锛岀綉缁滆繘绋嬶紝娓叉煋杩涚▼锛屾彃浠惰繘绋嬬瓑锛屽湪灏唄tml锛宑ss锛宩avascript瑙ｆ瀽鎴愪竴涓〉闈㈢殑鏃跺€欙紝灏遍渶瑕佸涓繘绋嬬殑鍒嗗伐鍚堜綔銆?br /> 褰撴祻瑙堝櫒鎺ュ彈鍒颁竴涓姹傜殑鍝嶅簲鏁版嵁锛屽苟涓旇鏁版嵁鐨勭被鍨嬶紙content-type锛変负text/html锛屾祻瑙堝櫒灏变細鐭ラ亾杩欐槸涓€涓猦tml椤甸潰锛屼簬鏄綉缁滆繘绋嬪氨浼氬皢鏀跺埌鐨勬暟鎹氦缁欐覆鏌撹繘绋嬪悗锛屽氨杩涘叆浜嗘覆鏌撻樁娈碉紝涔熷氨鏄湪杩欎竴涓樁娈碉紝娴忚鍣ㄤ細鏍规嵁鏁版嵁鐢熸垚涓€涓柊鐨勯〉闈€?/p>

鍦ㄦ墽琛岀殑杩囩▼涓紝浼氳鍒嗕负寰堝涓瓙闃舵锛岃緭鍏ョ殑HTML缁忚繃杩欎簺瀛愰樁娈碉紝鏈€鍚庝細杈撳嚭鍍忕礌锛岃繖涓鐞嗚繃绋嬪彨鍋氭覆鏌撴祦姘寸嚎锛屾寜鐓ф覆鏌撶殑鏃堕棿椤哄簭锛屾祦姘寸嚎鍙垎涓哄涓嬪嚑涓瓙闃舵锛?/p>

鏋勫缓DOM鏍?/h2>

缃戠粶杩涚▼浜ょ粰娓叉煋杩涚▼鐨勫瓧鑺傛祦娓叉煋杩涚▼鏄棤娉曡瘑鍒殑锛岄渶瑕佸厛杞寲涓篸om鏍戯紝鍦ㄦ覆鏌撹繘绋嬪唴閮ㄦ湁涓猦tml瑙ｆ瀽鍣紝灏辫礋璐ｅ皢瀛楄妭娴佽浆鍖栦负dom鏍?/p>

瑙ｆ瀽鍣ㄧ殑宸ヤ綔杩囩▼

• 閫氳繃鍒嗚瘝鍣ㄥ皢瀛楄妭娴佽浆鍖栦负token锛宼oken鍒嗕负tag token 鍜屾枃鏈瑃oken锛宼ag token鍙堝垎涓?starttag token 鍜?endtag token锛屾瘮濡?
  灏辨槸涓€涓猻tarttag token锛?/div> 灏辨槸涓€涓猠ndtag token
• 鎺ョ潃闇€瑕佸皢token瑙ｆ瀽涓篸om鑺傜偣锛屽苟灏哾om鑺傜偣娣诲姞鍒癲om鏍戜腑锛岃繖涓や釜杩囩▼鏄悓姝ヨ繘琛岀殑
• html瑙ｆ瀽鍣ㄧ淮鎶や簡涓€涓猼oken鐨勬爤缁撴瀯锛岃token鏍堜富瑕佺敤鏉ヨ绠楄妭鐐逛箣闂寸殑鐖跺瓙鍏崇郴锛屽湪绗竴涓樁娈典腑鐢熸垚鐨則oken浼氳鎸夌収椤哄簭鍘嬪叆杩欎釜鏍堜腑锛屽叿浣撹鍒欏涓嬶細
  • 濡傛灉鍘嬪叆鍒版爤涓殑鏄疭tartTag Token锛孒TML 瑙ｆ瀽鍣ㄤ細涓鸿 Token 鍒涘缓涓€涓?DOM 鑺傜偣锛岀劧鍚庡皢璇ヨ妭鐐瑰姞鍏ュ埌 DOM 鏍戜腑锛屽畠鐨勭埗鑺傜偣 灏辨槸鏍堜腑鐩搁偦鐨勯偅涓厓绱犵敓鎴愮殑鑺傜偣銆?/li>
  • 濡傛灉鍒嗚瘝鍣ㄨВ鏋愬嚭鏉ユ槸鏂囨湰 Token锛岄偅涔堜細鐢熸垚涓€涓枃鏈妭鐐癸紝鐒跺悗灏嗚鑺傜偣鍔犲叆鍒?DOM 鏍戜腑锛屾枃鏈?Token 鏄笉闇€瑕佸帇鍏ュ埌鏍堜腑锛屽畠鐨勭埗鑺傜偣灏辨槸褰撳墠鏍堥《 Token 鎵€瀵瑰簲鐨?DOM 鑺傜偣銆?/li>
  • 濡傛灉鍒嗚瘝鍣ㄨВ鏋愬嚭鏉ョ殑鏄疎ndTag 鏍囩锛屾瘮濡傛槸 EndTag div锛孒TML 瑙ｆ瀽鍣ㄤ細鏌ョ湅 Token 鏍堥《鐨勫厓绱犳槸鍚︽槸 StarTag div锛屽鏋滄槸锛屽氨灏?StartTag div 浠庢爤涓脊鍑猴紝琛ㄧず璇?div 鍏冪礌瑙ｆ瀽瀹屾垚銆?/li>

鏍峰紡璁＄畻

鏍峰紡璁＄畻鐨勭洰鐨勬槸涓轰簡璁＄畻dom鑺傜偣涓瘡涓厓绱犵殑鍏蜂綋鏍峰紡锛屽叿浣撳彲浠ュ垎涓轰互涓嬩笁涓楠わ細

• 鎶奵ss杞寲涓烘祻瑙堝櫒鑳藉鐞嗚В鐨勭粨鏋勶紝鍙互鐢╠ocument.styleSheet鏌ョ湅

• 杞崲鏍峰紡琛ㄤ腑鐨勫睘鎬у€硷紝浣垮叾鏍囧噯鍖?/p>

  灞炴€ф爣鍑嗗寲灏辨槸灏嗕竴浜涘睘鎬у€艰浆鍖栦负娓叉煋寮曟搸瀹规槗鐞嗚В鐨勶紝鏍囧噯鍖栫殑璁＄畻鍊硷紝姣斿涓€浜涘瓧浣撶殑鍗曚綅鏄痚m鐨勫氨闇€瑕佽浆鍖栦负px

• 绠楀嚭dom鏍戜腑姣忎釜鑺傜偣鐨勫叿浣撴牱寮?/p>

  鏍峰紡璁＄畻鐨勭涓€涓鍒欏氨鏄痗ss缁ф壙锛岀浜屼釜鏄眰鍙?/p>

  鎬讳箣锛屾牱寮忚绠楅樁娈电殑鐩殑鏄负浜嗚绠楀嚭DOM鑺傜偣涓瘡涓厓绱犵殑鍏蜂綋鏍峰紡锛屽湪璁＄畻杩囩▼涓渶瑕侀伒瀹圕SS鐨勭户鎵垮拰灞傚彔涓や釜瑙勫垯銆傝繖涓樁娈垫渶缁堣緭鍑虹殑鍐呭鏄瘡涓狣OM鑺傜偣鐨勬牱寮忥紝骞惰淇濆瓨鍦–omputedStyle鐨勭粨鏋勫唴銆?/p>

甯冨眬闃舵

甯冨眬涔熷氨鏄绠楀嚭dom鏍戜腑鍙鍏冪礌鐨勫嚑浣曚綅缃紝chrome鍦ㄥ竷灞€闃舵闇€瑕佸畬鎴愪袱涓换鍔★細鍒涘缓甯冨眬鏍戝拰甯冨眬璁＄畻

• 鍒涘缓甯冨眬鏍?/p>

  鍦―OM鏍戜竴鑸繕浼氬惈鏈夊緢澶氫笉鍙鐨勫厓绱狅紝姣斿head鏍囩锛岃繕鏈変娇鐢ㄤ簡display:none灞炴€х殑鍏冪礌銆傛墍浠ュ湪鏄剧ず涔嬪墠锛屾垜浠繕瑕侀澶栧湴鏋勫缓涓€妫靛彧鍖呭惈鍙鍏冪礌甯冨眬鏍戙€?/p>

  涓轰簡鏋勫缓甯冨眬鏍戯紝娴忚鍣ㄥぇ浣撲笂瀹屾垚浜嗕笅闈㈣繖浜涘伐浣?/p>

  • 閬嶅巻DOM鏍戜腑鐨勬墍鏈夊彲瑙佽妭鐐癸紝骞舵妸杩欎簺鑺傜偣鍔犲埌甯冨眬涓紱
  • 鑰屼笉鍙鐨勮妭鐐逛細琚竷灞€鏍戝拷鐣ユ帀锛屽head鏍囩涓嬮潰鐨勫叏閮ㄥ唴瀹癸紝鍐嶆瘮濡?code>body.p.span杩欎釜鍏冪礌锛屽洜涓哄畠鐨勫睘鎬у寘鍚?dispaly:none锛屾墍浠ヨ繖涓厓绱犱篃娌℃湁琚寘杩涘竷灞€鏍?/li>

• 甯冨眬璁＄畻

  鐜板湪鎴戜滑鏈変簡涓€妫靛畬鏁寸殑甯冨眬鏍戙€傞偅涔堟帴涓嬫潵锛屽氨瑕佽绠楀竷灞€鏍戣妭鐐圭殑鍧愭爣浣嶇疆浜?/p>

鍒嗗眰

鎺ヤ笅鏉ワ紝娓叉煋寮曟搸闇€瑕佷负鐗瑰畾鐨勮妭鐐圭敓鎴愪笓鐢ㄧ殑鍥惧眰锛屽苟鐢熸垚涓€棰楀搴旂殑鍥惧眰鏍戙€傚浘灞傚彔鍔犺捣鏉ュ氨鏄渶缁堢殑椤甸潰鍥惧儚

閫氬父鎯呭喌涓嬶紝骞朵笉鏄竷灞€鏍戠殑姣忎釜鑺傜偣閮藉寘鍚竴涓浘灞傦紝濡傛灉涓€涓妭鐐规病鏈夊搴旂殑灞傦紝閭ｄ箞杩欎釜鑺傜偣灏变粠灞炰簬鐖惰妭鐐圭殑鍥惧眰銆傚涓婂浘涓殑span鏍囩娌℃湁涓撳睘鍥惧眰锛岄偅涔堝畠浠氨浠庡睘浜庡畠浠殑鐖惰妭鐐瑰浘灞傘€備絾涓嶇鎬庢牱锛屾渶缁堟瘡涓€涓妭鐐归兘浼氱洿鎺ユ垨鑰呴棿鎺ュ湴浠庡睘浜庝竴涓眰銆?/p>

婊¤冻浠ヤ笅鏉′欢鎵嶄細琚彁鍗囦负鍗曠嫭鐨勫眰

• 绗竴鐐癸紝鎷ユ湁灞傚彔涓婁笅鏂囩殑鍏冪礌浼氳鎻愬崌涓哄崟鐙殑涓€灞?/p>

  椤甸潰鏄釜浜岀淮骞抽潰锛屼絾鏄眰鍙犱笂涓嬫枃鑳藉璁〩TML鍏冪礌鍏锋湁涓夌淮姒傚康锛岃繖浜汬TML鍏冪礌鎸夌収鑷韩灞炴€х殑浼樺厛绾у垎甯冨湪鍨傜洿浜庤繖涓簩缁村钩闈㈢殑z杞翠笂銆備綘鍙互缁撳悎涓嬪浘鏉ョ洿瑙傛劅鍙椾笅锛?/p>

• 闇€瑕佸壀瑁佺殑鍦版柟涔熶細琚垱寤轰负鍥惧眰

  鏍囩閲岄潰鐨勫唴瀹硅秴鍑轰簡鏍囩鐨勫搴﹀拰楂樺害锛屽氨浼氬嚭鐜板壀瑁併€傚嚭鐜拌繖绉嶈鍓儏鍐电殑鏃跺€欙紝娓叉煋寮曟搸浼氫负鏂囧瓧閮ㄥ垎鍗曠嫭鍒涘缓涓€涓眰锛屽鏋滃嚭鐜版粴鍔ㄦ潯锛屾粴鍔ㄦ潯涔熶細琚彁鍗囦负鍗曠嫭鐨勫眰

鍥惧眰缁樺埗

鍦ㄥ畬鎴愬浘灞傛爲鐨勬瀯寤轰箣鍚庯紝娓叉煋寮曟搸浼氬鍥惧眰鏍戜腑鐨勬瘡涓€涓浘灞傝繘琛岀粯鍒?/p>

缁樺埗鐨勮繃绋嬪氨鏄妸涓€涓浘灞傜殑缁樺埗鎷嗗垎鎴愬緢澶氬皬鐨勭粯鍒舵寚浠わ紝鐒跺悗鍐嶆妸杩欎簺鎸囦护鎸夌収椤哄簭缁勬垚涓€涓緟缁樺埗鍒楄〃

缁樺埗鍒楄〃涓殑鎸囦护鍏跺疄闈炲父绠€鍗曪紝灏辨槸璁╁叾鎵ц涓€涓畝鍗曠殑缁樺埗鎿嶄綔锛屾瘮濡傜粯鍒剁矇鑹茬煩褰㈡垨鑰呴粦鑹茬殑绾跨瓑銆傝€岀粯鍒朵竴涓厓绱犻€氬父闇€瑕佸ソ鍑犳潯缁樺埗鎸囦护锛屽洜涓烘瘡涓厓绱犵殑鑳屾櫙銆佸墠鏅€佽竟妗嗛兘闇€瑕佸崟鐙殑鎸囦护鍘荤粯鍒躲€傛墍浠ュ湪鍥惧眰缁樺埗闃舵锛岃緭鍑虹殑鍐呭灏辨槸杩欎簺寰呯粯鍒跺垪琛ㄣ€?/p>

鏍呮牸鍖栨搷浣?/h2>

缁樺埗鍒楄〃鍙槸鐢ㄦ潵璁板綍缁樺埗椤哄簭鍜岀粯鍒舵寚浠ょ殑鍒楄〃锛岃€屽疄闄呬笂缁樺埗鎿嶄綔鏄敱娓叉煋寮曟搸涓殑鍚堟垚绾跨▼鏉ュ畬鎴愮殑銆?/p>

褰撳浘灞傜殑缁樺埗鍒楄〃鍑嗗濂戒箣鍚庯紝涓荤嚎绋嬩細鎶婅缁樺埗鍒楄〃鎻愪氦锛坈ommit锛夌粰鍚堟垚绾跨▼

• 閫氬父涓€涓〉闈㈠彲鑳藉緢澶э紝浣嗘槸鐢ㄦ埛鍙兘鐪嬪埌鍏朵腑鐨勪竴閮ㄥ垎锛屾垜浠妸鐢ㄦ埛鍙互鐪嬪埌鐨勮繖涓儴鍒嗗彨鍋氳鍙ｏ紙viewport锛夈€?/li>

鍦ㄦ湁浜涙儏鍐典笅锛屾湁鐨勫浘灞傚彲浠ュ緢澶э紝姣斿鏈夌殑椤甸潰浣犱娇鐢ㄦ粴鍔ㄦ潯瑕佹粴鍔ㄥソ涔呮墠鑳芥粴鍔ㄥ埌搴曢儴锛屼絾鏄€氳繃瑙嗗彛锛岀敤鎴峰彧鑳界湅鍒伴〉闈㈢殑寰堝皬涓€閮ㄥ垎锛屾墍浠ュ湪杩欑鎯呭喌涓嬶紝瑕佺粯鍒跺嚭鎵€鏈夊浘灞傚唴瀹圭殑璇濓紝灏变細浜х敓澶ぇ鐨勫紑閿€锛岃€屼笖涔熸病鏈夊繀瑕併€?/p>

鍩轰簬杩欎釜鍘熷洜锛屽悎鎴愮嚎绋嬩細灏嗗浘灞傚垝鍒嗕负鍥惧潡锛坱ile锛夛紝杩欎簺鍥惧潡鐨勫ぇ灏忛€氬父鏄?56x256鎴栬€?12x512

鍚堟垚绾跨▼浼氭寜鐓ц鍙ｉ檮杩戠殑鍥惧潡鏉ヤ紭鍏堢敓鎴愪綅鍥撅紝瀹為檯鐢熸垚浣嶅浘鐨勬搷浣滄槸鐢辨爡鏍煎寲鏉ユ墽琛岀殑銆傛墍璋撴爡鏍煎寲锛屾槸鎸囧皢鍥惧潡杞崲涓轰綅鍥俱€傝€屽浘鍧楁槸鏍呮牸鍖栨墽琛岀殑鏈€灏忓崟浣嶃€傛覆鏌撹繘绋嬬淮鎶や簡涓€涓爡鏍煎寲鐨勭嚎绋嬫睜锛屾墍鏈夌殑鍥惧潡鏍呮牸鍖栭兘鏄湪绾跨▼姹犲唴鎵ц鐨勶紝杩愯鏂瑰紡濡備笅鍥炬墍绀猴細

閫氬父锛屾爡鏍煎寲杩囩▼閮戒細浣跨敤GPU鏉ュ姞閫熶娇鐢紝浣跨敤GPU鐢熸垚浣嶅浘鐨勮繃绋嬪彨鍋氬揩閫熸爡鏍煎寲锛屾垨鑰匞PU鏍呮牸鍖栵紝鐢熸垚鐨勪綅鍥句細淇濆瓨鍦℅PU鍐呭瓨涓?/p>

鍚堟垚鍜屾樉绀?/h2>

涓€鏃︽墍鏈夌殑鍥惧潡閮借鏍呮牸鍖栵紝鍚堟垚绾跨▼灏变細鐢熸垚涓€涓粯鍒跺浘鍧楃殑鍛戒护—‘DrawQuad"锛岀劧鍚庡皢璇ュ懡浠ゆ彁浜ょ粰娴忚鍣ㄨ繘绋?/p>

娴忚鍣ㄨ繘绋嬮噷闈㈡湁涓€涓彨viz鐨勭粍浠讹紝鐢ㄦ潵鎺ユ敹鍚堟垚绾跨▼鍙戣繃鏉ョ殑DrawQuad鍛戒护锛岀劧鍚庢牴鎹瓺rawQuad鍛戒护锛屽皢鍏堕〉闈㈠唴瀹圭粯鍒跺埌鍐呭瓨涓紝鏈€鍚庡啀灏嗗唴瀛樻樉绀哄湪灞忓箷涓娿€?/p>

鍒拌繖閲岋紝缁忚繃杩欎竴绯诲垪鐨勯樁娈碉紝缂栧啓濂界殑HTML銆丆SS銆丣avaScript绛夋枃浠讹紝缁忚繃娴忚鍣ㄥ氨浼氭樉绀哄嚭婕備寒鐨勯〉闈簡銆?/p>

鎬荤粨

涓€涓畬鏁寸殑娓叉煋娴佺▼澶ц嚧鍙€荤粨涓哄涓?/strong>