前端性能优化基础知识

这篇文章主要介绍一些前端性能优化的术语定义和优化出发点

技术优化出发点

复用

很多时候我们开发都会复用一些模块，这是减少开发成本，比如造轮子。当然，在性能优化方面，复用也是非常重要的一点。

• 文件复用
  文件复用是一种工程化的开发方式，比如说我们定义一些通用样式，放在一个样式表里面，然后在各个组件都可以引用，或者作为全局样式表，这样肯定会比重复定义样式表要更优，同样其他文件（js、html等）都可以采用复用的方案。
• 模块化
  模块化的思想在早些年就出现了：将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起，最流行的CommonJS, AMD, ES6、CMD规范，都是模块化的方案，通过js来维护一个整体模块，包括动态引入css/js/html，或者动态生成
• 后端复用
  后端优化也是性能优化的一部分，虽然一般情况下没有前端优化的效果那么直接，包括接口复用，UI模块复用，通用工具API的复用等等。比如说我们再做数据传输，可能某些页面，或者某些页面的多个部分，可以只使用一个接口来传值，然后再靠前端分配资源。若这些需要后端数据传输的部分是属于同一类资源，后端可以复用接口，当然也是一种优化方案。

加载方式

加载方式是对用户而言的，提升用户的体验，文章后面会讲到一些术语，比如跳出率，调查发现用户在3到4秒时间之后若发现页面加载无响应，就会选择放弃浏览网页，也就是我们说的“跳出”。所以加载方式是非常重要的优化出发点，加载方式分为三种：同步加载、分级加载和按需加载。

• 同步加载
  同步一般指页面都加载完才给用户看，也就是用户的浏览和页面加载是同步的，这种加载方式可以用于TCP连接较少的页面加载。
• 分级加载
  同步加载和异步加载的结合，有了异步加载，我们可以选择某一些关键模块首先加载给用户浏览，比如说视频网站，可以选择关键视频模块首先加载，其余模块进行异步加载，也就是在用户开始浏览关键部分的时候进行加载其余模块。当然，还有一种加载方式叫懒加载，用户首先浏览首屏（第一眼看到的），拖动页面之后渐渐加载未加载的模块，实现用户看什么就加载什么，未进入浏览区域的就不加载。
• 按需加载
  用户不触发该功能就不加载，
  用户触发该功能，就将该模块的加载时间提前。

术语定义

介绍了优化的出发点，再来了解一些术语可能会简单一些。
首屏时间：加载到第一屏的功能点所消耗的时间，也就是用户进来页面第一眼看到的东西。
白屏时间：从进入页面到head解析的时间，用户看到白屏开始到页面出现东西的时间。
可操时间：核心模块的使用率和用户感知，用户可以操作核心模块的等待时间。比如关键模块点击事件能否触发。
连通率：用户看到视频或者听到声音的比例，这里的计算对象是用户，比如100个人只有10个人看到视频播放了，连通率就是10%。

产品类术语有：一次访问、多次访问、日活跃用户、月活跃用户、跳出率。
这里通俗地再解释一次跳出率：用户进入页面因加载太慢放弃浏览的比例。

解释了这一些重要的术语，我们可能大概知道这些术语之间的联系了。比如说白屏时间和跳出率的联系，若用户的白屏时间太久，自然会降低用户的体验，造成跳出率升高。

总结

这些知识只是性能优化的冰山一角，本文没有介绍解决方案的具体做法。

1. 我们首先要去了解浏览器的渲染原理，从向服务器请求到页面出现响应到底发生了一些什么
2. 用户访问站点的时候会做些什么，我们要站在用户的角度去思考我们应该优化哪些模块，用什么方式优化
3. 可以了解业内的通用优化方案，比如雅虎军规35条、Facebook和淘宝团队的bigpipe方案 等等。