前端如何优化性能

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

第二点：使用服务器端渲染
​ 我们知道，当客户端渲染时，他是获取 HTML 文件，根据需要下载 JavaScript 文件，运行文件，生成 DOM，再渲染。这个在无形之中会拖慢我们的性能

​ 那么服务器端渲染又是怎么一回事呢？他就是，服务端返回 HTML 文件，客户端只需解析 HTML即可。

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

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

​ 1.浏览器要将域名解析为 IP 地址，所以需要向本地 DNS 发出请求。

2.本地 DNS 依次向根服务器、顶级域名服务器、权限服务器发出请求，得到网站服务器的 IP 地址。

3.本地 DNS 将 IP 地址发回给浏览器，浏览器向网站服务器 IP 地址发出请求并得到资源。

img

​ 如果用户访问的网站部署了 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 等等，非常方便。并且字体图标是矢量图，不会失真。还有一个优点是生成的文件特别小。

第六点：利用缓存不重复加载相同的资源
​ 为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用缓存。

第七点：图片优化
​ 这里分为几个小点，

首先是：图片延迟加载；就是在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才去加载真正的图片，这就是延迟加载。对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用图片延迟加载。
第二个就是：降低图片质量；图片100% 的质量和 90% 的质量通常看不出来区别，尤其是用来当背景图的时候。我们可以在用 PS 切背景图时， 将图片切成 JPG 格式，并且将它压缩到 60% 的质量，这样基本看不出来区别。
第三个就是：尽可能利用 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 这两个属性更改不会触发重排与重绘，它们是可以由合成器单独处理的属性。