页面性能优化的方法

• 前端性能优化的核心
  • 减少http请求数量
  • 减少请求资源的大小

1. html/css/js压缩

html代码压缩就是压缩一些文本文件中有意义，但是在HTML中不显式的字符，包括空格，制表符，换行符等，还有一些其他意义的字符，如html注释也可以被压缩

• 如何进行html压缩：

  • 使用在线网站进行压缩；
  • node.js提供的html-minifier工具
  • 后端的模板引擎渲染压缩

• css代码压缩

  • 使用html-minifier对html中的css进行压缩；
  • 使用clean-css对css进行压缩；

• js压缩与混乱（丑化）

  • 无效字符的删除（空格，回车等）
  • 删除注释
  • 使用uglify.js2对js进行压缩。

2. 合并请求

• 不合并请求的缺点：

  • 文件和文件之间有插入的上行请求，会增加N-1个网络延迟
  • 受丢包问题的影响更严重：因为每次请求都可能出现丢包的情况，减少请求能有效减少丢包的情况。
  • keep-alive本身也存在问题：经过代理服务器时可能会断开。

• 文件合并的问题：

  • 首屏渲染问题：当请求js文件的时候，如果页面渲染只依赖a.js文件，由于合并文件，需要等待合并后的a-b-c.js文件请求回来才能继续渲染，这样就会导致页面渲染速度变慢。
  • 缓存失效问题：合并后的文件a-b-c.js中只要其中一个文件（比如a.js）发生变化，那么整个合并文件都将失效，而不采用文件合并就不会出现这种情况；

• 使用建议

  • 公共库合并：将不经常发生变化的公共组件库文件合并；
  • 将不同页面的js文件单独合并：比如在单页面应用SPA中，当路由跳转到具体页面时才请求该页面需要的js文件；

3. 图片相关的优化

4. 使用CDN

大型Web应用对速度的追求并没有止步于仅仅利用浏览器缓存，因为浏览器缓存始终只是为了提升二次访问的速度，对于首次访问的加速，我们需要从网络层面进行优化，最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速。通过将静态资源(例如javascript，css，图片等等）缓存到离用户很近的相同网络运营商的CDN节点上，不但能提升用户的访问速度，还能节省服务器的带宽消耗，降低负载。

TIP

CDN怎么做到加速的呢？

其实这是CDN服务商在全国各个省份部署计算节点，CDN加速将网站的内容缓存在网络边缘,不同地区的用户就会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。因此，一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。

简单来说CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡，内容分发，调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN关键技术主要有内容存储和分发技术。

CDN是一个经策略性部署的整体系统，包括分布式存储，负载均衡，网络请求的重定向和内容管理4个要件，而内容管理和全局的网络流量管理是CDN的核心所在。通过用户就近性和服务器负载的判断，CDN确保内容以一种极高效的方式为用户的请求提供服务。

TIP

CDN原理： CDN网络是在用户和服务器之间增加Cache层

1. 客户端向服务器请求静态资源时，首先会进行dns域名解析，但这里解析出来不是直接返回源站ip，而是解析到一个智能dns服务器
2. 只能dns服务器会将离用户最近的cdn服务器的ip返回给客户端
3. 客户端向cdn服务器索取静态资源，如果该服务器有该静态资源且未过期，则直接返回静态资源给客户端
4. 如果过期了，会向源站询问是否更改，未更改则直接返回该文件并延长有效期。如果源站文件变更，重新从源站获取并缓存到自己的cdn服务器。
5. 源站也可以主动更新cdn网络下的静态资源以确保客户端最快的获取到最新的资源。