{"id":83,"date":"2026-09-01T01:23:44","date_gmt":"2026-08-31T17:23:44","guid":{"rendered":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/01\/interview-browser-rendering-performance\/"},"modified":"2026-09-02T00:40:54","modified_gmt":"2026-09-01T16:40:54","slug":"interview-browser-rendering-performance","status":"publish","type":"post","link":"https:\/\/www.ziliaochi.cn\/index.php\/2026\/09\/01\/interview-browser-rendering-performance\/","title":{"rendered":"\u524d\u7aef\u9762\u8bd5\u9ad8\u9891\u771f\u9898\uff1a\u6d4f\u89c8\u5668\u6e32\u67d3\u6d41\u6c34\u7ebf\u4e0e\u6027\u80fd\u4f18\u5316 20 \u95ee"},"content":{"rendered":"
\n
\u5173\u952e\u8bcd<\/span>\u6d4f\u89c8\u5668\u6e32\u67d3\u3001\u91cd\u6392\u3001\u91cd\u7ed8\u3001LCP\u3001INP\u3001CLS\u3001\u524d\u7aef\u9762\u8bd5\u9898<\/div>\n
\n
\u76ee\u5f55<\/div>\n
    \n
  1. \u4e00\u3001\u6e32\u67d3\u6d41\u6c34\u7ebf\uff1a\u5148\u80cc\u719f\u8fd9\u5f20\u56fe<\/a><\/li>\n
  2. \u4e8c\u3001\u91cd\u6392\u4e0e\u91cd\u7ed8\uff1a\u9762\u8bd5\u5fc5\u8003<\/a><\/li>\n
  3. \u4e09\u3001\u5408\u6210\u5c42\u4e0e GPU \u52a0\u901f<\/a><\/li>\n
  4. \u56db\u3001\u811a\u672c\u52a0\u8f7d\uff1a\u4e09\u9053\u9898\u8fde\u95ee<\/a><\/li>\n
  5. \u4e94\u3001\u6027\u80fd\u6307\u6807\uff1a2026 \u5e74\u8be5\u7b54\u54ea\u4e9b<\/a><\/li>\n
  6. \u516d\u3001\u4f18\u5316\u624b\u6bb5\uff1a\u6309\u9636\u6bb5\u5f52\u7c7b<\/a><\/li>\n
  7. \u4e03\u3001\u52a0\u5206\u9879\uff1a\u600e\u4e48\u8bc1\u660e\u4f60\u771f\u505a\u8fc7<\/a><\/li>\n
  8. \u516b\u3001\u5c0f\u7ed3<\/a><\/li>\n<\/ol>\n<\/div>\n

    “\u4ece\u8f93\u5165 URL \u5230\u9875\u9762\u663e\u793a”\u662f\u524d\u7aef\u9762\u8bd5\u7684\u5e38\u9752\u9898\uff0c\u4f46\u5927\u591a\u6570\u4eba\u53ea\u80fd\u80cc\u51fa\u6d41\u7a0b\uff0c\u4e00\u65e6\u88ab\u8ffd\u95ee\u5230\u6e32\u67d3\u6d41\u6c34\u7ebf\u7684\u5177\u4f53\u9636\u6bb5\u3001\u6bcf\u5c42\u4f18\u5316\u7684\u843d\u70b9\u3001\u4ee5\u53ca\u5982\u4f55\u91cf\u5316\u6548\u679c<\/strong>\u5c31\u5361\u58f3\u4e86\u3002<\/p>\n

    \u672c\u6587\u6309\u771f\u5b9e\u9762\u8bd5\u7684\u8ffd\u95ee\u6df1\u5ea6\uff0c\u628a\u6e32\u67d3\u4e0e\u6027\u80fd\u8fd9\u4e00\u5757\u62c6\u6210 20 \u4e2a\u9ad8\u9891\u8003\u70b9<\/strong>\uff0c\u6bcf\u9898\u7ed9\u51fa”\u6807\u51c6\u7b54\u6cd5 + \u8ffd\u95ee\u9677\u9631”\u3002<\/p>\n

    \u4e00\u3001\u6e32\u67d3\u6d41\u6c34\u7ebf\uff1a\u5148\u80cc\u719f\u8fd9\u5f20\u56fe<\/h2>\n
    \"\u6d4f\u89c8\u5668\u6e32\u67d3\u6d41\u6c34\u7ebf\"
    \u6d4f\u89c8\u5668\u6e32\u67d3\u6d41\u6c34\u7ebf\uff1a\u89e3\u6790\u3001\u6784\u5efa\u6e32\u67d3\u6811\u3001\u5e03\u5c40\u3001\u7ed8\u5236\u3001\u5408\u6210\u5230\u4e0a\u5c4f<\/figcaption><\/figure>\n

    \u6d4f\u89c8\u5668\u628a HTML \u53d8\u6210\u5c4f\u5e55\u50cf\u7d20\uff0c\u5927\u81f4\u7ecf\u8fc7\u8fd9\u4e9b\u9636\u6bb5\uff1a<\/p>\n

      \n
    1. \u89e3\u6790 HTML<\/strong> \u2192 \u6784\u5efa DOM \u6811\uff1b<\/li>\n
    2. \u89e3\u6790 CSS<\/strong> \u2192 \u6784\u5efa CSSOM \u6811\uff1b<\/li>\n
    3. DOM + CSSOM<\/strong> \u2192 \u751f\u6210\u6e32\u67d3\u6811\uff08Render Tree\uff09\uff1b<\/li>\n
    4. \u5e03\u5c40\uff08Layout \/ Reflow\uff09<\/strong> \u2192 \u8ba1\u7b97\u6bcf\u4e2a\u8282\u70b9\u7684\u51e0\u4f55\u4f4d\u7f6e\u4e0e\u5c3a\u5bf8\uff1b<\/li>\n
    5. \u7ed8\u5236\uff08Paint\uff09<\/strong> \u2192 \u751f\u6210\u7ed8\u5236\u6307\u4ee4\uff1b<\/li>\n
    6. \u5408\u6210\uff08Composite\uff09<\/strong> \u2192 \u5206\u5c42\u3001\u6805\u683c\u5316\u3001\u6700\u7ec8\u4e0a\u5c4f\u3002<\/li>\n<\/ol>\n
      \n

      \u8ffd\u95ee\u9677\u9631\uff1a<\/strong>“\u6e32\u67d3\u6811\u548c DOM \u6811\u6709\u4ec0\u4e48\u533a\u522b\uff1f”
      \n\u7b54\uff1a\u6e32\u67d3\u6811\u53ea\u5305\u542b\u53ef\u89c1\u8282\u70b9<\/strong>\u3002display: none<\/code> \u7684\u8282\u70b9\u4e0d\u5728\u6e32\u67d3\u6811\u4e2d\uff0c\u800c visibility: hidden<\/code> \u7684\u8282\u70b9\u4ecd\u5728\uff08\u5b83\u5360\u7a7a\u95f4\u3001\u53ea\u662f\u4e0d\u53ef\u89c1\uff09\u3002\u6b64\u5916 <head><\/code>\u3001<script><\/code> \u7b49\u4e0d\u4ea7\u751f\u53ef\u89c1\u76d2\u5b50\u7684\u8282\u70b9\u4e5f\u4e0d\u5305\u542b\u3002<\/p>\n<\/blockquote>\n

      \u4e8c\u3001\u91cd\u6392\u4e0e\u91cd\u7ed8\uff1a\u9762\u8bd5\u5fc5\u8003<\/h2>\n

      Q3\uff1a\u4ec0\u4e48\u662f\u91cd\u6392\uff08Reflow\uff09\u548c\u91cd\u7ed8\uff08Repaint\uff09\uff1f<\/strong>
      \n\u91cd\u6392\u662f\u51e0\u4f55\u5c5e\u6027\u53d8\u5316<\/strong>\uff08\u5c3a\u5bf8\u3001\u4f4d\u7f6e\u3001\u589e\u5220\u8282\u70b9\uff09\uff0c\u9700\u8981\u91cd\u65b0\u8ba1\u7b97\u5e03\u5c40\uff1b\u91cd\u7ed8\u662f\u5916\u89c2\u53d8\u5316<\/strong>\uff08\u989c\u8272\u3001\u80cc\u666f\u3001\u9634\u5f71\uff09\uff0c\u4e0d\u6d89\u53ca\u51e0\u4f55\u3002\u91cd\u6392\u4e00\u5b9a\u89e6\u53d1\u91cd\u7ed8\uff0c\u91cd\u7ed8\u4e0d\u4e00\u5b9a\u89e6\u53d1\u91cd\u6392\u3002<\/p>\n

      Q4\uff1a\u54ea\u4e9b\u64cd\u4f5c\u4f1a\u89e6\u53d1\u91cd\u6392\uff1f<\/strong>
      \n\u6539\u53d8\u7a97\u53e3\u5927\u5c0f\u3001\u589e\u5220 DOM\u3001\u4fee\u6539\u5bbd\u9ad8\/\u8fb9\u8ddd\/\u5b57\u4f53\u3001\u8bfb\u53d6 offsetTop<\/code>\/scrollTop<\/code>\/getComputedStyle<\/code> \u7b49\u5e03\u5c40\u4fe1\u606f\u3002<\/p>\n

      Q5\uff1a\u4ec0\u4e48\u53eb\u5e03\u5c40\u6296\u52a8\uff08Layout Thrashing\uff09\uff1f<\/strong>
      \n\u5728\u5faa\u73af\u91cc\u4ea4\u66ff\u8fdb\u884c”\u5199\u6837\u5f0f”\u548c”\u8bfb\u5e03\u5c40”<\/strong>\uff0c\u5bfc\u81f4\u6d4f\u89c8\u5668\u88ab\u8feb\u53cd\u590d\u91cd\u65b0\u8ba1\u7b97\u5e03\u5c40\u3002\u89e3\u6cd5\u662f\u8bfb\u5199\u5206\u79bb<\/strong>\uff1a\u5148\u6279\u91cf\u8bfb\uff0c\u518d\u6279\u91cf\u5199\uff1b\u6216\u7528 requestAnimationFrame<\/code> \u5305\u88f9\u3002<\/p>\n

      \/\/ \u274c \u6bcf\u6b21\u5faa\u73af\u90fd\u5f3a\u5236\u540c\u6b65\u5e03\u5c40\nitems.forEach(el => {\n  el.style.width = '100px'\n  console.log(el.offsetHeight)   \/\/ \u8bfb\u53d6\u89e6\u53d1\u91cd\u6392\n})\n\n\/\/ \u2705 \u5148\u8bfb\u540e\u5199\nconst heights = items.map(el => el.offsetHeight)\nitems.forEach(el => { el.style.width = '100px' })\n<\/code><\/pre>\n
      \u4e09\u3001\u5408\u6210\u5c42\u4e0e GPU \u52a0\u901f<\/h2>\n
      Q6\uff1a\u4e3a\u4ec0\u4e48 transform \u52a8\u753b\u6bd4\u6539 left\/top \u6d41\u7545\uff1f<\/strong>
      \n\u56e0\u4e3a transform<\/code> \u4e0e opacity<\/code> \u7684\u53d8\u5316\u53ef\u4ee5\u53ea\u8d70\u5408\u6210\u9636\u6bb5<\/strong>\uff0c\u8df3\u8fc7\u5e03\u5c40\u4e0e\u7ed8\u5236\uff0c\u4e14\u80fd\u5728\u5408\u6210\u7ebf\u7a0b\u6267\u884c\uff0c\u4e0d\u963b\u585e\u4e3b\u7ebf\u7a0b\u3002\u6539 left\/top<\/code> \u4f1a\u89e6\u53d1\u5b8c\u6574\u7684\u91cd\u6392 + \u91cd\u7ed8\u3002<\/p>\n
      Q7\uff1awill-change<\/code> \u8be5\u4e0d\u8be5\u6ee5\u7528\uff1f<\/strong>
      \n\u4e0d\u8be5\u3002\u5b83\u4f1a\u8ba9\u6d4f\u89c8\u5668\u63d0\u524d\u4e3a\u8be5\u5143\u7d20\u521b\u5efa\u72ec\u7acb\u7684\u5408\u6210\u5c42\uff0c\u5360\u7528\u989d\u5916\u5185\u5b58\u3002\u53ea\u5728\u52a8\u753b\u5f00\u59cb\u524d\u52a0\uff0c\u52a8\u753b\u7ed3\u675f\u540e\u79fb\u9664<\/strong>\uff1b\u957f\u671f\u6302\u5728\u5927\u91cf\u5143\u7d20\u4e0a\u4f1a\u663e\u8457\u589e\u52a0\u5185\u5b58\u538b\u529b\u3002<\/p>\n
      \u56db\u3001\u811a\u672c\u52a0\u8f7d\uff1a\u4e09\u9053\u9898\u8fde\u95ee<\/h2>\n
      Q8\uff1a<script><\/code> \u4e3a\u4ec0\u4e48\u4f1a\u963b\u585e\u6e32\u67d3\uff1f<\/strong>
      \n\u56e0\u4e3a\u811a\u672c\u53ef\u80fd\u4fee\u6539 DOM\/CSSOM\uff0c\u6d4f\u89c8\u5668\u4f1a\u6682\u505c\u89e3\u6790\u7b49\u5f85\u811a\u672c\u4e0b\u8f7d\u6267\u884c\u5b8c\u6bd5\u3002<\/p>\n
      Q9\uff1adefer<\/code> \u4e0e async<\/code> \u7684\u533a\u522b\uff1f<\/strong><\/p>\n
      \n\n\n\n\n\n\n\n
      \u5c5e\u6027<\/th>\n\u4e0b\u8f7d<\/th>\n\u6267\u884c\u65f6\u673a<\/th>\n\u987a\u5e8f\u4fdd\u8bc1<\/th>\n<\/tr>\n<\/thead>\n
      \u65e0<\/td>\n\u963b\u585e\u89e3\u6790<\/td>\n\u4e0b\u8f7d\u5b8c\u7acb\u5373\u6267\u884c<\/td>\n\u6309\u6587\u6863\u987a\u5e8f<\/td>\n<\/tr>\n
      async<\/code><\/td>\n\u5e76\u884c<\/td>\n\u4e0b\u8f7d\u5b8c\u7acb\u5373\u6267\u884c<\/td>\n\u4e0d\u4fdd\u8bc1<\/td>\n<\/tr>\n
      defer<\/code><\/td>\n\u5e76\u884c<\/td>\nDOM \u89e3\u6790\u5b8c\u6210\u540e\u3001DOMContentLoaded \u524d<\/td>\n\u6309\u6587\u6863\u987a\u5e8f<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n
      Q10\uff1aCSS \u4f1a\u963b\u585e\u6e32\u67d3\u5417\uff1f<\/strong>
      \n\u4f1a\u3002CSSOM \u6784\u5efa\u5b8c\u6210\u524d\u4e0d\u4f1a\u6e32\u67d3<\/strong>\uff08\u907f\u514d\u65e0\u6837\u5f0f\u95ea\u52a8\uff09\uff0c\u4f46 CSS \u4e0d\u963b\u585e DOM \u89e3\u6790\u3002\u6ce8\u610f\uff1a\u5916\u94fe\u811a\u672c\u4f1a\u7b49\u5f85\u5176\u4e4b\u524d\u7684\u6837\u5f0f\u8868\u52a0\u8f7d\u5b8c\u6210<\/strong>\uff0c\u56e0\u4e3a\u811a\u672c\u53ef\u80fd\u67e5\u8be2\u6837\u5f0f\u3002<\/p>\n
      \u4e94\u3001\u6027\u80fd\u6307\u6807\uff1a2026 \u5e74\u8be5\u7b54\u54ea\u4e9b<\/h2>\n
      Q11\uff1aCore Web Vitals \u6709\u54ea\u4e09\u4e2a\u6838\u5fc3\u6307\u6807\uff1f<\/strong><\/p>\n