![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-97d6d7acced41026f01a40d05fc56083_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n- \u6d4f\u89c8\u5668\u4e3b\u8fdb\u7a0b\uff1a\n\u8d1f\u8d23\u754c\u9762\u663e\u793a\u3001\u7528\u6237\u4ea4\u4e92\u3001\u5b50\u8fdb\u7a0b\u7ba1\u7406\uff0c\u540c\u65f6\u63d0\u4f9b\u5b58\u50a8\u7b49\u529f\u80fd\u3002\n\n- \u6e32\u67d3\u8fdb\u7a0b\uff1a\n\u6838\u5fc3\u4efb\u52a1\u662f\u5c06 HTML\u3001CSS \u548c JavaScript \u8f6c\u6362\u4e3a\u7528\u6237\u53ef\u4ee5\u4e0e\u4e4b\u4ea4\u4e92\u7684\u7f51\u9875<\/a>\u3002\n\u6392\u7248\u5f15\u64ce Blink \u548c JavaScript \u5f15\u64ce V8 \u90fd\u662f\u8fd0\u884c\u5728\u8be5\u8fdb\u7a0b\u4e2d\u3002\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0cChrome \u4f1a\u4e3a\u6bcf\u4e2a Tab \u6807\u7b7e\u521b\u5efa\u4e00\u4e2a\u6e32\u67d3\u8fdb\u7a0b\u3002\n\u51fa\u4e8e\u5b89\u5168\u8003\u8651\uff0c\u6e32\u67d3\u8fdb\u7a0b\u90fd\u662f\u8fd0\u884c\u5728\u6c99\u7bb1\u6a21\u5f0f\u4e0b\uff0c\u65e0\u6cd5\u8bbf\u95ee\u7cfb\u7edf\u8d44\u6e90\u3002\n\n- GPU \u8fdb\u7a0b\uff1a\nChrome \u521a\u5f00\u59cb\u53d1\u5e03\u7684\u65f6\u5019\u662f\u6ca1\u6709 GPU \u8fdb\u7a0b\u7684\u3002\nGPU \u7684\u4f7f\u7528\u521d\u8877\u662f\u4e3a\u4e86\u5b9e\u73b0 3D CSS \u7684\u6548\u679c\u3002\n\u968f\u540e\u7f51\u9875\u3001Chrome \u7684 UI \u754c\u9762\u90fd\u9009\u62e9\u91c7\u7528 GPU \u6765\u7ed8\u5236\uff0c\u8fd9\u4f7f\u5f97 GPU \u6210\u4e3a\u6d4f\u89c8\u5668\u666e\u904d\u7684\u9700\u6c42\u3002\n\u6700\u540e\uff0cChrome \u5728\u5176\u591a\u8fdb\u7a0b\u67b6\u6784\u4e0a\u4e5f\u5f15\u5165\u4e86 GPU \u8fdb\u7a0b\u3002\n\n- \u7f51\u7edc\u8fdb\u7a0b<\/a>\uff1a\n\u4e3b\u8981\u8d1f\u8d23\u9875\u9762\u7684\u7f51\u7edc\u8d44\u6e90\u52a0\u8f7d\u3002\n\u4e4b\u524d\u662f\u4f5c\u4e3a\u4e00\u4e2a\u6a21\u5757\u8fd0\u884c\u5728\u6d4f\u89c8\u5668\u4e3b\u8fdb\u7a0b\u91cc\u9762\u7684\uff0c\u76f4\u81f3\u6700\u8fd1\u624d\u72ec\u7acb\u51fa\u6765\uff0c\u6210\u4e3a\u4e00\u4e2a\u5355\u72ec\u7684\u8fdb\u7a0b\u3002\n\n- \u63d2\u4ef6\u8fdb\u7a0b\uff1a\n\u4e3b\u8981\u662f\u8d1f\u8d23\u63d2\u4ef6\u7684\u8fd0\u884c\u3002\n\u56e0\u63d2\u4ef6\u6613\u5d29\u6e83\uff0c\u6240\u4ee5\u9700\u8981\u901a\u8fc7\u63d2\u4ef6\u8fdb\u7a0b\u6765\u9694\u79bb\uff0c\u4ee5\u4fdd\u8bc1\u63d2\u4ef6\u8fdb\u7a0b\u5d29\u6e83\u4e0d\u4f1a\u5bf9\u6d4f\u89c8\u5668\u548c\u9875\u9762\u9020\u6210\u5f71\u54cd\u3002<\/code><\/pre>\n\n\n\n\u6211\u4eec\u7528 Chrome \u6d4f\u89c8\u5668\u6253\u5f00\u767e\u5ea6\u548c\u5fae\u535a\u4e24\u4e2a\u9875\u9762\uff0c\u70b9\u51fb Chrome \u6d4f\u89c8\u5668\u53f3\u4e0a\u89d2\u7684\u4e09\u4e2a\u70b9\u7684\u201c\u9009\u9879\u201d\u83dc\u5355\uff0c\u9009\u62e9 \u66f4\u591a\u5de5\u5177–\u4efb\u52a1\u7ba1\u7406\u5668\uff0c\u53ef\u4ee5\u770b\u5230\u5982\u4e0b\u56fe\u7684 Chrome \u4efb\u52a1\u7ba1\u7406\u5668\u7a97\u53e3\uff1a<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-97402efe31beb131e2d8efc70510a80a_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u73b0\u4ee3\u6d4f\u89c8\u5668\u662f\u591a\u8fdb\u7a0b\u67b6\u6784<\/a>\u6709\u5982\u4e0b\u4f18\u70b9\uff1a<\/p>\n\n\n\n- \u7531\u4e8e\u8fdb\u7a0b\u662f\u76f8\u4e92\u9694\u79bb\u7684\uff0c\u6240\u4ee5\u5f53\u4e00\u4e2a\u9875\u9762\u6216\u8005\u63d2\u4ef6\u5d29\u6e83\u65f6\uff0c\u5f71\u54cd\u5230\u7684\u4ec5\u4ec5\u662f\u5f53\u524d\u7684\u9875\u9762\u8fdb\u7a0b\u6216\u8005\u63d2\u4ef6\u8fdb\u7a0b\uff0c\u5e76\u4e0d\u4f1a\u5f71\u54cd\u5230\u6d4f\u89c8\u5668\u548c\u5176\u4ed6\u9875\u9762\uff0c\u63d0\u9ad8\u4e86\u6d4f\u89c8\u5668\u7a33\u5b9a\u6027\u3002<\/li>
- Chrome \u628a\u63d2\u4ef6\u8fdb\u7a0b\u548c\u6e32\u67d3\u8fdb\u7a0b\u9501\u5728\u6c99\u7bb1\u91cc\u9762\uff0c\u8fd9\u6837\u5373\u4f7f\u5728\u6e32\u67d3\u8fdb\u7a0b\u6216\u8005\u63d2\u4ef6\u8fdb\u7a0b\u91cc\u9762\u6267\u884c\u4e86\u6076\u610f\u7a0b\u5e8f<\/a>\uff0c\u6076\u610f\u7a0b\u5e8f\u4e5f\u65e0\u6cd5\u7a81\u7834\u6c99\u7bb1\u53bb\u83b7\u53d6\u7cfb\u7edf\u6743\u9650\uff0c\u63d0\u9ad8\u4e86\u6d4f\u89c8\u5668\u5b89\u5168\u6027\u3002<\/li>
- \u6b64\u5916\uff0c\u591a\u8fdb\u7a0b\u8fd8\u80fd\u5145\u5206\u5229\u7528\u591a\u6838\u4f18\u52bf\u3002<\/li><\/ul>\n\n\n\n
\u5f53\u7136\uff0c\u5185\u5b58\u7b49\u8d44\u6e90\u6d88\u8017\u4e5f\u4f1a\u66f4\u5927\uff0c\u76f8\u5f53\u4e8e\u7a7a\u95f4\u6362\u65f6\u95f4\u3002<\/p>\n\n\n\n
\u6e32\u67d3\u8fdb\u7a0b\u4e2d\u7684\u7ebf\u7a0b<\/h2>\n\n\n\n
\u5728\u6d4f\u89c8\u5668\u7684\u6240\u6709\u8fdb\u7a0b\u4e2d\uff0c\u4e0e\u524d\u7aef\u5f00\u53d1\u6700\u76f8\u5173\u5c31\u662f\u6e32\u67d3\u8fdb\u7a0b\uff0c\u4e5f\u5c31\u662f\u6211\u4eec\u5e38\u8bf4\u7684\u6d4f\u89c8\u5668\u5185\u6838\u3002<\/p>\n\n\n\n
\u6e32\u67d3\u8fdb\u7a0b\u7684\u4e3b\u8981\u804c\u8d23\u662f\u628a\u4ece\u7f51\u7edc\u4e0b\u8f7d\u7684 HTML\u3001JavaScript\u3001CSS\u3001\u56fe\u7247\u7b49\u8d44\u6e90\u89e3\u6790\u4e3a\u53ef\u4ee5\u663e\u793a\u548c\u4ea4\u4e92\u7684\u9875\u9762\u3002\u5728\u8be5\u8fc7\u7a0b\u4e2d\u6e32\u67d3\u8fdb\u7a0b\u4f1a\u5f00\u542f\u591a\u4e2a\u7ebf\u7a0b\u534f\u4f5c\u5b8c\u6210\uff0c\u4e3b\u8981\u7684\u7ebf\u7a0b\u4ee5\u53ca\u4f5c\u7528\u5982\u4e0b\uff1a<\/p>\n\n\n\n
1. GUI\u6e32\u67d3\u7ebf\u7a0b<\/strong><\/p>\n\n\n\n\u8d1f\u8d23\u6e32\u67d3\u6d4f\u89c8\u5668\u754c\u9762\uff0c\u89e3\u6790HTML\uff0cCSS\uff0c\u6784\u5efaDOM\u6811\u548cRenderObject\u6811\uff0c\u5e03\u5c40\u548c\u7ed8\u5236\u7b49\u3002<\/p>\n\n\n\n
\u5f53\u754c\u9762\u9700\u8981\u91cd\u7ed8\uff08Repaint\uff09\u6216\u7531\u4e8e\u67d0\u79cd\u64cd\u4f5c\u5f15\u53d1\u56de\u6d41(reflow)\u65f6\uff0c\u8be5\u7ebf\u7a0b\u5c31\u4f1a\u6267\u884c\u3002<\/p>\n\n\n\n
2. JS\u5f15\u64ce\u7ebf\u7a0b<\/strong><\/p>\n\n\n\n\u4e5f\u79f0\u4e3aJS\u5185\u6838\uff0c\u8d1f\u8d23\u89e3\u6790Javascript\u811a\u672c\uff0c\u8fd0\u884c\u4ee3\u7801\u3002\uff08\u4f8b\u5982V8\u5f15\u64ce\uff09<\/p>\n\n\n\n
JS\u5f15\u64ce\u4e00\u76f4\u7b49\u5f85\u7740\u4efb\u52a1\u961f\u5217<\/a>\u4e2d\u4efb\u52a1\u7684\u5230\u6765\uff0c\u7136\u540e\u52a0\u4ee5\u5904\u7406\uff0c\u4e00\u4e2a\u6e32\u67d3\u8fdb\u7a0b\u4e2d\u65e0\u8bba\u4ec0\u4e48\u65f6\u5019\u90fd\u6709\u4e00\u4e2aJS\u7ebf\u7a0b\u5728\u8fd0\u884cJS\u7a0b\u5e8f\u3002<\/p>\n\n\n\n\u9700\u8981\u6ce8\u610f\u7684\u662f\uff1a<\/strong> GUI\u6e32\u67d3\u7ebf\u7a0b\u4e0eJS\u5f15\u64ce\u7ebf\u7a0b\u662f\u76f8\u4e92\u6392\u65a5\u7684\u3002\u56e0\u4e3aJS\u5f15\u64ce\u7ebf\u7a0b\u5728\u6267\u884c\u7684\u8fc7\u7a0b\u4e2d\u53ef\u80fd\u4f1a\u53d1\u751f\u56de\u6d41\u548c\u91cd\u7ed8\uff0c\u6240\u4ee5GUI\u6e32\u67d3\u7ebf\u7a0b\u6267\u884c\u65f6\u5019\uff0cJS\u5f15\u64ce\u7ebf\u7a0b\u4f1a\u88ab\u6302\u8d77\uff0c\u7b49\u5f85GUI\u6e32\u67d3\u7ebf\u7a0b\u6267\u884c\u5b8c\u6bd5\u4e4b\u540e\u3002\u540c\u7406\uff0c\u5f53JS\u5f15\u64ce\u6267\u884c\u65f6GUI\u7ebf\u7a0b\u4f1a\u88ab\u6302\u8d77\uff0cGUI\u66f4\u65b0\u4f1a\u88ab\u4fdd\u5b58\u8d77\u6765\u7b49\u5230JS\u5f15\u64ce\u7a7a\u95f2\u65f6\u7acb\u5373\u88ab\u6267\u884c\u3002\u6240\u4ee5\u5982\u679cJS\u6267\u884c\u7684\u65f6\u95f4\u8fc7\u957f\uff0c\u8fd9\u6837\u5c31\u4f1a\u9020\u6210\u9875\u9762\u7684\u6e32\u67d3\u4e0d\u8fde\u8d2f\uff0c\u5bfc\u81f4\u9875\u9762\u6e32\u67d3\u963b\u585e\u3002<\/p>\n\n\n\n3. \u4e8b\u4ef6\u89e6\u53d1\u7ebf\u7a0b<\/strong><\/p>\n\n\n\n\u5f52\u5c5e\u4e8e\u6d4f\u89c8\u5668\u5185\u6838\u800c\u4e0d\u662fJS\u5f15\u64ce\uff0c\u7528\u6765\u63a7\u5236\u4e8b\u4ef6\u5faa\u73af\uff08\u53ef\u4ee5\u7406\u89e3\uff0cJS\u5f15\u64ce\u81ea\u5df1\u90fd\u5fd9\u4e0d\u8fc7\u6765\uff0c\u9700\u8981\u6d4f\u89c8\u5668\u53e6\u5f00\u7ebf\u7a0b\u534f\u52a9\uff09\u3002<\/p>\n\n\n\n
\u5f53 JS \u5f15\u64ce\u6267\u884c\u4ee3\u7801\u5757\u5982 setTimeOut \u65f6\uff08\u4e5f\u53ef\u6765\u81ea\u6d4f\u89c8\u5668\u5185\u6838\u7684\u5176\u4ed6\u7ebf\u7a0b\uff0c\u5982\u9f20\u6807\u70b9\u51fb\u3001AJAX \u5f02\u6b65\u8bf7\u6c42\u7b49\uff09\uff0c\u4f1a\u5c06\u5bf9\u5e94\u4efb\u52a1\u6dfb\u52a0\u5230\u4e8b\u4ef6\u7ebf\u7a0b\u4e2d\u3002<\/p>\n\n\n\n
\u5f53\u5bf9\u5e94\u7684\u4e8b\u4ef6\u7b26\u5408\u89e6\u53d1\u6761\u4ef6\u88ab\u89e6\u53d1\u65f6\uff0c\u8be5\u7ebf\u7a0b\u4f1a\u628a\u4e8b\u4ef6\u56de\u8c03\u51fd\u6570\u6dfb\u52a0\u5230\u4efb\u52a1\u961f\u5217\u7684\u961f\u5c3e\uff0c\u7b49\u5f85JS\u5f15\u64ce\u7684\u5904\u7406\u3002<\/p>\n\n\n\n
\u6ce8\u610f\uff0c\u7531\u4e8eJS\u7684\u5355\u7ebf\u7a0b\u5173\u7cfb\uff0c\u6240\u4ee5\u8fd9\u4e9b\u4efb\u52a1\u961f\u5217\u4e2d\u7684\u4e8b\u4ef6\u90fd\u5f97\u6392\u961f\u7b49\u5f85JS\u5f15\u64ce\u5904\u7406\uff08\u5f53JS\u5f15\u64ce\u7a7a\u95f2\u65f6\u624d\u4f1a\u53bb\u6267\u884c\uff09\u3002<\/p>\n\n\n\n
4. \u5b9a\u65f6\u5668\u89e6\u53d1\u7ebf\u7a0b<\/strong><\/p>\n\n\n\n\u4f20\u8bf4\u4e2d\u7684setInterval\u4e0esetTimeout\u6240\u5728\u7ebf\u7a0b\u3002<\/p>\n\n\n\n
\u6d4f\u89c8\u5668\u5b9a\u65f6\u8ba1\u6570\u5668\u5e76\u4e0d\u662f\u7531JavaScript\u5f15\u64ce\u8ba1\u6570\u7684,\uff08\u56e0\u4e3aJavaScript\u5f15\u64ce\u662f\u5355\u7ebf\u7a0b\u7684, \u5982\u679c\u5904\u4e8e\u963b\u585e\u7ebf\u7a0b\u72b6\u6001\u5c31\u4f1a\u5f71\u54cd\u8bb0\u8ba1\u65f6\u7684\u51c6\u786e\uff09\u3002<\/p>\n\n\n\n
\u56e0\u6b64\u901a\u8fc7\u5355\u72ec\u7ebf\u7a0b\u6765\u8ba1\u65f6\u5e76\u89e6\u53d1\u5b9a\u65f6\uff08\u8ba1\u65f6\u5b8c\u6bd5\u540e\uff0c\u6dfb\u52a0\u5230\u4e8b\u4ef6\u961f\u5217\u4e2d\uff0c\u7b49\u5f85JS\u5f15\u64ce\u7a7a\u95f2\u540e\u6267\u884c\uff09<\/p>\n\n\n\n
\u6ce8\u610f\uff0cW3C\u5728HTML\u6807\u51c6\u4e2d\u89c4\u5b9a\uff0c\u89c4\u5b9a\u8981\u6c42setTimeout\u4e2d\u4f4e\u4e8e4ms\u7684\u65f6\u95f4\u95f4\u9694\u7b97\u4e3a4ms\u3002<\/p>\n\n\n\n
5. \u5f02\u6b65http\u8bf7\u6c42\u7ebf\u7a0b<\/a><\/strong><\/p>\n\n\n\n\u5728XMLHttpRequest\u5728\u8fde\u63a5\u540e\u662f\u901a\u8fc7\u6d4f\u89c8\u5668\u65b0\u5f00\u4e00\u4e2a\u7ebf\u7a0b\u8bf7\u6c42\u3002<\/p>\n\n\n\n
\u5c06\u68c0\u6d4b\u5230\u72b6\u6001\u53d8\u66f4\u65f6\uff0c\u5982\u679c\u8bbe\u7f6e\u6709\u56de\u8c03\u51fd\u6570\uff0c\u5f02\u6b65\u7ebf\u7a0b\u5c31\u4ea7\u751f\u72b6\u6001\u53d8\u66f4\u4e8b\u4ef6\uff0c\u5c06\u8fd9\u4e2a\u56de\u8c03\u518d\u653e\u5165\u4efb\u52a1\u961f\u5217\u4e2d\u3002\u518d\u7531JavaScript\u5f15\u64ce\u6267\u884c\u3002<\/p>\n\n\n\n
\u9875\u9762\u6e32\u67d3\u6d41\u7a0b<\/h2>\n\n\n\n
\u6309\u7167\u6e32\u67d3\u7684\u65f6\u95f4\u987a\u5e8f\uff0c\u6d41\u6c34\u7ebf\u53ef\u5206\u4e3a\u5982\u4e0b\u51e0\u4e2a\u5b50\u9636\u6bb5\uff1a\u6784\u5efa DOM \u6811\u3001\u6837\u5f0f\u8ba1\u7b97\u3001\u5e03\u5c40\u3001\u7ed8\u5236\u548c\u5408\u6210\u3002<\/p>\n\n\n\n
\u6784\u5efa DOM \u6811<\/h3>\n\n\n\n
\u6d4f\u89c8\u5668\u65e0\u6cd5\u76f4\u63a5\u7406\u89e3\u548c\u4f7f\u7528 HTML \u6587\u672c\uff0c\u6240\u4ee5\u9700\u8981\u5c06 HTML \u8f6c\u6362\u4e3a\u6d4f\u89c8\u5668\u80fd\u591f\u7406\u89e3\u7684\u7ed3\u6784\u2014\u2014DOM \u6811\u3002\u5e76\u4e14 JavaScript \u67e5\u8be2\u6216\u4fee\u6539\u9875\u9762\u7ed3\u6784\u4e5f\u662f\u901a\u8fc7 DOM \u6811\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/pica.zhimg.com\/80\/v2-c89c5d449af4a4afd7f0f3915ecf21cb_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u6784\u5efa DOM \u6811\u3001\u6837\u5f0f\u8ba1\u7b97\u90fd\u662f\u7531GUI\u6e32\u67d3\u7ebf\u7a0b\u63a7\u5236\u5b8c\u6210\uff0c\u4f46\u4e3a\u4e86\u63d0\u9ad8\u6548\u7387\uff0c\u5177\u4f53\u7684\u5b57\u8282\u6d41\u89e3\u6790\u5de5\u4f5c\uff0cGUI\u6e32\u67d3\u7ebf\u7a0b\u4f1a\u53e6\u8d77\u5b50\u7ebf\u7a0b\u5b8c\u6210\u3002\u6bd4\u5982 HTMLParser\u7ebf\u7a0b\u8d1f\u8d23\u5c06 HTML \u6587\u672c\u8f6c\u6362\u4e3a DOM \u7ed3\u6784\uff1bCSSParser\u7ebf\u7a0b\u5c06 CSS \u6587\u672c\u8f6c\u6362\u4e3a\u6d4f\u89c8\u5668\u53ef\u4ee5\u7406\u89e3\u7684\u7ed3\u6784\u2014\u2014styleSheets\u3002<\/p>\n\n\n\n
\u6837\u5f0f\u8ba1\u7b97<\/h3>\n\n\n\n
\u6837\u5f0f\u8ba1\u7b97\u7684\u76ee\u7684\u662f\u4e3a\u4e86\u8ba1\u7b97\u51fa DOM \u6811\u4e2d\u6bcf\u4e2a\u5143\u7d20\u7684\u5177\u4f53\u6837\u5f0f\u3002\u4e3b\u8981\u6709\u4ee5\u4e0b\u51e0\u4e2a\u6b65\u9aa4\uff1a<\/p>\n\n\n\n
1\u3001\u628a CSS \u8f6c\u6362\u4e3a\u6d4f\u89c8\u5668\u80fd\u591f\u7406\u89e3\u7684\u7ed3\u6784styleSheets\uff08CSSOM\uff09\u3002\u8be5\u7ed3\u6784\u540c\u65f6\u5177\u5907\u67e5\u8be2\u548c\u4fee\u6539\u529f\u80fd\uff0c\u8fd9\u4e3a\u540e\u9762\u7684\u6837\u5f0f\u64cd\u4f5c\u63d0\u4f9b\u57fa\u7840\u3002\u5728\u63a7\u5236\u53f0\u4e2d\u8f93\u5165 document.styleSheets\uff0c \u5c31\u53ef\u4ee5\u67e5\u770b\u5176\u7ed3\u6784\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/pic1.zhimg.com\/80\/v2-affed49c7fc4d3c59a19c8f644e9060b_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n2\u3001\u8f6c\u6362\u6837\u5f0f\u8868\u4e2d\u7684\u5c5e\u6027\u503c\uff0c\u4f7f\u5176\u6807\u51c6\u5316\u3002CSS\u6587\u672c\u4e2d\u6709\u4e00\u4e9b\u5c5e\u6027\u503c\uff0c\u5982 2em\u3001red\u3001bold\u7b49\uff0c\u4e0d\u5bb9\u6613\u88ab\u6e32\u67d3\u5f15\u64ce\u7406\u89e3\uff0c\u9700\u8981\u5c06\u5176\u4e3a\u6e32\u67d3\u5f15\u64ce\u5bb9\u6613\u7406\u89e3\u7684\u3001\u6807\u51c6\u5316\u7684\u8ba1\u7b97\u503c\u3002em –> px\uff0cred –> rgb(255,0,0)\uff0cbold –> 700.<\/p>\n\n\n\n
3\u3001\u8ba1\u7b97\u51fa DOM \u6811\u4e2d\u6bcf\u4e2a\u8282\u70b9\u7684\u5177\u4f53\u6837\u5f0f\u3002\u5728\u8ba1\u7b97\u8fc7\u7a0b\u4e2d\u9700\u8981\u9075\u5b88 CSS \u7684\u7ee7\u627f\u548c\u5c42\u53e0\u4e24\u4e2a\u89c4\u5219\u3002DOM \u5143\u7d20\u6700\u7ec8\u7684\u8ba1\u7b97\u6837\u5f0f\uff0c\u53ef\u4ee5\u901a\u8fc7\u6d4f\u89c8\u5668\u7684Element->Computed\u53ef\u4ee5\u67e5\u770b\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-9b1f0e72194d937b096f18404270fd56_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u5e03\u5c40<\/h3>\n\n\n\n
\u6709\u4e86 DOM \u6811\u53ca\u5176\u5bf9\u5e94\u7684\u6837\u5f0f\uff0c\u63a5\u4e0b\u6765\u5c31\u662f \u521b\u5efa\u5e03\u5c40\u6811 \u548c \u5e03\u5c40\u8ba1\u7b97 \u3002<\/p>\n\n\n\n
DOM \u6811\u5305\u542b\u4e86\u5f88\u591a\u4e0d\u53ef\u89c1\u7684\u5143\u7d20\uff0c\u6bd4\u5982head \u6807\u7b7e\u3001\u4f7f\u7528\u4e86 display:none \u5c5e\u6027\u7684\u5143\u7d20\u3002\u4e5f\u6709\u4e00\u4e9b\u4e0d\u5b58\u5728 DOM \u6811\u4e2d\u4f46\u9700\u8981\u663e\u793a\u5728\u9875\u9762\u4e0a\u7684\u5143\u7d20\uff0c\u6bd4\u5982\u4f2a\u7c7b\u3002\u56e0\u6b64\uff0c\u6211\u4eec\u9700\u8981\u5728 DOM \u6811\u7684\u57fa\u7840\u4e0a\u989d\u5916\u6784\u5efa\u4e00\u68f5\u5e03\u5c40\u6811\uff08Render Tree\uff09\uff0c\u53ea\u5305\u542b\u9700\u8981\u663e\u793a\u7684\u53ef\u89c1\u5143\u7d20\u3002<\/p>\n\n\n\n
\u6709\u4e86\u5e03\u5c40\u6811\uff0c\u4e0b\u4e00\u6b65\u5c31\u662f\uff0c\u6839\u636e DOM \u5143\u7d20\u7684\u6587\u6863\u7ed3\u6784\u548c\u6837\u5f0f\uff0c\u8ba1\u7b97\u51fa\u6bcf\u4e2a\u5143\u7d20\u5728\u9875\u9762\u4e2d\u7684\u5177\u4f53\u5750\u6807\u4f4d\u7f6e\u3001\u5c3a\u5bf8\u7b49\u4fe1\u606f\uff0c\u5e76\u4e14\uff0c\u53c8\u5c06\u8fd9\u4e9b\u4fe1\u606f\u4fdd\u5b58\u5728\u5e03\u5c40\u6811\u4e2d\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-a37c8bf9eb0c1e04b1f73284d7d722b5_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\nCSS\u91c7\u7528\u4e86\u76d2\u5b50\u6a21\u578b\u6765\u8868\u793a\u6bcf\u4e2a\u5143\u7d20\u4e0e\u5176\u4ed6\u5143\u7d20\u4e4b\u95f4\u7684\u8ddd\u79bb\uff0c\u76d2\u5b50\u6a21\u578b\u5305\u62ec\u5916\u8fb9\u8ddd(Margin)\uff0c\u5185\u8fb9\u8ddd(Padding)\uff0c\u8fb9\u6846(Border)\uff0c\u5185\u5bb9(Content)\u3002\u9875\u9762\u4e2d\u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u662f\u4e00\u4e2a\u4e2a\u76d2\u5b50\uff0c\u5e03\u5c40\u9636\u6bb5\u4f1a\u4ece\u5e03\u5c40\u6811\u7684\u6839\u8282\u70b9\u5f00\u59cb\u904d\u5386\uff0c\u7136\u540e\u786e\u5b9a\u6bcf\u4e2a\u5143\u7d20\u76d2\u5b50\u5728\u9875\u9762\u4e2d\u7684\u786e\u5207\u5927\u5c0f\u4e0e\u5750\u6807\u4f4d\u7f6e\u7684\u7edd\u5bf9\u50cf\u7d20\u503c\u3002<\/p>\n\n\n\n
\u7ed8\u5236<\/h3>\n\n\n\n\u5206\u5c42<\/h3>\n\n\n\n
\u6d4f\u89c8\u5668\u4e2d\u7684\u9875\u9762\u901a\u5e38\u88ab\u5206\u6210\u4e86\u5f88\u591a\u56fe\u5c42\uff0c\u8fd9\u4e9b\u56fe\u5c42\u6309\u7167\u4e00\u5b9a\u987a\u5e8f\u53e0\u52a0\u5728\u4e00\u8d77\uff0c\u5c31\u5f62\u6210\u4e86\u6700\u7ec8\u7684\u9875\u9762\u3002<\/p>\n\n\n\n
\u4e3a\u4ec0\u4e48\u9700\u8981\u5206\u5c42\uff1f\u4e3b\u8981\u662f\u4e3a\u4e86\u5904\u7406\u9875\u9762\u4e2d\u7684\u4e00\u4e9b\u590d\u6742\u7684\u6548\u679c\uff0c\u6bd4\u5982 3D \u53d8\u6362\u3001\u9875\u9762\u6eda\u52a8\uff0c\u6216\u8005\u4f7f\u7528 z-indexing \u505a z \u8f74\u6392\u5e8f\u7b49\uff0c\u8fd9\u4e9b\u6548\u679c\u4f7f\u5f97\u4e0e\u4e4b\u5bf9\u5e94\u7684 DOM \u8282\u70b9\u5c3a\u5bf8\u548c\u5750\u6807\u7b49\u4e0d\u65ad\u66f4\u65b0\u3002\u5982\u679c\u4e0d\u5206\u5c42\uff0c\u5219\u9700\u8981\u91cd\u65b0\u8ba1\u7b97\u6574\u4e2a\u5e03\u5c40\u6811\u4e2d\u6bcf\u4e2a\u5143\u7d20\u7684\u4f4d\u7f6e\uff0c\u800c\u5206\u5c42\u540e\uff0c\u5c31\u53ea\u9700\u8981\u8ba1\u7b97\u53d8\u6362\u5c42\u4e2d\u7684\u5143\u7d20\u4f4d\u7f6e\u4fe1\u606f\u3002<\/p>\n\n\n\n
\u56e0\u6b64\uff0c\u4e3a\u4e86\u66f4\u65b9\u4fbf\u5730\u5b9e\u73b0\u4e0a\u8ff0\u6548\u679c\uff0c\u6e32\u67d3\u5f15\u64ce\u4e3a\u7279\u5b9a\u7684\u8282\u70b9\u751f\u6210\u4e13\u7528\u7684\u56fe\u5c42\uff0c\u6700\u540e\u751f\u6210\u4e00\u68f5\u56fe\u5c42\u6811\uff08LayerTree\uff09\u3002<\/p>\n\n\n\n
\u67e5\u770b\u4e00\u4e2a\u9875\u9762\u6709\u54ea\u4e9b\u56fe\u5c42\uff0c\u53ef\u4ee5\u6253\u5f00\u5f00\u53d1\u8005\u5de5\u5177\uff0c\u9009\u62e9\u201cLayers\u201d\u6807\u7b7e\uff0c\u5de6\u8fb9\u662f\u56fe\u5c42\u5217\u8868\uff0c\u5bf9\u5e94\u53f3\u8fb9\u7684\u6e32\u67d3\u7ed3\u679c\u4e2d\uff0c\u6bcf\u4e00\u4e2a\u9ed1\u8272\u7ebf\u6846\u5c31\u662f\u4e00\u4e2a\u56fe\u5c42\uff0c\u9009\u4e2d\u56fe\u5c42\u540e\uff0c\u53f3\u4e0b\u89d2\u53ef\u4ee5\u770b\u5230\u56fe\u5c42\u7684\u8be6\u7ec6\u4fe1\u606f\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-29e64d510450dfe8b04938068802a9bb_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u901a\u5e38\u60c5\u51b5\u4e0b\uff0c\u5e76\u4e0d\u662f\u5e03\u5c40\u6811\u7684\u6bcf\u4e2a\u8282\u70b9\u90fd\u5305\u542b\u4e00\u4e2a\u56fe\u5c42\uff0c\u5982\u679c\u4e00\u4e2a\u8282\u70b9\u6ca1\u6709\u5bf9\u5e94\u7684\u5c42\uff0c\u90a3\u4e48\u8fd9\u4e2a\u8282\u70b9\u5c31\u4ece\u5c5e\u4e8e\u7236\u8282\u70b9\u7684\u56fe\u5c42\u3002<\/strong><\/p>\n\n\n\n\u90a3\u4e48\u5143\u7d20\u8981\u6ee1\u8db3\u4ec0\u4e48\u6761\u4ef6\uff0c\u6e32\u67d3\u5f15\u64ce\u624d\u4f1a\u4e3a\u5b83\u521b\u5efa\u65b0\u7684\u56fe\u5c42\u5462\uff1f\u7b54\u6848\u662f\uff1a\u5143\u7d20\u62e5\u6709\u5c42\u53e0\u4e0a\u4e0b\u6587\u5c5e\u6027\uff0c\u6216\u8005\u9700\u8981\u88ab\u526a\u88c1\u3002<\/p>\n\n\n\n
\u5c42\u53e0\u4e0a\u4e0b\u6587\u53c2\u8003\uff1aMDN<\/a><\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-48fb59eccc16d95891b04151e9618468_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u88c1\u526a\uff0c\u5047\u5982\u6709\u4e00\u4e2a200*200\u7684div\u5143\u7d20\uff0c\u5176\u4e2d\u6587\u5b57\u5185\u5bb9\u8d85\u51fa\u4e86div\u9762\u79ef\uff08overflow:auto\u6216scroll\uff09\uff0c\u5c31\u4ea7\u751f\u4e86\u88c1\u526a\uff0c\u6e32\u67d3\u5f15\u64ce\u4f1a\u88c1\u526a\u6587\u5b57\u5185\u5bb9\u7684\u4e00\u90e8\u5206\u663e\u793a\u5728 div \u533a\u57df\uff0c\u6b64\u65f6\uff0c\u6e32\u67d3\u5f15\u64ce\u4f1a\u4e3a\u6587\u5b57\u90e8\u5206\u5355\u72ec\u521b\u5efa\u4e00\u4e2a\u5c42\uff0c\u5982\u679c\u51fa\u73b0\u6eda\u52a8\u6761\uff0c\u6eda\u52a8\u6761\u4e5f\u4f1a\u88ab\u63d0\u5347\u4e3a\u5355\u72ec\u7684\u5c42\u3002\u8fd9\u6837\uff0c\u6eda\u52a8\u5185\u5bb9\u5c31\u4e0d\u4f1a\u91cd\u65b0\u8ba1\u7b97\u6574\u4e2a\u6587\u6863\u7684\u5e03\u5c40\u4fe1\u606f\u3002<\/p>\n\n\n\n
\u7ed8\u5236\u5217\u8868<\/h3>\n\n\n\n
\u56fe\u5c42\u6811\u7684\u6784\u5efa\u5b8c\u6210\u540e\uff0c\u6e32\u67d3\u5f15\u64ce\u4f1a\u5bf9\u56fe\u5c42\u6811\u4e2d\u7684\u6bcf\u4e2a\u56fe\u5c42\u8fdb\u884c\u7ed8\u5236\u3002\u5bf9\u4e8e\u6bcf\u4e00\u4e2a\u56fe\u5c42\uff0c\u6e32\u67d3\u5f15\u64ce<\/a>\u4f1a\u628a\u5bf9\u5b83\u7684\u7ed8\u5236\u62c6\u5206\u6210\u5f88\u591a\u5c0f\u7684\u7ed8\u5236\u6307\u4ee4\uff0c\u7136\u540e\u518d\u628a\u8fd9\u4e9b\u6307\u4ee4\u6309\u7167\u987a\u5e8f\u7ec4\u6210\u4e00\u4e2a\u5f85\u7ed8\u5236\u5217\u8868\u3002\u6253\u5f00\u201c\u5f00\u53d1\u8005\u5de5\u5177\u201d\u7684\u201cLayers\u201d\u6807\u7b7e\uff0c\u9009\u62e9\u201cdocument\u201d\u5c42\uff0c\u6765\u5b9e\u9645\u4f53\u9a8c\u4e0b\u7ed8\u5236\u5217\u8868\uff1a<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-7eb599cf0875adb1e802f72daf3b6431_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u5728\u56fe\u5c42\u7ed8\u5236\u9636\u6bb5\uff0c\u8f93\u51fa\u7684\u5185\u5bb9\u5c31\u662f\u8fd9\u4e9b\u5f85\u7ed8\u5236\u5217\u8868\uff0c\u7528\u4e8e\u8bb0\u5f55\u7ed8\u5236\u987a\u5e8f\u548c\u7ed8\u5236\u6307\u4ee4\u3002\u6b64\u65f6\uff0c\u5e76\u6ca1\u6709\u771f\u6b63\u7684\u7ed8\u5236\u51fa\u9875\u9762\uff0c\u5b9e\u9645\u7684\u7ed8\u5236\u64cd\u4f5c\u7531\u5408\u6210\u7ebf\u7a0b\u6765\u5b8c\u6210\u3002<\/p>\n\n\n\n
\u8fdb\u884c\u5230\u8fd9\u4e00\u6b65\u7684\u4e00\u4e9b\u5173\u952e\u6570\u636e\u7ed3\u6784\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-ff36c3d1b3a9c59857615e3eaa772c3d_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u5408\u6210<\/h3>\n\n\n\n
\u5f53\u56fe\u5c42\u7684\u7ed8\u5236\u5217\u8868\u51c6\u5907\u597d\u4e4b\u540e\uff0c\u4e3b\u7ebf\u7a0b\u4f1a\u628a\u8be5\u7ed8\u5236\u5217\u8868\u63d0\u4ea4\uff08commit\uff09\u7ed9\u5408\u6210\u7ebf\u7a0b\u3002<\/p>\n\n\n\n
\u524d\u7f6e\u77e5\u8bc6\uff1a<\/strong> \u6d4f\u89c8\u5668\u663e\u793a\u9875\u9762\u5185\u5bb9\u7684\u5c4f\u5e55\u533a\u57df\uff0c\u53eb\u505a\u89c6\u53e3\uff08viewport\uff09\u3002<\/p>\n\n\n\n\u4e00\u4e2a\u9875\u9762\u53ef\u80fd\u5f88\u957f\uff0c\u9700\u8981\u6eda\u52a8\u663e\u793a\uff0c\u6bcf\u6b21\u663e\u793a\u5728\u89c6\u53e3\u4e2d\u7684\u53ea\u662f\u9875\u9762\u7684\u4e00\u5c0f\u90e8\u5206\u3002\u5bf9\u4e8e\u8fd9\u79cd\u60c5\u51b5\uff0c\u7ed8\u5236\u51fa\u4e00\u6574\u4e2a\u957f\u9875\uff0c\u4f1a\u4ea7\u751f\u592a\u5927\u7684\u5f00\u9500\uff0c\u800c\u4e14\u4e5f\u6ca1\u5fc5\u8981\u3002<\/p>\n\n\n\n
\u5408\u6210\u7ebf\u7a0b\u4f1a\u5c06\u56fe\u5c42\u5212\u5206\u4e3a\u56fe\u5757\uff08\u8fd9\u4e9b\u56fe\u5757\u7684\u5927\u5c0f\u901a\u5e38\u662f 256×256 \u6216\u8005 512×512\uff09\uff0c\u7136\u540e\u6309\u7167\u89c6\u53e3\u9644\u8fd1\u7684\u56fe\u5757\u6765\u4f18\u5148\u751f\u6210\u4f4d\u56fe\u3002<\/strong><\/p>\n\n\n\n\u5b9e\u9645\u751f\u6210\u4f4d\u56fe\u7684\u64cd\u4f5c\u662f\u7531\u6805\u683c\u5316\u7ebf\u7a0b\u6765\u6267\u884c\u7684\u3002\u6240\u8c13\u6805\u683c\u5316\uff0c\u662f\u6307\u5c06\u56fe\u5757\u8f6c\u6362\u4e3a\u4f4d\u56fe\u3002\u800c\u56fe\u5757\u662f\u6805\u683c\u5316\u6267\u884c\u7684\u6700\u5c0f\u5355\u4f4d<\/strong>\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/pic1.zhimg.com\/80\/v2-8d1f2d55b564dcd3cd41e82431943fe9_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u901a\u5e38\uff0c\u6805\u683c\u5316\u8fc7\u7a0b\u90fd\u4f1a\u4f7f\u7528 GPU \u6765\u52a0\u901f\u751f\u6210\u3002GPU \u64cd\u4f5c\u662f\u8fd0\u884c\u5728 GPU \u8fdb\u7a0b\u4e2d\uff0c\u8fd9\u5c31\u6d89\u53ca\u5230\u4e86\u8de8\u8fdb\u7a0b\u64cd\u4f5c\u3002<\/p>\n\n\n\n
\u6e32\u67d3\u8fdb\u7a0b\u628a\u56fe\u5757\u751f\u6210\u4f4d\u56fe\u7684\u6307\u4ee4\u53d1\u9001\u7ed9 GPU \u8fdb\u7a0b\uff0c\u7136\u540e\u5728 GPU \u4e2d\u751f\u6210\u56fe\u5757\u7684\u4f4d\u56fe\uff0c\u5e76\u4fdd\u5b58\u5728 GPU \u7684\u5185\u5b58\u4e2d\u3002<\/p>\n\n\n\n
\u4e00\u65e6\u6240\u6709\u56fe\u5757\u90fd\u88ab\u751f\u6210\u4f4d\u56fe\uff0c\u5408\u6210\u7ebf\u7a0b\u5c31\u4f1a\u751f\u6210\u4e00\u4e2a\u7ed8\u5236\u56fe\u5757\u4f4d\u56fe\u7684\u547d\u4ee4\u2014\u2014 DrawQuad\uff0c\u7136\u540e\u5c06\u8be5\u547d\u4ee4\u63d0\u4ea4\u7ed9\u6d4f\u89c8\u5668\u4e3b\u8fdb\u7a0b\u3002<\/p>\n\n\n\n
\u6d4f\u89c8\u5668\u4e3b\u8fdb\u7a0b\u91cc\u9762\u6709\u4e00\u4e2a\u53eb viz \u7684\u7ec4\u4ef6\uff0c\u7528\u6765\u63a5\u6536\u5408\u6210\u7ebf\u7a0b\u53d1\u8fc7\u6765\u7684 DrawQuad \u547d\u4ee4\uff0c\u7136\u540e\u6839\u636e DrawQuad \u547d\u4ee4\uff0c\u5c06\u5176\u9875\u9762\u5185\u5bb9\u7ed8\u5236\u5230\u5185\u5b58\u4e2d\uff0c\u6700\u540e\u518d\u5c06\u5185\u5b58\u663e\u793a\u5728\u5c4f\u5e55\u4e0a\u3002<\/p>\n\n\n\n
\u5230\u8fd9\u91cc\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1a\u663e\u793a\u51fa\u9875\u9762\u7684\u5185\u5bb9\u4e86\u3002\u6574\u4e2a\u6e32\u67d3\u6d41\u7a0b\u5982\u4e0b\u56fe\u6240\u793a\uff1a<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-3d3b4e4b9ae4544bd012e69a8d7ba1e4_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u6027\u80fd\u4f18\u5316<\/h2>\n\n\n\n\u5408\u7406\u4f7f\u7528css\u9009\u62e9\u5668<\/h2>\n\n\n\n
CSS\u9009\u62e9\u5668\u7684\u5339\u914d\u662f\u4ece\u53f3\u5411\u5de6\u8fdb\u884c\u7684\uff0c\u8fd9\u4e00\u7b56\u7565\u5bfc\u81f4\u4e86\u4e0d\u540c\u7684\u9009\u62e9\u5668\u4e4b\u95f4\u7684\u6027\u80fd\u4e5f\u5b58\u5728\u5dee\u5f02\u3002<\/p>\n\n\n\n
\u76f8\u6bd4\u4e8e.content-title-span<\/code>\uff0c\u4f7f\u7528.content .title span<\/code>\u65f6\uff0c\u6d4f\u89c8\u5668\u8ba1\u7b97\u6837\u5f0f\u6240\u8981\u82b1\u8d39\u7684\u65f6\u95f4\u66f4\u591a\u3002\u4f7f\u7528\u540e\u9762\u4e00\u79cd\u89c4\u5219\uff0c\u6d4f\u89c8\u5668\u5fc5\u987b\u904d\u5386\u9875\u9762\u4e0a\u6240\u6709 span \u5143\u7d20\uff0c\u5148\u8fc7\u6ee4\u6389\u7956\u5148\u5143\u7d20\u4e0d\u662f.title\u7684\uff0c\u518d\u8fc7\u6ee4\u6389.title\u7684\u7956\u5148\u4e0d\u662f.content\u7684\u3002\u5d4c\u5957\u7684\u5c42\u7ea7\u66f4\u591a\uff0c\u5339\u914d\u6240\u8981\u82b1\u8d39\u7684\u65f6\u95f4\u4ee3\u4ef7\u81ea\u7136\u66f4\u9ad8\u3002<\/p>\n\n\n\n\u56e0\u6b64\uff0c\u5728\u65e5\u5e38\u5f00\u53d1\u4e2d\uff0c\u5408\u7406\u4f7f\u7528css\u9009\u62e9\u5668\uff0c\u4e5f\u662f\u4f18\u5316\u9875\u9762\u7684\u4e00\u4e2a\u65b9\u9762\u3002<\/p>\n\n\n\n
- \u907f\u514d\u4f7f\u7528\u901a\u914d\u7b26\uff0c\u53ea\u5bf9\u9700\u8981\u7528\u5230\u7684\u5143\u7d20\u8fdb\u884c\u9009\u62e9\u3002<\/li>
- \u5173\u6ce8\u53ef\u4ee5\u901a\u8fc7\u7ee7\u627f\u5b9e\u73b0\u7684\u5c5e\u6027\uff0c\u907f\u514d\u91cd\u590d\u5339\u914d\u91cd\u590d\u5b9a\u4e49\u3002<\/li>
- \u51cf\u5c11\u5d4c\u5957\u3002\u540e\u4ee3\u9009\u62e9\u5668\u7684\u5f00\u9500\u662f\u6700\u9ad8\u7684\uff0c\u56e0\u6b64\u6211\u4eec\u5e94\u8be5\u5c3d\u91cf\u5c06\u9009\u62e9\u5668\u7684\u6df1\u5ea6\u964d\u5230\u6700\u4f4e\uff08\u6700\u597d\u4e0d\u8981\u8d85\u8fc7\u4e09\u5c42\uff09\uff0c\u53ef\u4ee5\u4f7f\u7528BEM\u98ce\u683c\u7684class\u6765\u5173\u8054\u5143\u7d20\u3002<\/li>
- \u51cf\u5c11\u7528\u6807\u7b7e\u9009\u62e9\u5668\u548c\u5c5e\u6027\u9009\u62e9\u5668\u3002<\/li>
- \u4e0d\u8981\u4f7f\u7528class\u9009\u62e9\u5668\u548cid\u9009\u62e9\u5668\u4fee\u9970\u5143\u7d20\u6807\u7b7e\uff0c\u5982
h3.title<\/code>\uff0c\u8fd9\u6837\u591a\u6b64\u4e00\u4e3e\uff0c\u8fd8\u4f1a\u964d\u4f4e\u6548\u7387\uff0c\u76f4\u63a5\u4f7f\u7528.title<\/code><\/li><\/ul>\n\n\n\n\u73b0\u4ee3\u6d4f\u89c8\u5668\u5728\u8fd9\u4e00\u65b9\u9762\u505a\u4e86\u5f88\u591a\u4f18\u5316\uff0c\u4e0d\u540c\u9009\u62e9\u5668\u7684\u6027\u80fd\u5dee\u522b\u4e0d\u662f\u7279\u522b\u660e\u663e\uff0c\u4e0d\u8fc7\u77e5\u9053\u603b\u6bd4\u4e0d\u77e5\u9053\u5f3a\u3002<\/p>\n\n\n\n
\u51cf\u5c11 DOM \u64cd\u4f5c<\/h2>\n\n\n\n
JS \u5f15\u64ce\u548c\u6e32\u67d3\u5f15\u64ce\u662f\u4e24\u4e2a\u72ec\u7acb\u7684\u7ebf\u7a0b\u3002\u5f53\u6211\u4eec\u7528 JS \u53bb\u64cd\u4f5c DOM \u65f6\uff0c\u672c\u8d28\u4e0a\u662f JS \u5f15\u64ce\u548c\u6e32\u67d3\u5f15\u64ce\u4e4b\u95f4\u8fdb\u884c\u4e86\u201c\u8de8\u754c\u4ea4\u6d41\u201d\uff0c\u4ea4\u6d41\u4f9d\u8d56\u4e86\u6865\u63a5\u63a5\u53e3\u4f5c\u4e3a\u201c\u6865\u6881\u201d\u3002<\/p>\n\n\n\n![\"\"\/](\"https:\/\/picx.zhimg.com\/80\/v2-1ba518e111043de49815870aa0bc51b9_1440w.webp?source=1940ef5c\")
<\/figure>\n\n\n\n\u6211\u4eec\u6bcf\u64cd\u4f5c\u4e00\u6b21 DOM\uff08\u4e0d\u7ba1\u662f\u4e3a\u4e86\u4fee\u6539\u8fd8\u662f\u4ec5\u4ec5\u4e3a\u4e86\u8bbf\u95ee\u5176\u503c\uff09\uff0c\u90fd\u8981\u8fc7\u4e00\u6b21\u6865\uff0c\u6bcf\u6b21\u8fc7\u6865\u90fd\u6709\u4e00\u5b9a\u5f00\u9500\u3002\u56e0\u6b64\uff0c\u8fc7\u6865\u7684\u6b21\u6570\u4e00\u591a\uff0c\u5c31\u4f1a\u4ea7\u751f\u6bd4\u8f83\u660e\u663e\u7684\u6027\u80fd\u95ee\u9898\u3002<\/p>\n\n\n\n
\u6240\u4ee5\uff0c\u4f7f\u7528js\u4fee\u6539\u9875\u9762\u65f6\uff0c\u5e94\u5c3d\u91cf\u51cf\u5c11 DOM \u64cd\u4f5c\u3002<\/p>\n\n\n\n
<body>\n <div id=\"container\"><\/div>\n<\/body><\/code><\/pre>\n\n\n\n\u5047\u5982\uff0c\u8981\u5728 container \u5143\u7d20\u91cc\u5199 10000 \u53e5\u4e00\u6837\u7684\u8bdd\u3002<\/p>\n\n\n\n
for(var count=0;count<10000;count++){ \n document.getElementById('container').innerHTML+='<span>\u6211\u662f\u4e00\u4e2a\u5c0f\u6d4b\u8bd5<\/span>'\n}<\/code><\/pre>\n\n\n\n\u4e0a\u9762\u8fd9\u6837\u5199\u6709\u4e24\u4e2a\u660e\u663e\u7684\u53ef\u4f18\u5316\u70b9\uff1a<\/p>\n\n\n\n
- \u7f13\u5b58\u8bbf\u95ee\u8fc7\u7684\u5143\u7d20\u3002<\/li><\/ul>\n\n\n\n
\u6211\u4eec\u6bcf\u4e00\u6b21\u5faa\u73af\u90fd\u8c03\u7528 DOM \u63a5\u53e3\u91cd\u65b0\u83b7\u53d6\u4e86\u4e00\u6b21 container \u5143\u7d20\uff0c\u76f8\u5f53\u4e8e\u6bcf\u6b21\u5faa\u73af\u90fd\u6709\u8fc7\u6865\u5f00\u9500\u3002\u5176\u5b9e\uff0c\u53ef\u4ee5\u901a\u8fc7\u7f13\u5b58\u8bbf\u95ee\u8fc7\u7684\u5143\u7d20\uff0c\u6765\u51cf\u5c11\u540e\u97629999\u6b21\u8c03\u7528 DOM \u63a5\u53e3\u7684\u64cd\u4f5c\u3002<\/p>\n\n\n\n
\/\/ \u53ea\u83b7\u53d6\u4e00\u6b21container\uff0c\u5e76\u7f13\u5b58\nlet container = document.getElementById('container')\nfor(let count=0;count<10000;count++){ \n container<\/a>.innerHTML += '<span>\u6211\u662f\u4e00\u4e2a\u5c0f\u6d4b\u8bd5<\/span>'\n}<\/code><\/pre>\n\n\n\n- \u907f\u514d\u9891\u7e41\u4fee\u6539DOM\uff0c\u5c3d\u91cf\u4e00\u6b21\u66f4\u65b0\u3002<\/li><\/ul>\n\n\n\n
\u4e0a\u9762\u867d\u7136\u7f13\u5b58\u4e86\u8bbf\u95ee\u5143\u7d20\uff0c\u4f46\u5728\u6bcf\u4e00\u6b21\u5faa\u73af\u91cc\u90fd\u4fee\u6539\u4e86 DOM \u3002\u5bf9 DOM \u7684\u4fee\u6539\u4f1a\u5f15\u53d1\u6e32\u67d3\u6811\u7684\u6539\u53d8\uff0c\u8fdb\u800c\u5bfc\u81f4\u56de\u6d41\u3002\u6211\u4eec\u53ef\u4ee5\u5c06\u5bf9 DOM \u7684\u4fee\u6539\u7d2f\u8ba1\u8d77\u6765\uff0c\u7136\u540e\u4e00\u6b21\u6027\u5730\u5e94\u7528\u5230 DOM \u4e0a\u3002<\/p>\n\n\n\n
\/\/ \u53ea\u83b7\u53d6\u4e00\u6b21container\nlet container = document.getElementById('container')\nlet content = ''\nfor(let count=0;count<10000;count++){ \n \/\/ \u7d2f\u8ba1\u5bf9DOM\u7684\u4fee\u6539\u64cd\u4f5c\n content += '<span>\u6211\u662f\u4e00\u4e2a\u5c0f\u6d4b\u8bd5<\/span>'\n} \n\/\/ \u5c06\u7d2f\u8ba1\u7684\u4fee\u6539\u64cd\u4f5c\u4e00\u6b21\u6027\u5730\u5e94\u7528\u5230 DOM\ncontainer.innerHTML = content<\/code><\/pre>\n\n\n\n\u5bf9\u4e8e\u9875\u9762\u4e2d\u591a\u4e2a\u5143\u7d20\u8282\u70b9\u7684\u4fee\u6539\uff0c\u53ef\u4ee5\u501f\u52a9 DocumentFragment \u5b8c\u6210\uff0c\u5177\u4f53\u53c2\u8003MDN<\/a><\/p>\n\n\n\n\u524d\u7aef\u6846\u67b6\uff0cVue\u3001React\u7b49\uff0c\u662f\u901a\u8fc7\u865a\u62df\u8282\u70b9\uff08Virtual DOM\uff09\u6765\u641c\u96c6\u66f4\u65b0\uff0c\u7136\u540e\u4e00\u6b21\u6027\u66f4\u65b0 DOM\u3002<\/p>\n\n\n\n
\u6b64\u5916\uff0c\u65e5\u5e38\u5f00\u53d1\u4e2d\u6bd4\u8f83\u5e38\u89c1\u7684\u51cf\u5c11DOM\u64cd\u4f5c\u7684\u65b9\u6cd5\u8fd8\u6709\u4e8b\u4ef6\u59d4\u6258\u3002\u5047\u5982\u6709\u4e00\u4e2a\u5f88\u957f\u7684\u5217\u8868\uff0c\u70b9\u51fb\u6bcf\u4e2a\u5217\u8868\u9879\u7684\u65f6\u5019\u9700\u8981\u54cd\u5e94\u4e8b\u4ef6\uff1b<\/p>\n\n\n\n
<ul class=\"parent\">\n <li>1<\/li>\n <li>2<\/li>\n ...\n<\/ul><\/code><\/pre>\n\n\n\n\u5982\u679c\u7ed9\u6bcf\u4e2a\u5217\u8868\u9879\u4e00\u4e00\u7ed1\u5b9a\u4e00\u4e2a\u51fd\u6570\uff0c\u90a3\u5bf9\u4e8e\u5185\u5b58\u6d88\u8017\u662f\u975e\u5e38\u5927\u7684\uff0c\u6548\u7387\u4e0a\u9700\u8981\u6d88\u8017\u5f88\u591a\u6027\u80fd\uff1b<\/p>\n\n\n\n
\u6bd4\u8f83\u597d\u7684\u65b9\u6cd5\u5c31\u662f\u7528\u4e8b\u4ef6\u59d4\u6258\uff0c\u628a\u8fd9\u4e2a\u70b9\u51fb\u4e8b\u4ef6\u7ed1\u5b9a\u5230\u4ed6\u7684\u7236\u5c42\uff0c\u4e5f\u5c31\u662f ul<\/code> \u4e0a\uff0c\u7136\u540e\u5728\u6267\u884c\u4e8b\u4ef6\u7684\u65f6\u5019\u518d\u53bb\u5339\u914d\u5224\u65ad\u76ee\u6807\u5143\u7d20\uff1b<\/p>\n\n\n\n\/\/ \u7ed9\u7236\u5c42\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\ndocument.querySelector('.parent').addEventListener('click', (event) => {\n var target = event.target\n \/\/ \u5224\u65ad\u662f\u5426\u5339\u914d\u76ee\u6807\u5143\u7d20\n if (target.nodeName.toLocaleLowerCase === 'li') {\n console.log(target.innerHTML + ' clicked');\n }\n});<\/code><\/pre>\n\n\n\n\u4e8b\u4ef6\u59d4\u6258\u7684\u597d\u5904\uff1a<\/p>\n\n\n\n
1\u3001\u53ea\u7ed1\u5b9a\u4e00\u4e2a\u4e8b\u4ef6\u51fd\u6570\uff0c\u53ef\u4ee5\u51cf\u5c11\u5927\u91cf\u7684\u5185\u5b58\u6d88\u8017\uff0c\u5e76\u4e14\u51cf\u5c11\u4e86dom\u64cd\u4f5c\uff0c\u63d0\u9ad8\u6027\u80fd\u3002<\/p>\n\n\n\n
2\u3001\u52a8\u6001\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\u3002\u901a\u8fc7 AJAX \u6216\u8005 \u7528\u6237\u4ea4\u4e92 \u52a8\u6001\u7684\u589e\u52a0\u6216\u8005\u53bb\u9664li\u5143\u7d20\uff0c\u3001\u5728\u6bcf\u4e00\u6b21\u6539\u53d8\u7684\u65f6\u5019\u90fd\u9700\u8981\u91cd\u65b0\u7ed9\u65b0\u589e\u7684\u5143\u7d20\u7ed1\u5b9a\u4e8b\u4ef6\uff0c\u7ed9\u5c06\u8981\u5220\u53bb\u7684\u5143\u7d20\u89e3\u7ed1\u4e8b\u4ef6\uff1b\u4f7f\u7528\u4e86\u4e8b\u4ef6\u59d4\u6258\u53ef\u4ee5\u7701\u53bb\u8fd9\u4e9b\u9ebb\u70e6\uff0c\u56e0\u4e3a\u4e8b\u4ef6\u662f\u7ed1\u5b9a\u5728ul\u7684\uff0c\u548cli\u7684\u589e\u51cf\u6ca1\u6709\u5173\u7cfb\u3002<\/p>\n\n\n\n
\u8282\u6d41\u548c\u9632\u6296<\/h2>\n\n\n\n
\u5f53\u7f51\u9875\u4ea4\u4e92\u8fc7\u7a0b\u4e2d\uff0c\u6709\u4e00\u4e9b\u64cd\u4f5c\u5e38\u5e38\u4f1a\u9891\u7e41\u89e6\u53d1\uff0c\u5982\u6eda\u52a8\u9875\u9762\u89e6\u53d1\u7684scroll\u4e8b\u4ef6\uff0c\u9875\u9762\u7f29\u653e\u89e6\u53d1resize\u4e8b\u4ef6<\/a>\u3001\u9f20\u6807\u79fb\u52a8\u7684mousemove\\mouseover\u4e8b\u4ef6\u7b49\u3002<\/p>\n\n\n\n\u9891\u7e41\u89e6\u53d1\u8fd9\u4e9b\u4e8b\u4ef6\u4f1a\u5bfc\u81f4\u76f8\u5e94\u56de\u8c03\u51fd\u6570\u7684\u5927\u91cf\u8ba1\u7b97\uff0c\u4ece\u800c\u5f15\u53d1\u9875\u9762\u6296\u52a8\u751a\u81f3\u5361\u987f\uff0c\u4e3a\u4e86\u63a7\u5236\u4e8b\u4ef6\u56de\u8c03\u7684\u89e6\u53d1\u9891\u7387\uff0c\u5c31\u9700\u8981\u7528\u4e8b\u4ef6\u8282\u6d41\u548c\u4e8b\u4ef6\u9632\u6296\u3002<\/p>\n\n\n\n
- \u4e8b\u4ef6\u8282\u6d41<\/strong><\/li><\/ul>\n\n\n\n
\u7b80\u5355\u6765\u8bf4\uff0c\u5c31\u662f\u4ece\u4e00\u4e2a\u65f6\u95f4\u70b9\u5f00\u59cb\uff0c\u5728\u67d0\u6bb5\u65f6\u95f4\uff0c\u65e0\u8bba\u89e6\u53d1\u4e86\u591a\u5c11\u6b21\u56de\u8c03\uff0c\u6211\u90fd\u53ea\u8ba4\u7b2c\u4e00\u6b21\uff0c\u5e76\u5728\u8ba1\u65f6\u7ed3\u675f\u65f6\u7ed9\u4e88\u54cd\u5e94\u3002<\/p>\n\n\n\n
\u4ee5scroll\u4e8b\u4ef6\u4e3a\u4f8b\uff0c\u5f53\u7528\u6237\u6eda\u52a8\u9875\u9762\u89e6\u53d1\u4e86\u4e00\u6b21scroll\u4e8b\u4ef6\u540e\uff0c\u5c31\u4e3a\u8fd9\u4e2a\u89e6\u53d1\u64cd\u4f5c\u5f00\u542f\u4e00\u4e2a\u56fa\u5b9a\u65f6\u95f4\u7684\u8ba1\u65f6\u5668\u3002\u5728\u8fd9\u4e2a\u8ba1\u65f6\u5668\u6301\u7eed\u65f6\u95f4\u5185\uff0c\u9650\u5236\u540e\u7eed\u53d1\u751f\u7684\u6240\u6709scroll\u4e8b\u4ef6\u5bf9\u56de\u8c03\u51fd\u6570\u7684\u89e6\u53d1\uff0c\u5f53\u8ba1\u65f6\u5668\u8ba1\u65f6\u7ed3\u675f\u540e\uff0c\u54cd\u5e94\u6267\u884c\u7b2c\u4e00\u6b21\u89e6\u53d1scroll\u4e8b\u4ef6\u7684\u56de\u8c03\u51fd\u6570\u3002<\/p>\n\n\n\n
\/\/ interval\u662f\u65f6\u95f4\u95f4\u9694\u7684\u9608\u503c, fn\u662f\u6211\u4eec\u9700\u8981\u5305\u88c5\u7684\u4e8b\u4ef6\u56de\u8c03\nfunction throttle(interval,fn){\n \/\/\u4e0a\u6b21\u89e6\u53d1\u56de\u8c03\u7684\u65f6\u95f4\n let lastTime = 0\n \n \/\/\u4e8b\u4ef6\u8282\u6d41\u64cd\u4f5c\u7684\u95ed\u5305\u8fd4\u56de\n return (params) => {\n \n \/\/\u8bb0\u5f55\u672c\u6b21\u56de\u8c03\u89e6\u53d1\u7684\u65f6\u95f4\n let now = +new Date()\n \n \/\/\u5224\u65ad\u4e0a\u6b21\u89e6\u53d1\u7684\u65f6\u95f4\u548c\u672c\u6b21\u89e6\u53d1\u7684\u65f6\u95f4\u5dee\u662f\u5426\u5c0f\u4e8e\u65f6\u95f4\u95f4\u9694\u7684\u9608\u503c\uff0c\u82e5\u4e0d\u5c0f\u4e8e\uff0c\u5219\u6267\u884c\u56de\u8c03\n if(now - lastTime >= interval){\n lastTime = now\n fn(params)\n }\n }\n}\n\n\/\/\u901a\u8fc7\u4e8b\u4ef6\u8282\u6d41\u4f18\u5316\u4e8b\u4ef6\u56de\u8c03\u51fd\u6570<\/a>\nconst throttle_scroll = throttle(1000, () => console.log('\u9875\u9762\u6eda\u52a8'))\n\n\/\/\u7ed1\u5b9a\u4e8b\u4ef6\ndocument.addEventListener('scroll', throttle_scroll)<\/code><\/pre>\n\n\n\n- \u4e8b\u4ef6\u9632\u6296<\/strong><\/li><\/ul>\n\n\n\n
\u53ea\u54cd\u5e94\u6700\u540e\u4e00\u6b21\u89e6\u53d1\u4e8b\u4ef6\u3002\u5728\u4e00\u5b9a\u65f6\u95f4\u5185\uff0c\u4e0d\u7ba1\u4e8b\u4ef6\u89e6\u53d1\u4e86\u591a\u5c11\u6b21\uff0c\u90fd\u53ea\u8ba4\u6700\u540e\u4e00\u6b21\u3002\u5047\u8bbe\u8bbe\u7f6e\u65f6\u95f4\u4e3a 1000ms\uff0c\u7b2c\u4e00\u6b21\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\u65f6\u4f1a\u542f\u52a8\u4e00\u4e2a\u5b9a\u65f6\u5668\uff0c\u540e\u9762\u6bcf\u6b21\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\u90fd\u4f1a\u6e05\u9664\u5df2\u6709\u5b9a\u65f6\u5668\uff0c\u5e76\u91cd\u65b0\u8bbe\u7f6e\u65b0\u7684\u5b9a\u65f6\u5668\uff0c\u8d77\u70b9\u4e3a\u6700\u8fd1\u4e00\u6b21\u89e6\u53d1\u7684\u8fd9\u4e2a\u65f6\u95f4\u3002<\/p>\n\n\n\n
\u6240\u4ee5\uff0c\u5982\u679c\u57281000ms\u5185\uff0c\u4f60\u518d\u6b21\u89e6\u53d1\u8fd9\u4e2a\u4e8b\u4ef6\uff0c\u4e4b\u524d\u7684\u5b9a\u65f6\u5668\u88ab\u6e05\u9664\uff0c\u53c8\u4ece\u6b64\u6b21\u89e6\u53d1\u4e8b\u4ef6\u7684\u8fd9\u4e00\u523b\u5f00\u59cb\u5012\u8ba1\u65f6\u3002<\/p>\n\n\n\n
function debounce(time,fn){\n\n \/\/\u8bbe\u7f6e\u5b9a\u65f6\u5668\n let timer = null\n \n \/\/\u4e8b\u4ef6\u9632\u6296\u7684\u95ed\u5305\u64cd\u4f5c\n return (params) => {\n \n \/\/\u6bcf\u6b21\u4e8b\u4ef6\u88ab\u89e6\u53d1\u65f6\uff0c\u90fd\u53bb\u6e05\u9664\u4e4b\u524d\u7684\u65e7\u5b9a\u65f6\u5668\n if(timer) clearTimeout(timer)\n \n \/\/\u8bbe\u7f6e\u65b0\u7684\u5b9a\u65f6\u5668\n timer = setTimeout(() => fn(params), time)\n }\n}\n\n\/\/\u901a\u8fc7\u4e8b\u4ef6\u9632\u6296\u4f18\u5316\u4e8b\u4ef6\u56de\u8c03\u51fd\u6570\nconst debounce_scroll = debounce(1000, () => console.log('\u9875\u9762\u6eda\u52a8'))\n\n\/\/\u7ed1\u5b9a\u4e8b\u4ef6<\/a>\ndocument.addEventListener('scroll', debounce_scroll)<\/code><\/pre>\n\n\n\n\u56de\u6d41\u3001\u91cd\u7ed8<\/h2>\n\n\n\n
\u56de\u6d41\uff1a\u5f53\u6211\u4eec\u5bf9 DOM \u7684\u4fee\u6539\u5f15\u53d1\u4e86 DOM \u51e0\u4f55\u5c3a\u5bf8\u7684\u53d8\u5316\uff0c\u6bd4\u5982\u4fee\u6539\u5143\u7d20\u7684\u5bbd\u3001\u9ad8\u6216\u9690\u85cf\u5143\u7d20\u7b49\uff0c\u6d4f\u89c8\u5668\u9700\u8981\u91cd\u65b0\u8ba1\u7b97\u5143\u7d20\u7684\u51e0\u4f55\u5c5e\u6027\u8fdb\u884c\u5e03\u5c40\uff0c\u7136\u540e\u518d\u5c06\u8ba1\u7b97\u7684\u7ed3\u679c\u7ed8\u5236\u51fa\u6765\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u5c31\u662f\u56de\u6d41\uff08\u4e5f\u53eb\u91cd\u6392\u6216\u9875\u9762\u5e03\u5c40\uff09\u3002<\/p>\n\n\n\n
\u91cd\u7ed8\uff1a\u5f53 DOM \u9700\u8981\u66f4\u65b0\u5c5e\u6027\uff0c\u800c\u8fd9\u4e9b\u5c5e\u6027\u53ea\u662f\u5f71\u54cd\u5176\u5916\u89c2\uff0c\u98ce\u683c\uff0c\u5e76\u4e0d\u4f1a\u5f71\u54cd\u5e03\u5c40\uff0c\u6bd4\u5982\u53ea\u4fee\u6539\u4e86\u989c\u8272\u6216\u80cc\u666f\u8272\uff0c\u6d4f\u89c8\u5668\u4e0d\u9700\u91cd\u65b0\u8ba1\u7b97\u5143\u7d20\u7684\u51e0\u4f55\u5c5e\u6027\uff0c\u76f4\u63a5\u4e3a\u8be5\u5143\u7d20\u7ed8\u5236\u65b0\u7684\u6837\u5f0f\u3002\u8fd9\u4e2a\u8fc7\u7a0b\u53eb\u505a\u91cd\u7ed8\u3002<\/p>\n\n\n\n
\u91cd\u7ed8\u4e0d\u4e00\u5b9a\u5bfc\u81f4\u56de\u6d41\uff0c\u56de\u6d41\u4e00\u5b9a\u4f1a\u5bfc\u81f4\u91cd\u7ed8\u3002\u56de\u6d41\u6bd4\u91cd\u7ed8\u7684\u4ee3\u4ef7\u8981\u66f4\u9ad8\u3002\u90a3\u4e48\u54ea\u4e9b\u64cd\u4f5c\u53ef\u80fd\u89e6\u53d1\u56de\u6d41\u5462\uff1f<\/p>\n\n\n\n
\u89e6\u53d1\u56de\u6d41\u7684\u64cd\u4f5c<\/h3>\n\n\n\n
1\u3001\u6539\u53d8 DOM \u5143\u7d20\u7684\u51e0\u4f55\u5c5e\u6027\uff0c\u8fd9\u4e9b\u5c5e\u6027\u5305\u62ec width\u3001height\u3001padding\u3001margin\u3001left\u3001top \u7b49\u3002<\/p>\n\n\n\n
2\u3001 \u6539\u53d8 DOM \u6811\u7684\u7ed3\u6784\u3002\u8282\u70b9\u7684\u589e\u51cf\u3001\u79fb\u52a8\u7b49\u64cd\u4f5c\u3002<\/p>\n\n\n\n
\u8fd9\u90fd\u53ef\u4ee5\u5728\u5199\u6837\u5f0f\u7684\u65f6\u5019\u663e\u5f0f\u5730\u901a\u8fc7\u4ee3\u7801\u6548\u679c\u770b\u51fa\u6765\u3002\u5bf9\u4e8e\u4e0a\u9762\u89e6\u53d1\u56de\u6d41\u7684\u64cd\u4f5c\uff0c\u6d4f\u89c8\u5668\u81ea\u8eab\u4e5f\u505a\u4e86\u4f18\u5316\u3002\u6d4f\u89c8\u5668\u4f1a\u7ef4\u62a4\u4e00\u4e2a\u961f\u5217\uff0c\u628a\u6240\u6709\u4f1a\u5f15\u8d77\u56de\u6d41\u3001\u91cd\u7ed8\u7684\u64cd\u4f5c\u653e\u5165\u8fd9\u4e2a\u961f\u5217\uff0c\u7b49\u961f\u5217\u4e2d\u7684\u64cd\u4f5c\u8fbe\u5230\u4e00\u4e2a\u9608\u503c\u6216\u8005\u5230\u4e86\u4e00\u5b9a\u7684\u65f6\u95f4\u95f4\u9694\uff0c\u6d4f\u89c8\u5668\u5c31\u4f1aflush\u961f\u5217\uff0c\u8fdb\u884c\u4e00\u4e2a\u6279\u5904\u7406\u3002\u8fd9\u6837\u5c31\u4f1a\u8ba9\u591a\u6b21\u7684\u56de\u6d41\/\u91cd\u7ed8\u53d8\u6210\u4e00\u6b21\u56de\u6d41\/\u91cd\u7ed8\u3002\u4f46\u662f\u5f53\u4f60\u83b7\u53d6\u67d0\u4e9b\u7279\u5b9a\u5730\u5c5e\u6027\u503c\u6216\u8005\u8c03\u7528\u67d0\u4e9b\u65b9\u6cd5\u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u7acb\u523b\u6e05\u7a7a\u961f\u5217\u3002<\/p>\n\n\n\n
3\u3001\u83b7\u53d6\u4e0b\u9762\u8fd9\u4e9b\u5c5e\u6027\u503c\u6216\u8005\u8c03\u7528\u65b9\u6cd5\u3002\u8fd9\u4e9b\u5c5e\u6027\u548c\u65b9\u6cd5\u6709\u4e00\u4e2a\u5171\u6027\uff0c\u5c31\u662f\u9700\u8981\u901a\u8fc7\u5373\u65f6\u8ba1\u7b97\u5f97\u5230\uff0c\u6240\u4ee5\u6d4f\u89c8\u5668\u9700\u8981\u7acb\u523b\u91cd\u65b0\u8fdb\u884c\u5e03\u5c40\u8ba1\u7b97\u3002<\/p>\n\n\n\n
offsetTop\u3001offsetLeft\u3001 offsetWidth\u3001offsetHeight\nscrollTop\u3001scrollLeft\u3001scrollWidth\u3001scrollHeight\nclientTop\u3001clientLeft\u3001clientWidth\u3001clientHeight\nscrollIntoView()\u3001getComputedStyle()\u3001getBoundingClientRect()\u3001scrollTo()<\/code><\/pre>\n\n\n\n\u4f18\u5316<\/h3>\n\n\n\n
\u5bf9\u56de\u6d41\u3001\u91cd\u7ed8\u6700\u76f4\u89c2\u7684\u4f18\u5316\uff0c\u5c31\u662f\u53ef\u4ee5\u51cf\u5c11\u5b83\u7684\u53d1\u751f\u6b21\u6570\u3002<\/p>\n\n\n\n
1\u3001\u907f\u514d\u9891\u7e41\u6539\u53d8\u6837\u5f0f\u3002\u4f7f\u7528class\u6216\u8005cssText\u5408\u5e76\u591a\u6b21\u5bf9\u6837\u5f0f\u7684\u4fee\u6539\uff0c\u7136\u540e\u4e00\u6b21\u66f4\u65b0\u3002<\/p>\n\n\n\n
const el = document.querySelector('.test')\nel.style.height = '100px'\nel.style.width = '200px'\nel.style.color = '#333'<\/code><\/pre>\n\n\n\n\u4f18\u5316\u540e\uff1a<\/p>\n\n\n\n
\uff081\uff09cssText<\/p>\n\n\n\n
const el = document.querySelector('.test')\nel.style.cssText = \"height:100px; width:200px; color: #333;\";<\/code><\/pre>\n\n\n\n\uff082\uff09class<\/p>\n\n\n\n
.new-style {\n height:100px;\n width:200px;\n color: #333;\n}\nconst el = document.querySelector('.test')\ncontainer.classList.add('new-style')<\/code><\/pre>\n\n\n\n2\u3001\u6279\u91cf\u4fee\u6539DOM\u3002\u5728\u4e0a\u9762\u7684\u51cf\u5c11DOM\u64cd\u4f5c\u4e2d\u5df2\u7ecf\u5199\u8fc7\uff0c\u8fd9\u91cc\u4e0d\u518d\u8d58\u8ff0\u3002<\/p>\n\n\n\n
3\u3001 \u907f\u514d\u9891\u7e41\u8bfb\u53d6\u201c\u654f\u611f\u201d\u5c5e\u6027\u3002\u4e0a\u6587\u6211\u4eec\u8bf4\u8fc7\uff0c\u5f53\u6211\u4eec\u8bbf\u95ee\u5143\u7d20\u7684\u4e00\u4e9b\u5c5e\u6027\u7684\u65f6\u5019\uff0c\u4f1a\u5bfc\u81f4\u6d4f\u89c8\u5668\u5f3a\u5236\u6e05\u7a7a\u961f\u5217\u3002<\/p>\n\n\n\n
\u4e3e\u4e2a\u4f8b\u5b50\uff0c\u6bd4\u5982\u8bf4\u6211\u4eec\u60f3\u5c06\u4e00\u7ec4\u5143\u7d20\u7684\u5bbd\u5ea6\u8d4b\u503c\u4e3a\u67d0\u4e00\u4e2a\u5143\u7d20\u7684\u5bbd\u5ea6\uff0c\u6211\u4eec\u53ef\u80fd\u5199\u51fa\u8fd9\u6837\u7684\u4ee3\u7801\uff1a<\/p>\n\n\n\n
function setWidth() {\n const lis = document.querySelectorAll('li')\n const div = document.querySelector('.test')\n for (let i = 0; i < lis.length; i++) {\n lis[i].style.width = div.offsetWidth + 'px';\n }\n}<\/code><\/pre>\n\n\n\n\u6bcf\u4e00\u6b21\u5faa\u73af\u7684\u65f6\u5019\uff0c\u90fd\u8bfb\u53d6\u4e86div\u7684offsetWidth\u5c5e\u6027\u503c\uff0c\u8fd9\u5c31\u5bfc\u81f4\u4e86\uff0c\u6bcf\u4e00\u6b21\u5faa\u73af\u90fd\u4f1a\u5f3a\u5236\u6d4f\u89c8\u5668\u5237\u65b0\u961f\u5217\u3002\u4f5c\u4e3a\u4f18\u5316\uff0c\u6211\u4eec\u53ef\u4ee5\u5c06\u654f\u611f\u5c5e\u6027\u901a\u8fc7\u53d8\u91cf\u7684\u5f62\u5f0f\u7f13\u5b58\u8d77\u6765\u3002<\/p>\n\n\n\n
const width = div.offsetWidth;\nfunction initP() {\n const lis = document.querySelectorAll('li')\n const width = document.querySelector('.test').offsetWidth\n for (let i = 0; i < lis.length; i++) {\n lis[i].style.width = width + 'px';\n }\n}<\/code><\/pre>\n\n\n\n\u5206\u5c42\u4e0e\u5408\u6210\uff1a\u52a8\u753b\u6548\u679c<\/h2>\n\n\n\n
\u5bf9\u4e8e\u4e00\u4e9b\u590d\u6742\u7684\u52a8\u753b\u6548\u679c\uff0c\u6bd4\u5982\u5e38\u89c1\u7684\u70b9\u51fb\u83dc\u5355\u65f6\u5f39\u51fa\u6536\u56de\u83dc\u5355\u7684\u52a8\u753b\u7279\u6548\uff0c\u8fd8\u6709\u4e00\u4e9b\u70ab\u9177\u7684 3D \u52a8\u753b\u7279\u6548\uff0c\u5982\u679c\u6ca1\u6709\u91c7\u7528\u5206\u5c42\u673a\u5236\uff0c\u4f1a\u7ecf\u5e38\u5f15\u8d77\u56de\u6d41\u91cd\u7ed8<\/a>\u3002<\/p>\n\n\n\n\u5173\u4e8e\u5206\u5c42\u7684\u673a\u5236\uff0c\u6211\u4eec\u5728\u4e0a\u9762\u7684\u9875\u9762\u6e32\u67d3\u6d41\u7a0b\u4e2d\u6709\u8bb2\u5230\u8fc7\u3002\u4e00\u4e2a\u7f51\u9875\u53ef\u4ee5\u5206\u89e3\u5f88\u591a\u4e2a\u56fe\u5c42\uff08\u5206\u5c42\uff09\uff0c\u6bcf\u4e2a\u56fe\u5c42\u90fd\u53ef\u4ee5\u5355\u72ec\u5730\u8bbe\u7f6e\u5927\u5c0f\u3001\u4f4d\u7f6e\u3001\u900f\u660e\u5ea6\u3001\u65cb\u8f6c\u89d2\u5ea6\u7b49\uff0c\u56fe\u5c42\u7684\u4e0a\u4e0b\u4f4d\u7f6e\u53ef\u4ee5\u8c03\u6574\uff0c\u6700\u540e\u5c06\u8fd9\u4e9b\u56fe\u5c42\u53e0\u52a0\u5728\u4e00\u8d77\u540e\uff08\u5408\u6210\uff09\uff0c\u5c31\u80fd\u5448\u73b0\u51fa\u6700\u7ec8\u7684\u6548\u679c\u3002<\/p>\n\n\n\n
\u5728 Chrome \u7684\u6e32\u67d3\u6d41\u6c34\u7ebf\u4e2d\uff0c\u5206\u5c42\u4f53\u73b0\u5728\u751f\u6210\u5e03\u5c40\u6811\u4e4b\u540e\uff0c\u6e32\u67d3\u5f15\u64ce\u4f1a\u6839\u636e\u5e03\u5c40\u6811\u7684\u7279\u70b9\u5c06\u5176\u8f6c\u6362\u4e3a\u56fe\u5c42\u6811\uff08Layer Tree\uff09\uff0c\u5408\u6210\u5219\u662f\u5f53\u56fe\u5c42\u7684\u7ed8\u5236\u5217\u8868\u51c6\u5907\u597d\u4e86\u4e4b\u540e\uff0c\u4ea4\u7531\u5408\u6210\u7ebf\u7a0b\u6765\u5b8c\u6210\u3002<\/p>\n\n\n\n
\u5bf9\u4e8e\u9700\u8981\u52a8\u753b\u6548\u679c\u7684\u5143\u7d20\uff0c\u53ef\u4ee5\u5c06\u5176\u521b\u5efa\u4e3a\u5355\u72ec\u56fe\u5c42\uff0c\u6bd4\u5982\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\uff0c\u5f53\u5b83\u53d1\u751f\u6539\u53d8\uff0c\u4e0d\u4f1a\u5f15\u8d77\u5176\u4ed6\u5143\u7d20\u7684\u9891\u7e41\u56de\u6d41\u3002<\/p>\n\n\n\n
\u800c\u4f7f\u7528css3\u7684\u4e00\u4e9b\u5c5e\u6027\uff0c\u53ef\u4ee5\u4f7f\u5f97\u52a8\u753b\u6548\u679c\u4e0d\u4f1a\u5f15\u8d77\u56de\u6d41\u91cd\u7ed8<\/strong>\u3002\u5728\u4e86\u89e3\u4e86\u6e32\u67d3\u6d41\u7a0b<\/a>\u5404\u90e8\u5206\u7684\u529f\u80fd\u548c\u4f5c\u7528\u540e\uff0c\u6211\u4eec\u77e5\u9053\u5982\u679c\u4e00\u4e2a\u52a8\u753b\u7684\u5b9e\u73b0\u4e0d\u7ecf\u8fc7\u9875\u9762\u5e03\u5c40\u548c\u91cd\u7ed8\u73af\u8282\uff0c\u4ec5\u5728\u5408\u6210\u9636\u6bb5\u5c31\u80fd\u5b8c\u6210\uff0c\u5c06\u4f1a\u5927\u5927\u63d0\u5347\u6027\u80fd\u3002<\/p>\n\n\n\n\u7b26\u5408\u8fd9\u4e00\u8981\u6c42\u7684\u52a8\u753b\u5c5e\u6027\u6709\uff1atransform\u548copacity\u3002\u5b83\u4eec\u80fd\u5b9e\u73b0\u7684\u52a8\u753b\u6548\u679c\uff1a\u5e73\u79fb\u3001\u7f29\u653e\u3001\u65cb\u8f6c\u3001\u503e\u659c\u3001\u77e9\u9635\u53d8\u6362\u3001\u900f\u660e\u5ea6\u3002<\/p>\n\n\n\n