前端优化知识点

CDN的缓存与回源策略

​ CDN是内容分发网络，指一组分布在各个地区的服务器，存储着数据的副本。CDN的核心功能有两个：一是缓存，二是回源。缓存是指，将静态资源copy一份，放在CDN服务器上。静态资源，比如说JS，CSS,图片等不需要业务服务器进行计算得资源。

​ 回源是指，当请求的资源在CDN上找不到时（一般是缓存的数据过期了），就会向根服务器去请求这个资源。根服务器本质上是业务服务器，用来生成动态页面或返回非静态页面，动态资源是指后端实时动态生成得资源，比如JSP或者依赖服务端渲染而得到的页面。非纯静态资源是指，需要服务器做额外计算的html页面，比如说页面的权限认证。

实际应用

​ 静态资源访问量大，访问频率高，所以加载速度是前端优化的重要指标。大型电商，都是将静态资源放到CDN中。如果CDN域名与网站域名不一致，还可以带来一个额外的好处就是，当用户访问CDN上的静态资源时，不会携带cookie，避免性能消耗

浏览器缓存

使用浏览器缓存

项目优化

http中优化有两个方向：减少请求次数、减少单次请求所花费的时间。这些可以通过webpck来实现资源的压缩与合并。

webpack优化方案：

• Babel-loader使用exclude来避免转义某些文件，比如说node_modules，或者通过设置cacheDirectory开启缓存将转义结果缓存到文件系统。

• 使用DllPlugin管理第三方库，将第三方库单独打包到一个文件中，这个文件就是一个依赖库，只有当依赖自身的版本发生更新时才会被重新打包。

  方法：在plugin中对DllPlugin进行配置

• 使用happypack，将loader由单进程变为多进程，由于webpack是单进程的而我们的CPU是多核的，使用happypack充分利用CPU的优势。

  使用插件的形式引入，在rules和plugin中配置

• 文件结构可视化：使用文件结构可视化，找出体积过大的原因

• 利用tree-shaking：删除冗余代码，在编译过程中获取没有被使用的代码，打包的时候去除。

• 按需加载：一次不加载所有的文件内容，只加载所需的部分。当需要更多内容的时候，再对用到的内容进行加载。

  方法：webpack中的path与路由进行配置，核心是路由中的require.ensure方法，异步方法，组件会被单独打包成一个文件，当路由跳转时，异步方法的回调才会生效。React-router4中的code-splitting实际上也是用require.ensure实现的。

http压缩和Gzip原理

http压缩是指为了缩小http内容，进行重新编码的过程。使用http压缩的话，数据中从服务器发送过来的时候就已经压缩好了，所以浏览器要声明自己所支持的格式，不支持压缩的浏览器将下载未经压缩的数据。常见的压缩有Gzip和Deflate。

Gzip实现压缩的方法很简单：在request headers加上accpt-encoding：gzip

Gzip是高效的，通常压缩后能减少70%的大小，它的原理是从一个文本文件中找到重复的字符串，然后临时替换，从而使文件变小。

一般来说，Gzip是服务器的事情，压缩是在服务器中进行的。我们通过服务器压缩的时间和CPU开销（指的是浏览器解析压缩文件的开销），来换取传输过程时间的减少

页面优化

从页面的加载三阶段（加载、交互、关闭）来看，页面优化也可分为三部分

加载阶段

主要是提高关键资源的加载速度，关键资源是指能够阻塞首次渲染的资源。可以从三个方面来考虑，减少关键资源个数，减少关键资源大小，减少RTT次数（从发送端发送请求到收到接收端的确认的时间），方法具体如下。

• 减少关键资源个数：可以将js和css改为内联形式、js如果不操作dom，css的话，改为异步加载，async或defer。

• 减少关键资源大小：压缩css和js，减少注释

• 减少RTT次数：使用CDN

交互阶段

关键在于加速渲染进程中渲染帧的速度。交互阶段的渲染一般是由

图片优化

雪碧图和base64

雪碧图是指将许多小的图片（如logo），合成在一张图片上，然后利用css背景定位来显示部分图片。这样就可以减少请求次数了。

base64作为雪碧图的补充而存在，base64是一种编码方式，用于传输8bit字节码，用64个字符表示二进制数据。对图片进行base64编码，将结果直接写入html或css中，浏览器就会显示图片而不用进行网络请求。

可以用webpack的url-loader来实现，可以根据图片大小判断是否要进行base64编码。

base64缺点在于转换后的体积变大，所以只能用于小图。并且转换后图片不能合成雪碧图，适用与更新频率很低的图片。

关于图片格式

jpg：有损压缩，体积小，加载快，不支持透明。常用于显示大图，图片质量较好，体积不大

png：无损压缩，体积大，质量高，支持透明。主要用于呈现小logo、颜色简单对比强烈的图片。

svg：矢量图，体积小，不失真，兼容性好。常用于图标。