1 line
40 KiB
JavaScript
1 line
40 KiB
JavaScript
"use strict";(self.webpackChunkjjbook=self.webpackChunkjjbook||[]).push([[9500],{3905:function(e,t,r){r.d(t,{Zo:function(){return s},kt:function(){return k}});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},l=Object.keys(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(a=0;a<l.length;a++)r=l[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var p=a.createContext({}),m=function(e){var t=a.useContext(p),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},s=function(e){var t=m(e.components);return a.createElement(p.Provider,{value:t},e.children)},c={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,l=e.originalType,p=e.parentName,s=i(e,["components","mdxType","originalType","parentName"]),u=m(r),k=n,d=u["".concat(p,".").concat(k)]||u[k]||c[k]||l;return r?a.createElement(d,o(o({ref:t},s),{},{components:r})):a.createElement(d,o({ref:t},s))}));function k(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var l=r.length,o=new Array(l);o[0]=u;var i={};for(var p in t)hasOwnProperty.call(t,p)&&(i[p]=t[p]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var m=2;m<l;m++)o[m]=r[m];return a.createElement.apply(null,o)}return a.createElement.apply(null,r)}u.displayName="MDXCreateElement"},3997:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return i},contentTitle:function(){return p},metadata:function(){return m},toc:function(){return s},default:function(){return u}});var a=r(7462),n=r(3366),l=(r(7294),r(3905)),o=["components"],i={sidebar_label:"\u6d4f\u89c8\u5668\uff1a\u6d4f\u89c8\u5668\u6e32\u67d3\u673a\u5236",sidebar_position:1},p="\u6d4f\u89c8\u5668\u6e32\u67d3\u673a\u5236",m={unversionedId:"book2/browser-render-mechanism",id:"book2/browser-render-mechanism",isDocsHomePage:!1,title:"\u6d4f\u89c8\u5668\u6e32\u67d3\u673a\u5236",description:"\u76f8\u5173\u95ee\u9898",source:"@site/docs/book2/browser-render-mechanism.md",sourceDirName:"book2",slug:"/book2/browser-render-mechanism",permalink:"/awesome-interview/book2/browser-render-mechanism",tags:[],version:"current",sidebarPosition:1,frontMatter:{sidebar_label:"\u6d4f\u89c8\u5668\uff1a\u6d4f\u89c8\u5668\u6e32\u67d3\u673a\u5236",sidebar_position:1},sidebar:"tutorialSidebar",previous:{title:"\u7efc\u5408\uff1a\u6d4f\u89c8\u5668\u4ece\u8f93\u5165\u7f51\u5740\u5230\u9875\u9762\u5c55\u73b0\u7684\u8fc7\u7a0b",permalink:"/awesome-interview/book1/topic-enter-url-display-xx"},next:{title:"\u6d4f\u89c8\u5668\uff1a\u5783\u573e\u56de\u6536\u673a\u5236",permalink:"/awesome-interview/book2/browser-garbage"}},s=[{value:"\u76f8\u5173\u95ee\u9898",id:"\u76f8\u5173\u95ee\u9898",children:[]},{value:"\u56de\u7b54\u5173\u952e\u70b9",id:"\u56de\u7b54\u5173\u952e\u70b9",children:[]},{value:"\u77e5\u8bc6\u70b9\u6df1\u5165",id:"\u77e5\u8bc6\u70b9\u6df1\u5165",children:[{value:"1. \u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u6d41\u7a0b",id:"1-\u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u6d41\u7a0b",children:[]},{value:"2. \u6d4f\u89c8\u5668\u6e32\u67d3\u6027\u80fd\u7684\u4f18\u5316",id:"2-\u6d4f\u89c8\u5668\u6e32\u67d3\u6027\u80fd\u7684\u4f18\u5316",children:[]}]},{value:"\u53c2\u8003\u8d44\u6599",id:"\u53c2\u8003\u8d44\u6599",children:[]}],c={toc:s};function u(e){var t=e.components,r=(0,n.Z)(e,o);return(0,l.kt)("wrapper",(0,a.Z)({},c,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("h1",{id:"\u6d4f\u89c8\u5668\u6e32\u67d3\u673a\u5236"},"\u6d4f\u89c8\u5668\u6e32\u67d3\u673a\u5236"),(0,l.kt)("h2",{id:"\u76f8\u5173\u95ee\u9898"},"\u76f8\u5173\u95ee\u9898"),(0,l.kt)("ul",null,(0,l.kt)("li",{parentName:"ul"},"\u6d4f\u89c8\u5668\u5982\u4f55\u6e32\u67d3\u9875\u9762"),(0,l.kt)("li",{parentName:"ul"},"\u6709\u54ea\u4e9b\u63d0\u9ad8\u6d4f\u89c8\u5668\u6e32\u67d3\u6027\u80fd\u7684\u65b9\u6cd5")),(0,l.kt)("h2",{id:"\u56de\u7b54\u5173\u952e\u70b9"},"\u56de\u7b54\u5173\u952e\u70b9"),(0,l.kt)("p",null,(0,l.kt)("inlineCode",{parentName:"p"},"DOM")," ",(0,l.kt)("inlineCode",{parentName:"p"},"CSSOM")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u7ebf\u7a0b\u4e92\u65a5")," ",(0,l.kt)("inlineCode",{parentName:"p"},"\u6e32\u67d3\u6811")," ",(0,l.kt)("inlineCode",{parentName:"p"},"Compositing")," ",(0,l.kt)("inlineCode",{parentName:"p"},"GPU \u52a0\u901f")),(0,l.kt)("p",null,"\u5f53\u6d4f\u89c8\u5668\u8fdb\u7a0b\u83b7\u53d6\u5230 HTML \u7684\u7b2c\u4e00\u4e2a\u5b57\u8282\u5f00\u59cb\uff0c\u4f1a\u901a\u77e5\u6e32\u67d3\u8fdb\u7a0b\u5f00\u59cb\u89e3\u6790 HTML\uff0c\u5c06 HTML \u8f6c\u6362\u6210 DOM \u6811\uff0c\u5e76\u8fdb\u5165\u6e32\u67d3\u6d41\u7a0b\u3002\u4e00\u822c\u6240\u6709\u7684\u6d4f\u89c8\u5668\u90fd\u4f1a\u7ecf\u8fc7\u4e94\u5927\u6b65\u9aa4\uff0c\u5206\u522b\u662f\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"PARSE\uff1a\u89e3\u6790 HTML\uff0c\u6784\u5efa DOM \u6811\u3002"),(0,l.kt)("li",{parentName:"ol"},"STYLE\uff1a\u4e3a\u6bcf\u4e2a\u8282\u70b9\u8ba1\u7b97\u6700\u7ec8\u7684\u6709\u6548\u6837\u5f0f\u3002"),(0,l.kt)("li",{parentName:"ol"},"LAYOUT\uff1a\u4e3a\u6bcf\u4e2a\u8282\u70b9\u8ba1\u7b97\u4f4d\u7f6e\u548c\u5927\u5c0f\u7b49\u5e03\u5c40\u4fe1\u606f\u3002"),(0,l.kt)("li",{parentName:"ol"},"PAINT\uff1a\u7ed8\u5236\u4e0d\u540c\u7684\u76d2\u5b50\uff0c\u4e3a\u4e86\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u91cd\u7ed8\uff0c\u5c06\u4f1a\u5206\u6210\u591a\u4e2a\u5c42\u8fdb\u884c\u5904\u7406\u3002"),(0,l.kt)("li",{parentName:"ol"},"COMPOSITE & RENDER\uff1a\u5c06\u4e0a\u8ff0\u4e0d\u540c\u7684\u5c42\u5408\u6210\u4e3a\u4e00\u5f20\u4f4d\u56fe\uff0c\u53d1\u9001\u7ed9 GPU\uff0c\u6e32\u67d3\u5230\u5c4f\u5e55\u4e0a\u3002")),(0,l.kt)("p",null,"\u4e3a\u4e86\u63d0\u9ad8\u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u6027\u80fd\uff0c\u901a\u5e38\u7684\u624b\u6bb5\u662f\u4fdd\u8bc1\u6e32\u67d3\u6d41\u7a0b\u4e0d\u88ab\u963b\u585e\uff0c\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u7ed8\u5236\u8ba1\u7b97\u548c\u91cd\u6392\u91cd\u7ed8\uff0c\u5229\u7528 GPU \u786c\u4ef6\u52a0\u901f\u7b49\u6280\u672f\u6765\u63d0\u9ad8\u6e32\u67d3\u6027\u80fd\u3002"),(0,l.kt)("h2",{id:"\u77e5\u8bc6\u70b9\u6df1\u5165"},"\u77e5\u8bc6\u70b9\u6df1\u5165"),(0,l.kt)("h3",{id:"1-\u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u6d41\u7a0b"},"1. \u6d4f\u89c8\u5668\u7684\u6e32\u67d3\u6d41\u7a0b"),(0,l.kt)("p",null,"Chromium \u7684\u6e32\u67d3\u6d41\u7a0b\u7684\u4e3b\u8981\u6b65\u9aa4\u5982\u4e0b\u56fe\u6240\u793a\uff1a"),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://user-images.githubusercontent.com/4338052/131218930-b923183d-a4d4-44da-9f53-f074a3583a8f.png",alt:"render flow"})),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,l.kt)("a",{parentName:"p",href:"https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.ga884fe665f_64_1800"},"Life of a Pixel"))),(0,l.kt)("h4",{id:"11-parse-\u9636\u6bb5\u89e3\u6790-html"},"1.1 Parse \u9636\u6bb5\uff1a\u89e3\u6790 HTML"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u6784\u5efa DOM \u6811")),(0,l.kt)("p",null,"\u6e32\u67d3\u8fdb\u7a0b\u4e3b\u7ebf\u7a0b\u89e3\u6790 HTML \u5e76\u6784\u5efa\u51fa\u7ed3\u6784\u5316\u7684\u6811\u72b6\u6570\u636e\u7ed3\u6784 DOM \u6811\uff0c\u9700\u8981\u7ecf\u5386\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"Conversion\uff08\u8f6c\u6362\uff09\uff1a\u6d4f\u89c8\u5668\u4ece\u7f51\u7edc\u6216\u78c1\u76d8\u8bfb\u53d6 HTML \u6587\u4ef6\u539f\u59cb\u5b57\u8282\uff0c\u6839\u636e\u6307\u5b9a\u7684\u6587\u4ef6\u7f16\u7801\uff08\u5982 UTF-8\uff09\u5c06\u5b57\u8282\u8f6c\u6362\u6210\u5b57\u7b26\u3002"),(0,l.kt)("li",{parentName:"ol"},"Tokenizing\uff08\u5206\u8bcd\uff09\uff1a\u6d4f\u89c8\u5668\u6839\u636e HTML \u89c4\u8303\u5c06\u5b57\u7b26\u4e32\u8f6c\u6362\u4e3a\u4e0d\u540c\u7684\u6807\u8bb0\uff08\u5982 ",(0,l.kt)("inlineCode",{parentName:"li"},"<html>"),", ",(0,l.kt)("inlineCode",{parentName:"li"},"<body>"),"\uff09\u3002"),(0,l.kt)("li",{parentName:"ol"},"Lexing\uff08\u8bed\u6cd5\u5206\u6790\uff09\uff1a\u4e0a\u4e00\u6b65\u4ea7\u751f\u7684\u6807\u8bb0\u5c06\u88ab\u8f6c\u6362\u4e3a\u5bf9\u8c61\uff0c\u8fd9\u4e9b\u5bf9\u8c61\u5305\u542b\u4e86 HTML \u8bed\u6cd5\u7684\u5404\u79cd\u4fe1\u606f\uff0c\u5982\u5c5e\u6027\u3001\u5c5e\u6027\u503c\u3001\u6587\u672c\u7b49\u3002"),(0,l.kt)("li",{parentName:"ol"},"DOM construction\uff08DOM \u6784\u9020\uff09\uff1a\u56e0\u4e3a HTML \u6807\u8bb0\u5b9a\u4e49\u4e86\u4e0d\u540c\u6807\u7b7e\u4e4b\u95f4\u7684\u5173\u7cfb\uff0c\u4e0a\u4e00\u6b65\u4ea7\u751f\u7684\u5bf9\u8c61\u4f1a\u94fe\u63a5\u5728\u4e00\u4e2a\u6811\u72b6\u6570\u636e\u7ed3\u6784\u4e2d\uff0c\u4ee5\u6807\u8bc6\u7236\u5b50\u3001\u5144\u5f1f\u5173\u7cfb\u3002")),(0,l.kt)("p",null,"\u6784\u5efa DOM \u7684\u6d41\u7a0b\u5982\u4e0b\u56fe\u6240\u793a\uff1a"),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/full-process.png",alt:"DOM"})),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,l.kt)("a",{parentName:"p",href:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model"},"Constructing the Object Model"))),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u6b21\u7ea7\u8d44\u6e90\u52a0\u8f7d")),(0,l.kt)("p",null,"\u4e00\u4e2a\u7f51\u9875\u901a\u5e38\u4f1a\u4f7f\u7528\u591a\u4e2a\u5916\u90e8\u8d44\u6e90\uff0c\u5982\u56fe\u7247\u3001JavaScript\u3001CSS\u3001\u5b57\u4f53\u7b49\u3002\u4e3b\u7ebf\u7a0b\u5728\u89e3\u6790 DOM \u7684\u8fc7\u7a0b\u4e2d\u9047\u5230\u8fd9\u4e9b\u8d44\u6e90\u540e\u4f1a\u4e00\u4e00\u8bf7\u6c42\u3002\u4e3a\u4e86\u52a0\u901f\u6e32\u67d3\u6d41\u7a0b\uff0c\u4f1a\u6709\u4e00\u4e2a\u53eb\u505a\u9884\u52a0\u8f7d\u626b\u63cf\u5668\uff08preload scanner\uff09\u7ebf\u7a0b\u5e76\u53d1\u8fd0\u884c\u3002\u5982\u679c HTML \u4e2d\u5b58\u5728 img \u6216 link \u4e4b\u7c7b\u7684\u5185\u5bb9\uff0c\u5219\u9884\u52a0\u8f7d\u626b\u63cf\u5668\u4f1a\u67e5\u770b HTML parser \u751f\u6210\u7684\u6807\u8bb0\uff0c\u5e76\u53d1\u9001\u8bf7\u6c42\u5230\u6d4f\u89c8\u5668\u8fdb\u7a0b\u7684\u7f51\u7edc\u7ebf\u7a0b\u83b7\u53d6\u8fd9\u4e9b\u8d44\u6e90\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"JavaScript \u53ef\u80fd\u963b\u585e\u89e3\u6790")),(0,l.kt)("p",null,"\u5f53 HTML \u89e3\u6790\u5668\u53d1\u73b0 script \u6807\u7b7e\u65f6\uff0c\u4f1a\u6682\u505c HTML \u7684\u89e3\u6790\uff0c\u8f6c\u800c\u5f00\u59cb\u52a0\u8f7d\u3001\u89e3\u6790\u548c\u6267\u884c JavaScript\u3002\u56e0\u4e3a JS \u53ef\u80fd\u4f1a\u6539\u53d8 DOM \u7684\u7ed3\u6784\u3002\u5982\u679c\u4e0d\u60f3\u56e0 JS \u963b\u585e HTML \u7684\u89e3\u6790\uff0c\u53ef\u4ee5\u4e3a script \u6807\u7b7e\u6dfb\u52a0 defer \u5c5e\u6027\u6216\u5c06 script \u653e\u5728 body \u7ed3\u675f\u6807\u7b7e\u4e4b\u524d\uff0c\u6d4f\u89c8\u5668\u4f1a\u5728\u6700\u540e\u6267\u884c JS \u4ee3\u7801\uff0c\u907f\u514d\u963b\u585e DOM \u6784\u5efa\u3002"),(0,l.kt)("h4",{id:"12-style-\u9636\u6bb5\u6837\u5f0f\u8ba1\u7b97"},"1.2 Style \u9636\u6bb5\uff1a\u6837\u5f0f\u8ba1\u7b97"),(0,l.kt)("p",null,"CSS \u5f15\u64ce\u5904\u7406\u6837\u5f0f\u7684\u8fc7\u7a0b\u5206\u4e3a\u4e09\u4e2a\u9636\u6bb5\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u6536\u96c6\u3001\u5212\u5206\u548c\u7d22\u5f15\u6240\u6709\u6837\u5f0f\u8868\u4e2d\u5b58\u5728\u7684\u6837\u5f0f\u89c4\u5219\uff0cCSS \u5f15\u64ce\u4f1a\u4ece style \u6807\u7b7e\uff0ccss \u6587\u4ef6\u53ca\u6d4f\u89c8\u5668\u4ee3\u7406\u6837\u5f0f\u4e2d\u6536\u96c6\u6240\u6709\u7684\u6837\u5f0f\u89c4\u5219\uff0c\u5e76\u4e3a\u8fd9\u4e9b\u89c4\u5219\u5efa\u7acb\u7d22\u5f15\uff0c\u4ee5\u65b9\u4fbf\u540e\u7eed\u7684\u9ad8\u6548\u67e5\u8be2\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u8bbf\u95ee\u6bcf\u4e2a\u5143\u7d20\u5e76\u627e\u5230\u9002\u7528\u4e8e\u8be5\u5143\u7d20\u7684\u6240\u6709\u89c4\u5219\uff0cCSS \u5f15\u64ce\u904d\u5386 DOM \u8282\u70b9\uff0c\u8fdb\u884c\u9009\u62e9\u5668\u5339\u914d\uff0c\u5e76\u4e3a\u5339\u914d\u7684\u8282\u70b9\u6267\u884c\u6837\u5f0f\u8bbe\u7f6e\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u7ed3\u5408\u5c42\u53e0\u89c4\u5219\u548c\u5176\u4ed6\u4fe1\u606f\u4e3a\u8282\u70b9\u751f\u6210\u6700\u7ec8\u7684\u8ba1\u7b97\u6837\u5f0f\uff0c\u8fd9\u4e9b\u6837\u5f0f\u7684\u503c\u53ef\u4ee5\u901a\u8fc7 ",(0,l.kt)("inlineCode",{parentName:"li"},"window.getComputedStyle()")," \u83b7\u53d6\u3002")),(0,l.kt)("p",null,"\u5728\u5927\u578b\u7f51\u7ad9\u4e2d\uff0c\u4f1a\u5b58\u5728\u5927\u91cf\u7684 CSS \u89c4\u5219\uff0c\u5982\u679c\u4e3a\u6bcf\u4e2a\u8282\u70b9\u90fd\u4fdd\u5b58\u4e00\u4efd\u6837\u5f0f\u503c\uff0c\u4f1a\u5bfc\u81f4\u5185\u5b58\u6d88\u8017\u8fc7\u5927\u3002\u4f5c\u4e3a\u66ff\u4ee3\uff0cCSS \u5f15\u64ce\u901a\u5e38\u4f1a\u521b\u5efa\u5171\u4eab\u7684\u6837\u5f0f\u7ed3\u6784\uff0c\u8ba1\u7b97\u6837\u5f0f\u5bf9\u8c61\u4e00\u822c\u6709\u6307\u9488\u6307\u5411\u76f8\u540c\u7684\u5171\u4eab\u7ed3\u6784\u3002"),(0,l.kt)("p",null,"\u9644\u52a0\u4e86\u8ba1\u7b97\u6837\u5f0f\u7684 DOM \u6811\uff0c\u4e00\u822c\u88ab\u79f0\u4e3a CSSOM\uff08CSS Object Model\uff09\uff1a"),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/cssom-tree.png",alt:"CSSOM"})),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,l.kt)("a",{parentName:"p",href:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model"},"Constructing the Object Model"))),(0,l.kt)("p",null,"CSSOM \u548c DOM \u662f\u5e76\u884c\u6784\u5efa\u7684\uff0c\u6784\u5efa CSSOM \u4e0d\u4f1a\u963b\u585e DOM \u7684\u6784\u5efa\u3002\u4f46 CSSOM \u4f1a\u963b\u585e JS \u7684\u6267\u884c\uff0c\u56e0\u4e3a JS \u53ef\u80fd\u4f1a\u64cd\u4f5c\u6837\u5f0f\u4fe1\u606f\u3002\u867d\u7136 CSSOM \u4e0d\u4f1a\u963b\u585e DOM \u7684\u6784\u5efa\uff0c\u4f46\u5728\u8fdb\u5165\u4e0b\u4e00\u9636\u6bb5\u4e4b\u524d\uff0c\u5fc5\u987b\u7b49\u5f85 CSSOM \u6784\u5efa\u5b8c\u6210\u3002\u8fd9\u4e5f\u662f\u901a\u5e38\u6240\u8bf4\u7684 CSSOM \u4f1a\u963b\u585e\u6e32\u67d3\u3002"),(0,l.kt)("h4",{id:"13-layout-\u9636\u6bb5"},"1.3 Layout \u9636\u6bb5"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u521b\u5efa LayoutObject\uff08RenderObject\uff09 \u6811")),(0,l.kt)("p",null,"\u6709\u4e86 DOM \u6811\u548c DOM \u6811\u4e2d\u5143\u7d20\u7684\u8ba1\u7b97\u6837\u5f0f\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u6839\u636e\u8fd9\u4e9b\u4fe1\u606f\u5408\u5e76\u6210\u4e00\u4e2a layout \u6811\uff0c\u6536\u96c6\u6240\u6709\u53ef\u89c1\u7684 DOM \u8282\u70b9\uff0c\u4ee5\u53ca\u6bcf\u4e2a\u8282\u70b9\u7684\u6240\u6709\u6837\u5f0f\u4fe1\u606f\u3002"),(0,l.kt)("p",null,"Layout \u6811\u548c DOM \u6811\u4e0d\u4e00\u5b9a\u662f\u4e00\u4e00\u5bf9\u5e94\u7684\uff0c\u4e3a\u4e86\u6784\u5efa Layout \u6811\uff0c\u6d4f\u89c8\u5668\u4e3b\u8981\u5b8c\u6210\u4e86\u4e0b\u5217\u5de5\u4f5c\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u4ece DOM \u6811\u7684\u6839\u8282\u70b9\u5f00\u59cb\u904d\u5386\u6bcf\u4e2a\u53ef\u89c1\u8282\u70b9\u3002",(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"\u67d0\u4e9b\u4e0d\u53ef\u89c1\u8282\u70b9\uff08\u4f8b\u5982 script\u3001head\u3001meta \u7b49\uff09\uff0c\u5b83\u4eec\u4e0d\u4f1a\u4f53\u73b0\u5728\u6e32\u67d3\u8f93\u51fa\u4e2d\uff0c\u4f1a\u88ab\u5ffd\u7565\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u67d0\u4e9b\u901a\u8fc7\u8bbe\u7f6e display \u4e3a none \u9690\u85cf\u7684\u8282\u70b9\uff0c\u5728\u6e32\u67d3\u6811\u4e2d\u4e5f\u4f1a\u88ab\u5ffd\u7565\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u4e3a\u4f2a\u5143\u7d20\u521b\u5efa LayoutObject\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u4e3a\u884c\u5185\u5143\u7d20\u521b\u5efa\u533f\u540d\u5305\u542b\u5757\u5bf9\u5e94\u7684 LayoutObject\u3002"))),(0,l.kt)("li",{parentName:"ol"},"\u5bf9\u4e8e\u6bcf\u4e2a\u53ef\u89c1\u8282\u70b9\uff0c\u4e3a\u5176\u627e\u5230\u9002\u914d\u7684 CSSOM \u89c4\u5219\u5e76\u5e94\u7528\u5b83\u4eec\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u4ea7\u51fa\u53ef\u89c1\u8282\u70b9\uff0c\u5305\u542b\u5176\u5185\u5bb9\u548c\u8ba1\u7b97\u7684\u6837\u5f0f\u3002")),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/images/render-tree-construction.png",alt:"Construct Render Tree"})),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,l.kt)("a",{parentName:"p",href:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction"},"Render-tree Construction"))),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u5e03\u5c40\u8ba1\u7b97")),(0,l.kt)("p",null,"\u4e0a\u4e00\u6b65\u8ba1\u7b97\u4e86\u53ef\u89c1\u7684\u8282\u70b9\u53ca\u5176\u6837\u5f0f\uff0c\u63a5\u4e0b\u6765\u9700\u8981\u8ba1\u7b97\u5b83\u4eec\u5728\u8bbe\u5907\u89c6\u53e3\u5185\u7684\u786e\u5207\u4f4d\u7f6e\u548c\u5927\u5c0f\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u4e00\u822c\u88ab\u79f0\u4e3a\u81ea\u52a8\u91cd\u6392\u3002"),(0,l.kt)("p",null,"\u6d4f\u89c8\u5668\u7684\u5e03\u5c40\u8ba1\u7b97\u5de5\u4f5c\u5305\u542b\u4ee5\u4e0b\u5185\u5bb9\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u6839\u636e CSS \u76d2\u6a21\u578b\u53ca\u89c6\u89c9\u683c\u5f0f\u5316\u6a21\u578b\uff0c\u8ba1\u7b97\u6bcf\u4e2a\u5143\u7d20\u7684\u5404\u79cd\u751f\u6210\u76d2\u7684\u5927\u5c0f\u548c\u4f4d\u7f6e\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u8ba1\u7b97\u5757\u7ea7\u5143\u7d20\u3001\u884c\u5185\u5143\u7d20\u3001\u6d6e\u52a8\u5143\u7d20\u3001\u5404\u79cd\u5b9a\u4f4d\u5143\u7d20\u7684\u5927\u5c0f\u548c\u4f4d\u7f6e\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u8ba1\u7b97\u6587\u5b57\uff0c\u6eda\u52a8\u533a\u57df\u7684\u5927\u5c0f\u548c\u4f4d\u7f6e\u3002"),(0,l.kt)("li",{parentName:"ol"},"LayoutObject \u6709\u4e24\u79cd\u7c7b\u578b\uff1a",(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"\u4f20\u7edf\u7684 LayoutObject \u8282\u70b9\uff0c\u4f1a\u628a\u5e03\u5c40\u8fd0\u7b97\u7684\u7ed3\u679c\u91cd\u65b0\u5199\u56de\u5e03\u5c40\u6811\u4e2d\u3002"),(0,l.kt)("li",{parentName:"ul"},"LayoutNG\uff08Chrome 76 \u5f00\u59cb\u542f\u7528\uff09 \u8282\u70b9\u7684\u8f93\u51fa\u662f\u4e0d\u53ef\u53d8\u7684\uff0c\u4f1a\u4fdd\u5b58\u5728 NGLayoutResult \u4e2d\uff0c\u8fd9\u662f\u4e00\u4e2a\u6811\u72b6\u7684\u7ed3\u6784\uff0c\u76f8\u6bd4\u4e4b\u524d\u7684 LayoutObject\uff0c\u5c11\u4e86\u5f88\u5927\u56de\u6eaf\u8ba1\u7b97\uff0c\u63d0\u9ad8\u4e86\u6027\u80fd\u3002")))),(0,l.kt)("h4",{id:"14-paint-\u9636\u6bb5"},"1.4 Paint \u9636\u6bb5"),(0,l.kt)("p",null,"Paint \u9636\u6bb5\u5c06 LayoutObject \u6811\u8f6c\u6362\u6210\u4f9b\u5408\u6210\u5668\u4f7f\u7528\u7684\u9ad8\u6548\u6e32\u67d3\u683c\u5f0f\uff0c\u5305\u62ec\u4e00\u4e2a\u5305\u542b display item \u5217\u8868\u7684 cc::Layers \u5217\u8868\uff0c\u4e0e\u8be5\u5217\u8868\u4e0e cc::PropertyTrees \u5173\u8054\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u6784\u5efa PaintLayer\uff08RenderLayer\uff09 \u6811")),(0,l.kt)("p",null,"\u6784\u5efa\u5b8c\u6210\u7684 LayoutObject \u6811\u8fd8\u4e0d\u80fd\u62ff\u53bb\u663e\u793a\uff0c\u56e0\u4e3a\u5b83\u4e0d\u5305\u542b\u7ed8\u5236\u7684\u987a\u5e8f\uff08z-index\uff09\u3002\u540c\u65f6\uff0c\u4e5f\u4e3a\u4e86\u8003\u8651\u4e00\u4e9b\u590d\u6742\u7684\u60c5\u51b5\uff0c\u5982 3D \u53d8\u6362\u3001\u9875\u9762\u6eda\u52a8\u7b49\uff0c\u6d4f\u89c8\u5668\u4f1a\u5bf9\u4e0a\u4e00\u6b65\u7684\u8282\u70b9\u8fdb\u884c\u5206\u5c42\u5904\u7406\u3002\u8fd9\u4e2a\u5904\u7406\u8fc7\u7a0b\u88ab\u79f0\u4e3a\u5efa\u7acb\u5c42\u53e0\u4e0a\u4e0b\u6587\u3002"),(0,l.kt)("p",null,"\u6d4f\u89c8\u5668\u4f1a\u6839\u636e ",(0,l.kt)("a",{parentName:"p",href:"https://www.w3.org/TR/CSS21/zindex.html"},"CSS \u5c42\u53e0\u4e0a\u4e0b\u6587\u89c4\u8303"),"\uff0c\u5efa\u7acb\u5c42\u53e0\u4e0a\u4e0b\u6587\uff0c\u5e38\u89c1\u60c5\u51b5\u5982\u4e0b\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"DOM \u6811\u7684 Document \u8282\u70b9\u5bf9\u5e94\u7684 RenderView \u8282\u70b9\u3002"),(0,l.kt)("li",{parentName:"ol"},"DOM \u6811\u4e2d Document \u8282\u70b9\u7684\u5b50\u8282\u70b9\uff0c\u4e5f\u5c31\u662f HTML \u8282\u70b9\u5bf9\u5e94\u7684 RenderBlock \u8282\u70b9\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u663e\u5f0f\u6307\u5b9a CSS \u4f4d\u7f6e\u7684\u8282\u70b9\uff08position \u4e3a absolute \u6216\u8005 fixed\uff09\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5177\u6709\u900f\u660e\u6548\u679c\u7684\u8282\u70b9\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5177\u6709 CSS 3D \u5c5e\u6027\u7684\u8282\u70b9\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u4f7f\u7528 Canvas \u5143\u7d20\u6216\u8005 Video \u5143\u7d20\u7684\u8282\u70b9\u3002")),(0,l.kt)("p",null,"\u6d4f\u89c8\u5668\u904d\u5386 LayoutObject \u6811\u7684\u65f6\u5019\uff0c\u5efa\u7acb\u4e86 PaintLayer \u6811\uff0cLayoutObject \u4e0e PaintLayer \u4e5f\u4e0d\u4e00\u5b9a\u662f\u4e00\u4e00\u5bf9\u5e94\u7684\u3002\u6bcf\u4e2a LayoutObject \u8981\u4e48\u4e0e\u81ea\u5df1\u7684 PaintLayer \u5173\u8054\uff0c\u8981\u4e48\u4e0e\u62e5\u6709 PaintLayer \u7684\u7b2c\u4e00\u4e2a\u7956\u5148\u7684 PaintLayer \u5173\u8054\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u6784\u5efa cc::Layer \u4e0e display items")),(0,l.kt)("p",null,"\u6d4f\u89c8\u5668\u4f1a\u7ee7\u7eed\u6839\u636e PaintLayer \u6811\u521b\u5efa cc::Layer \u5217\u8868\u3002cc::Layer \u662f\u5217\u8868\u72b6\u7ed3\u6784\uff0c\u6bcf\u4e2a layer \u5305\u542b\u4e86\u4e2a DisplayItem \u5217\u8868\uff0c\u6bcf\u4e2a DisplayItem \u5305\u542b\u4e86\u5b9e\u9645\u7684 paint op \u6307\u4ee4\u3002\u5c06\u9875\u9762\u5206\u5c42\uff0c\u53ef\u4ee5\u8ba9\u4e00\u4e2a\u56fe\u5c42\u72ec\u7acb\u4e8e\u5176\u4ed6\u7684\u56fe\u5c42\u8fdb\u884c\u53d8\u6362\u548c\u5149\u6805\u5316\u5904\u7406\u3002"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("p",{parentName:"li"},"\u5408\u6210\u66f4\u65b0\uff08Compositing update\uff09"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"\u4f9d\u636e PaintLayer \u51b3\u5b9a\u5206\u5c42\uff08GraphicsLayers\uff09"),(0,l.kt)("li",{parentName:"ul"},"\u8fd9\u4e2a\u7b56\u7565\u88ab\u79f0\u4e3a CompositeBeforePaint\uff0c\u672a\u6765\u4f1a\u88ab CompositeAfterPaint \u66ff\u4ee3\u3002"))),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("p",{parentName:"li"},"PrePaint"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"PaintInvalidator \u8fdb\u884c\u5931\u6548\u68c0\u67e5\uff0c\u627e\u51fa\u9700\u8981\u7ed8\u5236\u7684 display items\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u6784\u5efa paint property \u6811\uff0c\u8be5\u6811\u80fd\u4f7f\u52a8\u753b\u3001\u9875\u9762\u6eda\u52a8\uff0cclip \u7b49\u53d8\u5316\u4ec5\u5728\u5408\u6210\u7ebf\u7a0b\u8fd0\u884c\uff0c\u63d0\u9ad8\u6027\u80fd\u3002\n",(0,l.kt)("img",{parentName:"li",src:"https://user-images.githubusercontent.com/4338052/131221558-8d91dfe7-22d6-4fdd-b118-bbb9af117059.png",alt:"image"}),(0,l.kt)("blockquote",{parentName:"li"},(0,l.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,l.kt)("a",{parentName:"p",href:"https://docs.google.com/presentation/d/1V7gCqKR-edNdRDv0bDnJa_uEs6iARAU2h5WhgxHyejQ/edit#slide=id.g1c810b6196_0_58"},"Compositor Property Trees")))))),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("p",{parentName:"li"},"Paint"),(0,l.kt)("ul",{parentName:"li"},(0,l.kt)("li",{parentName:"ul"},"\u904d\u5386 LayoutObject \u6811\u5e76\u521b\u5efa display items \u5217\u8868\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u4e3a\u5171\u4eab\u540c\u6837 property tree \u72b6\u6001\u7684 display items \u5217\u8868\u521b\u5efa paint chunks \u5206\u7ec4\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u5c06\u7ed3\u679c commit \u5230 compositor\u3002"),(0,l.kt)("li",{parentName:"ul"},"CompositeAfterPaint \u5c06\u5728\u6b64\u65f6\u51b3\u5b9a\u5206\u5c42\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u5c06 paint chunks \u901a\u8fc7 cc::Layer \u5217\u8868\u4f20\u9012\u7ed9 compositor\u3002"),(0,l.kt)("li",{parentName:"ul"},"\u5c06 property \u6811\u8f6c\u6362\u4e3a cc::PropertyTrees\u3002")))),(0,l.kt)("p",null,"\u4e0a\u9762\u7684\u6d41\u7a0b\u4e2d\uff0c\u6709\u4e24\u4e2a\u4e0d\u540c\u7684\u521b\u5efa\u5408\u6210\u5c42\u7684\u65f6\u673a\uff0c\u4e00\u4e2a\u662f paint \u4e4b\u524d\u7684 CompositeBeforePaint\uff0c\u8be5\u64cd\u4f5c\u5728\u6e32\u67d3\u4e3b\u7ebf\u7a0b\u4e2d\u5b8c\u6210\u3002\u4e00\u4e2a\u662f paint \u4e4b\u540e\u7684 CompositeAfterPaint\uff0c\u540e\u7eed\u521b\u5efa layer \u7684\u64cd\u4f5c\u5728 CC\uff08Chromium Compositor\uff09\u7ebf\u7a0b\u4e2d\u5b8c\u6210\u3002"),(0,l.kt)("h4",{id:"15-\u5408\u6210-compositing"},"1.5 \u5408\u6210 Compositing"),(0,l.kt)("p",null,"\u5408\u6210\u9636\u6bb5\u5728 CC\uff08Chromium Compositor\uff09\u7ebf\u7a0b\u4e2d\u8fdb\u884c\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"commit")),(0,l.kt)("p",null,"\u5f53 Paint \u9636\u6bb5\u5b8c\u6210\u540e\uff0c\u4e3b\u7ebf\u7a0b\u8fdb\u5165 commit \u9636\u6bb5\uff0c\u5c06 cc::Layer \u4e2d\u7684 layer list \u548c property \u6811\u66f4\u65b0\u5230 CC \u7ebf\u7a0b\u7684 LayerImpl \u4e2d\uff0ccommit \u5b8c\u6210\u3002commit \u8fdb\u884c\u7684\u8fc7\u7a0b\u4e2d\uff0c\u4e3b\u7ebf\u7a0b\u88ab\u963b\u585e\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"tiling & raster")),(0,l.kt)("p",null,"raster\uff08\u5149\u6805\u5316\uff09\u662f\u5c06 display item \u4e2d\u7684\u7ed8\u5236\u64cd\u4f5c\u8f6c\u6362\u4e3a\u4f4d\u56fe\u7684\u8fc7\u7a0b\u3002"),(0,l.kt)("p",null,"\u5149\u6805\u5316\u7684\u4e3b\u8981\u64cd\u4f5c\u6d41\u7a0b\u5982\u4e0b\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"tiling\uff1a\u5c06 layer \u5206\u6210 tiles\uff08\u56fe\u5757\uff09\u3002 \u56e0\u4e3a\u6709\u7684 layer \u53ef\u80fd\u5f88\u5927\uff08\u5982\u6574\u4e2a\u6587\u6863\u7684\u6eda\u52a8\u6839\u8282\u70b9\uff09\uff0c\u5bf9\u6574\u5c42\u7684\u5149\u6805\u5316\u64cd\u4f5c\u4ee3\u4ef7\u6602\u8d35\uff0c\u4e14 layer \u4e2d\u6709\u7684\u90e8\u5206\u662f\u4e0d\u53ef\u89c1\u7684\uff0c\u4f1a\u9020\u6210\u4e0d\u5fc5\u8981\u7684\u6d6a\u8d39\u3002"),(0,l.kt)("li",{parentName:"ol"},"tiles \u662f\u5149\u6805\u5316\u7684\u57fa\u672c\u5355\u5143\u3002\u5149\u6805\u5316\u64cd\u4f5c\u662f\u901a\u8fc7\u5149\u6805\u7ebf\u7a0b\u6c60\u5904\u7406\u7684\u3002\u79bb\u89c6\u53e3\u66f4\u8fd1\u7684 tiles \u5177\u6709\u66f4\u9ad8\u7684\u4f18\u5148\u7ea7\uff0c\u5c06\u4f18\u5148\u5904\u7406\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u4e00\u4e2a layer \u5b9e\u9645\u4e0a\u4f1a\u751f\u6210\u591a\u79cd\u5206\u8fa8\u7387\u7684 tiles\u3002"),(0,l.kt)("li",{parentName:"ol"},"raster \u540c\u6837\u4e5f\u4f1a\u5904\u7406\u9875\u9762\u5f15\u7528\u7684\u56fe\u7247\u8d44\u6e90\uff0cdisplay items \u4e2d\u7684 paint ops \u5f15\u7528\u4e86\u8fd9\u4e9b\u538b\u7f29\u6570\u636e\uff0craster \u4f1a\u8c03\u7528\u5408\u9002\u7684\u89e3\u7801\u5668\u6765\u89e3\u538b\u8fd9\u4e9b\u6570\u636e\u3002"),(0,l.kt)("li",{parentName:"ol"},"raster \u4f1a\u901a\u8fc7 Skia \u6765\u8fdb\u884c OpenGL \u8c03\u7528\uff0c\u5149\u6805\u5316\u6570\u636e\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u6e32\u67d3\u8fdb\u7a0b\u662f\u8fd0\u884c\u5728\u6c99\u7bb1\u4e2d\u7684\uff0c\u4e0d\u80fd\u76f4\u63a5\u8fdb\u884c\u7cfb\u7edf\u8c03\u7528\u3002paint ops \u901a\u8fc7 IPC\uff08MOJO\uff09\u4f20\u9012\u7ed9 GPU \u8fdb\u7a0b\uff0cGPU \u8fdb\u7a0b\u4f1a\u6267\u884c\u771f\u5b9e\u7684 OpenGL\uff08\u4e3a\u4e86\u4fdd\u8bc1\u6027\u80fd\uff0c\u5728 Windows \u4e0a\u8f6c\u4e3a DirectX\uff09\u8c03\u7528\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5149\u6805\u5316\u7684\u4f4d\u56fe\u7ed3\u679c\u4fdd\u5b58\u5728 GPU \u5185\u5b58\u4e2d\uff0c\u901a\u5e38\u4f5c\u4e3a OpenGL \u6750\u8d28\u5bf9\u8c61\u4fdd\u5b58\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u53cc\u7f13\u51b2\u673a\u5236\uff1a\u4e3b\u7ebf\u7a0b\u968f\u65f6\u4f1a\u6709 commit \u5230\u6765\uff0c\u5f53\u524d\u7684\u5149\u6805\u5316\u884c\u4e3a\u5728 pending tree\uff08LayerImpl\uff09\u4e0a\u8fdb\u884c\uff0c\u4e00\u65e6\u5149\u6805\u5316\u64cd\u4f5c\u5b8c\u6210\uff0c\u5c06 pending tree \u53d8\u4e3a active tree\uff0c\u540e\u7eed\u7684 draw \u64cd\u4f5c\u5728 active tree \u4e0a\u8fdb\u884c\u3002")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"draw")),(0,l.kt)("p",null,"\u5f53\u6240\u6709\u7684 tiles \u90fd\u5b8c\u6210\u5149\u6805\u5316\u540e\uff0c\u4f1a\u751f\u6210 draw quads\uff08\u7ed8\u5236\u56db\u8fb9\u5f62\uff09\u3002\u6bcf\u4e2a draw quads \u662f\u5305\u542b\u4e00\u4e2a\u5728\u5c4f\u5e55\u7279\u5b9a\u4f4d\u7f6e\u7ed8\u5236 tile \u7684\u547d\u4ee4\uff0c\u8be5\u547d\u4ee4\u540c\u65f6\u8003\u8651\u4e86\u6240\u6709\u5e94\u7528\u5230 layer tree \u7684\u53d8\u6362\u3002\u6bcf\u4e2a\u56db\u8fb9\u5f62\u5f15\u7528\u4e86\u5185\u5b58\u4e2d tile \u7684\u5149\u6805\u5316\u8f93\u51fa\u3002\u56db\u8fb9\u5f62\u88ab\u5305\u88f9\u5728\u5408\u6210\u5e27\u5bf9\u8c61\uff08compositor frame object\uff09\u4e2d\uff0c\u7136\u540e\u63d0\u4ea4\uff08submit\uff09\u5230\u6d4f\u89c8\u5668\u8fdb\u7a0b\u3002"),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"display compositor\uff08viz\uff0cvisual \u7684\u7b80\u79f0\uff09")),(0,l.kt)("p",null,"viz \u4f4d\u4e8e GPU \u8fdb\u7a0b\u4e2d\uff0cviz \u63a5\u6536\u6765\u81ea\u6d4f\u89c8\u5668\u7684\u5408\u6210\u5e27\uff0c\u5408\u6210\u5e27\u6765\u81ea\u591a\u4e2a\u6e32\u67d3\u8fdb\u7a0b\uff0c\u4ee5\u53ca\u6d4f\u89c8\u5668\u81ea\u8eab UI \u7684 compositor\u3002"),(0,l.kt)("p",null,"\u5408\u6210\u5e27\u548c\u5c4f\u5e55\u4e0a\u5c06\u8981\u7ed8\u5236\u7684\u4f4d\u7f6e\u5173\u8054\uff0c\u8be5\u4f4d\u7f6e\u53eb\u505a surface\u3002surface \u53ef\u4ee5\u5d4c\u5957\u5176\u4ed6 surface\uff0c\u6d4f\u89c8\u5668 UI \u7684 surface \u5d4c\u5957\u4e86\u6e32\u67d3\u8fdb\u7a0b\u7684 surface\uff0c\u6e32\u67d3\u8fdb\u7a0b\u7684 surface \u5d4c\u5957\u4e86\u5176\u4ed6\u8de8\u57df iframes\uff08\u540c\u6e90\u7684 iframe \u5171\u4eab\u76f8\u540c\u7684\u6e32\u67d3\u8fdb\u7a0b\uff09 \u7684 surface\u3002viz \u540c\u6b65\u4f20\u5165\u7684\u5e27\uff0c\u5e76\u5904\u7406\u5d4c\u5957 surfaces \u7684\u4f9d\u8d56\uff08surface aggregation\uff09\u3002"),(0,l.kt)("p",null,"\u6700\u7ec8\u7684\u663e\u793a\u6d41\u7a0b\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"viz \u4f1a\u53d1\u51fa OpenGL \u8c03\u7528\u5c06\u5408\u6210\u5e27\u4e2d\u7684 quads \u53d1\u9001\u5230 GPU \u7ebf\u7a0b\u7684 backbuffer \u4e2d\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5728\u65b0\u7684\u6a21\u5f0f\u4e2d\uff0cviz \u4f1a\u4f7f\u7528 Skia \u4ee3\u66ff\u539f\u59cb OpenGL \u8c03\u7528\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u5728\u5927\u90e8\u5206\u5e73\u53f0\u4e0a\uff0cviz \u7684\u8f93\u51fa\u4e5f\u662f\u53cc\u7f13\u51b2\u7ed3\u6784\uff0cdraw \u9996\u5148\u5230\u8fbe backbuffer\uff0c\u901a\u8fc7 swapping \u64cd\u4f5c\u8f6c\u6362\u6210 frontbuffer \u6700\u7ec8\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002")),(0,l.kt)("p",null,(0,l.kt)("strong",{parentName:"p"},"\u7ebf\u7a0b\u5bf9\u6d4f\u89c8\u5668\u4e8b\u4ef6\u7684\u5904\u7406")),(0,l.kt)("p",null,"\u5408\u6210\u7684\u4f18\u70b9\u662f\u5b83\u5728\u4e0d\u6d89\u53ca\u6e32\u67d3\u4e3b\u7ebf\u7a0b\u7684\u60c5\u51b5\u4e0b\u5b8c\u6210\u7684\u3002\u5408\u6210\u5668\u4e0d\u9700\u8981\u7b49\u5f85\u6837\u5f0f\u8ba1\u7b97\u6216 JavaScript \u6267\u884c\u3002\u53ea\u548c\u5408\u6210\u76f8\u5173\u7684\u52a8\u753b\u88ab\u8ba4\u4e3a\u662f\u83b7\u5f97\u6d41\u7545\u6027\u80fd\u7684\u6700\u4f73\u9009\u62e9\u3002\u540c\u65f6\uff0c\u5408\u6210\u5668\u8fd8\u8d1f\u8d23\u5904\u7406\u9875\u9762\u7684\u6eda\u52a8\uff0c\u6eda\u52a8\u7684\u65f6\u5019\uff0c\u5408\u6210\u5668\u4f1a\u66f4\u65b0\u9875\u9762\u7684\u4f4d\u7f6e\uff0c\u5e76\u4e14\u66f4\u65b0\u9875\u9762\u7684\u5185\u5bb9\u3002"),(0,l.kt)("p",null,"\u5f53\u4e00\u4e2a\u6ca1\u6709\u7ed1\u5b9a\u4efb\u4f55\u4e8b\u4ef6\u7684\u9875\u9762\u53d1\u751f\u6eda\u52a8\u65f6\uff0c\u5408\u6210\u5668\u53ef\u4ee5\u72ec\u7acb\u4e8e\u6e32\u67d3\u4e3b\u7ebf\u7a0b\u4e4b\u5916\u8fdb\u884c\u5408\u6210\u5e27\u7684\u7684\u521b\u5efa\uff0c\u4fdd\u8bc1\u9875\u9762\u7684\u6d41\u7a0b\u6eda\u52a8\u3002\u5f53\u9875\u9762\u4e2d\u7684\u67d0\u4e00\u533a\u57df\u7ed1\u5b9a\u4e86 JS \u4e8b\u4ef6\u5904\u7406\u7a0b\u5e8f\u65f6\uff0cCC \u7ebf\u7a0b\u4f1a\u5c06\u8fd9\u4e00\u533a\u57df\u6807\u8bb0\u4e3a Non-Fast Scrollable Region\u3002\u5982\u679c\u4e8b\u4ef6\u6765\u81ea\u4e8e\u8be5\u533a\u57df\u4e4b\u5916\uff0c\u5219 CC \u7ebf\u7a0b\u7ee7\u7eed\u5408\u6210\u65b0\u7684\u5e27\uff0c\u800c\u65e0\u9700\u7b49\u5f85\u4e3b\u7ebf\u7a0b\u3002"),(0,l.kt)("p",null,"\u5728\u5f00\u53d1\u4e2d\uff0c\u6211\u4eec\u901a\u5e38\u4f1a\u4f7f\u7528\u4e8b\u4ef6\u59d4\u6258\u6765\u7b80\u5316\u903b\u8f91\uff0c\u4f46\u662f\u8fd9\u4f1a\u4f7f\u6574\u4e2a\u7ed1\u5b9a\u4e8b\u4ef6\u7684\u533a\u57df\u53d8\u6210 Non-Fast Scrollable Region\u3002\u4e3a\u4e86\u51cf\u8f7b\u8fd9\u79cd\u60c5\u51b5\u5bf9\u6eda\u52a8\u9020\u6210\u7684\u5f71\u54cd\uff0c\u4f60\u53ef\u4ee5\u4f20\u5165 ",(0,l.kt)("inlineCode",{parentName:"p"},"passive: true")," \u9009\u9879\u5230\u4e8b\u4ef6\u76d1\u542c\u5668\u4e2d\u3002"),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-js"},'document.body.addEventListener(\n "touchstart",\n (event) => {\n if (event.target === area) {\n event.preventDefault();\n }\n },\n { passive: true }\n);\n')),(0,l.kt)("h3",{id:"2-\u6d4f\u89c8\u5668\u6e32\u67d3\u6027\u80fd\u7684\u4f18\u5316"},"2. \u6d4f\u89c8\u5668\u6e32\u67d3\u6027\u80fd\u7684\u4f18\u5316"),(0,l.kt)("p",null,"\u4e0a\u4e00\u8282\u4e2d\u662f\u4e00\u8f6e\u5178\u578b\u7684\u6d4f\u89c8\u5668\u6e32\u67d3\u6d41\u7a0b\uff0c\u5728\u6d41\u7a0b\u5b8c\u6210\u4e4b\u540e\uff0cDOM\u3001CSSOM\u3001LayoutObject\u3001PaintLayer \u7b49\u5404\u79cd\u6811\u72b6\u6570\u636e\u7ed3\u6784\u90fd\u4f1a\u4fdd\u7559\u4e0b\u6765\uff0c\u4ee5\u4fbf\u5728\u7528\u6237\u64cd\u4f5c\u3001\u7f51\u7edc\u8bf7\u6c42\u3001JS \u6267\u884c\u7b49\u4e8b\u4ef6\u53d1\u751f\u65f6\uff0c\u91cd\u65b0\u89e6\u53d1\u6e32\u67d3\u6d41\u7a0b\u3002"),(0,l.kt)("h4",{id:"21-\u51cf\u5c11\u6e32\u67d3\u4e2d\u7684\u91cd\u6392\u91cd\u7ed8"},"2.1 \u51cf\u5c11\u6e32\u67d3\u4e2d\u7684\u91cd\u6392\u91cd\u7ed8"),(0,l.kt)("p",null,"\u6d4f\u89c8\u5668\u91cd\u65b0\u6e32\u67d3\u65f6\uff0c\u53ef\u80fd\u4f1a\u4ece\u4e2d\u95f4\u7684\u4efb\u4e00\u6b65\u9aa4\u5f00\u59cb\uff0c\u76f4\u81f3\u6e32\u67d3\u5b8c\u6210\u3002\u56e0\u6b64\uff0c\u5c3d\u53ef\u80fd\u7684\u7f29\u77ed\u6e32\u67d3\u8def\u5f84\uff0c\u5c31\u53ef\u4ee5\u83b7\u5f97\u66f4\u597d\u7684\u6e32\u67d3\u6027\u80fd\u3002\n\u5f53\u6d4f\u89c8\u5668\u91cd\u65b0\u7ed8\u5236\u4e00\u5e27\u7684\u65f6\u5019\uff0c\u4e00\u822c\u9700\u8981\u7ecf\u8fc7\u5e03\u5c40\u3001\u7ed8\u56fe\u548c\u5408\u6210\u4e09\u4e2a\u4e3b\u8981\u9636\u6bb5\u3002\u8fd9\u4e09\u4e2a\u9636\u6bb5\u4e2d\uff0c\u8ba1\u7b97\u5e03\u5c40\u548c\u7ed8\u56fe\u6bd4\u8f83\u8d39\u65f6\u95f4\uff0c\u800c\u5408\u6210\u9700\u8981\u7684\u65f6\u95f4\u76f8\u5bf9\u5c11\u4e00\u4e9b\u3002"),(0,l.kt)("p",null,"\u4ee5\u52a8\u753b\u4e3a\u4f8b\uff0c\u5982\u679c\u4f7f\u7528 JS \u7684\u5b9a\u65f6\u5668\u6765\u63a7\u5236\u52a8\u753b\uff0c\u53ef\u80fd\u5c31\u9700\u8981\u8f83\u591a\u7684\u4fee\u6539\u5e03\u5c40\u548c\u7ed8\u56fe\u7684\u64cd\u4f5c\uff0c\u4e00\u822c\u6709\u4ee5\u4e0b\u4e24\u79cd\u65b9\u6cd5\u8fdb\u884c\u4f18\u5316\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u4f7f\u7528\u5408\u9002\u7684\u7f51\u9875\u5206\u5c42\u6280\u672f\uff1a\u5982\u4f7f\u7528\u591a\u5c42 canvas\uff0c\u5c06\u52a8\u753b\u80cc\u666f\uff0c\u8fd0\u52a8\u4e3b\u4f53\uff0c\u6b21\u8981\u7269\u4f53\u5206\u5c42\uff0c\u8fd9\u6837\u6bcf\u4e00\u5e27\u9700\u8981\u53d8\u5316\u7684\u5c31\u53ea\u662f\u4e00\u4e2a\u6216\u90e8\u5206\u5408\u6210\u5c42\uff0c\u800c\u4e0d\u662f\u6574\u4e2a\u9875\u9762\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u4f7f\u7528 CSS Transforms \u548c Animations\uff1a\u5b83\u53ef\u4ee5\u8ba9\u6d4f\u89c8\u5668\u4ec5\u4ec5\u4f7f\u7528\u5408\u6210\u5668\u6765\u5408\u6210\u6240\u6709\u7684\u5c42\u5c31\u53ef\u4ee5\u8fbe\u5230\u52a8\u753b\u6548\u679c\uff0c\u800c\u4e0d\u9700\u8981\u91cd\u65b0\u8ba1\u7b97\u5e03\u5c40\uff0c\u91cd\u65b0\u7ed8\u5236\u56fe\u5f62\u3002",(0,l.kt)("a",{parentName:"li",href:"https://csstriggers.com/"},"CSS Triggers")," \u4e2d\u4ec5\u89e6\u53d1 Composite \u7684\u5c5e\u6027\u5c31\u662f\u6700\u4f18\u7684\u9009\u62e9\u3002")),(0,l.kt)("h4",{id:"22-\u4f18\u5316\u5f71\u54cd\u6e32\u67d3\u7684\u8d44\u6e90"},"2.2 \u4f18\u5316\u5f71\u54cd\u6e32\u67d3\u7684\u8d44\u6e90"),(0,l.kt)("p",null,"\u5728\u6d4f\u89c8\u5668\u89e3\u6790 HTML \u7684\u8fc7\u7a0b\u4e2d\uff0cCSS \u548c JS \u90fd\u6709\u53ef\u80fd\u5bf9\u9875\u9762\u7684\u6e32\u67d3\u9020\u6210\u5f71\u54cd\u3002\u4f18\u5316\u65b9\u6cd5\u5305\u62ec\u4ee5\u4e0b\u51e0\u70b9\uff1a"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},"\u5173\u952e CSS \u8d44\u6e90\u653e\u5728\u5934\u90e8\u52a0\u8f7d\u3002"),(0,l.kt)("li",{parentName:"ol"},"JS \u901a\u5e38\u653e\u5728\u9875\u9762\u5e95\u90e8\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u4e3a JS \u6dfb\u52a0 async \u548c defer \u5c5e\u6027\u3002"),(0,l.kt)("li",{parentName:"ol"},"body \u4e2d\u5c3d\u91cf\u4e0d\u8981\u51fa\u73b0 CSS \u548c JS\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u4e3a img \u6307\u5b9a\u5bbd\u9ad8\uff0c\u907f\u514d\u56fe\u50cf\u52a0\u8f7d\u5b8c\u6210\u540e\u89e6\u53d1\u91cd\u6392\u3002"),(0,l.kt)("li",{parentName:"ol"},"\u907f\u514d\u4f7f\u7528 table, iframe \u7b49\u6162\u5143\u7d20\u3002\u539f\u56e0\u662f table \u4f1a\u7b49\u5230\u5b83\u7684 dom \u6811\u5168\u90e8\u751f\u6210\u540e\u518d\u4e00\u6b21\u6027\u63d2\u5165\u9875\u9762\u4e2d\uff1biframe \u5185\u8d44\u6e90\u7684\u4e0b\u8f7d\u8fc7\u7a0b\u4f1a\u963b\u585e\u7236\u9875\u9762\u9759\u6001\u8d44\u6e90\u7684\u4e0b\u8f7d\u53ca css, dom \u6811\u7684\u89e3\u6790\u3002")),(0,l.kt)("p",null,(0,l.kt)("img",{parentName:"p",src:"https://html.spec.whatwg.org/images/asyncdefer.svg",alt:"script element"})),(0,l.kt)("blockquote",null,(0,l.kt)("p",{parentName:"blockquote"},"\u56fe\u7247\u6765\u6e90 ",(0,l.kt)("a",{parentName:"p",href:"https://html.spec.whatwg.org/multipage/scripting.html#the-script-element"},"The Script Element"))),(0,l.kt)("h2",{id:"\u53c2\u8003\u8d44\u6599"},"\u53c2\u8003\u8d44\u6599"),(0,l.kt)("ol",null,(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/"},"\u6d4f\u89c8\u5668\u7684\u5de5\u4f5c\u539f\u7406\uff1a\u65b0\u5f0f\u7f51\u7edc\u6d4f\u89c8\u5668\u5e55\u540e\u63ed\u79d8")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developer.mozilla.org/zh-CN/docs/Web/Performance/How_browsers_work"},"\u6e32\u67d3\u9875\u9762\uff1a\u6d4f\u89c8\u5668\u7684\u5de5\u4f5c\u539f\u7406")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/constructing-the-object-model"},"Constructing the Object Model")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-engine-quantum-css-aka-stylo/"},"Inside a super fast CSS engine")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction"},"Render-tree Construction, Layout, and Paint")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developers.google.com/web/updates/2018/09/inside-browser-part3"},"Inside look at modern web browser\uff08part 3\uff09")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://developers.google.com/web/updates/2018/09/inside-browser-part4"},"Inside look at modern web browser\uff08part 4\uff09")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/dom/README.md"},"DOM")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://chromium.googlesource.com/chromium/src/+/HEAD/third_party/blink/renderer/core/css/style-calculation.md"},"CSS")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/layout/README.md"},"Layout")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://chromium.googlesource.com/chromium/src/+/refs/heads/main/third_party/blink/renderer/core/paint/README.md#Overview"},"Paint")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://chromium.googlesource.com/chromium/src/+/refs/heads/main/docs/how_cc_works.md"},"how cc works")),(0,l.kt)("li",{parentName:"ol"},(0,l.kt)("a",{parentName:"li",href:"https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.ga884fe665f_64_6"},"Life of a Pixel"))))}u.isMDXComponent=!0}}]); |