<p><strong>性能优化总结：减少请求次数、减小资源大小、提高响应和加载速度、优化资源加载时机、优化加载方式</strong></p>
<p>性能分类</p>
<p>对前端工程性能的优化，我觉得可以分为两类：</p>
<ul><li>站在用户视角的主观的可感知的性能。</li><li>站在开发者视角的可客观度量的性能。</li></ul>
<p><strong>总之一句话，你的页面可以做的不快，但是你可以让你的用户觉得你很快。</strong></p>
<blockquote>
<p>客观性能是指，从用户输入url开始，到下载、解析和执行所有资源以及最终绘制的整个过程的时间度量。</p>
</blockquote>
<p>减少请求次数</p>
<ul><li>webpack里url-loader设置limit，图片超过limit大小时，解析成base64位，减少图片请求；</li></ul>
<p>减小资源大小</p>
<ul><li> <p>开启gzip 压缩或者compression-webpack-plugin，<code>gzip</code> 压缩效率非常高，通常可以达到 70% 的压缩率</p> </li><li> <p>terser-webpack-plugin插件js压缩,并且去除 console.log()和注释;</p> </li><li> <p>去除SourceMap</p> </li><li> <p>将公共资源放到CDN上，配合webpack的externals和cdn</p> </li></ul>
<p>提高打包速度</p>
<ul><li>Webpack.dllPlugin，autoDllPlugin,hardSourcePlugin抽离公共资源</li><li>happyPack,thread-loader多进程打包</li></ul>
<p>提高响应和加载速度</p>
<ul><li> <p>网络资源优化 Service Worker</p>
<ul><li> <p><code>ServiceWorker</code> 是运行在浏览器后台进程里的一段 JS，它可以做许多事情，比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等，其中最重要的作用之一就是离线资源缓存。</p> </li><li> <p><code>ServiceWorker</code> 拥有对缓存流程丰富灵活的控制能力，当页面请求到 <code>ServiceWorker</code>时，<code>ServiceWorker</code> 同时请求缓存和网络，把缓存的内容直接给用户，而后覆盖缓存</p> </li></ul></li></ul>
<p><br><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-62ef96c3f65c58a7e7997cf818486fc4.png"></p>
<ul><li>
<blockquote>
<p><strong>注意：需要HTTPS才可以使用 ServiceWorker</strong></p>
</blockquote> </li><li> <p>http缓存</p>
<ul><li><strong>缓存策略分析：</strong></li></ul><p>1、标签进入、输入url回车进入:</p>
<blockquote>
<p>1）如果没有设置 <code>no-cache</code> 和 <code>no-store</code>，默认先走强缓存路线。根据 <code>cache-control</code> （<code>expires</code> 优先级低）判断缓存是否过期，若没有过期则此时返回 <code>200(from cache)</code>。</p>
<p>2）若本地缓存已经过期再走协商缓存路线，根据之前的 <code>last-modified</code> 值去与服务器比对，若这个时间之后没有改过则去读取本地缓存，返回 <code>304(not modified)</code>。</p>
<p>3）否则返回新的资源，状态码 <code>200(ok)</code>，并更新返回响应的 <code>last-modified</code> 值。</p>
</blockquote> <p>2、按刷新按钮、F5 刷新、网页右键“重新加载”：</p>
<blockquote>
<p>这种情况下，实际是浏览器将 <code>cache-control</code> 的 <code>max-age</code> 直接设置成了 0，让缓存立即过期，直接走协商缓存路线</p>
</blockquote> <p>3、ctrl + F5 强制刷新：</p>
<blockquote>
<p>强制刷新的情况下，浏览器会强行设置请求头cache-control: <code>no-cache</code>，强制获取最新的资源，就连 请求头里的<code>if-modified-since</code> 等其他缓存协议字段都会被吃掉。</p>
</blockquote>
<ul><li><strong>什么是缓存</strong></li></ul><p>浏览器缓存(Brower Caching)是浏览器对之前请求过的文件进行缓存，以便下一次访问时重复使用，节省带宽，提高访问速度，降低服务器压力。</p> <p>HTTP 缓存一般分为两类：<strong>强缓存（200，也称本地缓存）</strong> 和 <strong>协商缓存（也称304缓存）</strong>。</p> <p>普通刷新会启用 <strong>协商缓存</strong>，忽略 <strong>强缓存</strong>。在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用 <strong>强缓存</strong>。</p>
<ul><li> <p><strong>浏览器是如何判断是否使用缓存的</strong></p> <p>第一次请求：</p> </li></ul></li></ul>
<p><br><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-fbe9c92e0794f8680ee83507bcf06571.png"></p>
<p>第二次请求相同网页：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-ee0fccc7aeb67a4278159eb4cbd4b3e4.png"></p>
<ul><li> <p><strong>强缓存(200)：浏览器不会向服务器发送任何请求，直接从本地缓存中读取文件并返回Status Code: 200 OK</strong></p> </li></ul>
<p>本地缓存是最快速的一种缓存方式，只要资源还在 |
|
转播
