前端如何优化

性能加载时的优化

第一点：减少HTTP请求

  一个完整的 HTTP 请求需要经历 DNS 查找，TCP 握手，浏览器发出 HTTP 请求，服务器接收请求，服务器处理请求并发回响应，浏览器接收响应等等一系列复杂的过程。当你请求较多时，直接体现在了消耗性能上面，这就是为什么要将多个小文件合并为一个大文件，从而减少 HTTP 请求次数的原因。

第二点：使用服务器端渲染SSR

  我们知道，当客户端渲染时，他是获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。这个在无形之中会拖慢我们的性能。
  那么服务器端渲染又是怎么一回事呢？他就是，服务端返回 HTML 文件，客户端只需解析HTML即可，并且可以更好的SEO。

第三点：静态资源使用 CDN

  什么是CDN，CDN就是，内容分发网络，它是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

CDN原理：

当用户访问一个网站时，如果没有 CDN，过程是这样的：

1.浏览器要将域名解析为 IP 地址，所以需要向本地 DNS 发出请求。
2.本地 DNS 依次向根服务器、顶级域名服务器、权限服务器发出请求，得到网站服务器的 IP 地址。
3.本地 DNS 将 IP 地址发回给浏览器，浏览器向网站服务器 IP 地址发出请求并得到资源。

image.png

如果用户访问的网站部署了 CDN，过程是这样的：

1.浏览器要将域名解析为 IP 地址，所以需要向本地 DNS 发出请求。
2.本地 DNS 依次向根服务器、顶级域名服务器、权限服务器发出请求，得到全局负载均衡系统（GSLB）的 IP 地址。
3.本地 DNS 再向 GSLB 发出请求，GSLB 的主要功能是根据本地 DNS 的 IP 地址判断用户的位置，筛选出距离用户较近的本地负载均衡系统（SLB），并将该 SLB 的 IP 地址作为结果返回给本地 DNS。
4.本地 DNS 将 SLB 的 IP 地址发回给浏览器，浏览器向 SLB 发出请求。
5.SLB 根据浏览器请求的资源和地址，选出最优的缓存服务器发回给浏览器。
6.浏览器再根据 SLB 发回的地址重定向到缓存服务器。
7.如果缓存服务器有浏览器需要的资源，就将资源发回给浏览器。如果没有，就向源服务器请求资源，再发给浏览器并缓存在本地。

第四点：CSS 写头部，JavaScript 写底部

  所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些 CSS 和 JS 需要加载和解析很久的话，那么页面就空白了。所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS 文件。 那为什么 CSS 文件还要放在头部呢？ 因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，就要将 CSS 文件放在头部了。 另外，JS 文件也不是不可以放在头部，只要给 script 标签加上 defer 属性就可以了，异步下载，延迟执行。

第五点：字体图标代替图片图标

  字体图标就是将图标制作成一个字体，使用时就跟字体一样，可以设置属性，例如 font-size、color 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小,推荐阿里矢量图库，需要先把图标设置为SVG在上传。

为了解决兼容问题，一般Expires和Cache-Control是同时设置的。在支持Cache-Control的http协议中，Cache-Control的优先级更高。

第六点：利用缓存不重复加载相同的资源

  Expires ：为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存，在Ngnix设置，
  Cache-Control：是http1.1提出的新强缓存规范，它的值是一个相对时间，例如Cache-Control: max-age=90，代表该资源的有效时间是第一次获取资源后90秒失效。（也是现在最常用的强缓存控制字段）。

第七点：图片优化

  这里分为几个小点，
  (1).图片延迟加载；就是在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。
  (2).降低图片质量；图片100% 的质量和 90% 的质量通常看不出来区别，尤其是用来当背景图的时候。我们可以在用 PS 切背景图时， 将图片切成 JPG 格式，并且将它压缩到 60% 的质量，这样基本看不出来区别。
  (3).尽可能利用 CSS3 效果代替图片；有很多图片使用 CSS 效果（渐变、阴影等）就能画出来，这种情况选择CSS3 效果更好。因为代码大小通常是图片大小的几分之一甚至几十分之一。最后一个就是，使用雪碧图，相信大家也都明白。

第八点：通过 webpack 按需加载代码

  懒加载或者按需加载，是一种很好的优化网页或应用的方式。这种方式实际上是先把你的代码在一些逻辑断点处分离开，然后在一些代码块中完成某些操作后，立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度，减轻了它的总体体积，因为某些代码块可能永远不会被加载。

运行时的优化

第一点：减少重绘重排

  用 JavaScript 修改样式时，最好不要直接写样式，而是替换class 来改变样式。再一个就是，如果要对DOM 元素执行一系列操作，可以将 DOM 元素脱离文档流，修改完成后，再将它带回文档。推荐使用隐藏元素（display:none）或文档碎片，都能很好的实现这个方案。

第二点：使用事件委托

  事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。所有用到按钮的事件（多数鼠标事件和键盘事件）都适合采用事件委托技术， 使用事件委托可以节省内存。

第三点：if-else 对比switch

  当判断条件数量越来越多时，越倾向于使用 switch 而不是 if-else。不过，switch 只能用于case 值为常量的分支结构，而 if-else 更加灵活。

第四点：不要覆盖原生方法

  无论你的 JavaScript 代码如何优化，都比不上原生方法。因为原生方法是用低级语言写的，并且被编译成机器码，成为浏览器的一部分。当原生方法可用时，尽量使用它们，特别是数学运算和 DOM 操作。

第五点：降低CSS 选择器的复杂性

  浏览器读取选择器，遵循的原则是从选择器的右边到左边读取。所以，尽可能的降低CSS 选择器的复杂性

第六点：使用 flexbox 布局

  在早期的 CSS 布局方式中我们能对元素实行绝对定位、相对定位或浮动定位。而现在，我们有了 flexbo布局方式，它比起早期的布局方式来说更有优势，那就是性能比较好。不过 flexbox 兼容性还是有点问题，不是所有浏览器都支持它，所以要谨慎使用。

第七点：用 transform 和 opacity 属性更改来实现动画

  在 CSS 中，transforms 和 opacity 这两个属性更改不会触发重排与重绘，它们是可以由合成器单独处理的属性。