前端性能优化

1.尽量减少 HTTP 请求

有几种常见的方法能切实减少 HTTP 请求：
1、 合并文件：合并脚本跟样式文件，如可以把多个 CSS 文件合成一个，把多个 JS 文件合成一个。
2、 合并图片：CSS Sprites 利用 CSS background 相关元素进行背景图绝对定位,把多个图片合成一个图片。
1.1 使用 HTTP / 2.0

1.因为浏览器会有并发请求限制，在 HTTP / 1.1 时代，每个请求都需要建立和
断开，消耗了好几个 RTT 时间，并且由于 TCP 慢启动的原因，加载体积大
的文件会需要更多的时间
2. 在 HTTP / 2.0 中引入了多路复用，能够让多个请求使用同一个 TCP 链接
，极大的加快了网页的加载速度。并且还支持 Header 压缩，进一步的减
少了请求的数据大小

2.使用浏览器缓存
良好的缓存策略可以降低资源的重复加载提高网页的整体加载速度
通常浏览器缓存策略分为两种：强缓存和协商缓存
特别是对于JS、CSS、图片等变动较少的文件，使用强缓存。
强缓存

实现强缓存可以通过两种响应头实现：Expires和 Cache-Control 。强缓存表示在缓存期间不需要请求，state code为 200

Expires: Wed, 22 Oct 2018 08:41:00 GMT

Expires 是 HTTP / 1.0 的产物，表示资源会在 Wed, 22 Oct 2018 08:41:00 GMT
后过期，需要再次请求。并且 Expires 受限于本地时间，如果修改了本地时间，可能会造成缓存失效

Cache-control: max-age=30

Cache-Control 出现于 HTTP / 1.1，优先级高于 Expires 。该属性表示资源会在 30
秒后过期，需要再次请求

协商缓存

如果缓存过期了，我们就可以使用协商缓存来解决问题。协商缓存需要请求，如果缓存有效会返回 304
协商缓存需要客户端和服务端共同实现，和强缓存一样，也有两种实现方式

Last-Modified 和 If-Modified-Since

Last-Modified 表示本地文件最后修改日期，If-Modified-Since 会将
Last-Modified的值发送给服务器，询问服务器在该日期后资源是否有更新，有更新的话就会将新的资源发送回来
但是如果在本地打开缓存文件，就会造成 Last-Modified 被修改，所以在 HTTP / 1.1 出现了 ETag

ETag 和 If-None-Match

ETag 类似于文件指纹，If-None-Match 会将当前 ETag 发送给服务器，询问该资源 ETag是否变动，有变动的话就将新的资源发送回来。并且 ETag 优先级比 Last-Modified 高

选择合适的缓存策略

对于大部分的场景都可以使用强缓存配合协商缓存解决，但是在一些特殊的地方可能需要选择特殊的缓存策略
对于某些不需要缓存的资源，可以使用 Cache-control: no-store ，表示该资源不需要缓存
对于频繁变动的资源，可以使用 Cache-Control: no-cache 并配合 ETag 使用，表示该资源已被缓存，但是每次都会发送请求询问资源是否更新。
对于代码文件来说，通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用，然后对文件进行指纹处理，一旦文件名变动就会立刻下载新的文件

3.DNS预解析 图片,JS的预载入
3.1.DNS预解析
DNS 解析也是需要时间的，可以通过预解析的方式来预先获得域名所对应的 IP

<meta http-equiv="x-dns-prefetch-control" content="on">
<meta http-equiv="x-dns-prefetch-control" content="off">

<link rel="dns-prefetch" href="//blog.poetries.top">

3.1 预加载

在开发中，可能会遇到这样的情况。有些资源不需要马上用到，但是希望尽早获取，这时候就可以使用预加载
预加载其实是声明式的 fetch ，强制浏览器请求资源，并且不会阻塞 onload 事件，可以使用以下代码开启预加载

