什么是性能优化？
就是在通过改进程序的结构和执行过程，使得我们能在更短的时间内，利用更少的资源来完成同样的工作。
对于编译型语言来说，可以通过改进数据结构、算法，将中间代码转化为本地代码，缩短汇编指令（避免类型转换），读写高速缓存，控制垃圾回收等方法来提升程序性能。
性能优化，往往提升空间是很有限的，而且需要投入相当的精力，所以除了平时养成习惯，建议将性能优化放在最后，很多情况下它都不是必须的。
对于，我们前端来说，性能优化，主要指的是，提升页面的加载速度，避免内存泄露，避免频繁的重绘，改进算法（尽量使用JS的原生函数）。下面我们主要讨论加载速度
页面加载速度
页面的加载，包括从请求、响应、传输、接收、解析、渲染的整个过程。我们要缩短整个过程的时间，将页面更快速的展示在用户面前。
我们分为三个部分系统的来讲，
1、服务器：
服务器上我们需要做以下几件事情，合并资源文件（JS、CSS、图标），然后压缩资源文件。若果非静态页面，还将涉及数据获取，页面缓存。我们通常的js文件目录如下
/js
/src
/build
src目录中存放，源文件，build目录存放压缩后的文件，最后可以通过自动构建工具来合并请求的文件，发送给请求者。
（图片的处理请参考我前面的博客。）
数据查询这方面，不是前端的范畴，不多做讨论。
2、传输：
传输路径和带宽是传输中最影响时间的，我们前面已经确保了传输的数据量尽可能的小，故不再考虑。
我们应当尽可能的避免多次请求，这个过程由于上述原因可能非常的慢。
使用cdn来优化传输路径是一个不错的选择，但是这个需要Money，后期维护也是很麻烦的，稍不注意就会出现同步问题，cdn的节点通常可能很多，遍布全国，发布一个东西是这样的，香港已生效，天津已生效，上海已生效…杭州总部已生效，发布成功，像发射航天飞船一样。
3、客户端：
延迟加载，将不必要的请求延迟到必要的时候。很常用的是图片懒加载，瀑布流，Tab切换等。
缩短渲染时间，一个页面对应着两颗树，DOM树，和渲染树。每一个html元素节点都会被放到DOM树上，但并非都会被放到渲染树上，不可见（display:none）的元素，没有在上面，它不需要被渲染。所以，隐藏视口外面的元素将能带来效率提升。同时，对于DOM树，我们并不需要所有页面上的DOM节点一次性加载过来，瀑布流就是很好的实践，这将大大减少DOM树的构建及渲染时间。避免浏览器做一些不必要的工作，如帮你闭合标签、计算图片高度（应当指定图片的宽高）。
CSS3，使用它可以增强代码的灵活性，减少一些图片请求。但是，注意它是需要牺牲一些渲染性能的，同时，由于兼容性的问题我们可能需要写很多的css代码来实现效果，甚至引入外部文件来兼容低端浏览器，所以，使用它的时候，要考量一下，是否利大于弊。
时间关系，点到为止，如有不妥之处，还请各位读者不吝赐教，谢谢。
原文链接：https://www.cnblogs.com/ywb15ba/p/speed.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/4216
