项目的性能优化

图片的优化

• base64

首先盲目使用base64并不能带来性能的优化，首先图片转成base64之后，体积会增大1/3，虽然减少了图片带来的http请求，但如果base64体积过大，会造成css文件体积臃肿，css文件的体积直接影响渲染，导致用户会长时间注视空白屏幕。html和 css会阻塞渲染，而图片不会，适得其反。在webpack配置上，默认图片转成base64的体积一般都是1k以内，所以对小图进行base64转码是优化http请求，保证页面加速渲染，加快页面加载速度。

• svg

小图除了可以使用base64之外，还能使用svg格式的文件来取代图形字体存在本地，其中svg的效果更优，因为是矢量图不易失真，且相较于icon-font只能是单色和容易受line-height等样式影响的缺点，svg能随意调整图片大小，以及自定义颜色。

• CDN

对于大图来说可以将其挂到项目的图片CDN域名下，它是专门为图片做优化的，通常包含缩放、格式转换等。可以把它看成是一个API，通过传入尺寸、质量、格式等参数，获取到对应的图片内容。（CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在网络之上的内容分发网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术）

• webp

WebP是Google在2010年开发的一种文件格式。它在保持图像质量不变的同时，为图像提供了更高的压缩率，可以节省更多的带宽。（与PNG相比，无损WebP压缩图像最多可提高26％），目前存在的问题是有些浏览器（Safari和IE）不支持该webp格式，可以使用WebP Express插件使用WebP转换库来更改图像。该插件用作转换器，可为支持此格式的浏览器生成WebP，向不支持该格式的浏览器显示JPG或PNG。还有本地手动判断能否使用webp格式的方法：（1）Google官方文档是这样处理的（先加载一个WebP图片，如果能获取到图片的宽度和高度，就说明是支持WebP的，反之则不支持）（2）在服务端根据请求header信息判断浏览器是否支持webp，在图片请求发出的时候，Request Headers 里有 Accept，服务端可以根据Accept 里面是否有 image/webp 进行判断。

react里面能做的优化

• 从生命周期来看，可以在shouldComponentUpdate里面进行浅比较，来决定是否渲染。其中对于类组件，可以使用pureComponent，对于函数组件，可以使用memo，来自动实现对传入的props，state的浅比较。
• 在constructor中去绑定函数的指向，而不是在事件声明时绑定或者使用匿名的函数式声明事件，因为这些都会在render中再次执行，
• 循环中加入的key值使用唯一值而不是下标，因为下标有可能改变，而导致同样的组件的key值改变，使用唯一值能有效提高diff算法比对新旧树时的性能。
• 提交表单时候进行防抖处理

第三方库/浏览器方面的优化

• 虚拟列表

虚拟列表其实是按需显示的一种实现，即只对可见区域进行渲染，对非可见区域中的数据不渲染或部分渲染的技术，从而达到极高的渲染性能。

虚拟列表的实现，实际上就是在首屏加载的时候，只加载可视区域内需要的列表项，当滚动发生时，动态通过计算获得可视区域内的列表项，并将非可视区域内存在的列表项删除。

• webworker

JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。

在主线程运行的同时，worker线程也在运行，相互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样做的好处是主线程可以把一些计算密集型或高延迟的任务交给worker线程执行，被 Worker 线程负担了，这样主线程（通常负责 UI 交互）就会很轻松流畅，不会被阻塞或拖慢。

而且Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该注意及时关闭。

worker线程的使用有一些注意点：

（1）同源限制：分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

（2）文件限制：为了安全，Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本必须来自网络，且需要与主线程的脚本同源。

（3）DOM操作限制：worker线程在与主线程的window不同的另一个全局上下文中运行，其中无法读取主线程所在网页的DOM对象，也不能获取 document、window等对象，但是可以获取navigator、location(只读)、XMLHttpRequest、setTimeout等浏览器API。

（4）通信限制：worker线程与主线程不在同一个上下文，不能直接通信，需要通过postMessage方法传递消息来通信。

（5）脚本限制：worker线程不能执行alert、confirm，但可以用 XMLHttpRequest 对象发出ajax请求。

webpack的优化

如何检测性能优化

使用浏览器自带的performance，通过录制操作，得出性能数据，会呈现出帧率统计、消息时间轴、函数调用栈等信息，以及各种时间的比例。