Chrome娴忚鍣ㄥ浣曞伐浣滐紵(2)鍓嶈█锛氱敱浜庣瘒骞呰緝闀匡紝鏈瘒鍐呭鍒嗕负涓ら儴鍒嗐€傚鏋滀綘杩樻病鏈夌湅杩囩涓€閮ㄥ垎锛岃鏈夋剰璇嗗湴鍥為【涓€涓婥hrome娴忚鍣ㄦ槸濡備綍宸ヤ綔鐨勶紵(1)7.椤甸潰缁樺埗Paint缁忚繃鍓嶉潰鐨勬楠わ紝瀹屾暣鐨勯〉闈㈢粨鏋勫氨宸笉澶氬彲浠ョ粯鍒朵簡銆備絾鏄繕鏈変竴涓棶棰橈紝Render绾跨▼涓嶇煡閬撲綘鏄惁瀵逛竴浜汥OM鍏冪礌璁剧疆浜嗙粷瀵瑰畾浣嶏紝姣斿display:absolute銆乻ticky鎴栬€呰皟鏁翠簡涓€浜涘厓绱犵殑z-index灞炴€с€傚洜涓烘垜浠箣鍓嶈杩囷紝鍦ㄧ粯鍒禗OM鐨勬椂鍊欙紝Render鏄笉鍏冲績鏍峰紡鐨勶紝鎵€浠ユ帴涓嬫潵灏辨槸瑕佽В鍐宠繖涓棶棰樸€傝繖鏃跺€橰ender杩涚▼鐨勪富绾跨▼锛圡ainThread锛変細閬嶅巻LayoutTree缁樺埗涓€涓粯鍒惰褰曡〃锛圥aintRecord锛夋潵淇濊瘉椤甸潰缁樺埗鐨勯『搴忔槸姝ｇ‘鐨勩€傚綋涓荤嚎绋嬪畬鎴愰亶鍘嗗悗锛屼細鐢熸垚涓€涓狶ayerTree銆傜劧鍚嶳ender杩涚▼鐨勪富绾跨▼灏嗚璁″浘浼犻€掔粰compositor绾跨▼锛宑ompositor绾跨▼鎸佹湁璁捐鍥撅紙LayerTree锛夊拰缁樺浘璁板綍琛紙PaintRecord锛夊苟灏嗙粯鍒朵俊鎭浆鍖栦负鍍忕礌鍧愭爣淇℃伅锛屽彲浠ュ緱鍒颁汉绫荤殑璁ゅ彲銆傝繖涓繃绋嬬О涓哄厜鏍呭寲銆俁asteringcompositorthread鐨勫厜鏍呭寲鍘熺悊骞朵笉鏄竴涓粠椤甸潰椤堕儴鍒板簳閮ㄦ覆鏌撶殑杩囩▼銆傝€屾槸灏嗘暣涓〉闈㈠垎鎴愬涓猼ile锛屼氦缁欏涓厜鏍呭寲绾跨▼锛圧asterThread锛夊鐞嗭紝绫讳技涓嬪浘銆傛爡鏍肩嚎绋嬪皢姣忎釜鍥惧潡鐨勬爡鏍煎寲淇℃伅淇濆瓨鍦℅PU鐨勫唴瀛樹腑銆傚綋鏁翠釜椤甸潰鍏夋爡鍖栧悗锛屼富绾跨▼浼氭敹闆嗗厜鏍呯嚎绋嬩骇鐢熺殑DrawQuads淇℃伅锛岃繖浜涗俊鎭褰曚簡姣忎釜tile鍦ㄥ唴瀛樹腑鐨勪綅缃互鍙婃瘡涓猼ile闇€瑕佸湪椤甸潰鐨勪粈涔堜綅缃覆鏌撶殑淇℃伅銆傦紙濡傛灉鏇村鏄撶悊瑙ｏ紝鍙互绠€鍗曠悊瑙onstDraw=x鍧愭爣锛寉鍧愭爣绛夌粯鍥句俊鎭級鏍规嵁杩欎簺DrawQuads鐨勪俊鎭紝鍚堟垚鍣ㄧ嚎绋嬩細鐢熸垚涓€涓悎鎴愬櫒妗嗘灦锛圕ompositorFrame锛夈€傝繖涓悎鎴愬櫒妗嗘灦鐒跺悗閫氳繃IPC锛堣繘绋嬮棿閫氫俊锛夊彂閫佸埌娴忚鍣ㄨ繘绋嬨€傚氨鏄繖鏍凤級锛岀劧鍚庢槸娴忚鍣ㄨ繘绋嬪皢鍚堟垚鍣ㄦ鏋朵紶閫掔粰GPU杩涚▼銆傦紙鍒繕浜嗘垜浠箣鍓嶇涓€绡囪鐨勶紝娴忚鍣ㄧ嚎绋嬭礋璐ｈ皟搴﹀悇涓繘绋嬬殑閰嶅悎锛夌粓浜嶨PU娓叉煋椤甸潰鍒伴〉闈簡锛屾伃鍠滒煄夛紒鍘嗙粡涔濆崄涔濆叓鍗佷竴闅撅紝缁堜簬鐪嬪埌鏈€缁堢殑椤甸潰鏁堟灉浜嗐€傛垜浠彲浠ラ€夋嫨Chrome璋冭瘯宸ュ叿涓嬬殑Performance閫夐」鍗★紝鏉ュ彂鐜版祻瑙堝櫒缁樺埗鐨勬瘡涓€甯у搴旂殑椤甸潰銆傚叓銆傚洖娴佸拰閲嶇粯濡傛灉姝ゆ椂鎴戜滑寮€濮嬫粴鍔ㄩ〉闈紝鍚堟垚鍣ㄧ嚎绋嬩細鍐嶆鐢熸垚涓€涓悎鎴愬櫒甯э紝閫氳繃IPC浼犻€掔粰娴忚鍣ㄨ繘绋嬶紝娴忚鍣ㄨ繘绋嬪啀浼犻€掔粰GPU锛孏PU浼氬啀娆＄粯鍒朵竴涓柊鐨勬鏋讹紝鐒跺悗灏嗕竴涓柊鐨勯〉闈㈡覆鏌撳埌灞忓箷涓娿€傛鏃讹紝Layout涔嬪悗鐨勬墍鏈夋楠ら兘浼氶噸鏂版墽琛屻€傝繖涓繃绋嬬О涓哄洖娴併€傚彲浠ョ湅鍑洪噸鎺掔殑浠ｄ环鏄潪甯搁珮鐨勶紝甯歌鐨勫紩璧烽噸鎺掔殑鍔ㄤ綔锛屾瘮濡傛敼鍙楧OM鍏冪礌鐨勯珮搴︼紝瀹氫綅锛屼吉鍏冪礌绛夌瓑銆傦紙闈炴湰鏂囬噸鐐癸紝鐩稿叧鐭ヨ瘑璇疯嚜琛屾煡闃咃級褰撻〉闈㈠崟绾敼鍙樿儗鏅壊绛夊姩浣滄椂锛屽彧浼氳Е鍙戞牱寮忚绠楀拰缁樺埗锛屼笉浼氭墽琛屽叾浠栦换鍔°€傝繖涓繃绋嬬О涓洪噸缁樸€備粠涓婂浘鎴戜滑鍙互娓呮鐨勭湅鍒伴噸鎺掑拰閲嶇粯閮芥槸鍦ㄤ富绾跨▼涓婅繘琛岀殑銆備笉瑕佸繕璁拌繕鏈変竴涓噸閲忕骇鐨凧avaScript涔熷湪涓荤嚎绋嬩笂杩愯銆傛墍浠ュ鏋滃ぇ閲忕殑閲嶇粯鍜岄噸鎺掑悓鏃惰繘琛岋紝涓棿绌挎彃杩愯JS浠ｇ爜锛屽氨浼氬鑷撮〉闈㈠崱椤裤€傗€滃崱鈥濈殑鍘熷洜鎴戜滑缁х画寰€涓嬬湅銆備節銆傛覆鏌撳抚鐜囩洰鍓嶆垜浠富娴佹樉绀哄櫒鐨勫抚鐜囬兘鍦?0HZ浠ヤ笂銆備篃灏辨槸璇存垜浠數鑴戠殑鎬ц兘鏄敮鎸佹樉绀哄櫒鍦?000ms鍐呭畬鎴?0娆￠〉闈㈠埛鏂扮殑锛堜笉鏄寚F5鍒锋柊鐨勯偅涓€傘€傘€傪煒傦級閭ｄ箞鍙互寰楀埌1000/60=16.7777銆傛祻瑙堝櫒蹇呴』姣忛殧16ms缁樺埗涓€涓柊鐨勬鏋讹紝浠ョ‘淇濈敤鎴锋湁鈥滀笉鍗￠】鈥濈殑鎰熻銆傝繘涓€姝ョ殑瑙ｉ噴灏辨槸娴忚鍣ㄥ繀椤诲湪16ms鍐呭畬鎴愪笅鍥句腑鐨勮皟搴﹁繃绋嬶紝杩欐牱鐢ㄦ埛鎵嶈兘寰楀埌鏈€濂界殑浣撻獙銆傞偅涔堝綋涓荤嚎绋嬬殑JS浠ｇ爜杩囦簬鑰楁椂锛屾棤娉曞強鏃惰繑鍥炲埌涓荤嚎绋嬶紝浠ヤ究鍦?6ms鍐呰繘琛孡ayout鍜孡ayer锛屽氨浼氶€犳垚鈥滃崱姝烩€濈殑鐜拌薄銆傦紙鎯宠薄涓€涓嬪湪鐜╂父鎴忔椂涓㈠抚锛夊崄銆俆ransform鐨勪紭鐐规垜浠粡甯哥湅鍒板缓璁敤Transform浠ｆ浛top銆乴eft绛変綅缃彉鍖栧睘鎬с€傛牴鏈師鍥犳槸锛歍ransform灞炴€у畬鎴愮殑鍔ㄧ敾涓嶄細閲嶆柊甯冨眬鍜孡ayer锛岃€屾槸鐩存帴鍦╟ompositor绾跨▼鍜実rid绾跨▼涓繍琛岋紝涔熷氨鏄涓嶄細鎶㈠崰涓荤嚎绋嬬殑浣跨敤锛屼篃涓嶄細褰卞搷Execution鐨凧S浠ｇ爜銆傛渶鍚庢劅璋绔檜p涓伙紝objtube鐨勯檰鍙効杩欎釜瑙嗛锛岃鎴戦€氫織鏄撴噦鐨勪簡瑙ｄ簡澶ф鐨勬祦绋嬨€傦紙馃崏鏂囦腑閮ㄥ垎鎴浘鏉ヨ嚜璇ヨ棰戯級
