前端性能优化

一般我们用性能去形容什么呢？比如：我们会说这个手机性能不错，这个电脑性能不错哇~
那这里的性能主要是指什么呢？
我们评价计算机性能又主要从哪些方面进行评价呢？
快可能是我们的第一诉求了。其后续看不见的字长，或者说明书上可见的内存储器的容量，外存储器的容量可能还是一些次要东西。
同理可见的是，快也是我们前端性能的诉求点。
我们知道，网站访问的过程从用户输入网站域名开始，通过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前端高效开发实战）
下图是脑图

转载于:https://www.cnblogs.com/smart-girl/p/9651293.html