{"id":423,"date":"2025-08-19T17:52:50","date_gmt":"2025-08-19T09:52:50","guid":{"rendered":"https:\/\/maobucv.com\/articles\/?p=423"},"modified":"2025-08-19T18:06:00","modified_gmt":"2025-08-19T10:06:00","slug":"%e9%ab%98%e7%ba%a7%e5%89%8d%e7%ab%af%e9%9d%a2%e8%af%95%e9%a2%98%e7%b2%be%e9%80%89%ef%bc%8820%e9%81%93%e5%90%ab%e8%af%a6%e8%a7%a3%ef%bc%89","status":"publish","type":"post","link":"https:\/\/maobucv.com\/articles\/2025\/08\/423\/","title":{"rendered":"\u9ad8\u7ea7\u524d\u7aef\u9762\u8bd5\u9898\u7cbe\u9009\uff0820\u9053\u542b\u8be6\u89e3\uff09"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">\u4e00\u3001HTML\u4e0eCSS\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. \u5982\u4f55\u4f18\u5316\u7f51\u9875\u7684SEO\uff1f\u8bf7\u5217\u4e3e\u81f3\u5c115\u4e2a\u5173\u952e\u70b9<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8bed\u4e49\u5316HTML<\/strong>\u200b\uff1a\u6b63\u786e\u4f7f\u7528h1-h6\u6807\u9898\u3001section\u3001article\u7b49\u8bed\u4e49\u5316\u6807\u7b7e<\/li>\n\n\n\n<li><strong>meta\u6807\u7b7e\u4f18\u5316<\/strong>\u200b\uff1a\u8bbe\u7f6e\u51c6\u786e\u7684title\u3001description\u548ckeywords<\/li>\n\n\n\n<li><strong>\u56fe\u7247\u4f18\u5316<\/strong>\u200b\uff1a\u4f7f\u7528alt\u5c5e\u6027\u63cf\u8ff0\u56fe\u7247\u5185\u5bb9\uff0c\u5408\u7406\u538b\u7f29\u56fe\u7247\u5927\u5c0f<\/li>\n\n\n\n<li><strong>URL\u7ed3\u6784<\/strong>\u200b\uff1a\u4f7f\u7528\u7b80\u6d01\u3001\u5305\u542b\u5173\u952e\u8bcd\u7684URL\uff0c\u907f\u514d\u8fc7\u957f\u53c2\u6570<\/li>\n\n\n\n<li><strong>\u79fb\u52a8\u7aef\u9002\u914d<\/strong>\u200b\uff1a\u786e\u4fdd\u7f51\u7ad9\u5728\u79fb\u52a8\u8bbe\u5907\u4e0a\u826f\u597d\u663e\u793a\uff0cGoogle\u4f18\u5148\u7d22\u5f15\u79fb\u52a8\u7248<\/li>\n\n\n\n<li><strong>\u9875\u9762\u901f\u5ea6<\/strong>\u200b\uff1a\u901a\u8fc7\u4ee3\u7801\u538b\u7f29\u3001CDN\u3001\u61d2\u52a0\u8f7d\u7b49\u65b9\u5f0f\u63d0\u5347\u52a0\u8f7d\u901f\u5ea6<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">2. CSS\u9009\u62e9\u5668\u4f18\u5148\u7ea7\u662f\u5982\u4f55\u8ba1\u7b97\u7684\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>CSS\u9009\u62e9\u5668\u4f18\u5148\u7ea7\u7531\u56db\u4e2a\u7ea7\u522b\u7ec4\u6210\uff0c\u8ba1\u7b97\u89c4\u5219\u5982\u4e0b\uff1a<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5185\u8054\u6837\u5f0f\uff1a1000\u5206<\/li>\n\n\n\n<li>ID\u9009\u62e9\u5668\uff1a100\u5206<\/li>\n\n\n\n<li>\u7c7b\/\u5c5e\u6027\/\u4f2a\u7c7b\u9009\u62e9\u5668\uff1a10\u5206<\/li>\n\n\n\n<li>\u5143\u7d20\/\u4f2a\u5143\u7d20\u9009\u62e9\u5668\uff1a1\u5206<\/li>\n\n\n\n<li>\u901a\u914d\u7b26\/\u7ee7\u627f\u6837\u5f0f\uff1a0\u5206<\/li>\n<\/ul>\n\n\n\n<p>\u6bd4\u8f83\u65f6\u4ece\u5de6\u5230\u53f3\u9010\u7ea7\u6bd4\u8f83\uff0c\u5982<code>#nav .item a<\/code>\u7684\u4f18\u5148\u7ea7\u662f100+10+1=111\u5206\u3002\u5f53\u4f18\u5148\u7ea7\u76f8\u540c\u65f6\uff0c\u540e\u5b9a\u4e49\u7684\u6837\u5f0f\u4f1a\u8986\u76d6\u524d\u9762\u7684\u6837\u5f0f\u3002<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. \u4ec0\u4e48\u662fBFC\uff1f\u5982\u4f55\u521b\u5efaBFC\uff1f\u5b83\u6709\u4ec0\u4e48\u7279\u6027\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>BFC(Block Formatting Context)\u662f\u5757\u7ea7\u683c\u5f0f\u5316\u4e0a\u4e0b\u6587\uff0c\u662fWeb\u9875\u9762\u4e2d\u4e00\u4e2a\u72ec\u7acb\u7684\u6e32\u67d3\u533a\u57df\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u521b\u5efa\u65b9\u5f0f\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>float\u503c\u4e0d\u4e3anone<\/li>\n\n\n\n<li>position\u4e3aabsolute\u6216fixed<\/li>\n\n\n\n<li>display\u4e3ainline-block\u3001table-cell\u7b49<\/li>\n\n\n\n<li>overflow\u4e0d\u4e3avisible<\/li>\n<\/ul>\n\n\n\n<p>\u200b<strong>\u7279\u6027\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5185\u90e8\u76d2\u5b50\u5782\u76f4\u6392\u5217<\/li>\n\n\n\n<li>\u5782\u76f4\u65b9\u5411\u7684\u8ddd\u79bb\u7531margin\u51b3\u5b9a\uff0c\u540c\u4e00\u4e2aBFC\u5185\u76f8\u90bb\u76d2\u5b50margin\u4f1a\u91cd\u53e0<\/li>\n\n\n\n<li>BFC\u533a\u57df\u4e0d\u4f1a\u4e0efloat\u5143\u7d20\u91cd\u53e0<\/li>\n\n\n\n<li>\u8ba1\u7b97BFC\u9ad8\u5ea6\u65f6\uff0c\u6d6e\u52a8\u5143\u7d20\u4e5f\u53c2\u4e0e\u8ba1\u7b97<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e8c\u3001JavaScript\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">4. \u89e3\u91caJavaScript\u4e2d\u7684\u4e8b\u4ef6\u5faa\u73af\u673a\u5236<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>JavaScript\u662f\u5355\u7ebf\u7a0b\u8bed\u8a00\uff0c\u901a\u8fc7\u4e8b\u4ef6\u5faa\u73af\u5b9e\u73b0\u5f02\u6b65\u64cd\u4f5c\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u6240\u6709\u540c\u6b65\u4efb\u52a1\u5728\u4e3b\u7ebf\u7a0b\u6267\u884c\uff0c\u5f62\u6210\u6267\u884c\u6808<\/li>\n\n\n\n<li>\u5f02\u6b65\u4efb\u52a1\u4f1a\u88ab\u653e\u5165\u4efb\u52a1\u961f\u5217\uff0c\u5206\u4e3a\u5b8f\u4efb\u52a1\u548c\u5fae\u4efb\u52a1<\/li>\n\n\n\n<li>\u4e3b\u7ebf\u7a0b\u4efb\u52a1\u6267\u884c\u5b8c\u6bd5\u540e\uff0c\u5148\u68c0\u67e5\u5fae\u4efb\u52a1\u961f\u5217\u5e76\u6267\u884c\u6240\u6709\u5fae\u4efb\u52a1<\/li>\n\n\n\n<li>\u7136\u540e\u4ece\u5b8f\u4efb\u52a1\u961f\u5217\u53d6\u51fa\u4e00\u4e2a\u4efb\u52a1\u6267\u884c<\/li>\n\n\n\n<li>\u91cd\u590d\u4e0a\u8ff0\u8fc7\u7a0b<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u5e38\u89c1\u5206\u7c7b\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5b8f\u4efb\u52a1\uff1asetTimeout\u3001setInterval\u3001I\/O\u64cd\u4f5c\u7b49<\/li>\n\n\n\n<li>\u5fae\u4efb\u52a1\uff1aPromise.then\u3001MutationObserver\u7b49<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">5. \u4ec0\u4e48\u662f\u95ed\u5305\uff1f\u5b83\u6709\u4ec0\u4e48\u4f18\u7f3a\u70b9\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u95ed\u5305\u662f\u6307\u6709\u6743\u8bbf\u95ee\u53e6\u4e00\u4e2a\u51fd\u6570\u4f5c\u7528\u57df\u4e2d\u53d8\u91cf\u7684\u51fd\u6570\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u521b\u5efa\u65b9\u5f0f\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>function outer() {<br>  let count = 0;<br>  return function inner() {<br>    return ++count;<br>  }<br>}<\/code><\/pre>\n\n\n\n<p>\u200b<strong>\u4f18\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u53ef\u4ee5\u8bfb\u53d6\u51fd\u6570\u5185\u90e8\u7684\u53d8\u91cf<\/li>\n\n\n\n<li>\u8ba9\u53d8\u91cf\u957f\u671f\u4fdd\u5b58\u5728\u5185\u5b58\u4e2d<\/li>\n\n\n\n<li>\u53ef\u4ee5\u5c01\u88c5\u79c1\u6709\u53d8\u91cf\u548c\u65b9\u6cd5<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u7f3a\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u8fc7\u5ea6\u4f7f\u7528\u4f1a\u5bfc\u81f4\u5185\u5b58\u6cc4\u6f0f<\/li>\n\n\n\n<li>\u95ed\u5305\u4f1a\u5728\u7236\u51fd\u6570\u5916\u90e8\u6539\u53d8\u7236\u51fd\u6570\u5185\u90e8\u53d8\u91cf\u7684\u503c<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">6. ES6\u4e2dlet\u3001const\u548cvar\u7684\u533a\u522b\u662f\u4ec0\u4e48\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u7279\u6027<\/th><th>var<\/th><th>let<\/th><th>const<\/th><\/tr><\/thead><tbody><tr><td>\u4f5c\u7528\u57df<\/td><td>\u51fd\u6570\u4f5c\u7528\u57df<\/td><td>\u5757\u7ea7\u4f5c\u7528\u57df<\/td><td>\u5757\u7ea7\u4f5c\u7528\u57df<\/td><\/tr><tr><td>\u53d8\u91cf\u63d0\u5347<\/td><td>\u662f<\/td><td>\u5426<\/td><td>\u5426<\/td><\/tr><tr><td>\u91cd\u590d\u58f0\u660e<\/td><td>\u5141\u8bb8<\/td><td>\u4e0d\u5141\u8bb8<\/td><td>\u4e0d\u5141\u8bb8<\/td><\/tr><tr><td>\u521d\u59cb\u503c<\/td><td>\u53ef\u4e0d\u8bbe<\/td><td>\u53ef\u4e0d\u8bbe<\/td><td>\u5fc5\u987b\u8bbe\u7f6e<\/td><\/tr><tr><td>\u4fee\u6539\u503c<\/td><td>\u53ef\u4ee5<\/td><td>\u53ef\u4ee5<\/td><td>\u4e0d\u53ef\u4ee5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u5efa\u8bae\uff1a\u9ed8\u8ba4\u4f7f\u7528const\uff0c\u9700\u8981\u4fee\u6539\u65f6\u7528let\uff0c\u907f\u514d\u4f7f\u7528var\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e09\u3001\u6846\u67b6\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">7. React\u4e2dsetState\u662f\u540c\u6b65\u8fd8\u662f\u5f02\u6b65\u7684\uff1f\u4e3a\u4ec0\u4e48\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>setState\u5728React\u5408\u6210\u4e8b\u4ef6\u548c\u751f\u547d\u5468\u671f\u4e2d\u662f&#8221;\u5f02\u6b65&#8221;\u7684\uff0c\u4f46\u5728\u539f\u751f\u4e8b\u4ef6\u548csetTimeout\u4e2d\u662f\u540c\u6b65\u7684\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u5f02\u6b65\u539f\u56e0\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u6027\u80fd\u4f18\u5316\uff1a\u6279\u91cf\u5904\u7406\u591a\u4e2asetState\u8c03\u7528<\/li>\n\n\n\n<li>\u4fdd\u8bc1\u5185\u90e8\u4e00\u81f4\u6027\uff1aprops\u548cstate\u540c\u6b65\u66f4\u65b0<\/li>\n\n\n\n<li>\u542f\u7528\u5e76\u53d1\u6e32\u67d3\uff1a\u4e3a\u672a\u6765\u7684\u5e76\u53d1\u6a21\u5f0f\u505a\u51c6\u5907<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u83b7\u53d6\u66f4\u65b0\u540e\u72b6\u6001\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>this.setState({count: 1}, () =&gt; {<br>  console.log(this.state.count); <em>\/\/ \u83b7\u53d6\u6700\u65b0\u503c<\/em><br>});<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">8. Vue3\u7684Composition API\u76f8\u6bd4Options API\u6709\u54ea\u4e9b\u4f18\u52bf\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u66f4\u597d\u7684\u903b\u8f91\u590d\u7528<\/strong>\u200b\uff1a\u53ef\u4ee5\u63d0\u53d6\u548c\u91cd\u7528\u903b\u8f91\u7247\u6bb5<\/li>\n\n\n\n<li>\u200b<strong>\u66f4\u7075\u6d3b\u7684\u4ee3\u7801\u7ec4\u7ec7<\/strong>\u200b\uff1a\u76f8\u5173\u903b\u8f91\u53ef\u4ee5\u653e\u5728\u4e00\u8d77<\/li>\n\n\n\n<li><strong>\u66f4\u597d\u7684\u7c7b\u578b\u63a8\u65ad<\/strong>\u200b\uff1a\u5bf9TypeScript\u652f\u6301\u66f4\u597d<\/li>\n\n\n\n<li><strong>\u66f4\u5c0f\u7684\u6253\u5305\u4f53\u79ef<\/strong>\u200b\uff1a\u51cf\u5c11\u4e86this\u4e0a\u4e0b\u6587\u7684\u7ed1\u5b9a<\/li>\n\n\n\n<li><strong>\u66f4\u6e05\u6670\u7684\u4f9d\u8d56\u5173\u7cfb<\/strong>\u200b\uff1a\u663e\u5f0f\u5730\u58f0\u660e\u54cd\u5e94\u5f0f\u4f9d\u8d56<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u793a\u4f8b\u5bf9\u6bd4\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><em>\/\/ Options API<\/em><br>export default {<br>  data() {<br>    return { count: 0 }<br>  },<br>  methods: {<br>    increment() { this.count++ }<br>  }<br>}<br><br><em>\/\/ Composition API<\/em><br>import { ref } from 'vue'<br>export default {<br>  setup() {<br>    const count = ref(0)<br>    const increment = () =&gt; count.value++<br>    return { count, increment }<br>  }<br>}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">9. \u4ec0\u4e48\u662f\u865a\u62dfDOM\uff1f\u5b83\u7684\u5de5\u4f5c\u539f\u7406\u662f\u4ec0\u4e48\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u865a\u62dfDOM\u662f\u771f\u5b9eDOM\u7684\u8f7b\u91cf\u7ea7JavaScript\u5bf9\u8c61\u8868\u793a\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u5de5\u4f5c\u539f\u7406\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5f53\u72b6\u6001\u53d8\u5316\u65f6\uff0c\u521b\u5efa\u65b0\u7684\u865a\u62dfDOM\u6811<\/li>\n\n\n\n<li>\u901a\u8fc7Diff\u7b97\u6cd5\u6bd4\u8f83\u65b0\u65e7\u865a\u62dfDOM\u6811\u7684\u5dee\u5f02<\/li>\n\n\n\n<li>\u5c06\u5dee\u5f02\u5e94\u7528\u5230\u771f\u5b9eDOM\u4e0a<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u4f18\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u51cf\u5c11\u76f4\u63a5\u64cd\u4f5cDOM\u7684\u6027\u80fd\u5f00\u9500<\/li>\n\n\n\n<li>\u8de8\u5e73\u53f0\u80fd\u529b\uff08\u5982React Native\uff09<\/li>\n\n\n\n<li>\u63d0\u9ad8\u5f00\u53d1\u6548\u7387\uff0c\u65e0\u9700\u624b\u52a8\u4f18\u5316DOM\u64cd\u4f5c<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u7f3a\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u9996\u6b21\u6e32\u67d3\u9700\u8981\u989d\u5916\u521b\u5efa\u865a\u62dfDOM\u7684\u5f00\u9500<\/li>\n\n\n\n<li>\u5185\u5b58\u5360\u7528\u6bd4\u76f4\u63a5\u64cd\u4f5cDOM\u66f4\u9ad8<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u56db\u3001\u6027\u80fd\u4f18\u5316\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">10. \u5982\u4f55\u4f18\u5316\u524d\u7aef\u9875\u9762\u52a0\u8f7d\u901f\u5ea6\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u8d44\u6e90\u538b\u7f29<\/strong>\u200b\uff1a\u4f7f\u7528Gzip\u538b\u7f29\uff0c\u538b\u7f29\u56fe\u7247\u3001JS\u3001CSS<\/li>\n\n\n\n<li><strong>\u51cf\u5c11HTTP\u8bf7\u6c42<\/strong>\u200b\uff1a\u5408\u5e76\u6587\u4ef6\uff0c\u4f7f\u7528\u96ea\u78a7\u56fe<\/li>\n\n\n\n<li><strong>\u4f7f\u7528CDN<\/strong>\u200b\uff1a\u52a0\u901f\u9759\u6001\u8d44\u6e90\u52a0\u8f7d<\/li>\n\n\n\n<li>\u200b<strong>\u61d2\u52a0\u8f7d<\/strong>\u200b\uff1a\u56fe\u7247\u548c\u7ec4\u4ef6\u6309\u9700\u52a0\u8f7d<\/li>\n\n\n\n<li><strong>\u7f13\u5b58\u7b56\u7565<\/strong>\u200b\uff1a\u5408\u7406\u8bbe\u7f6eCache-Control\u548cETag<\/li>\n\n\n\n<li><strong>\u4ee3\u7801\u5206\u5272<\/strong>\u200b\uff1a\u4f7f\u7528\u52a8\u6001import\u5206\u5272\u4ee3\u7801<\/li>\n\n\n\n<li><strong>\u9884\u52a0\u8f7d<\/strong>\u200b\uff1a\u4f7f\u7528preload\u3001prefetch\u4f18\u5316\u5173\u952e\u8d44\u6e90<\/li>\n\n\n\n<li><strong>\u670d\u52a1\u7aef\u6e32\u67d3<\/strong>\u200b\uff1a\u51cf\u5c11\u9996\u5c4f\u52a0\u8f7d\u65f6\u95f4<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">11. \u5982\u4f55\u8bca\u65ad\u548c\u89e3\u51b3\u5185\u5b58\u6cc4\u6f0f\u95ee\u9898\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u200b<strong>\u5e38\u89c1\u5185\u5b58\u6cc4\u6f0f\u573a\u666f\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u610f\u5916\u7684\u5168\u5c40\u53d8\u91cf<\/li>\n\n\n\n<li>\u672a\u6e05\u9664\u7684\u5b9a\u65f6\u5668<\/li>\n\n\n\n<li>DOM\u5f15\u7528\u672a\u91ca\u653e<\/li>\n\n\n\n<li>\u95ed\u5305\u4f7f\u7528\u4e0d\u5f53<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u8bca\u65ad\u5de5\u5177\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Chrome DevTools\u7684Memory\u9762\u677f<\/li>\n\n\n\n<li>Performance\u9762\u677f\u8bb0\u5f55\u5185\u5b58\u53d8\u5316<\/li>\n\n\n\n<li>Node.js\u7684heapdump\u6a21\u5757<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u89e3\u51b3\u65b9\u6848\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u53ca\u65f6\u6e05\u9664\u4e8b\u4ef6\u76d1\u542c\u5668\u548c\u5b9a\u65f6\u5668<\/li>\n\n\n\n<li>\u907f\u514d\u4e0d\u5fc5\u8981\u7684\u5168\u5c40\u53d8\u91cf<\/li>\n\n\n\n<li>\u8c28\u614e\u4f7f\u7528\u95ed\u5305<\/li>\n\n\n\n<li>\u4f7f\u7528WeakMap\/WeakSet\u5b58\u50a8DOM\u5f15\u7528<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">12. \u63cf\u8ff0\u6d4f\u89c8\u5668\u4ece\u8f93\u5165URL\u5230\u9875\u9762\u6e32\u67d3\u7684\u5b8c\u6574\u8fc7\u7a0b<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>DNS\u89e3\u6790<\/strong>\u200b\uff1a\u5c06\u57df\u540d\u89e3\u6790\u4e3aIP\u5730\u5740<\/li>\n\n\n\n<li><strong>TCP\u8fde\u63a5<\/strong>\u200b\uff1a\u4e0e\u670d\u52a1\u5668\u5efa\u7acbTCP\u8fde\u63a5<\/li>\n\n\n\n<li><strong>\u53d1\u9001HTTP\u8bf7\u6c42<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u53d1\u9001\u9875\u9762\u8bf7\u6c42<\/li>\n\n\n\n<li><strong>\u670d\u52a1\u5668\u5904\u7406<\/strong>\u200b\uff1a\u670d\u52a1\u5668\u5904\u7406\u8bf7\u6c42\u5e76\u8fd4\u56de\u54cd\u5e94<\/li>\n\n\n\n<li>\u200b<strong>\u6d4f\u89c8\u5668\u89e3\u6790<\/strong>\u200b\uff1a\n<ul class=\"wp-block-list\">\n<li>\u89e3\u6790HTML\u6784\u5efaDOM\u6811<\/li>\n\n\n\n<li>\u89e3\u6790CSS\u6784\u5efaCSSOM\u6811<\/li>\n\n\n\n<li>\u5c06DOM\u548cCSSOM\u5408\u5e76\u6210\u6e32\u67d3\u6811<\/li>\n\n\n\n<li>\u8ba1\u7b97\u5e03\u5c40\uff08\u91cd\u6392\uff09<\/li>\n\n\n\n<li>\u7ed8\u5236\u9875\u9762\uff08\u91cd\u7ed8\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u52a0\u8f7d\u8d44\u6e90<\/strong>\u200b\uff1a\u89e3\u6790\u5230\u5916\u90e8\u8d44\u6e90\u65f6\u5e76\u884c\u52a0\u8f7d<\/li>\n\n\n\n<li>\u200b<strong>\u6267\u884cJS<\/strong>\u200b\uff1a\u9047\u5230JS\u53ef\u80fd\u4f1a\u963b\u585e\u89e3\u6790<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e94\u3001\u5de5\u7a0b\u5316\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">13. Webpack\u7684\u6784\u5efa\u6d41\u7a0b\u662f\u600e\u6837\u7684\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>Webpack\u6784\u5efa\u6d41\u7a0b\u4e3b\u8981\u5206\u4e3a\u4ee5\u4e0b\u9636\u6bb5\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u521d\u59cb\u5316\u53c2\u6570<\/strong>\u200b\uff1a\u4ece\u914d\u7f6e\u6587\u4ef6\u548c\u547d\u4ee4\u884c\u8bfb\u53d6\u53c2\u6570<\/li>\n\n\n\n<li><strong>\u5f00\u59cb\u7f16\u8bd1<\/strong>\u200b\uff1a\u7528\u53c2\u6570\u521d\u59cb\u5316Compiler\u5bf9\u8c61<\/li>\n\n\n\n<li>\u200b<strong>\u786e\u5b9a\u5165\u53e3<\/strong>\u200b\uff1a\u6839\u636e\u914d\u7f6e\u627e\u5230\u6240\u6709\u5165\u53e3\u6587\u4ef6<\/li>\n\n\n\n<li><strong>\u7f16\u8bd1\u6a21\u5757<\/strong>\u200b\uff1a\u4ece\u5165\u53e3\u51fa\u53d1\uff0c\u8c03\u7528loader\u7ffb\u8bd1\u6a21\u5757<\/li>\n\n\n\n<li><strong>\u5b8c\u6210\u7f16\u8bd1<\/strong>\u200b\uff1a\u5f97\u5230\u6bcf\u4e2a\u6a21\u5757\u7684\u4f9d\u8d56\u5173\u7cfb\u548c\u5185\u5bb9<\/li>\n\n\n\n<li><strong>\u8f93\u51fa\u8d44\u6e90<\/strong>\u200b\uff1a\u6839\u636e\u5165\u53e3\u548c\u6a21\u5757\u4f9d\u8d56\u7ec4\u88c5\u6210chunk<\/li>\n\n\n\n<li><strong>\u5199\u5165\u6587\u4ef6<\/strong>\u200b\uff1a\u6839\u636e\u914d\u7f6e\u7684\u8f93\u51fa\u8def\u5f84\u548c\u6587\u4ef6\u540d\u5199\u5165\u6587\u4ef6\u7cfb\u7edf<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u4f18\u5316\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528HappyPack\u591a\u8fdb\u7a0b\u7f16\u8bd1<\/li>\n\n\n\n<li>\u914d\u7f6eDllPlugin\u9884\u7f16\u8bd1\u4e0d\u53d8\u8d44\u6e90<\/li>\n\n\n\n<li>\u5408\u7406\u4f7f\u7528Tree Shaking<\/li>\n\n\n\n<li>\u6309\u9700\u52a0\u8f7d\u4ee3\u7801\u5206\u5272<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">14. \u4ec0\u4e48\u662f\u5fae\u524d\u7aef\uff1f\u5b83\u89e3\u51b3\u4e86\u4ec0\u4e48\u95ee\u9898\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u5fae\u524d\u7aef\u662f\u5c06\u524d\u7aef\u5e94\u7528\u5206\u89e3\u4e3a\u591a\u4e2a\u5c0f\u578b\u3001\u72ec\u7acb\u90e8\u7f72\u7684\u524d\u7aef\u5e94\u7528\u7684\u67b6\u6784\u98ce\u683c\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u89e3\u51b3\u7684\u95ee\u9898\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5927\u578b\u9879\u76ee\u7ef4\u62a4\u56f0\u96be<\/li>\n\n\n\n<li>\u6280\u672f\u6808\u5347\u7ea7\u56f0\u96be<\/li>\n\n\n\n<li>\u56e2\u961f\u534f\u4f5c\u6548\u7387\u4f4e<\/li>\n\n\n\n<li>\u72ec\u7acb\u90e8\u7f72\u80fd\u529b\u5dee<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u5b9e\u73b0\u65b9\u6848\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>iframe<\/strong>\u200b\uff1a\u7b80\u5355\u4f46\u9694\u79bb\u6027\u592a\u5f3a<\/li>\n\n\n\n<li>\u200b<strong>Web Components<\/strong>\u200b\uff1a\u6d4f\u89c8\u5668\u539f\u751f\u652f\u6301\u4f46\u517c\u5bb9\u6027\u8981\u6c42\u9ad8<\/li>\n\n\n\n<li><strong>single-spa<\/strong>\u200b\uff1a\u6d41\u884c\u7684\u5fae\u524d\u7aef\u6846\u67b6<\/li>\n\n\n\n<li><strong>qiankun<\/strong>\u200b\uff1a\u57fa\u4e8esingle-spa\u7684\u963f\u91cc\u65b9\u6848<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u4f18\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u72ec\u7acb\u5f00\u53d1\u3001\u72ec\u7acb\u90e8\u7f72<\/li>\n\n\n\n<li>\u6e10\u8fdb\u5f0f\u5347\u7ea7<\/li>\n\n\n\n<li>\u6280\u672f\u6808\u65e0\u5173<\/li>\n\n\n\n<li>\u66f4\u597d\u7684\u56e2\u961f\u81ea\u6cbb<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">15. \u524d\u7aef\u5982\u4f55\u5b9e\u73b0\u7070\u5ea6\u53d1\u5e03\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u200b<strong>\u5b9e\u73b0\u65b9\u6848\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Nginx\u5206\u6d41<\/strong>\u200b\uff1a\u6839\u636eIP\u3001Cookie\u7b49\u6761\u4ef6\u8def\u7531\u5230\u4e0d\u540c\u7248\u672c<\/li>\n\n\n\n<li><strong>CDN\u7070\u5ea6<\/strong>\u200b\uff1a\u901a\u8fc7CDN\u914d\u7f6e\u4e0d\u540c\u7528\u6237\u8bbf\u95ee\u4e0d\u540c\u7248\u672c<\/li>\n\n\n\n<li><strong>\u524d\u7aef\u8def\u7531<\/strong>\u200b\uff1a\u6839\u636e\u7528\u6237\u7279\u5f81\u5728\u524d\u7aef\u4ee3\u7801\u4e2d\u63a7\u5236\u5c55\u793a\u7248\u672c<\/li>\n\n\n\n<li><strong>\u670d\u52a1\u7aef\u6e32\u67d3<\/strong>\u200b\uff1a\u670d\u52a1\u7aef\u6839\u636e\u89c4\u5219\u8fd4\u56de\u4e0d\u540c\u7248\u672cHTML<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u5177\u4f53\u5b9e\u73b0\u793a\u4f8b\uff08Nginx\uff09\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code><em># \u6839\u636eCookie\u5206\u6d41<\/em><br>map $cookie_gray $group {<br>    default \"stable\";<br>    \"true\"  \"gray\";<br>}<br><br>server {<br>    location \/ {<br>        proxy_pass http:\/\/$group;<br>    }<br>}<\/code><\/pre>\n\n\n\n<p>\u200b<strong>\u6ce8\u610f\u4e8b\u9879\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u786e\u4fdd\u7070\u5ea6\u89c4\u5219\u53ef\u914d\u7f6e<\/li>\n\n\n\n<li>\u505a\u597d\u6570\u636e\u76d1\u63a7\u548c\u56de\u6eda\u65b9\u6848<\/li>\n\n\n\n<li>\u63a7\u5236\u7070\u5ea6\u8303\u56f4\u9010\u6b65\u6269\u5927<\/li>\n\n\n\n<li>\u786e\u4fdd\u65b0\u65e7\u7248\u672c\u517c\u5bb9\u6027<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u516d\u3001\u5b89\u5168\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">16. \u5e38\u89c1\u7684\u524d\u7aef\u5b89\u5168\u6f0f\u6d1e\u6709\u54ea\u4e9b\uff1f\u5982\u4f55\u9632\u8303\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>XSS(\u8de8\u7ad9\u811a\u672c\u653b\u51fb)\u200b<\/strong>\u200b\n<ul class=\"wp-block-list\">\n<li>\u9632\u8303\uff1a\u8f93\u5165\u8fc7\u6ee4\u3001\u8f93\u51fa\u8f6c\u4e49\u3001\u8bbe\u7f6eHttpOnly\u3001CSP\u7b56\u7565<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>CSRF(\u8de8\u7ad9\u8bf7\u6c42\u4f2a\u9020)\u200b<\/strong>\u200b\n<ul class=\"wp-block-list\">\n<li>\u9632\u8303\uff1a\u9a8c\u8bc1Referer\u3001\u6dfb\u52a0Token\u3001SameSite Cookie<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u70b9\u51fb\u52ab\u6301<\/strong>\u200b\n<ul class=\"wp-block-list\">\n<li>\u9632\u8303\uff1aX-Frame-Options\u5934\u3001Frame Busting\u4ee3\u7801<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u4e2d\u95f4\u4eba\u653b\u51fb<\/strong>\u200b\n<ul class=\"wp-block-list\">\n<li>\u9632\u8303\uff1a\u4f7f\u7528HTTPS\u3001HSTS\u7b56\u7565<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u654f\u611f\u6570\u636e\u6cc4\u9732<\/strong>\u200b\n<ul class=\"wp-block-list\">\n<li>\u9632\u8303\uff1a\u4e0d\u5728\u524d\u7aef\u5b58\u50a8\u654f\u611f\u6570\u636e\u3001\u52a0\u5bc6\u4f20\u8f93<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u7b2c\u4e09\u65b9\u4f9d\u8d56\u6f0f\u6d1e<\/strong>\u200b\n<ul class=\"wp-block-list\">\n<li>\u9632\u8303\uff1a\u5b9a\u671f\u66f4\u65b0\u4f9d\u8d56\u3001\u4f7f\u7528npm audit\u68c0\u67e5<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">17. \u4ec0\u4e48\u662fCORS\uff1f\u5982\u4f55\u6b63\u786e\u914d\u7f6e\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>CORS(\u8de8\u57df\u8d44\u6e90\u5171\u4eab)\u662f\u4e00\u79cd\u673a\u5236\uff0c\u5141\u8bb8\u7f51\u9875\u4ece\u4e0d\u540c\u57df\u7684\u670d\u52a1\u5668\u8bf7\u6c42\u8d44\u6e90\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u7b80\u5355\u8bf7\u6c42\u914d\u7f6e\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>Access-Control-Allow-Origin: *<br>Access-Control-Allow-Methods: GET, POST, HEAD<br>Access-Control-Allow-Headers: Content-Type<\/code><\/pre>\n\n\n\n<p>\u200b<strong>\u9884\u68c0\u8bf7\u6c42\u914d\u7f6e\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>Access-Control-Allow-Origin: https:\/\/example.com<br>Access-Control-Allow-Methods: GET, POST, PUT, DELETE<br>Access-Control-Allow-Headers: X-Custom-Header<br>Access-Control-Allow-Credentials: true<br>Access-Control-Max-Age: 86400<\/code><\/pre>\n\n\n\n<p>\u200b<strong>\u524d\u7aef\u4ee3\u7801\u793a\u4f8b\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>fetch('https:\/\/api.example.com\/data', {<br>  method: 'POST',<br>  headers: {<br>    'Content-Type': 'application\/json',<br>    'X-Custom-Header': 'value'<br>  },<br>  credentials: 'include' <em>\/\/ \u643a\u5e26cookie<\/em><br>});<\/code><\/pre>\n\n\n\n<p>\u200b<strong>\u6ce8\u610f\u4e8b\u9879\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4e0d\u8981\u76f2\u76ee\u4f7f\u7528<code>*<\/code>\u901a\u914d\u7b26<\/li>\n\n\n\n<li>\u654f\u611f\u63a5\u53e3\u5e94\u9650\u5236\u5177\u4f53\u57df\u540d<\/li>\n\n\n\n<li>\u5e26\u51ed\u8bc1\u7684\u8bf7\u6c42\u4e0d\u80fd\u4f7f\u7528<code>*<\/code><\/li>\n\n\n\n<li>\u5408\u7406\u8bbe\u7f6e\u7f13\u5b58\u65f6\u95f4<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">\u4e03\u3001TypeScript\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">18. TypeScript\u4e2d\u7684interface\u548ctype\u6709\u4ec0\u4e48\u533a\u522b\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u7279\u6027<\/th><th>interface<\/th><th>type<\/th><\/tr><\/thead><tbody><tr><td>\u6269\u5c55\u65b9\u5f0f<\/td><td>extends<\/td><td>&amp;<\/td><\/tr><tr><td>\u5408\u5e76\u58f0\u660e<\/td><td>\u652f\u6301<\/td><td>\u4e0d\u652f\u6301<\/td><\/tr><tr><td>\u5b9e\u73b0\u7c7b<\/td><td>\u53ef\u4ee5<\/td><td>\u4e0d\u53ef\u4ee5<\/td><\/tr><tr><td>\u57fa\u672c\u7c7b\u578b\u522b\u540d<\/td><td>\u4e0d\u53ef\u4ee5<\/td><td>\u53ef\u4ee5<\/td><\/tr><tr><td>\u8054\u5408\u7c7b\u578b<\/td><td>\u4e0d\u53ef\u4ee5<\/td><td>\u53ef\u4ee5<\/td><\/tr><tr><td>\u5143\u7ec4\u7c7b\u578b<\/td><td>\u53ef\u4ee5<\/td><td>\u53ef\u4ee5<\/td><\/tr><tr><td>\u51fd\u6570\u7c7b\u578b<\/td><td>\u53ef\u4ee5<\/td><td>\u53ef\u4ee5<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p>\u200b<strong>\u4f7f\u7528\u5efa\u8bae\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u9700\u8981\u6269\u5c55\u6216\u5b9e\u73b0\u65f6\u7528interface<\/li>\n\n\n\n<li>\u9700\u8981\u5b9a\u4e49\u8054\u5408\u7c7b\u578b\u6216\u5143\u7ec4\u65f6\u7528type<\/li>\n\n\n\n<li>\u7b80\u5355\u5bf9\u8c61\u7c7b\u578b\u4e24\u8005\u90fd\u53ef\u4ee5<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">19. \u89e3\u91caTypeScript\u4e2d\u7684\u6cdb\u578b\u53ca\u5176\u5e94\u7528\u573a\u666f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u6cdb\u578b\u5141\u8bb8\u5728\u5b9a\u4e49\u51fd\u6570\u3001\u63a5\u53e3\u6216\u7c7b\u65f6\u4e0d\u9884\u5148\u6307\u5b9a\u5177\u4f53\u7c7b\u578b\uff0c\u800c\u5728\u4f7f\u7528\u65f6\u518d\u6307\u5b9a\u3002<\/p>\n\n\n\n<p>\u200b<strong>\u57fa\u672c\u8bed\u6cd5\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>function identity&lt;T&gt;(arg: T): T {<br>  return arg;<br>}<\/code><\/pre>\n\n\n\n<p>\u200b<strong>\u5e94\u7528\u573a\u666f\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u51fd\u6570\u6cdb\u578b<\/strong>\u200b\uff1a\u5904\u7406\u591a\u79cd\u7c7b\u578b\u53c2\u6570\u7684\u51fd\u6570<\/li>\n\n\n\n<li><strong>\u63a5\u53e3\u6cdb\u578b<\/strong>\u200b\uff1a\u5b9a\u4e49\u53ef\u590d\u7528\u7684\u63a5\u53e3\u7ed3\u6784<\/li>\n\n\n\n<li><strong>\u7c7b\u6cdb\u578b<\/strong>\u200b\uff1a\u521b\u5efa\u53ef\u5904\u7406\u591a\u79cd\u7c7b\u578b\u7684\u7c7b<\/li>\n\n\n\n<li>\u200b<strong>\u7ea6\u675f\u6cdb\u578b<\/strong>\u200b\uff1a\u4f7f\u7528extends\u9650\u5236\u6cdb\u578b\u8303\u56f4<\/li>\n\n\n\n<li><strong>\u9ed8\u8ba4\u6cdb\u578b<\/strong>\u200b\uff1a\u4e3a\u6cdb\u578b\u53c2\u6570\u63d0\u4f9b\u9ed8\u8ba4\u7c7b\u578b<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u9ad8\u7ea7\u7528\u6cd5\u793a\u4f8b\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>interface Lengthwise {<br>  length: number;<br>}<br><br>function loggingIdentity&lt;T extends Lengthwise>(arg: T): T {<br>  console.log(arg.length);<br>  return arg;<br>}<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">\u516b\u3001\u7efc\u5408\u7bc7<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">20. \u5982\u4f55\u8bbe\u8ba1\u4e00\u4e2a\u524d\u7aef\u57cb\u70b9\u76d1\u63a7\u7cfb\u7edf\uff1f<\/h3>\n\n\n\n<p>\u200b<strong>\u7b54\u6848\u8be6\u89e3\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<p>\u200b<strong>\u7cfb\u7edf\u7ec4\u6210\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u6570\u636e\u91c7\u96c6\u5c42<\/strong>\u200b\uff1a\n<ul class=\"wp-block-list\">\n<li>\u7528\u6237\u884c\u4e3a\uff08\u70b9\u51fb\u3001\u6eda\u52a8\u7b49\uff09<\/li>\n\n\n\n<li>\u6027\u80fd\u6570\u636e\uff08\u52a0\u8f7d\u65f6\u95f4\u3001FP\/FCP\u7b49\uff09<\/li>\n\n\n\n<li>\u9519\u8bef\u76d1\u63a7\uff08JS\u9519\u8bef\u3001\u8d44\u6e90\u52a0\u8f7d\u5931\u8d25\uff09<\/li>\n\n\n\n<li>\u63a5\u53e3\u76d1\u63a7\uff08\u6210\u529f\u7387\u3001\u8017\u65f6\uff09<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>\u200b<strong>\u6570\u636e\u4f20\u8f93\u5c42<\/strong>\u200b\uff1a\n<ul class=\"wp-block-list\">\n<li>\u4f7f\u7528img\u6216navigator.sendBeacon\u51cf\u5c11\u5bf9\u9875\u9762\u5f71\u54cd<\/li>\n\n\n\n<li>\u6570\u636e\u538b\u7f29\u548c\u6279\u91cf\u4e0a\u62a5<\/li>\n\n\n\n<li>\u79bb\u7ebf\u5b58\u50a8\u548c\u91cd\u8bd5\u673a\u5236<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6570\u636e\u5904\u7406\u5c42<\/strong>\u200b\uff1a\n<ul class=\"wp-block-list\">\n<li>\u2022\u6570\u636e\u6e05\u6d17\u548c\u683c\u5f0f\u5316<\/li>\n\n\n\n<li>\u2022\u6570\u636e\u5b58\u50a8\uff08\u6570\u636e\u5e93\u6216\u5927\u6570\u636e\u5e73\u53f0\uff09<\/li>\n\n\n\n<li>\u2022\u5b9e\u65f6\u8ba1\u7b97\u548c\u79bb\u7ebf\u8ba1\u7b97<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>\u6570\u636e\u5c55\u793a\u5c42<\/strong>\u200b\uff1a\n<ul class=\"wp-block-list\">\n<li>\u53ef\u89c6\u5316\u4eea\u8868\u76d8<\/li>\n\n\n\n<li>\u62a5\u8b66\u673a\u5236<\/li>\n\n\n\n<li>\u7528\u6237\u884c\u4e3a\u8def\u5f84\u5206\u6790<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u6280\u672f\u5b9e\u73b0\u8981\u70b9\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u4f7f\u7528\u5355\u4f8b\u6a21\u5f0f\u786e\u4fdd\u53ea\u521d\u59cb\u5316\u4e00\u6b21<\/li>\n\n\n\n<li>\u91c7\u7528\u7b56\u7565\u6a21\u5f0f\u652f\u6301\u591a\u79cd\u4e0a\u62a5\u65b9\u5f0f<\/li>\n\n\n\n<li>\u4f7f\u7528\u9632\u6296\u8282\u6d41\u63a7\u5236\u9ad8\u9891\u4e8b\u4ef6\u4e0a\u62a5<\/li>\n\n\n\n<li>\u533a\u5206\u5f00\u53d1\u548c\u751f\u4ea7\u73af\u5883\u4e0a\u62a5<\/li>\n\n\n\n<li>\u652f\u6301\u81ea\u5b9a\u4e49\u6269\u5c55\u70b9<\/li>\n<\/ol>\n\n\n\n<p>\u200b<strong>\u793a\u4f8b\u4ee3\u7801\uff1a\u200b<\/strong>\u200b<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\"><code>class Tracker {<br>  constructor(options) {<br>    this.options = options;<br>    this.queue = [];<br>    this.init();<br>  }<br>  <br>  init() {<br>    window.addEventListener('unload', () =&gt; {<br>      this.send(this.queue);<br>    });<br>  }<br>  <br>  track(event, data) {<br>    this.queue.push({event, data});<br>    if(this.queue.length &gt;= this.options.batchSize) {<br>      this.send(this.queue);<br>      this.queue = [];<br>    }<br>  }<br>  <br>  send(data) {<br>    navigator.sendBeacon(this.options.url, JSON.stringify(data));<br>  }<br>}<\/code><\/pre>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u4e00\u3001HTML\u4e0eCSS\u7bc7 1. \u5982\u4f55\u4f18\u5316\u7f51\u9875\u7684SEO\uff1f\u8bf7&#46;&#46;&#46;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,10],"tags":[106,26,107],"class_list":["post-423","post","type-post","status-publish","format-standard","hentry","category-39","category-10","tag-106","tag-26","tag-107"],"_links":{"self":[{"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/posts\/423","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/comments?post=423"}],"version-history":[{"count":4,"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/posts\/423\/revisions"}],"predecessor-version":[{"id":429,"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/posts\/423\/revisions\/429"}],"wp:attachment":[{"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/media?parent=423"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/categories?post=423"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maobucv.com\/articles\/wp-json\/wp\/v2\/tags?post=423"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}