前端性能优化

通常咱们用性能去形容什么呢？好比：咱们会说这个手机性能不错，这个电脑性能不错哇~
那这里的性能主要是指什么呢？
咱们评价计算机性能又主要从哪些方面进行评价呢？
快多是咱们的第一诉求了。其后续看不见的字长，或者说明书上可见的内存储器的容量，外存储器的容量可能仍是一些次要东西。
同理可见的是，快也是咱们前端性能的诉求点。
咱们知道，网站访问的过程从用户输入网站域名开始，经过DNS解析找到目标服务器，目标服务器收到请求后执行服务器及数据库
等一系列操做，并将响应数据通过互联网发送到用户浏览器中，最终由浏览器处理响应数据并完成网页的渲染呈现。
在网页的资源请求与加载阶段，咱们主要是要实现网站的快速响应，首先须要考虑的就是减小资源访问及加载阶段所消耗的时间。
在网页的渲染阶段，网页的渲染速度就很重要了，主要是提升浏览器渲染的性能，最须要避免的就是从新布局（重绘后的合并像【transform
等的合并通常发生在GPU硬件渲染中】）。
最后javascript脚本的执行速度也是优化过程当中须要注意的。
针对上述优化的方向，雅虎性能优化法则提出了一些优化的方法
（1）减小HTTP请求（经过nignx配置Combo合并HTTP请求）
（2）压缩js,css代码
（3）去除重复引用的脚本
（4）可缓存的Ajax
（5）延迟加载非必要的脚本
（6）预加载（指在浏览器空闲阶段预加载未来用户可能会访问到的内容）
（7）减小DOM元素的数量
（8）减小DOM访问次数（对须要常常访问的DOM对象缓存）
（9）避免使用iframe（即便引入页面内容为空，也须要消耗时间下载，会阻止页面加载，而且缺乏语义）
（10）优化图像（压缩图片，将 GIF图片格式转换成png格式）
（11）优化css Sprites
（12）不要在html中缩放图片(在HTML中设置的图片长宽小于实际下载图片长宽，很显然实际加载的图片比须要的图片体积更大)
（13）减小cookie体积(cookie信息经过HTTP文件头在服务器和浏览器之间传递，所以保持Cookie尽量的小，能够减小用户的数据传输时间)
提供好的用户体验一直是web开发者追求的目标，一个大量引用静态资源的web页面，能够经过缓存将图片脚本样式文件保存在客户端，使其
不用每次都向服务器请求，能够节省大量时间。（1）客户端缓存，在请求一个新的文件时，浏览器发送HTTP请求到服务端，接到服务端的响应后
浏览器会将请求的资源存储在本地。(2)HTTP头部有缓存的相关属性。
咱们也能够经过资源按需加载的方式来提高应用的性能。
（1）基于requireJS的按需加载
RequireJS是一种AMD的实现，采用异步加载模块，模块的加载不会影响后续代码的运行。AMD经过require函数加载模块，解决了模块之间的依
赖关系提高应用的总体质量和性能。

（2）基于webpack按需加载
CommonJS规范自己采用同步加载模块，但也提出了Module/Async/A规范，定义了一套require.ensure用于处理异加载。
webpack做为一个模块加载器同时也是一个打包工具，因此开发者不须要特地去定义模块，webpack会使用Code Splitting技术实现分批打包和按需加载。

（3）图片懒加载
原理：经过监听页面滚动事件，当图片进入可视区，再进行图片的加载
除了上述以外，咱们还能够根据不一样网络类型进行优化，
（1）进行弱网图片优化（图片一般是一个页面上最消耗网络资源的内容，经过雪碧图，图片格
式，字体图标等方面进行优化）。
（2）弱网缓存优化（在单页应用中，可能会同时拉取多个接口的数据，在2G网络中，页面会长时间处于加载数据的
状态，开发者能够经过选择在内存中缓存请求数据，解决这个问题）。
Web优化黄金法则中指出，对于访问一张网页只有10%-20%的时间花在下载服务器响应的HTML文件，80%-90%的时间用在前端资源的下
载和执行。以上是几种优化的方法，但愿可以应用于互联网产品中，持续的保持站点的快速响应和流畅交互。

本文提取自（移动web前端高效开发实战）
下图是脑图