{"id":1259,"date":"2024-07-28T20:21:32","date_gmt":"2024-07-28T12:21:32","guid":{"rendered":"http:\/\/codermr.com\/?p=1259"},"modified":"2024-07-28T20:25:13","modified_gmt":"2024-07-28T12:25:13","slug":"what-is-browser-rendering","status":"publish","type":"post","link":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/","title":{"rendered":"WHAT IS Browser rendering ?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><strong>WHAT IS Browser rendering ? <\/strong><\/h2>\n\n\n\n<p>This is a fundamental concept that you should really understand when learning HTML\/CSS\/JS and React .<\/p>\n\n\n\n<p style=\"font-size:17px\"><strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-purple-color\">Browser rendering<\/mark> is the process by which web browsers transform HTML, CSS, and JavaScript code into a visual representation on the screen. <\/strong><\/p>\n\n\n\n<p>This involves several steps, including parsing, constructing internal representations, applying styles, laying out elements, and painting pixels on the screen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Steps in the Browser Rendering Process:<\/h3>\n\n\n\n<ol>\n<li><strong>Parsing HTML<\/strong>:\n<ul>\n<li>The browser parses the HTML document into a DOM (Document Object Model) tree, representing the structure and content of the document.\u3010<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>\u5c06 HTML \u89e3\u6790\u6210 DOM \u6811<\/strong><\/mark>\u3011<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Parsing CSS<\/strong>:\n<ul>\n<li>CSS is parsed into a CSSOM (CSS Object Model) tree, representing the styles associated with various elements.\u3010<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\"><strong>\u5c06 CSS \u89e3\u6790\u6210 CSSOM \u6811<\/strong><\/mark>\u3011<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Combining DOM and CSSOM<\/strong>:\n<ul>\n<li>The browser combines the DOM and CSSOM trees to create a Render Tree. The Render Tree contains the visual representation of elements to be displayed on the screen, including their styles but excluding non-visual elements like <code>&lt;script><\/code> and <code>&lt;meta><\/code> tags.\u3010<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u5408\u5e76 DOM \u548c CSSOM \u521b\u5efa Render tree<\/mark><\/strong>\u3011<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Layout (Reflow)<\/strong>:\n<ul>\n<li>The browser calculates the layout of each Render Tree node. This step involves determining the size and position of each element on the screen. This process is called &#8220;layout&#8221; or &#8220;reflow.&#8221; \u3010<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u6d4f\u89c8\u8ba1\u7b97\u6bcf\u4e2a Render Tree node \u7684\u5e03\u5c40<\/mark><\/strong>\u3011<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Painting<\/strong>:\n<ul>\n<li>The browser converts the Render Tree into actual pixels on the screen. This step is called &#8220;painting&#8221; and involves drawing the visual representation of elements.\u3010<strong><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u6d4f\u89c8\u5668\u5c06 Render Tree \u8f6c\u6362\u6210\u5c4f\u5e55\u4e0a\u7684\u50cf\u7d20<\/mark><\/strong>\u3011<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Compositing<\/strong>:\n<ul>\n<li>For complex pages with animations, transformations, or overlapping elements, the browser may split the rendering into multiple layers. These layers are then composited together to form the final image displayed on the screen.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Detailed Breakdown:<\/h3>\n\n\n\n<ol>\n<li><strong>Parsing HTML to DOM<\/strong>:\n<ul>\n<li>The HTML content is parsed by the browser\u2019s HTML parser.<\/li>\n\n\n\n<li>A DOM tree is constructed, representing the hierarchical structure of the document.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Parsing CSS to CSSOM<\/strong>:\n<ul>\n<li>CSS stylesheets are parsed into the CSSOM tree.<\/li>\n\n\n\n<li>This tree represents all the CSS rules and their relationships.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Creating the Render Tree<\/strong>:\n<ul>\n<li>The browser combines the DOM and CSSOM to create the Render Tree.<\/li>\n\n\n\n<li>Only elements that need to be rendered (visible elements) are included in the Render Tree.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Layout (Reflow)<\/strong>:\n<ul>\n<li>The browser calculates the exact position and size of each visible element.<\/li>\n\n\n\n<li>This step considers various factors such as viewport size, box model properties (margins, borders, padding), and CSS layout properties (position, float, flexbox, grid).<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Painting<\/strong>:\n<ul>\n<li>The browser takes the Render Tree and paints the pixels onto the screen.<\/li>\n\n\n\n<li>This involves drawing text, colors, borders, shadows, images, and other visual aspects of elements.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Compositing Layers<\/strong>:\n<ul>\n<li>Modern browsers often create multiple layers to manage complex rendering scenarios.<\/li>\n\n\n\n<li>Layers are composited together in the correct order to produce the final image.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Example Rendering Flow:<\/h3>\n\n\n\n<p>1. <strong>HTML Code<\/strong>:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;html>\n  &lt;head>\n    &lt;style>\n      body { font-family: Arial; }\n      .container { width: 100%; }\n      .header { background-color: #f0f0f0; }\n    &lt;\/style>\n  &lt;\/head>\n  &lt;body>\n    &lt;div class=\"container\">\n      &lt;div class=\"header\">Hello, World!&lt;\/div>\n    &lt;\/div>\n  &lt;\/body>\n&lt;\/html><\/code><\/pre>\n\n\n\n<p>2. <strong>Parsing<\/strong>:<\/p>\n\n\n\n<ul>\n<li>The HTML parser creates the DOM tree.<\/li>\n\n\n\n<li>The CSS parser creates the CSSOM tree.<\/li>\n<\/ul>\n\n\n\n<p>3. <strong>Creating Render Tree<\/strong>:<\/p>\n\n\n\n<ul>\n<li>The browser combines the DOM and CSSOM trees to create the Render Tree.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>RenderTree:\n- html\n  - body\n    - div.container\n      - div.header<\/code><\/pre>\n\n\n\n<p>4. <strong>Layout<\/strong>:<\/p>\n\n\n\n<ul>\n<li>The browser calculates positions and sizes for each element.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Layout:\n- html { width: 100%; height: 100%; }\n- body { width: 100%; height: 100%; font-family: Arial; }\n- div.container { width: 100%; }\n- div.header { width: 100%; background-color: #f0f0f0; }<\/code><\/pre>\n\n\n\n<p>5. <strong>Painting<\/strong>:<\/p>\n\n\n\n<ul>\n<li>The browser paints the elements onto the screen, respecting their styles and layout properties.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>Painting:\n- Draw background color of div.header.\n- Draw text \"Hello, World!\" in div.header.<\/code><\/pre>\n\n\n\n<p>6. <strong>Compositing<\/strong>:<\/p>\n\n\n\n<ul>\n<li>If necessary, the browser creates multiple layers and composites them.<\/li>\n\n\n\n<li>This step is essential for handling z-index, transforms, and animations smoothly.<\/li>\n<\/ul>\n\n\n\n<ol><\/ol>\n\n\n\n<p>By understanding the browser rendering process, developers can optimize their web pages for better performance and faster load times, ensuring a smoother user experience.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>\u4ee5\u4e0a\u5c31\u662f\u6d4f\u89c8\u5668\u6e32\u67d3\u7684\u8fc7\u7a0b\u3002\u4e0b\u9762\u662f\u6269\u5c55\u9605\u8bfb\uff08\u90e8\u5206\u5185\u5bb9\u5f15\u7528\u81ea\uff1a<a href=\"https:\/\/zhuanlan.zhihu.com\/p\/445810614\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/zhuanlan.zhihu.com\/p\/445810614<\/a>\uff09<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>HTML\uff0cCSS \u548c JavaScript\uff0c\u4f46\u662f\u6d4f\u89c8\u5668\u662f\u5982\u4f55\u89e3\u6790\u8fd9\u4e9b\u6587\u4ef6\uff0c\u6700\u7ec8\u5c06\u5b83\u4eec\u4ee5\u50cf\u7d20\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u7684\u5462\uff1f\u8fd9\u4e00\u8fc7\u7a0b\u53eb\u505a\u00a0<em>Critical Rendering Path<\/em>\u3002<em>Critical Rendering Path<\/em> \u6307\u7684\u662f\u6d4f\u89c8\u5668\u4ece\u8bf7\u6c42 HTML\uff0cCSS\uff0cJavaScript \u6587\u4ef6\u5f00\u59cb\uff0c\u5230\u5c06\u5b83\u4eec\u6700\u7ec8\u4ee5\u50cf\u7d20\u8f93\u51fa\u5230\u5c4f\u5e55\u4e0a\u8fd9\u4e00\u8fc7\u7a0b\u3002<\/p>\n\n\n\n<p>\u8fd9\u4e2a\u8fc7\u7a0b\u4e3b\u8981\u5305\u62ec\u4ee5\u4e0b\u51e0\u4e2a\u90e8\u5206\uff1a<\/p>\n\n\n\n<ol>\n<li><strong>\u6784\u5efa DOM<\/strong>\n<ol>\n<li>\u5c06 HTML \u89e3\u6790\u6210\u8bb8\u591a Tokens<\/li>\n\n\n\n<li>\u5c06 Tokens \u89e3\u6790\u6210 Objects<\/li>\n\n\n\n<li>\u5c06 Objects \u7ec4\u5408\u6210\u4e3a\u4e00\u4e2a DOM \u6811<\/li>\n<\/ol>\n<\/li>\n\n\n\n<li><strong>\u6784\u5efa CSSOM<\/strong>\n<ul>\n<li>\u89e3\u6790 CSS \u6587\u4ef6\uff0c\u5e76\u6784\u5efa\u51fa\u4e00\u4e2a CSSOM \u6811\uff08\u8fc7\u7a0b\u7c7b\u4f3c\u4e8e DOM \u6784\u5efa\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6784\u5efa Render<\/strong>\n<ul>\n<li>\u7ed3\u5408 DOM \u548c CSSOM \u6784\u5efa\u51fa\u4e00\u9897 Render \u6811<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Layout<\/strong>\n<ul>\n<li>\u8ba1\u7b97\u51fa\u5143\u7d20\u76f8\u5bf9\u4e8e viewport \u7684\u76f8\u5bf9\u4f4d\u7f6e<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Paint<\/strong>\n<ul>\n<li>\u5c06 Render \u6811\u8f6c\u6362\u6210\u50cf\u7d20\uff0c\u663e\u793a\u5728\u5c4f\u5e55\u4e0a<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u503c\u5f97\u6ce8\u610f\u7684\u662f\uff0c\u4e0a\u9762\u7684\u8fc7\u7a0b\u5e76\u4e0d\u662f\u4f9d\u6b21\u8fdb\u884c\u7684\uff0c\u800c\u662f\u5b58\u5728\u4e00\u5b9a\u4ea4\u53c9\uff0c\u540e\u9762\u4f1a\u8be6\u7ec6\u89e3\u91ca\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>\u5728\u5b66\u4e60\u4e0a\u9762\u77e5\u8bc6\u70b9\u4e4b\u524d\uff0c\u8fd8\u5f97\u5148\u5f04\u660e\u767d\uff0c\u4ec0\u4e48\u662f DOM \uff1f<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4ec0\u4e48\u662f DOM \uff1f<\/h2>\n\n\n\n<p>The HTML DOM (Document Object Model) is a programming interface for web documents. It represents the structure of a document (such as an HTML or XML document) as a tree of objects. This structure allows programs to read, manipulate, and modify the content, structure, and style of a web page dynamically. \u3010<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u7b80\u5355\u8bf4\u5462\uff0cDOM \u662f&#8221;\u6587\u6863\u5bf9\u8c61\u6a21\u578b&#8221;\uff0c\u5b83\u5c06\u6587\u6863\uff08\u5982HTML\u6216XML\u6587\u6863\uff09\u7684\u7ed3\u6784\u8868\u793a\u4e3a\u5bf9\u8c61\u6811\uff0c\u7136\u540e\u65b9\u4fbf\u7a0b\u5e8f\u8bfb\u53d6\u6216,\u64cd\u4f5c,\u4fee\u6539\u6587\u6863\u5185\u5bb9\u3002<\/mark>\u3011<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Key Concepts of the HTML DOM:<\/h3>\n\n\n\n<ol>\n<li><strong>Tree Structure<\/strong>:\n<ul>\n<li>The DOM represents the document as a tree of nodes. Each node in the tree is an object representing part of the document (e.g., an element, attribute, or text).  \uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">DOM\u5c06\u6587\u6863\u8868\u793a\u4e3a\u8282\u70b9\u6811\u3002\u6811\u4e2d\u7684\u6bcf\u4e2a\u8282\u70b9\u90fd\u662f\u4e00\u4e2a\u5bf9\u8c61\uff0c\u8868\u793a\u6587\u6863\u7684\u4e00\u90e8\u5206(\u4f8b\u5982\uff0c\u5143\u7d20\u3001\u5c5e\u6027\u6216\u6587\u672c)\u3002<\/mark>\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Nodes and Elements<\/strong>:\n<ul>\n<li><strong>Node<\/strong>: A single point in the DOM tree. There are different types of nodes, such as element nodes, text nodes, and attribute nodes.<\/li>\n\n\n\n<li><strong>Element<\/strong>: A type of node that represents an HTML element. Elements can have child elements, attributes, and text content.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Access and Manipulation<\/strong>:\n<ul>\n<li>The DOM provides methods to access and manipulate the elements and content of a web page. For example, you can add, remove, or change elements and attributes.\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">DOM\u63d0\u4f9b\u65b9\u6cd5\u8bbf\u95ee\u548c\u64cd\u4f5c\u9875\u9762\u5185\u5bb9\u548c\u5143\u7d20<\/mark>\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Events<\/strong>:\n<ul>\n<li>The DOM allows you to attach event handlers to elements. This way, you can respond to user actions like clicks, keypresses, and other events.\uff08<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">DOM\u5141\u8bb8\u4f60\u5f80\u5143\u7d20\u4e0a\u6dfb\u52a0\u4e8b\u4ef6\u548c\u54cd\u5e94\u7528\u6237\u64cd\u4f5c<\/mark>\uff09<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p>DOM \u4e5f\u53eb DOM \u5bf9\u8c61\uff0c\u662f\u6d4f\u89c8\u5668\u5bf9 HTML \u6587\u672c\u89e3\u6790\u540e\u5f97\u5230\u7684\uff0c\u7559\u5728\u6d4f\u89c8\u5668\u5185\u5b58\u4e2d\u7684\u4e00\u4e2aJS\u5bf9\u8c61\uff0c\u4fd7\u79f0\u201c\u6587\u6863\u5bf9\u8c61\u6a21\u578b\u201d\uff0c\u5176\u5b9edom\u5143\u7d20\u5c31\u662f\u4e00\u4e2a\u6d4f\u89c8\u5668\u751f\u6210\u7684JavaScript\u5bf9\u8c61\u5566\u3002<br>\u6211\u770b\u8fc7\u7f51\u4e0a\u5f88\u591a\u5bf9dom\u7684\u89e3\u91ca\uff0c\u4f46\u662f\u6211\u4e2a\u4eba\u611f\u89c9\u5f88\u591a\u90fd\u4e0d\u592a\u51c6\u786e\u3002\u5728\u6211\u770b\u6765\uff0c\u6ca1\u90a3\u4e48\u590d\u6742\uff0c<strong>DOM \u5c31\u662f\u4e00\u4e2a\u6d4f\u89c8\u5668\u6839\u636e\u7f51\u9875\u6e90\u4ee3\u7801\u751f\u6210\u7684\u4e00\u4e2a JavaScript \u5bf9\u8c61<\/strong>\u3002<br>\u4e00\u4e2a\u7f51\u9875\uff0c\u5bf9\u6d4f\u89c8\u5668\u800c\u8a00\u5c31\u662f\u4e00\u4e2a\u5927\u7684dom\uff0c\u7f51\u9875\u4e2d\u5404\u4e2aHTML\u8282\u70b9\uff0c\u4e5f\u88ab\u79f0\u4e3a\u4e00\u4e2a\u4e2a\u5c0fdom\u3002\u4ece\u672c\u8d28\u6765\u770b\uff0cdom\u662f\u4e00\u4e2a\u5b9e\u5b9e\u5728\u5728\u7684\u4e1c\u897f\uff0c\u662f\u4e00\u4e2a\u6d4f\u89c8\u5668\u751f\u6210\u7684\u5bf9\u8c61\u3002<\/p>\n<cite>\u5f15\u7528\u81ea\uff1ahttps:\/\/zhuanlan.zhihu.com\/p\/545932647<\/cite><\/blockquote>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6784\u5efa DOM<\/h2>\n\n\n\n<p>\u6784\u5efa DOM \u662f\u5fc5\u4e0d\u53ef\u5c11\u7684\u4e00\u73af\uff0c\u6d4f\u89c8\u5668\u4ece\u53d1\u51fa\u8bf7\u6c42\u5f00\u59cb\u5230\u5f97\u5230 HTML \u6587\u4ef6\u540e\uff0c\u7b2c\u4e00\u4ef6\u4e8b\u5c31\u662f\u89e3\u6790 HTML \u6210\u8bb8\u591a Tokens\uff0c\u518d\u5c06 Tokens \u8f6c\u6362\u6210 Objects\uff0c\u6700\u540e\u5c06 Objects \u7ec4\u5408\u6210\u4e00\u9897 DOM \u6811\u3002<\/p>\n\n\n\n<p>\u8fd9\u4e2a\u8fc7\u7a0b\u662f\u4e00\u4e2a\u5faa\u5e8f\u6e10\u8fdb\u7684\u8fc7\u7a0b\uff0c\u6211\u4eec\u5047\u8bbe HTML \u6587\u4ef6\u5f88\u5927\uff0c\u4e00\u4e2a&nbsp;<em>RTT (Round-Trip Time)<\/em>&nbsp;\u53ea\u80fd\u5f97\u5230\u4e00\u90e8\u5206\uff0c\u6d4f\u89c8\u5668\u5f97\u5230\u8fd9\u90e8\u5206\u4e4b\u540e\u5c31\u4f1a\u5f00\u59cb\u6784\u5efa DOM\uff0c\u5e76\u4e0d\u4f1a\u7b49\u5230\u6574\u4e2a\u6587\u6863\u5c31\u4f4d\u624d\u5f00\u59cb\u6e32\u67d3\u3002\u8fd9\u6837\u505a\u53ef\u4ee5\u52a0\u5feb\u6784\u5efa\u8fc7\u7a0b\uff0c\u800c\u4e14\u7531\u4e8e\u81ea\u9876\u5411\u4e0b\u6784\u5efa\uff0c\u56e0\u6b64\u540e\u9762\u6784\u5efa\u7684\u4e0d\u4f1a\u5bf9\u524d\u9762\u7684\u9020\u6210\u5f71\u54cd\u3002<\/p>\n\n\n\n<p>\u540e\u9762\u6211\u4eec\u5c06\u4f1a\u63d0\u5230\uff0cCSSOM \u5219\u5fc5\u987b\u7b49\u5230\u6240\u6709\u5b57\u8282\u6536\u5230\u624d\u5f00\u59cb\u6784\u5efa\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6784\u5efa CSSOM<\/h2>\n\n\n\n<p><em>CSSOM (CSS Object Model)<\/em>\uff0c\u7ffb\u8bd1\u8fc7\u6765\u53eb\u505a CSS \u5bf9\u8c61\u6a21\u578b\u3002\u5b83\u7684\u6784\u5efa\u8fc7\u7a0b\u7c7b\u4f3c DOM\uff0c\u5f53 HTML \u89e3\u6790\u4e2d\u9047\u5230\u00a0<code>&lt;link><\/code>\u00a0\u6807\u7b7e\u65f6\uff0c\u4f1a\u8bf7\u6c42\u5bf9\u5e94\u7684 CSS \u6587\u4ef6\uff0c\u5f53 CSS \u6587\u4ef6\u5c31\u4f4d\u65f6\uff0c\u4fbf\u5f00\u59cb\u89e3\u6790\u5b83\uff08\u5982\u679c\u9047\u5230\u884c\u5185\u00a0<code>&lt;style><\/code>\u00a0\u65f6\u5219\u76f4\u63a5\u89e3\u6790\uff09\uff0c<mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">\u8fd9\u4e00\u89e3\u6790\u8fc7\u7a0b\u53ef\u4ee5\u548c\u6784\u5efa DOM \u540c\u65f6\u8fdb\u884c<\/mark>\u3002<\/p>\n\n\n\n<p><mark style=\"background-color:rgba(0, 0, 0, 0)\" class=\"has-inline-color has-vivid-cyan-blue-color\">CSSOM \u7684\u6784\u5efa\u5fc5\u987b\u8981\u83b7\u5f97\u4e00\u4efd\u5b8c\u6574\u7684 CSS \u6587\u4ef6<\/mark>\uff0c\u800c\u4e0d\u50cf DOM \u7684\u6784\u5efa\u662f\u4e00\u4e2a\u5faa\u5e8f\u6e10\u8fdb\u7684\u8fc7\u7a0b\u3002\u56e0\u4e3a\u6211\u4eec\u77e5\u9053\uff0cCSS \u6587\u4ef6\u4e2d\u5305\u542b\u5927\u91cf\u7684\u6837\u5f0f\uff0c\u540e\u9762\u7684\u6837\u5f0f\u4f1a\u8986\u76d6\u524d\u9762\u7684\u6837\u5f0f\uff0c\u5982\u679c\u6211\u4eec\u63d0\u524d\u5c31\u6784\u5efa CSSOM\uff0c\u53ef\u80fd\u4f1a\u5f97\u5230\u9519\u8bef\u7684\u7ed3\u679c\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u6784\u5efa Render Tree<\/h2>\n\n\n\n<p>\u8fd9\u4e5f\u662f\u5173\u952e\u7684\u4e00\u6b65\uff0c\u6d4f\u89c8\u5668\u4f7f\u7528 DOM \u548c CSSOM \u6784\u5efa\u51fa Render Tree\u3002\u6b64\u65f6\u4e0d\u50cf\u6784\u5efa DOM \u4e00\u6837\u628a\u6240\u6709\u8282\u70b9\u6784\u5efa\u51fa\u6765\uff0c\u6d4f\u89c8\u5668\u53ea\u6784\u5efa\u9700\u8981\u5728\u5c4f\u5e55\u4e0a\u663e\u793a\u7684\u90e8\u5206\uff0c\u56e0\u6b64\u50cf\u00a0<code>&lt;head><\/code>\u00a0\u6216\u00a0<code>&lt;meta><\/code>\u00a0\u8fd9\u4e9b\u6807\u7b7e\u5c31\u65e0\u9700\u6784\u5efa\u4e86\u3002\u540c\u65f6\uff0c\u5bf9\u4e8e\u00a0<code>display: none<\/code>\u00a0\u7684\u5143\u7d20\uff0c\u4e5f\u65e0\u9700\u6784\u5efa\u3002<\/p>\n\n\n\n<p><code>display: none<\/code>\u00a0\u544a\u8bc9\u6d4f\u89c8\u5668\u8fd9\u4e2a\u5143\u7d20\u65e0\u9700\u51fa\u73b0\u5728 Render Tree \u4e2d\uff0c\u4f46\u662f\u00a0<code>visibility: hidden<\/code>\u00a0\u53ea\u662f\u9690\u85cf\u4e86\u8fd9\u4e2a\u5143\u7d20\uff0c\u4f46\u662f\u5143\u7d20\u8fd8\u5360\u7a7a\u95f4\uff0c\u4f1a\u5f71\u54cd\u5230\u540e\u9762\u7684\u00a0<strong>Layout<\/strong>\u00a0\u8fc7\u7a0b\uff0c\u56e0\u6b64\u4ecd\u7136\u9700\u8981\u51fa\u73b0\u5728 Render Tree \u4e2d\u3002<\/p>\n\n\n\n<p>\u6784\u5efa\u8fc7\u7a0b\u9075\u5faa\u4ee5\u4e0b\u6b65\u9aa4\uff1a<\/p>\n\n\n\n<ol>\n<li>\u6d4f\u89c8\u5668\u4ece DOM \u6811\u5f00\u59cb\uff0c\u904d\u5386\u6bcf\u4e00\u4e2a\u201c\u53ef\u89c1\u201d\u8282\u70b9<\/li>\n\n\n\n<li>\u5bf9\u4e8e\u6bcf\u4e00\u4e2a&#8221;\u53ef\u89c1&#8221;\u8282\u70b9\uff0c\u5728 CSSOM \u4e0a\u627e\u5230\u5339\u914d\u7684\u6837\u5f0f\u5e76\u5e94\u7528<\/li>\n\n\n\n<li>\u751f\u6210 Render Tree<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">\u6269\u5c55\uff1aCSS \u5339\u914d\u89c4\u5219\u4e3a\u4f55\u4ece\u53f3\u5411\u5de6<\/h3>\n\n\n\n<p>\u76f8\u4fe1\u5927\u591a\u6570\u521d\u5b66\u8005\u90fd\u4f1a\u8ba4\u4e3a CSS \u5339\u914d\u662f\u5de6\u5411\u53f3\u7684\uff0c\u5176\u5b9e\u6070\u6070\u76f8\u53cd\u3002\u5b66\u4e60\u4e86 CRP\uff0c\u4e5f\u5c31\u4e0d\u96be\u7406\u89e3\u4e3a\u4ec0\u4e48\u4e86\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Layout<\/h2>\n\n\n\n<p>\u6211\u4eec\u73b0\u5728\u4e3a\u6b62\u5df2\u7ecf\u5f97\u5230\u4e86\u6240\u6709\u5143\u7d20\u7684\u81ea\u8eab\u4fe1\u606f\uff0c\u4f46\u662f\u8fd8\u4e0d\u77e5\u9053\u5b83\u4eec\u76f8\u5bf9\u4e8e Viewport \u7684\u4f4d\u7f6e\u548c\u5927\u5c0f\uff0cLayout \u8fd9\u4e00\u8fc7\u7a0b\u9700\u8981\u8ba1\u7b97\u7684\u5c31\u662f\u8fd9\u4e24\u4e2a\u4fe1\u606f\u3002<\/p>\n\n\n\n<p>\u6839\u636e\u8fd9\u4e24\u4e2a\u4fe1\u606f\uff0cLayout \u8f93\u51fa\u5143\u7d20\u7684&nbsp;<em>Box Model<\/em>\uff0c\u5173\u4e8e\u8fd9\u4e2a\uff0c\u6211\u4e5f\u5199\u8fc7\u4e00\u7bc7\u6587\u7ae0&nbsp;<em><a href=\"https:\/\/link.zhihu.com\/?target=https%3A\/\/tianzhich.github.io\/blog\/learning\/2018\/09\/11\/Document-Flow-and-the-CSS-Positioning\/\" target=\"_blank\" rel=\"noreferrer noopener\">Understand CSS Formatting Model<\/a><\/em>\u3002<\/p>\n\n\n\n<p>\u76ee\u524d\u4e3a\u6b62\uff0c\u73b0\u5728\u6211\u4eec\u5df2\u7ecf\u62ff\u5230\u4e86\u5143\u7d20\u76f8\u5bf9\u4e8e Viewport \u7684\u8be6\u7ec6\u4fe1\u606f\uff0c\u6240\u6709\u7684\u503c\u90fd\u5df2\u7ecf\u8ba1\u7b97\u4e3a\u76f8\u5bf9 Viewport \u7684\u7cbe\u786e\u50cf\u7d20\u5927\u5c0f\u548c\u4f4d\u7f6e\uff0c\u5c31\u5dee\u663e\u793a\u4e86\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Paint<\/h2>\n\n\n\n<p>\u6d4f\u89c8\u5668\u5c06\u6bcf\u4e00\u4e2a\u8282\u70b9\u4ee5\u50cf\u7d20\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\uff0c\u6700\u7ec8\u6211\u4eec\u770b\u5230\u9875\u9762\u3002<\/p>\n\n\n\n<p>\u8fd9\u4e00\u8fc7\u7a0b\u9700\u8981\u7684\u65f6\u95f4\u4e0e\u6587\u6863\u5927\u5c0f\uff0cCSS \u5e94\u7528\u6837\u5f0f\u7684\u591a\u5c11\u4ee5\u53ca\u590d\u6742\u5ea6\uff0c\u8fd8\u6709\u8bbe\u5907\u81ea\u8eab\u90fd\u6709\u5173\uff0c\u4f8b\u5982\u5bf9\u7b80\u5355\u7684\u989c\u8272\u8fdb\u884c Paint \u662f\u7b80\u5355\u7684\uff0c\u4f46\u662f\u5bf9\u00a0<code>box-shadow<\/code>\u00a0\u8fdb\u884c Paint \u5219\u662f\u590d\u6742\u7684\u3002<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><a href=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68.png\"><img loading=\"lazy\" decoding=\"async\" width=\"2634\" height=\"1581\" src=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68.png\" alt=\"\" class=\"wp-image-1265\" style=\"width:840px;height:auto\" srcset=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68.png 2634w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-300x180.png 300w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-1024x615.png 1024w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-768x461.png 768w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-1536x922.png 1536w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-2048x1229.png 2048w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-1222x733.png 1222w, http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/image-68-922x553.png 922w\" sizes=\"(max-width: 2634px) 100vw, 2634px\" \/><\/a><\/figure>\n\n\n\n<p>\u4e0a\u56fe\u4e2d\uff0c\u6d4f\u89c8\u5668\u6536\u5230 HTML \u6587\u4ef6\u540e\uff0c\u4fbf\u5f00\u59cb\u89e3\u6790\u6784\u5efa DOM\u3002\uff08<strong>\u9700\u8981\u6ce8\u610f\uff0c\u4e0a\u56fe\u663e\u793a\u7684\u53ea\u662f\u63a5\u6536\u56fe\u7247\u7684\u4e00\u90e8\u5206<\/strong>\uff09<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>WHAT IS Browser rendering ? This is a fundamental conce&#8230;<\/p>\n","protected":false},"author":1,"featured_media":1271,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[57],"tags":[61],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v20.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>WHAT IS Browser rendering ? - \u7801\u5148\u751f\u7684\u535a\u5ba2<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"WHAT IS Browser rendering ? - \u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"og:description\" content=\"WHAT IS Browser rendering ? This is a fundamental conce...\" \/>\n<meta property=\"og:url\" content=\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7801\u5148\u751f\u7684\u535a\u5ba2\" \/>\n<meta property=\"article:published_time\" content=\"2024-07-28T12:21:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-07-28T12:25:13+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/html_render2.png\" \/>\n\t<meta property=\"og:image:width\" content=\"386\" \/>\n\t<meta property=\"og:image:height\" content=\"379\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"\u7801\u5148\u751f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/mrcode2021\" \/>\n<meta name=\"twitter:site\" content=\"@mrcode2021\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u7801\u5148\u751f\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\"},\"author\":{\"name\":\"\u7801\u5148\u751f\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"headline\":\"WHAT IS Browser rendering ?\",\"datePublished\":\"2024-07-28T12:21:32+00:00\",\"dateModified\":\"2024-07-28T12:25:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\"},\"wordCount\":866,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"keywords\":[\"html_css_js\"],\"articleSection\":[\"\u524d\u7aef\u6280\u672f\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\",\"url\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\",\"name\":\"WHAT IS Browser rendering ? - \u7801\u5148\u751f\u7684\u535a\u5ba2\",\"isPartOf\":{\"@id\":\"http:\/\/codermr.com\/#website\"},\"datePublished\":\"2024-07-28T12:21:32+00:00\",\"dateModified\":\"2024-07-28T12:25:13+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/codermr.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"WHAT IS Browser rendering ?\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/codermr.com\/#website\",\"url\":\"http:\/\/codermr.com\/\",\"name\":\"\u7801\u5148\u751f\u7684\u535a\u5ba2\",\"description\":\"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP\",\"publisher\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/codermr.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf\",\"name\":\"\u7801\u5148\u751f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"contentUrl\":\"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg\",\"width\":400,\"height\":400,\"caption\":\"\u7801\u5148\u751f\"},\"logo\":{\"@id\":\"http:\/\/codermr.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"http:\/\/codermr.com\",\"https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021\"],\"url\":\"http:\/\/codermr.com\/index.php\/author\/coderma\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"WHAT IS Browser rendering ? - \u7801\u5148\u751f\u7684\u535a\u5ba2","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/","og_locale":"zh_CN","og_type":"article","og_title":"WHAT IS Browser rendering ? - \u7801\u5148\u751f\u7684\u535a\u5ba2","og_description":"WHAT IS Browser rendering ? This is a fundamental conce...","og_url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/","og_site_name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","article_published_time":"2024-07-28T12:21:32+00:00","article_modified_time":"2024-07-28T12:25:13+00:00","og_image":[{"width":386,"height":379,"url":"http:\/\/codermr.com\/wp-content\/uploads\/2024\/07\/html_render2.png","type":"image\/png"}],"author":"\u7801\u5148\u751f","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/mrcode2021","twitter_site":"@mrcode2021","twitter_misc":{"\u4f5c\u8005":"\u7801\u5148\u751f","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"6 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#article","isPartOf":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/"},"author":{"name":"\u7801\u5148\u751f","@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"headline":"WHAT IS Browser rendering ?","datePublished":"2024-07-28T12:21:32+00:00","dateModified":"2024-07-28T12:25:13+00:00","mainEntityOfPage":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/"},"wordCount":866,"commentCount":0,"publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"keywords":["html_css_js"],"articleSection":["\u524d\u7aef\u6280\u672f"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/","url":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/","name":"WHAT IS Browser rendering ? - \u7801\u5148\u751f\u7684\u535a\u5ba2","isPartOf":{"@id":"http:\/\/codermr.com\/#website"},"datePublished":"2024-07-28T12:21:32+00:00","dateModified":"2024-07-28T12:25:13+00:00","breadcrumb":{"@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/codermr.com\/index.php\/2024\/07\/28\/what-is-browser-rendering\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/codermr.com\/"},{"@type":"ListItem","position":2,"name":"WHAT IS Browser rendering ?"}]},{"@type":"WebSite","@id":"http:\/\/codermr.com\/#website","url":"http:\/\/codermr.com\/","name":"\u7801\u5148\u751f\u7684\u535a\u5ba2","description":"\u6b22 \u8fce \u4e0b \u8f7d \u6211 \u5f00 \u53d1 \u7684 \u5404 \u7aef \u8f6f \u4ef6 \u548c APP","publisher":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/codermr.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":["Person","Organization"],"@id":"http:\/\/codermr.com\/#\/schema\/person\/39016e15c79e4f02d1ed3a64688619bf","name":"\u7801\u5148\u751f","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/","url":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","contentUrl":"http:\/\/codermr.com\/wp-content\/uploads\/2023\/02\/wukong.jpg","width":400,"height":400,"caption":"\u7801\u5148\u751f"},"logo":{"@id":"http:\/\/codermr.com\/#\/schema\/person\/image\/"},"sameAs":["http:\/\/codermr.com","https:\/\/twitter.com\/https:\/\/twitter.com\/mrcode2021"],"url":"http:\/\/codermr.com\/index.php\/author\/coderma\/"}]}},"_links":{"self":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1259"}],"collection":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/comments?post=1259"}],"version-history":[{"count":8,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1259\/revisions"}],"predecessor-version":[{"id":1270,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/posts\/1259\/revisions\/1270"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media\/1271"}],"wp:attachment":[{"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/media?parent=1259"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/categories?post=1259"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/codermr.com\/index.php\/wp-json\/wp\/v2\/tags?post=1259"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}