持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情
1. 减少http请求
一个完整的http请求要经历DNS查找，TCP握手，浏览器发送请求，服务器接收请求进行数据处理，再返回数据，浏览器等待并接收返回数据。
2. 静态资源使用CDN
内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。
3. 将 CSS 放在文件头部，JavaScript 文件放在底部
- CSS 执行会阻塞渲染，阻止 JS 执行
- JS 加载和执行会阻塞 HTML 解析，阻止 CSSOM 构建
如果这些 CSS、JS 标签放在 HEAD 标签里，并且需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部（不阻止 DOM 解析，但会阻塞渲染），等 HTML 解析完了再加载 JS 文件，尽早向用户呈现页面的内容。
那为什么 CSS 文件还要放在头部呢？
因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将 CSS 文件放在头部了。
另外，JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。
4. 使用字体图标 iconfont 代替图片图标
字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。 中文（字体图表），现在比较流行的一种用法。使用字体图表有几种好处
- 矢量
- 轻量
- 易修改
- 不占用图片资源请求。
就像上面说的雪碧图，如果都用字体图标来替换的画，一次请求都免了，可以直接打到bundle包中。
使用前提是UI给点力，设计趋向于字体图标，提前给好资源，建立好字体图标库。
5. 善用缓存，不重复加载相同的资源
为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 或 max-age 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。而 max-age 是一个相对时间，建议使用 max-age 代替 Expires 。
6. 压缩文件
压缩文件可以减少文件下载时间，让用户体验性更好。
得益于 webpack 和 node 的发展，现在压缩文件已经非常方便了。
在 webpack 可以使用如下插件进行压缩：
- JavaScript：UglifyPlugin
- CSS ：MiniCssExtractPlugin
- HTML：HtmlWebpackPlugin
7. 图片优化
图片懒加载
图片在可视化区域的时候，再进行图片资源的请求
响应式图片
响应式图片的优点是浏览器能够根据屏幕大小自动加载合适的图片。
通过 picture 实现
<picture>
<source srcset="banner_w1000.jpg" media="(min-width: 801px)">
<source srcset="banner_w800.jpg" media="(max-width: 800px)">
<img src="banner_w800.jpg" alt="">
</picture>
复制代码也可以通过媒体查询的方式实现
减少图片的使用，能使用css3的使用css3动画代替
调整图片大小
能使用缩略图的地方，使用缩略图，在需要放大的时候再请求大像素的图片。
减少图片的质量
在对图片质量要求不高的情况下，降低图片质量，肉眼又分不出来的程度。
使用 webp 格式的图片
WebP 的优势体现在它具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量；同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性，在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。