前端性能优化——概念

随着前端技术的不断迭代，页面所展示的内容也越来越丰富，前端开发者可以做的事情越来越多，责任也越来越大。而一个优秀的Web应用已经不仅仅停留在给用户提供满足需求的功能，同时也要能解决随之而来的性能挑战。

要具备性能优化的能力，除了平时通过不断的学习和实践积累，建立一个完整的前端性能知识体系也是尤为重要的。我们除了要知道如何去做，也要明白为什么要这样处理，不要顾此失彼，以至于为了一个地方的优化反而影响到了其他地方的性能体验。

什么是性能优化

简单来说，就是更好的体验。功能是核心，性能就是点缀，就像css之于html，不是必不可少的，但又不能没有，可以找个网站试试把css文件删掉，再看看这个页面你还可以继续看下去吗。这个性能体验也是如此，例如一个页面打开要一分钟，一个交互操作半天没反应，这样的页面还会让人会继续使用下去吗。

性能优化是由竞争带来的，可以说没有竞争就不会有性能困扰。就如12306网站，大学时的抢课网站，再难用，都要忍着继续使用。在没有竞品出现的情况下，性能体验就不是一个不得不解决的问题，只有在市场竞争中，性能优化才变成我们必须要面对的问题。

性能的影响

• 用户的留存：指的是用户自登录注册起，经过一段时间，还在使用的用户数。

• 网站的转化率：指的是用户进行了某项目标行为的访问次数与总访问次数的比率。

• 体验与传播

性能的评估

RAIL，是 Response, Animation, Idle, 和 Load 的首字母缩写，是一种由Google Chrome团队2015年提出的性能模型，用于提升浏览器内的用户体验和性能，其主要目标是让用户满意。

• response

• animation

• idle

• load

Response: 事件处理最好在50ms内完成

目标：用户的输入到响应的时间不超过100ms，给用户的感受是瞬间就完成了，超过这个时间用户能感知到延迟。

优化方案

• 事件处理函数在50ms内完成，考虑到空闲任务（idle task）的情况，事件会排队，等待时间大概在50ms。

• 复杂的js计算尽可能放在后台，避免对用户输入造成阻塞。

• 超过50ms的响应，一定要提供反馈，比如倒计时，进度百分比等。

Animation: 在10ms内产生一帧

目标：产生每一帧的时间不要超过10ms，因为人眼可以感知到每秒渲染60帧的平滑动画，每一帧的时间在16ms多，但浏览器需要用6ms来渲染每一帧，因此只有10ms以内的时间。

优化方案

• 在一些高压点上，比如动画，不要去挑战cpu，尽可能地少做事，如：取offset，设置style等操作。尽可能地保证60帧的体验。

• 在渲染性能上，针对不同的动画做一些特定优化。

ps：动画不只是UI的视觉效果，以下行为都属于

• 视觉动画，如渐隐渐显，tweens，loading等

• 滚动，包含弹性滚动，松开手指后，滚动会持续一段距离

• 拖拽，缩放，经常伴随着用户行为

Idle: 最大化空闲时间

目标：最大化空闲时间，以增大50ms内响应用户输入的几率。

优化方案

• 用空闲时间来完成一些延后的工作，如先加载页面可见的部分，然后利用空闲时间加载剩余部分。

• 在空闲时间内执行的任务尽量控制在50ms以内。

• 如果用户在空闲时间任务进行时进行交互，必须以此为最高优先级，并暂停空闲时间的任务。

Load: 传输内容到页面可交互的时间不超过5秒

目标：优化加载速度，页面在1000ms内就绪。

优化方案

• 禁用渲染阻塞的资源，延后加载，让第一次加载的资源更少。

ps：这里的1000ms内完成加载并渲染出页面，并非要加载所有的资源，只是从用户感知的角度，只要关键渲染路径完成即可。

性能的方案

一个页面的生命周期，是在浏览器地址栏输入一个URL到整个页面渲染出来的过程。而性能的优化方案就离不开这个生命周期，从域名解析，建立TCP连接，前后端交互，压缩与解压缩，以及关键渲染路径等。这就是需要把这些阶段拆解，才能很好的清楚该如何对每个细节电的优化，同时能构建出一个完整的知识框架。

以下简单的拆分一些优化方面的思路：

1. 传输资源的优化

2. 加载过程的优化

3. JS优化

4. 关键渲染路径优化

5. 本地存储和浏览器缓存

这些应该都是前端开发者可以去做到的优化方向。

小结

性能优化涉及到方方面面的知识，从计算机原理，操作系统到网络通信，浏览器内核，再到DNS解析，负载均衡，页面渲染等，所以需要有一个清晰的思考框架，知道如何分析系统的性能如何，知道各种性能表现产生的原理，知道采用何种技术方案来提高性能表现。

渐渐了解有关性能优化的整个过程，越发感觉自己的掌握的知识都太表面，希望和其他的小伙伴一起进步，扩宽自己的知识体系。