{"id":2142,"date":"2025-10-31T21:27:21","date_gmt":"2025-10-31T13:27:21","guid":{"rendered":"https:\/\/womeifei.cn\/?p=2142"},"modified":"2026-01-29T10:28:55","modified_gmt":"2026-01-29T02:28:55","slug":"%e6%b5%8f%e8%a7%88%e5%99%a8%e8%be%93%e5%85%a5url%e5%9b%9e%e8%bd%a6%e4%b9%8b%e5%90%8e%e5%8f%91%e7%94%9f%e4%ba%86%e4%bb%80%e4%b9%88","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2025\/10\/31\/%e6%b5%8f%e8%a7%88%e5%99%a8%e8%be%93%e5%85%a5url%e5%9b%9e%e8%bd%a6%e4%b9%8b%e5%90%8e%e5%8f%91%e7%94%9f%e4%ba%86%e4%bb%80%e4%b9%88\/","title":{"rendered":"\u6d4f\u89c8\u5668\u8f93\u5165URL\u56de\u8f66\u4e4b\u540e\u53d1\u751f\u4e86\u4ec0\u4e48?"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">\u4ece\u7528\u6237\u5728\u6d4f\u89c8\u5668\u5730\u5740\u680f\u8f93\u5165URL\u5e76\u6309\u4e0b\u56de\u8f66\u952e\uff0c\u5230\u9875\u9762\u5b8c\u5168\u5c55\u793a\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u6d89\u53ca\u8ba1\u7b97\u673a\u7f51\u7edc\u3001\u6d4f\u89c8\u5668\u5f15\u64ce\u3001\u670d\u52a1\u5668\u8f6f\u4ef6\u7b49\u591a\u4e2a\u6280\u672f\u9886\u57df\u7684\u590d\u6742\u534f\u4f5c<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u2160\u7f51\u7edc\u901a\u4fe1\u6d41\u7a0b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1.\u89e3\u6790URL<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6d4f\u89c8\u5668\u9996\u5148\u89e3\u6790URL\uff0c\u786e\u5b9a\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u534f\u8bae\uff08HTTP\/HTTPS\uff09<\/li>\n\n\n\n<li>\u57df\u540d\uff08\u9700\u8981\u8f6c\u6362\u4e3aIP\u5730\u5740\uff09<\/li>\n\n\n\n<li>\u8d44\u6e90\u8def\u5f84\uff08\u8981\u8bf7\u6c42\u7684\u5177\u4f53\u6587\u4ef6\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2.\u68c0\u67e5\u7f13\u5b58(\u591a\u65b9\u68c0\u67e5)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6d4f\u89c8\u5668\u5728\u771f\u6b63\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42\u524d\uff0c\u4f1a\u8fdb\u884c\u4e00\u7cfb\u5217\u68c0\u67e5\uff0c\u5982\u679c\u547d\u4e2d\u4efb\u4f55\u4e00\u5c42\u7f13\u5b58\uff0c\u90fd\u53ef\u80fd\u76f4\u63a5\u4f7f\u7528\u672c\u5730\u526f\u672c\uff0c\u4ece\u800c\u8df3\u8fc7\u540e\u7eed\u6b65\u9aa4\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>Service Worker \u7f13\u5b58<\/strong>\u200b\uff1a\u5982\u679c\u7f51\u7ad9\u6ce8\u518c\u4e86 Service Worker\uff0c\u6d4f\u89c8\u5668\u4f1a\u4f18\u5148\u5c06\u8bf7\u6c42\u4ea4\u7ed9\u5b83\u5904\u7406\uff0c\u5b83\u53ef\u4ee5\u5c06\u8d44\u6e90\u5b58\u5728\u7f13\u5b58\u4e2d\uff0c\u751a\u81f3\u5b8c\u5168\u79bb\u7ebf\u5de5\u4f5c<\/li>\n\n\n\n<li>\u200b<strong>\u6d4f\u89c8\u5668\u7f13\u5b58\uff08HTTP Cache\uff09\u200b<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u4f1a\u68c0\u67e5\u672c\u5730\u7f13\u5b58\uff0c\u770b\u662f\u5426\u6709\u8fd9\u4e2a URL \u7684\u6709\u6548\u526f\u672c\u3002\u68c0\u67e5 <code>Cache-Control<\/code>\u3001<code>Expires<\/code>\u7b49\u5934\u90e8\uff0c\u5224\u65ad\u7f13\u5b58\u662f\u5426\u65b0\u9c9c\u3002\u5982\u679c\u6709\u6548\uff0c\u5219\u76f4\u63a5\u4f7f\u7528\u7f13\u5b58\uff0c\u200b<strong>\u6574\u4e2a\u8fc7\u7a0b\u7ed3\u675f<\/strong><\/li>\n\n\n\n<li>\u200b<strong>Hosts \u6587\u4ef6\u68c0\u67e5<\/strong>\u200b\uff1a\u64cd\u4f5c\u7cfb\u7edf\u4f1a\u68c0\u67e5\u672c\u5730\u7684 <code>hosts<\/code>\u6587\u4ef6\uff0c\u770b\u662f\u5426\u6709\u4eba\u4e3a\u7ed1\u5b9a\u7684\u57df\u540d\u548c IP \u5730\u5740<\/li>\n\n\n\n<li>\u200b<strong>\u8def\u7531\u5668\u7f13\u5b58<\/strong>\u200b\uff1a\u8bf7\u6c42\u5230\u8fbe\u8def\u7531\u5668\uff0c\u8def\u7531\u5668\u4e5f\u53ef\u80fd\u7f13\u5b58\u4e86 DNS \u8bb0\u5f55<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.DNS\u57df\u540d\u89e3\u6790<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/womeifei.cn\/index.php\/2025\/10\/29\/dns%e5%9f%9f%e5%90%8d%e8%a7%a3%e6%9e%90%e8%bf%87%e7%a8%8b\/\"><a href=\"https:\/\/womeifei.cn\/index.php\/2025\/10\/29\/dns%e5%9f%9f%e5%90%8d%e8%a7%a3%e6%9e%90%e8%bf%87%e7%a8%8b\/\">DNS\u57df\u540d\u89e3\u6790\u8fc7\u7a0b \u2013 FrontYang&#8217; s Blog<\/a><\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u7f13\u5b58\u672a\u547d\u4e2d\uff0c\u5c31\u9700\u8981\u5c06\u57df\u540d\u8f6c\u6362\u6210 IP \u5730\u5740<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u662f\u4e00\u4e2a\u9012\u5f52\u67e5\u8be2\u8fc7\u7a0b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u6d4f\u89c8\u5668\u68c0\u67e5\u81ea\u8eab DNS \u7f13\u5b58<\/li>\n\n\n\n<li>\u5411<strong>\u672c\u5730 DNS \u670d\u52a1\u5668<\/strong>\u200b\uff08\u901a\u5e38\u7531 ISP \u63d0\u4f9b\uff0c\u6216\u4f60\u624b\u52a8\u8bbe\u7f6e\u5982 <code>8.8.8.8<\/code>\uff09\u53d1\u8d77\u67e5\u8be2<\/li>\n\n\n\n<li>\u672c\u5730 DNS \u670d\u52a1\u5668\u4f1a\u4f9d\u6b21\u4ece<strong>\u6839\u57df\u540d\u670d\u52a1\u5668<\/strong>\u3001<strong>\u9876\u7ea7\u57df\u540d\u670d\u52a1\u5668<\/strong>\u200b\uff08.com\uff09\u3001<strong>\u6743\u5a01\u57df\u540d\u670d\u52a1\u5668<\/strong>\u200b\uff08example.com\uff09\u67e5\u8be2\uff0c\u6700\u7ec8\u83b7\u5f97 <code>www.example.com<\/code>\u5bf9\u5e94\u7684 IP \u5730\u5740\uff08\u5982 <code>93.184.216.34<\/code>\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">4.\u5efa\u7acbTCP\u8fde\u63a5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6d4f\u89c8\u5668\u62ff\u5230 IP \u5730\u5740\u540e\uff0c\u4f1a\u5411\u670d\u52a1\u5668\u7684 80\uff08HTTP\uff09\u6216 443\uff08HTTPS\uff09\u7aef\u53e3\u53d1\u8d77 \u200b<strong>TCP \u8fde\u63a5<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u8fd9\u4e2a\u8fc7\u7a0b\u5c31\u662f\u8457\u540d\u7684 \u200b<strong>TCP \u4e09\u6b21\u63e1\u624b<\/strong>\u200b\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u6d4f\u89c8\u5668\u53d1\u9001 <code>SYN<\/code>\u5305\uff08\u540c\u6b65\u5e8f\u5217\u7f16\u53f7\uff09\u5230\u670d\u52a1\u5668<\/li>\n\n\n\n<li>\u670d\u52a1\u5668\u56de\u5e94 <code>SYN-ACK<\/code>\u5305<\/li>\n\n\n\n<li>\u6d4f\u89c8\u5668\u518d\u56de\u5e94 <code>ACK<\/code>\u5305  \u81f3\u6b64\uff0c\u53ef\u9760\u7684 TCP \u8fde\u63a5\u5efa\u7acb\u6210\u529f<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">5.\u5efa\u7acbTLS\u8fde\u63a5(HTTPS)<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5982\u679c\u662f HTTPS\uff0c\u5728 TCP \u8fde\u63a5\u4e4b\u4e0a\uff0c\u8fd8\u9700\u8981\u8fdb\u884c \u200b<strong>TLS \u63e1\u624b<\/strong>\uff0c\u4ee5\u5efa\u7acb\u4e00\u4e2a\u5b89\u5168\u7684\u52a0\u5bc6\u901a\u9053\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u200b<strong>ClientHello<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u5411\u670d\u52a1\u5668\u53d1\u9001\u652f\u6301\u7684\u52a0\u5bc6\u7b97\u6cd5\u5217\u8868\u548c\u4e00\u4e2a\u968f\u673a\u6570<\/li>\n\n\n\n<li>\u200b<strong>ServerHello<\/strong>\u200b\uff1a\u670d\u52a1\u5668\u9009\u62e9\u52a0\u5bc6\u7b97\u6cd5\uff0c\u53d1\u9001\u81ea\u5df1\u7684\u6570\u5b57\u8bc1\u4e66\u548c\u4e00\u4e2a\u968f\u673a\u6570<\/li>\n\n\n\n<li>\u200b<strong>\u9a8c\u8bc1\u8bc1\u4e66<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u9a8c\u8bc1\u670d\u52a1\u5668\u8bc1\u4e66\u7684\u5408\u6cd5\u6027\uff08\u662f\u5426\u8fc7\u671f\u3001\u662f\u5426\u7531\u53ef\u4fe1\u673a\u6784\u9881\u53d1\u3001\u57df\u540d\u662f\u5426\u5339\u914d\uff09<\/li>\n\n\n\n<li>\u200b<strong>\u751f\u6210\u4f1a\u8bdd\u5bc6\u94a5<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u7528\u8bc1\u4e66\u4e2d\u7684\u516c\u94a5\u52a0\u5bc6\u4e00\u4e2a\u201c\u9884\u4e3b\u5bc6\u94a5\u201d\u53d1\u9001\u7ed9\u670d\u52a1\u5668<\/li>\n\n\n\n<li>\u200b<strong>\u751f\u6210\u5bf9\u79f0\u5bc6\u94a5<\/strong>\u200b\uff1a\u53cc\u65b9\u7528\u4e09\u4e2a\u968f\u673a\u6570\u751f\u6210\u76f8\u540c\u7684<strong>\u5bf9\u79f0\u4f1a\u8bdd\u5bc6\u94a5<\/strong>\uff0c\u540e\u7eed\u901a\u4fe1\u90fd\u7528\u8fd9\u4e2a\u5bc6\u94a5\u52a0\u5bc6\u89e3\u5bc6<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">6.\u53d1\u9001HTTP\u8bf7\u6c42<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u5b89\u5168\u901a\u9053\u5efa\u7acb\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u6784\u9020\u4e00\u4e2a \u200b<strong>HTTP \u8bf7\u6c42\u62a5\u6587<\/strong>\uff0c\u5e76\u901a\u8fc7 TCP \u8fde\u63a5\u53d1\u9001\u7ed9\u670d\u52a1\u5668<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u62a5\u6587\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>\u8bf7\u6c42\u884c<\/strong>\u200b\uff1a<code>GET \/index.html HTTP\/1.1<\/code><\/li>\n\n\n\n<li>\u200b<strong>\u8bf7\u6c42\u5934<\/strong>\u200b\uff1a<code>Host: www.example.com<\/code>, <code>User-Agent<\/code>, <code>Accept-Language<\/code>, <code>Cookie<\/code>\u7b49<\/li>\n\n\n\n<li>\u200b<strong>\u8bf7\u6c42\u4f53<\/strong>\u200b\uff1a\u5bf9\u4e8e GET \u8bf7\u6c42\uff0c\u901a\u5e38\u4e3a\u7a7a\uff1b\u5bf9\u4e8e POST \u8bf7\u6c42\uff0c\u5219\u5305\u542b\u63d0\u4ea4\u7684\u8868\u5355\u6570\u636e<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">7.\u670d\u52a1\u5668\u5904\u7406\u8bf7\u6c42<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u670d\u52a1\u5668\u6536\u5230\u8bf7\u6c42\u540e\uff0c\u4f1a\u5bf9\u5176\u8fdb\u884c\u5904\u7406\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>Web \u670d\u52a1\u5668<\/strong>\u200b\uff08\u5982 Nginx\u3001Apache\uff09\u63a5\u6536\u8bf7\u6c42\uff0c\u6839\u636e\u8def\u5f84\u5c06\u8bf7\u6c42\u8f6c\u53d1\u7ed9\u76f8\u5e94\u7684<strong>\u5e94\u7528\u670d\u52a1\u5668<\/strong>\u200b\uff08\u5982 Tomcat\u3001Django\uff09<\/li>\n\n\n\n<li>\u200b<strong>\u5e94\u7528\u670d\u52a1\u5668<\/strong>\u6267\u884c\u76f8\u5e94\u7684\u4e1a\u52a1\u903b\u8f91\uff08\u5982\u67e5\u8be2\u6570\u636e\u5e93\u3001\u5904\u7406\u4e1a\u52a1\uff09<\/li>\n\n\n\n<li>\u200b<strong>\u5e94\u7528\u6846\u67b6<\/strong>\u200b\uff08\u5982 Spring, Express\uff09\u6700\u7ec8\u751f\u6210\u4e00\u4e2a HTTP \u54cd\u5e94\uff0c\u901a\u5e38\u662f HTML \u9875\u9762<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">8.\u670d\u52a1\u5668\u8fd4\u56deHTTP\u54cd\u5e94<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u670d\u52a1\u5668\u5c06\u5904\u7406\u7ed3\u679c\u5c01\u88c5\u6210 \u200b<strong>HTTP \u54cd\u5e94\u62a5\u6587<\/strong>\u53d1\u56de\u7ed9\u6d4f\u89c8\u5668<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u62a5\u6587\u5305\u62ec\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>\u72b6\u6001\u884c<\/strong>\u200b\uff1a<code>HTTP\/1.1 200 OK<\/code>\uff08\u8868\u793a\u6210\u529f\uff09<\/li>\n\n\n\n<li>\u200b<strong>\u54cd\u5e94\u5934<\/strong>\u200b\uff1a<code>Content-Type: text\/html<\/code>, <code>Content-Length<\/code>, <code>Set-Cookie<\/code>\u7b49<\/li>\n\n\n\n<li>\u200b<strong>\u54cd\u5e94\u4f53<\/strong>\u200b\uff1a\u8bf7\u6c42\u7684 HTML \u6587\u6863\u5185\u5bb9<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">9.\u6d4f\u89c8\u5668\u63a5\u6536\u54cd\u5e94<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6d4f\u89c8\u5668\u5f00\u59cb\u63a5\u6536\u670d\u52a1\u5668\u8fd4\u56de\u7684\u6570\u636e<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5982\u679c\u72b6\u6001\u7801\u662f <code>301\/302<\/code>\uff08\u91cd\u5b9a\u5411\uff09\uff0c\u6d4f\u89c8\u5668\u4f1a\u6839\u636e <code>Location<\/code>\u5934\u4e2d\u7684\u65b0 URL\uff0c\u200b<strong>\u4ece\u5934\u5f00\u59cb\u6574\u4e2a\u8fc7\u7a0b<\/strong><\/li>\n\n\n\n<li>\u68c0\u67e5\u54cd\u5e94\u5934\u7684\u7f13\u5b58\u4fe1\u606f\uff0c\u51b3\u5b9a\u662f\u5426\u7f13\u5b58\u672c\u6b21\u54cd\u5e94\u7684\u8d44\u6e90<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">10.\u5173\u95edTCP\u8fde\u63a5<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">\u6570\u636e\u4f20\u8f93\u5b8c\u6210\u540e\uff0cTCP \u8fde\u63a5\u7684\u7ba1\u7406\u53d6\u51b3\u4e8e HTTP \u7248\u672c\u548c\u5934\u90e8\u8bbe\u7f6e\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>HTTP\/1.0<\/strong>\u200b\uff1a\u9ed8\u8ba4\u5173\u95ed\u8fde\u63a5\uff08<strong>\u56db\u6b21\u6325\u624b<\/strong>\uff09<\/li>\n\n\n\n<li>\u200b<strong>HTTP\/1.1 \u53ca\u4ee5\u4e0a<\/strong>\u200b\uff1a\u9ed8\u8ba4\u4f7f\u7528 \u200b<strong>Keep-Alive<\/strong>\u200b \u957f\u8fde\u63a5  \u540c\u4e00\u4e2a TCP \u8fde\u63a5\u53ef\u4ee5\u7528\u4e8e\u53d1\u9001\u591a\u4e2a HTTP \u8bf7\u6c42\/\u54cd\u5e94\uff0c\u907f\u514d\u9891\u7e41\u5efa\u7acb\u548c\u65ad\u5f00\u8fde\u63a5\u7684\u5f00\u9500  \u8fde\u63a5\u4f1a\u4fdd\u6301\u4e00\u6bb5\u65f6\u95f4\uff0c\u6216\u5728\u6240\u6709\u8bf7\u6c42\u5b8c\u6210\u540e\u5173\u95ed<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u2161\u6d4f\u89c8\u5668\u6e32\u67d3\u6d41\u7a0b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"https:\/\/womeifei.cn\/index.php\/2025\/09\/08\/%e6%b5%8f%e8%a7%88%e5%99%a8%e6%b8%b2%e6%9f%93%e5%8e%9f%e7%90%86\/\">\u6d4f\u89c8\u5668\u6e32\u67d3\u539f\u7406 \u2013 FrontYang&#8217; s Blog<\/a><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">1.\u89e3\u6790HTML \u6784\u5efaDOM\u6811<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8fc7\u7a0b<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u5c06 HTML \u5b57\u8282\u6d41\u8f6c\u6362\u6210\u5b57\u7b26\uff0c\u7136\u540e\u6839\u636e HTML \u89c4\u8303\u8fdb\u884c\u8bcd\u6cd5\u5206\u6790\u548c\u8bed\u6cd5\u5206\u6790\uff0c\u6784\u5efa\u51fa<strong>DOM\uff08\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff09\u6811<\/strong>  DOM \u662f HTML \u6587\u6863\u5728\u5185\u5b58\u4e2d\u7684\u5bf9\u8c61\u8868\u793a\uff0c\u5b83\u5b9a\u4e49\u4e86\u6587\u6863\u7684\u903b\u8f91\u7ed3\u6784\u548c\u64cd\u4f5c\u63a5\u53e3<\/li>\n\n\n\n<li>\u200b<strong>\u6ce8\u610f<\/strong>\u200b\uff1a\u89e3\u6790\u8fc7\u7a0b\u662f\u6e10\u8fdb\u5f0f\u7684\uff0c\u4e0d\u662f\u7b49\u5230\u6240\u6709 HTML \u4e0b\u8f7d\u5b8c\u624d\u5f00\u59cb <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">2.\u89e3\u6790CSS \u6784\u5efaCSSOM\u6811<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>\u8fc7\u7a0b<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u89e3\u6790\u5916\u90e8 CSS \u6587\u4ef6\u548c\u5185\u8054\u6837\u5f0f\uff0c\u6784\u5efa \u200b<strong>CSSOM\uff08CSS \u5bf9\u8c61\u6a21\u578b\uff09\u6811<\/strong>  \u5b83\u5305\u542b\u4e86\u6240\u6709 CSS \u9009\u62e9\u5668\u7684\u6837\u5f0f\u4fe1\u606f<\/li>\n\n\n\n<li>\u200b<strong>\u6ce8\u610f<\/strong>\u200b\uff1aCSS \u89e3\u6790\u4f1a\u963b\u585e\u6e32\u67d3\uff0c\u56e0\u4e3a\u6d4f\u89c8\u5668\u9700\u8981\u5b8c\u6574\u7684 CSSOM \u6765\u786e\u5b9a\u6bcf\u4e2a\u8282\u70b9\u7684\u6837\u5f0f<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">3.\u6784\u5efa\u6e32\u67d3\u6811<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u8fc7\u7a0b<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u5c06 DOM \u6811\u548c CSSOM \u6811\u5408\u5e76\u6210\u4e00\u68f5 \u200b<strong>\u6e32\u67d3\u6811<\/strong>  \u8fd9\u68f5\u6811\u53ea\u5305\u542b\u9700\u8981\u5728\u9875\u9762\u4e0a\u663e\u793a\u7684\u53ef\u89c6\u5143\u7d20\uff08\u4e0d\u5305\u542b <code>display: none<\/code>\u7684\u5143\u7d20\uff09\uff0c\u5e76\u8ba1\u7b97\u6bcf\u4e2a\u5143\u7d20\u7684\u8ba1\u7b97\u6837\u5f0f<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4.\u5e03\u5c40<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u200b<strong>\u8fc7\u7a0b<\/strong>\u200b\uff1a\u4e5f\u79f0\u4e3a<strong>\u91cd\u6392<\/strong>  \u6d4f\u89c8\u5668\u8ba1\u7b97\u6e32\u67d3\u6811\u4e2d\u6bcf\u4e2a\u5143\u7d20\u5728\u89c6\u53e3\u5185\u7684\u786e\u5207\u4f4d\u7f6e\u548c\u5927\u5c0f\uff08\u5750\u6807\u4fe1\u606f\uff09  \u8fd9\u4e2a\u8fc7\u7a0b\u662f\u9012\u5f52\u8fdb\u884c\u7684\uff0c\u56e0\u4e3a\u4e00\u4e2a\u5143\u7d20\u7684\u4f4d\u7f6e\u53ef\u80fd\u4f9d\u8d56\u4e8e\u5176\u7236\u5143\u7d20\u6216\u5b50\u5143\u7d20<\/li>\n\n\n\n<li>\u200b<strong>\u5355\u4f4d\u8f6c\u6362<\/strong>\u200b\uff1a\u5c06\u76f8\u5bf9\u5355\u4f4d\uff08\u5982 <code>px<\/code>, <code>%<\/code>, <code>vw<\/code>\uff09\u8f6c\u6362\u4e3a\u5c4f\u5e55\u4e0a\u7684\u7edd\u5bf9\u50cf\u7d20<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5.\u7ed8\u5236<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u8fc7\u7a0b<\/strong>\u200b\uff1a\u4e5f\u79f0\u4e3a<strong>\u6805\u683c\u5316<\/strong>\u3002\u6d4f\u89c8\u5668\u5c06\u5e03\u5c40\u9636\u6bb5\u7684\u8ba1\u7b97\u7ed3\u679c\u8f6c\u5316\u4e3a\u5c4f\u5e55\u4e0a\u7684\u5b9e\u9645\u50cf\u7d20  \u5b83\u904d\u5386\u6e32\u67d3\u6811\uff0c\u8c03\u7528 UI \u540e\u7aef API\uff08\u5982\u64cd\u4f5c\u7cfb\u7edf GUI \u63a5\u53e3\uff09\u5c06\u6bcf\u4e2a\u8282\u70b9\u7ed8\u5236\u51fa\u6765   \u7ed8\u5236\u8fc7\u7a0b\u5305\u62ec\u7ed8\u5236\u6587\u672c\u3001\u989c\u8272\u3001\u56fe\u50cf\u3001\u8fb9\u6846\u3001\u9634\u5f71\u7b49<\/li>\n\n\n\n<li>\u200b<strong>\u56fe\u5c42<\/strong>\u200b\uff1a\u4e3a\u4e86\u63d0\u9ad8\u6027\u80fd\uff0c\u6d4f\u89c8\u5668\u4f1a\u5c06\u9875\u9762\u5206\u6210\u591a\u4e2a\u56fe\u5c42\uff0c\u6709\u4e9b\u56fe\u5c42\u4f1a\u7531 GPU \u52a0\u901f\u6e32\u67d3\uff08\u786c\u4ef6\u52a0\u901f\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">6.\u5408\u6210\u4e0e\u663e\u793a<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u8fc7\u7a0b<\/strong>\u200b\uff1a\u5f53\u5404\u4e2a\u56fe\u5c42\u90fd\u88ab\u7ed8\u5236\u5b8c\u6210\u540e\uff0c\u6d4f\u89c8\u5668\u4f1a\u5c06\u5b83\u4eec\u6309\u7167\u6b63\u786e\u7684\u987a\u5e8f\u5408\u6210\u4e3a\u4e00\u4e2a\u5b8c\u6574\u7684\u9875\u9762  \u6700\u7ec8\uff0c\u8fd9\u4e2a\u5408\u6210\u540e\u7684\u9875\u9762\u88ab\u663e\u793a\u5728\u5c4f\u5e55\u4e0a<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7.\u540e\u7eed : \u5f02\u6b65\u52a0\u8f7d\u4e0e\u4ea4\u4e92<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u52a0\u8f7d\u5176\u4ed6\u8d44\u6e90<\/strong>\u200b\uff1a\u5728\u89e3\u6790 HTML \u65f6\uff0c\u6d4f\u89c8\u5668\u4f1a\u9047\u5230 <code>&lt;img&gt;<\/code>, <code>&lt;script&gt;<\/code>, <code>&lt;link&gt;<\/code>\u7b49\u6807\u7b7e\uff0c\u4f1a\u518d\u6b21\u53d1\u8d77\u7f51\u7edc\u8bf7\u6c42\u6765\u52a0\u8f7d\u8fd9\u4e9b\u8d44\u6e90\uff08CSS\u3001JS\u3001\u56fe\u7247\u7b49\uff09\u975e\u5173\u952e\u8d44\u6e90\uff08\u5982\u56fe\u7247\uff09\u7684\u52a0\u8f7d\u4e0d\u4f1a\u963b\u585e DOM \u6784\u5efa<\/li>\n\n\n\n<li>\u200b<strong>\u6267\u884c JavaScript<\/strong>\u200b\uff1a\u5f53\u9047\u5230 <code>&lt;script&gt;<\/code>\u6807\u7b7e\u65f6\uff0cHTML \u89e3\u6790\u4f1a<strong>\u6682\u505c<\/strong>\uff0c\u76f4\u5230\u811a\u672c\u4e0b\u8f7d\uff08\u5982\u679c\u662f\u5916\u90e8\u811a\u672c\uff09\u5e76\u6267\u884c\u5b8c\u6210\u3002\u56e0\u6b64\uff0c\u901a\u5e38\u5efa\u8bae\u5c06 <code>&lt;script&gt;<\/code>\u6807\u7b7e\u653e\u5728 body \u5e95\u90e8\u6216\u4f7f\u7528 <code>async<\/code>\/<code>defer<\/code>\u5c5e\u6027<\/li>\n\n\n\n<li>\u200b<strong>\u6210\u4e3a\u53ef\u4ea4\u4e92\u7684\u9875\u9762<\/strong>\u200b\uff1a\u5728\u6240\u6709\u8d44\u6e90\u52a0\u8f7d\u5b8c\u6bd5\uff0c\u7279\u522b\u662f JavaScript \u6267\u884c\u5b8c\u6210\u540e\uff0c\u9875\u9762\u53d8\u4e3a\u5b8c\u5168\u53ef\u4ea4\u4e92\u7684\u72b6\u6001  \u6d4f\u89c8\u5668\u4f1a\u89e6\u53d1 <code>DOMContentLoaded<\/code>\u548c <code>load<\/code>\u4e8b\u4ef6<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">\u2162\u603b\u7ed3<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><div class='fancybox-wrapper lazyload-container-unload' data-fancybox='post-images' href='https:\/\/womeifei.cn\/wp-content\/uploads\/2025\/10\/f379ba695b611738c4f703e9b546920e-899x1024.png'><img class=\"lazyload lazyload-style-1\" src=\"data:image\/svg+xml;base64,PCEtLUFyZ29uTG9hZGluZy0tPgo8c3ZnIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc3Ryb2tlPSIjZmZmZmZmMDAiPjxnPjwvZz4KPC9zdmc+\"  loading=\"lazy\" decoding=\"async\" width=\"899\" height=\"1024\" data-original=\"https:\/\/womeifei.cn\/wp-content\/uploads\/2025\/10\/f379ba695b611738c4f703e9b546920e-899x1024.png\" src=\"data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB\/AAffA0nNPuCLAAAAAElFTkSuQmCC\" alt=\"\" class=\"wp-image-2146\"  sizes=\"auto, (max-width: 899px) 100vw, 899px\" \/><\/div><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4ece\u7528\u6237\u5728\u6d4f\u89c8\u5668\u5730\u5740\u680f\u8f93\u5165URL\u5e76\u6309\u4e0b\u56de\u8f66\u952e\uff0c\u5230\u9875\u9762\u5b8c\u5168\u5c55\u793a\uff0c\u8fd9\u4e2a\u8fc7\u7a0b\u6d89\u53ca\u8ba1\u7b97\u673a\u7f51\u7edc\u3001\u6d4f\u89c8\u5668\u5f15\u64ce\u3001\u670d\u52a1\u5668\u8f6f\u4ef6\u7b49\u591a [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,46],"tags":[],"class_list":["post-2142","post","type-post","status-publish","format-standard","hentry","category-35","category-46"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2142","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=2142"}],"version-history":[{"count":4,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2142\/revisions"}],"predecessor-version":[{"id":2149,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/2142\/revisions\/2149"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=2142"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=2142"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=2142"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}