| 12345678910111213141516171819202122232425 |
- <!DOCTYPE html>
- <html lang="en-US">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <title>加速网站的最佳实践 | 看白鹿的博客</title>
- <meta name="description" content="只有敢于尝试,才能品味人生.">
- <link rel="icon" href="/logo.png">
-
- <link rel="preload" href="/assets/css/0.styles.a2e0d1a2.css" as="style"><link rel="preload" href="/assets/js/app.9558671e.js" as="script"><link rel="preload" href="/assets/js/3.515b53d6.js" as="script"><link rel="preload" href="/assets/js/68.c56c64fe.js" as="script"><link rel="prefetch" href="/assets/js/10.f724d0ba.js"><link rel="prefetch" href="/assets/js/100.5834781e.js"><link rel="prefetch" href="/assets/js/101.21b366b3.js"><link rel="prefetch" href="/assets/js/102.2ae747f3.js"><link rel="prefetch" href="/assets/js/103.093cd825.js"><link rel="prefetch" href="/assets/js/104.22c3355f.js"><link rel="prefetch" href="/assets/js/105.0d2c6d27.js"><link rel="prefetch" href="/assets/js/106.57e86379.js"><link rel="prefetch" href="/assets/js/107.3859929f.js"><link rel="prefetch" href="/assets/js/108.305f4abf.js"><link rel="prefetch" href="/assets/js/109.bfba36ff.js"><link rel="prefetch" href="/assets/js/11.8006ec70.js"><link rel="prefetch" href="/assets/js/110.b67873d6.js"><link rel="prefetch" href="/assets/js/111.39112c80.js"><link rel="prefetch" href="/assets/js/112.6452e3ad.js"><link rel="prefetch" href="/assets/js/113.60c65ce6.js"><link rel="prefetch" href="/assets/js/114.955a027b.js"><link rel="prefetch" href="/assets/js/115.dd036aff.js"><link rel="prefetch" href="/assets/js/116.14835fbf.js"><link rel="prefetch" href="/assets/js/117.c79a8c90.js"><link rel="prefetch" href="/assets/js/118.c0e2c0d9.js"><link rel="prefetch" href="/assets/js/12.005e0dbb.js"><link rel="prefetch" href="/assets/js/13.ff4ae139.js"><link rel="prefetch" href="/assets/js/14.836a5132.js"><link rel="prefetch" href="/assets/js/15.6f048cfc.js"><link rel="prefetch" href="/assets/js/16.d91b81f0.js"><link rel="prefetch" href="/assets/js/17.f2e82e43.js"><link rel="prefetch" href="/assets/js/18.4e4cd572.js"><link rel="prefetch" href="/assets/js/19.3b203b0f.js"><link rel="prefetch" href="/assets/js/20.7a5c58ab.js"><link rel="prefetch" href="/assets/js/21.97e7a824.js"><link rel="prefetch" href="/assets/js/22.c2c71341.js"><link rel="prefetch" href="/assets/js/23.af6cefca.js"><link rel="prefetch" href="/assets/js/24.8a375cba.js"><link rel="prefetch" href="/assets/js/25.238ba08c.js"><link rel="prefetch" href="/assets/js/26.9c2191ba.js"><link rel="prefetch" href="/assets/js/27.aa86acfc.js"><link rel="prefetch" href="/assets/js/28.858301d1.js"><link rel="prefetch" href="/assets/js/29.808ea0c3.js"><link rel="prefetch" href="/assets/js/30.e9907d4a.js"><link rel="prefetch" href="/assets/js/31.c87c923f.js"><link rel="prefetch" href="/assets/js/32.4b1edff8.js"><link rel="prefetch" href="/assets/js/33.73f494d0.js"><link rel="prefetch" href="/assets/js/34.50a183ad.js"><link rel="prefetch" href="/assets/js/35.7df7ce1e.js"><link rel="prefetch" href="/assets/js/36.349910a5.js"><link rel="prefetch" href="/assets/js/37.d0f9f5f8.js"><link rel="prefetch" href="/assets/js/38.fb3a1bd1.js"><link rel="prefetch" href="/assets/js/39.601de504.js"><link rel="prefetch" href="/assets/js/4.389f8161.js"><link rel="prefetch" href="/assets/js/40.08558ea8.js"><link rel="prefetch" href="/assets/js/41.9cab78b4.js"><link rel="prefetch" href="/assets/js/42.570f67c5.js"><link rel="prefetch" href="/assets/js/43.41766314.js"><link rel="prefetch" href="/assets/js/44.61865afc.js"><link rel="prefetch" href="/assets/js/45.b4d6c042.js"><link rel="prefetch" href="/assets/js/46.ab1face5.js"><link rel="prefetch" href="/assets/js/47.cfc26f59.js"><link rel="prefetch" href="/assets/js/48.b14654a7.js"><link rel="prefetch" href="/assets/js/49.6598379f.js"><link rel="prefetch" href="/assets/js/5.d4651190.js"><link rel="prefetch" href="/assets/js/50.1278be5c.js"><link rel="prefetch" href="/assets/js/51.7fd917c5.js"><link rel="prefetch" href="/assets/js/52.25b15acf.js"><link rel="prefetch" href="/assets/js/53.2e62bed5.js"><link rel="prefetch" href="/assets/js/54.af31649a.js"><link rel="prefetch" href="/assets/js/55.e6c76277.js"><link rel="prefetch" href="/assets/js/56.59b2e0fa.js"><link rel="prefetch" href="/assets/js/57.e75a4f7d.js"><link rel="prefetch" href="/assets/js/58.f45feb68.js"><link rel="prefetch" href="/assets/js/59.21a7b545.js"><link rel="prefetch" href="/assets/js/6.4bfb03ad.js"><link rel="prefetch" href="/assets/js/60.d5bd9a2b.js"><link rel="prefetch" href="/assets/js/61.dc32bd44.js"><link rel="prefetch" href="/assets/js/62.552676dd.js"><link rel="prefetch" href="/assets/js/63.86db7a84.js"><link rel="prefetch" href="/assets/js/64.eb8d2554.js"><link rel="prefetch" href="/assets/js/65.405a53d2.js"><link rel="prefetch" href="/assets/js/66.a56465a2.js"><link rel="prefetch" href="/assets/js/67.8184d78b.js"><link rel="prefetch" href="/assets/js/69.6b654ce5.js"><link rel="prefetch" href="/assets/js/7.5373c3ff.js"><link rel="prefetch" href="/assets/js/70.9a186317.js"><link rel="prefetch" href="/assets/js/71.ac0a8a64.js"><link rel="prefetch" href="/assets/js/72.b10eb62e.js"><link rel="prefetch" href="/assets/js/73.8d0ed403.js"><link rel="prefetch" href="/assets/js/74.903a6ec9.js"><link rel="prefetch" href="/assets/js/75.b4770f9b.js"><link rel="prefetch" href="/assets/js/76.38bc39a3.js"><link rel="prefetch" href="/assets/js/77.f9865d6b.js"><link rel="prefetch" href="/assets/js/78.10f6bd6c.js"><link rel="prefetch" href="/assets/js/79.a9255312.js"><link rel="prefetch" href="/assets/js/8.be3a48f4.js"><link rel="prefetch" href="/assets/js/80.02b17ee8.js"><link rel="prefetch" href="/assets/js/81.a1112357.js"><link rel="prefetch" href="/assets/js/82.4568ca67.js"><link rel="prefetch" href="/assets/js/83.49710233.js"><link rel="prefetch" href="/assets/js/84.533366f2.js"><link rel="prefetch" href="/assets/js/85.97dbc2cd.js"><link rel="prefetch" href="/assets/js/86.6514a49a.js"><link rel="prefetch" href="/assets/js/87.0c59077d.js"><link rel="prefetch" href="/assets/js/88.1df289b4.js"><link rel="prefetch" href="/assets/js/89.7269909c.js"><link rel="prefetch" href="/assets/js/9.db31af68.js"><link rel="prefetch" href="/assets/js/90.272a0e37.js"><link rel="prefetch" href="/assets/js/91.72195388.js"><link rel="prefetch" href="/assets/js/92.f6e0c47a.js"><link rel="prefetch" href="/assets/js/93.36e0cacd.js"><link rel="prefetch" href="/assets/js/94.f5c4f682.js"><link rel="prefetch" href="/assets/js/95.8408e244.js"><link rel="prefetch" href="/assets/js/96.a71354b0.js"><link rel="prefetch" href="/assets/js/97.4fb8b67b.js"><link rel="prefetch" href="/assets/js/98.785be908.js"><link rel="prefetch" href="/assets/js/99.219eebc3.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.431cfe91.js">
- <link rel="stylesheet" href="/assets/css/0.styles.a2e0d1a2.css">
- </head>
- <body>
- <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">看白鹿的博客</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
- GitHub
- <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="前端" class="dropdown-title"><span class="title">前端</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/CSS/" class="nav-link router-link-active">CSS</a></li><li class="dropdown-item"><!----> <a href="/FLUTTER/" class="nav-link">flutter</a></li><li class="dropdown-item"><!----> <a href="/GIT/" class="nav-link">GIT</a></li><li class="dropdown-item"><!----> <a href="/JavaScript/" class="nav-link">JavaScript</a></li><li class="dropdown-item"><!----> <a href="/REACT/" class="nav-link">react</a></li><li class="dropdown-item"><!----> <a href="/VUE/" class="nav-link">vue</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="后台" class="dropdown-title"><span class="title">后台</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/NODE/" class="nav-link">node</a></li><li class="dropdown-item"><!----> <a href="/UBUNTU/" class="nav-link">ubuntu</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其他" class="dropdown-title"><span class="title">其他</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/IDE/" class="nav-link">IDE</a></li><li class="dropdown-item"><!----> <a href="/About/WHY.html" class="nav-link">待了解</a></li><li class="dropdown-item"><!----> <a href="/INTERVIEW/" class="nav-link">面试</a></li><li class="dropdown-item"><!----> <a href="/hello/" class="nav-link">你好</a></li></ul></div></div><div class="nav-item"><a href="https://github.com/Johnhong9527" target="_blank" rel="noopener noreferrer" class="nav-link external">
- GitHub
- <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></div> <!----></nav> <ul class="sidebar-links"><li><a href="/CSS/" class="sidebar-link">CSS 目录</a></li><li><a href="/CSS/cases.html" class="sidebar-link">案例收集</a></li><li><a href="/CSS/2018_10_21_01.html" class="sidebar-link">1px 边框问题</a></li><li><a href="/CSS/2018_10_21_02.html" class="sidebar-link">border-style</a></li><li><a href="/CSS/2018_10_21_03.html" class="sidebar-link">box-flex使用说明</a></li><li><a href="/CSS/2018_10_21_04.html" class="sidebar-link">css动画</a></li><li><a href="/CSS/2018_10_21_05.html" class="active sidebar-link">加速网站的最佳实践</a></li><li><a href="/CSS/principle.html" class="sidebar-link">CSS盒子</a></li><li><a href="/CSS/2019_04_11_01.html" class="sidebar-link">Grid 布局教程</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="加速网站的最佳实践"><a href="#加速网站的最佳实践" class="header-anchor">#</a> 加速网站的最佳实践</h1> <p>Best Practices for Speeding Up Your Web Site</p> <p><a href="https://developer.yahoo.com/performance/rules.html?guccounter=2" target="_blank" rel="noopener noreferrer">原文<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></p> <p><strong>test</strong></p> <h4 id="_1、减少-http-请求次数（minimize-http-requests）"><a href="#_1、减少-http-请求次数（minimize-http-requests）" class="header-anchor">#</a> 1、减少 HTTP 请求次数（Minimize HTTP Requests）</h4> <h4 id="_2、使用-cdn-内容分发网络（use-a-content-delivery-network）"><a href="#_2、使用-cdn-内容分发网络（use-a-content-delivery-network）" class="header-anchor">#</a> 2、使用 CDN 内容分发网络（Use a Content Delivery Network）</h4> <h4 id="_3、添加有效期或缓存控制头-静态、动态内容分而治之（add-an-expires-or-a-cache-control-header）"><a href="#_3、添加有效期或缓存控制头-静态、动态内容分而治之（add-an-expires-or-a-cache-control-header）" class="header-anchor">#</a> 3、添加有效期或缓存控制头 - 静态、动态内容分而治之（Add an Expires or a Cache-Control Header）</h4> <h4 id="_4、引入-gzip-压缩组件（gzip-components）"><a href="#_4、引入-gzip-压缩组件（gzip-components）" class="header-anchor">#</a> 4、引入 Gzip 压缩组件（Gzip Components）</h4> <h4 id="_5、把样式表放在顶部-head-内（put-stylesheets-at-the-top）"><a href="#_5、把样式表放在顶部-head-内（put-stylesheets-at-the-top）" class="header-anchor">#</a> 5、把样式表放在顶部 - HEAD 内（Put Stylesheets at the Top）</h4> <h4 id="_6、把脚本放在底部（put-scripts-at-the-bottom）"><a href="#_6、把脚本放在底部（put-scripts-at-the-bottom）" class="header-anchor">#</a> 6、把脚本放在底部（Put Scripts at the Bottom）</h4> <h4 id="_7、避勉-css-表达式的使用-动一下鼠标会产生超过一万次的表达式计算（avoid-css-expressions）"><a href="#_7、避勉-css-表达式的使用-动一下鼠标会产生超过一万次的表达式计算（avoid-css-expressions）" class="header-anchor">#</a> 7、避勉 CSS 表达式的使用 - 动一下鼠标会产生超过一万次的表达式计算（Avoid CSS Expressions）</h4> <h4 id="_8、把-javascript-和-css-放到外部来引入的方式使用（make-javascript-and-css-external）"><a href="#_8、把-javascript-和-css-放到外部来引入的方式使用（make-javascript-and-css-external）" class="header-anchor">#</a> 8、把 JavaScript 和 CSS 放到外部来引入的方式使用（Make JavaScript and CSS External）</h4> <h4 id="_9、减少-dns-解析（reduce-dns-lookups）"><a href="#_9、减少-dns-解析（reduce-dns-lookups）" class="header-anchor">#</a> 9、减少 DNS 解析（Reduce DNS Lookups）</h4> <h4 id="_10、压缩以最小化-javascript-和-css（minify-javascript-and-css）"><a href="#_10、压缩以最小化-javascript-和-css（minify-javascript-and-css）" class="header-anchor">#</a> 10、压缩以最小化 JavaScript 和 CSS（Minify JavaScript and CSS）</h4> <h4 id="_11、避勉重定向（avoid-redirects）"><a href="#_11、避勉重定向（avoid-redirects）" class="header-anchor">#</a> 11、避勉重定向（Avoid Redirects）</h4> <h4 id="_12、移除重复的脚本（remove-duplicate-scripts）"><a href="#_12、移除重复的脚本（remove-duplicate-scripts）" class="header-anchor">#</a> 12、移除重复的脚本（Remove Duplicate Scripts）</h4> <h4 id="_13、配置-etags（configure-etags）"><a href="#_13、配置-etags（configure-etags）" class="header-anchor">#</a> 13、配置 ETags（Configure ETags）</h4> <h4 id="_14、使-ajax-可缓存（make-ajax-cacheable）"><a href="#_14、使-ajax-可缓存（make-ajax-cacheable）" class="header-anchor">#</a> 14、使 Ajax 可缓存（Make Ajax Cacheable）</h4> <h4 id="_15、尽早地刷新下发缓存（flush-the-buffer-early）"><a href="#_15、尽早地刷新下发缓存（flush-the-buffer-early）" class="header-anchor">#</a> 15、尽早地刷新下发缓存（Flush the Buffer Early）</h4> <h4 id="_16、ajax-请求使用-get-方法（use-get-for-ajax-requests）"><a href="#_16、ajax-请求使用-get-方法（use-get-for-ajax-requests）" class="header-anchor">#</a> 16、AJAX 请求使用 GET 方法（Use GET for AJAX Requests）</h4> <h4 id="_17、post-load-components"><a href="#_17、post-load-components" class="header-anchor">#</a> 17、Post-load Components</h4> <h4 id="_18、预加载组件（preload-components）"><a href="#_18、预加载组件（preload-components）" class="header-anchor">#</a> 18、预加载组件（Preload Components）</h4> <h4 id="_19、缩减-dom-元素的数量（reduce-the-number-of-dom-elements）"><a href="#_19、缩减-dom-元素的数量（reduce-the-number-of-dom-elements）" class="header-anchor">#</a> 19、缩减 DOM 元素的数量（Reduce the Number of DOM Elements）</h4> <h4 id="_20、跨域分割组件（split-components-across-domains）"><a href="#_20、跨域分割组件（split-components-across-domains）" class="header-anchor">#</a> 20、跨域分割组件（Split Components Across Domains）</h4> <h4 id="_21、减小-iframe-的数量（minimize-the-number-of-frames）"><a href="#_21、减小-iframe-的数量（minimize-the-number-of-frames）" class="header-anchor">#</a> 21、减小 iframe 的数量（Minimize the Number of frames）</h4> <h4 id="_22、没有-404-错误提示（no-404s）"><a href="#_22、没有-404-错误提示（no-404s）" class="header-anchor">#</a> 22、没有 404 错误提示（No 404s）</h4> <h4 id="_23、缩减-cookie-大小（reduce-cookie-size）"><a href="#_23、缩减-cookie-大小（reduce-cookie-size）" class="header-anchor">#</a> 23、缩减 Cookie 大小（Reduce Cookie Size）</h4> <h4 id="_24、为组件选用无-cookie-域（use-cookie-free-domains-for-components）"><a href="#_24、为组件选用无-cookie-域（use-cookie-free-domains-for-components）" class="header-anchor">#</a> 24、为组件选用无 Cookie 域（Use Cookie-free Domains for Components）</h4> <h4 id="_25、减小-dom-访问（minimize-dom-access）"><a href="#_25、减小-dom-访问（minimize-dom-access）" class="header-anchor">#</a> 25、减小 DOM 访问（Minimize DOM Access）</h4> <h4 id="_26、开发超级事件处理器（develop-smart-event-handlers）"><a href="#_26、开发超级事件处理器（develop-smart-event-handlers）" class="header-anchor">#</a> 26、开发超级事件处理器（Develop Smart Event Handlers）</h4> <h4 id="_27、选用-不如选用-import-ie（choose-over-import）"><a href="#_27、选用-不如选用-import-ie（choose-over-import）" class="header-anchor">#</a> 27、选用 <link> 不如选用 @import - IE（Choose <link> over @import）</h4> <h4 id="_28、avoid-filters"><a href="#_28、avoid-filters" class="header-anchor">#</a> 28、Avoid Filters</h4> <h4 id="_29、优化图片（optimize-images）"><a href="#_29、优化图片（optimize-images）" class="header-anchor">#</a> 29、优化图片（Optimize Images）</h4> <h4 id="_30、优化-css-精灵（optimize-css-sprites）"><a href="#_30、优化-css-精灵（optimize-css-sprites）" class="header-anchor">#</a> 30、优化 CSS 精灵（Optimize CSS Sprites）</h4> <h4 id="_31、不要在-html-中缩放图片（don-t-scale-images-in-html）"><a href="#_31、不要在-html-中缩放图片（don-t-scale-images-in-html）" class="header-anchor">#</a> 31、不要在 HTML 中缩放图片（Don't Scale Images in HTML）</h4> <h4 id="_32、使收藏图标小一些且可缓存（make-favicon-ico-small-and-cacheable）"><a href="#_32、使收藏图标小一些且可缓存（make-favicon-ico-small-and-cacheable）" class="header-anchor">#</a> 32、使收藏图标小一些且可缓存（Make favicon.ico Small and Cacheable）</h4> <h4 id="_33、控制组件在-25k-之下（keep-components-under-25k）"><a href="#_33、控制组件在-25k-之下（keep-components-under-25k）" class="header-anchor">#</a> 33、控制组件在 25K 之下（Keep Components under 25K）</h4> <h4 id="_34、把多个组件打包到一个多段文档中（pack-components-into-a-multipart-document）"><a href="#_34、把多个组件打包到一个多段文档中（pack-components-into-a-multipart-document）" class="header-anchor">#</a> 34、把多个组件打包到一个多段文档中（Pack Components into a Multipart Document）</h4> <h4 id="_35、避勉空的图片源（avoid-empty-image-src）"><a href="#_35、避勉空的图片源（avoid-empty-image-src）" class="header-anchor">#</a> 35、避勉空的图片源（Avoid Empty Image src）</h4> <h4 id=""><a href="#" class="header-anchor">#</a></h4></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">4/11/2019, 1:36:25 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
- ←
- <a href="/CSS/2018_10_21_04.html" class="prev">css动画</a></span> <span class="next"><a href="/CSS/principle.html">CSS盒子</a>
- →
- </span></p></div> </main></div><div class="global-ui"></div></div>
- <script src="/assets/js/app.9558671e.js" defer></script><script src="/assets/js/3.515b53d6.js" defer></script><script src="/assets/js/68.c56c64fe.js" defer></script>
- </body>
- </html>
|
