前端常用的优化技巧

前端优化

​ 前端的性能优化是比较重要的一个版块内容，适当的优化可以提升网站的性能。而前端优化有很多方面，我们来慢慢了解，但是不是所有的优化都是适合你当前的项目的，看你项目的需求，来选择适合的方法。

调试工具

我们经常使用的就是浏览器的控制台来查看网站在交互的信息，和一些过程

比如在Network面板，这里可以看到我们与服务器交互的信息，发出请求的数量，请求的时长，还有各种js文件的读取。

performance面板，我们可以看到从请求到解析各种文件的所需时间

优化方法

1、减少 HTTP 请求

网站的页面中很多东西都是通过服务器来返回来，然后再渲染到页面。所以说项目文件越大，页面请求获取的时间就长，反之，文件小，时间就短。所以我们在减少HTTP请求的时候，也要对我们项目的文件（css，html，js，图片）进行压缩和优化。同时也可以把多个文件合并到一个文件中去，减少文件的数量也可以减少请求次数。

在请求获取到数据后，多页面使用的，可以使用本地存储，把数据存到本地，方便多个地方使用，减少请求数据。

2、缓存

缓存通过复用之前的获取过的资源，可以显著提高网站和应用程序的性能，合理的缓存不仅可以节省巨大的流量也会让用户二次进入时身心愉悦，如果一个资源完全走了本地缓存，那么就可以节省下整个与服务器交互的时间

（1）Ajax在发送的数据成功后，为了提高页面的响应速度和用户体验，会把请求的URL和返回的响应结果保存在缓存内，当下一次调用Ajax发送相同的请求 （URL和参数完全相同）时，它就会直接从缓存中拿数据。在进行Ajax请求的时候，可以选择尽量使用get方法，这样可以使用客户端的缓存，提高请求速度。

（2）浏览器缓存、CDN、反向代理、本地缓存、分布式缓存、数据库缓存

（3）http缓存：HTTP 缓存一般分为两类：强缓存（也称本地缓存） 和 协商缓存（也称304缓存）。普通刷新会启用 协商缓存，忽略 强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下，浏览器才会启用 强缓存。

• 强缓存（200）

  本地缓存是最快速的一种缓存方式，只要资源还在缓存有效期内，浏览器就会直接在本地读取，不会请求服务端。

• 协商缓存（304）

  协商缓存，顾名思义是经过浏览器与服务器之间协商过之后，在决定是否读取本地缓存，如果服务器通知浏览器可以读取本地缓存，会返回304状态码，并且协商过程很简单，只会发送头信息，不会发送响应体。

3、压缩

（1）合理的压缩资源可以有效减少传输体积，减少传输体积的结果就是用户更快的拿到资源开始解析。压缩在各个阶段都会出现，比如上面提到的HTTP2的首部压缩，进行到这一步的压缩是指对整个资源文件进行的压缩。浏览器在发起请求时会在headers中携带accept-encoding: gzip, deflate, br，告知服务器客户端可以接受的压缩算法，之后响应资源会在响应头中携带content-encoding: gzip告知本文件的压缩算法。

（2）服务端配置gzip压缩后可大大缩减资源大小。gzip 压缩效率非常高，通常可以达到 70% 的压缩率，也就是说，如果你的网页有 30K，压缩之后就变成了 9K 左右。

（3）图片压缩：图片压缩是常用的手法，因为设备像素点的关系，UI给予的图片一般都是 x2，x4的，所以压缩就非常有必要

4、加载

（1）延迟加载

页面初始加载时哪些内容是绝对必需的？不在答案之列的资源都可以延迟加载。比如：非首屏使用的数据、样式、脚本、图片等；用户交互时才会显示的内容。

遵循「渐进增强」理念开发的网站：JavaScript用于增强用用户体验，但没有（不支持） JavaScript也能正常工作，完全可以延迟加载JavaScript。

• 改变图片的大小；降低图片的质量；图片懒加载；
• 压缩减少各种文件

（2）预加载

预先加载利用浏览器空闲时间请求将来要使用的资源，以便用户访问下一页面时更快地响应。无条件预先加载：页面加载完成（load）后，马上获取其他资源。以 google.com 为例，首页加载完成后会立即下载一个 Sprite 图片，此图首页不需要，但是搜索结果页要用到。有条件预先加载：根据用户行为预判用户去向，预载相关资源。比如search.yahoo.com开始输入时会有额外的资源加载。Chrome 等浏览器的地址栏也有类似的机制。有「阴谋」的预先加载：页面即将上线新版前预先加载新版内容。网站改版后由于缓存、使用习惯等原因，会有旧版的网站更快更流畅的反馈。为缓解这一问题，在新版上线之前，旧版可以利用空闲提前加载一些新版的资源缓存到客户端，以便新版正式上线后更快的载入。

（3）路由懒加载

5、CDN

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

如果用户访问的网站部署了 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. 如果缓存服务器有浏览器需要的资源，就将资源发回给浏览器。如果没有，就向源服务器请求资源，再发给浏览器并缓存在本地。

6、代码优化

（1）减少不必要的代码，删除注释，优化可以数据结构

（2）发布项目是，删除console