<link rel="preload" href="http://example.com">

预加载可以一定程度上降低首屏的加载时间，因为可以将一些不影响首屏但重要的文件延后加载，唯一缺点就是兼容性不好

3.2 预渲染

可以通过预渲染将下载的文件预先在后台渲染，可以使用以下代码开启预渲染

<link rel="prerender" href="http://poetries.com">

预渲染虽然可以提高页面的加载速度，但是要确保该页面百分百会被用户在之后打开，否则就白白浪费资源去渲染

4.懒执行与懒加载
4.1 懒执行

懒执行就是将某些逻辑延迟到使用时再计算。该技术可以用于首屏优化，对于某些耗时逻辑并不需要在首屏就使用的，就可以使用懒执行。懒执行需要唤醒，一般可以通过定时器或者事件的调用来唤醒

4.2 懒加载

懒加载就是将不关键的资源延后加载
懒加载的原理就是只加载自定义区域（通常是可视区域，但也可以是即将进入可视区域）内需要加载的东西。对于图片来说，先设置图片标签的 src 属性为一张占位图，将真实的图片资源放入一个自定义属性中，当进入自定义区域时，就将自定义属性替换为 src属性，这样图片就会去下载资源，实现了图片懒加载
懒加载不仅可以用于图片，也可以使用在别的资源上。比如进入可视区域才开始播放视频等

5.文件优化
5.1图片优化

对于如何优化图片，有 2 个思路

减少像素点
减少每个像素点能够显示的颜色

5.2 图片加载优化

1.不用图片。很多时候会使用到很多修饰类图片，其实这类修饰图片完全可以用 CSS 去代替。
2. 对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽。一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片
3.小图使用 base64格式.
4.将多个图标文件整合到一张图片中（雪碧图）.
5.选择正确的图片格式：
.对于能够显示 WebP 格式的浏览器尽量使用 WebP 格式。
因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
.小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
.照片使用 JPEG

5.3 其他文件优化

CSS文件放在 head 中
将 script 标签放在 body 底部，因为 JS 文件执行会阻塞渲染。当然也可以把 script 标签放在任意位置然后加上 defer ，表示该文件会并行下载，但是会放到 HTML 解析完成后顺序执行。对于没有任何依赖的 JS文件可以加上 async,表示加载和渲染后续文档元素的过程将和 JS 文件的加载与执行并行无序进行。 执行 JS代码过长会卡住渲染，对于需要很多时间计算的代码
服务端开启文件压缩功能
可以考虑使用 Webworker。Webworker可以让我们另开一个线程执行脚本而不影响渲染。
1、将样式文件放在页面顶部
如果样式表任在加载，构建呈现树就是一种浪费，样式文件放在页面底部可能会出现两种情况： 1、 白屏 2、 无样式内容的闪烁
2、将脚本放在底部
脚本放在顶部带来的问题， 1、 使用脚本时，对于位于脚本以下的内容，逐步呈现将被阻塞 2、 在下载脚本时会阻塞并行下载
放在底部可能会出现JS错误问题，当脚本没加载进来，用户就触发脚本事件。 要综合考虑情况。
3、使用压缩组件
IE和Firefox浏览器都支持客户端GZIP，传输之前，先使用GZIP压缩再传输给客户端，客户端接收之后由浏览器解压，这样虽然稍微占用了一些服务器和客户端的CPU，但是换来的是更高的带宽利用率。对于纯文本来讲，压缩率是相当可观的。如果每个用户节约50%的带宽，那么租用来的那点带宽就可以服务多一倍的客户，并且缩短了数据的传输时间。

6.CDN
CDN(内容分发网络)

静态资源尽量使用 CDN 加载，由于浏览器对于单个域名有并发请求上限，可以考虑使用多个 CDN 域名。对于 CDN加载静态资源需要注意 CDN 域名要与主站不同，否则每次请求都会带上主站的 Cookie