前端性能优化可以分为两大类分别是页面级别优化包含了http请求数以及内联脚本位置优化，代码级别的优化包含DOM操作优化，CSS选择符优化以及图片优化等
优化的目的
优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源
资源压缩合并，减少http请求
（1）合理的设置http缓存，恰当的缓存设置可以大大减少http请求。要尽可能地让资源能够在缓存中待得更久
（2）从设计实现层面简化页面，保持页面简洁、减少资源的使用时是最直接的。
（3）资源合并与压缩，尽可能的将外部的脚本、样式进行合并，多个合为一个。
(4) CSS Sprites，通过合并 CSS图片，这是减少请求数的一个好办法
脚本的位置，将外部脚本置底（将脚本内容在页面信息内容加载后再加载）
浏览器是并发请求的，而外链脚本在加载时却常常阻塞其他资源，例如在脚本加载完成之前，
它后面的图片、样式以及其他脚本都处于阻塞状态，直到脚本加载完成后才会开始加载。
如果将脚本放在比较靠前的位置，则会影响整个页面的加载速度从而影响用户体验。
所以说尽可能的将脚本往后挪，减少对并发下载的影响
所有放在 head 标签里的 CSS 和 JS 文件都会堵塞渲染。如果这些CSS和JS需要加载和解析很久的话，那么页面就空白了。
所以 JS 文件要放在底部，等 HTML 解析完了再加载 JS 文件。那为什么 CSS 文件还要放在头部呢？
因为先加载 HTML 再加载 CSS，会让用户第一时间看到的页面是没有样式的、“丑陋”的，为了避免这种情况发生，
就要将 CSS 文件放在头部了。另外，JS文件也不是不可以放在头部，只要给script标签加上defer属性就可以了，
异步下载，延迟执行。
静态资源使用 CDN
内容分发网络（CDN）是一组分布在多个不同地理位置的 Web 服务器。我们都知道，当服务器离用户越远时，延迟越高。
CDN 就是为了解决这一问题，在多个位置部署服务器，让用户离服务器更近，从而缩短请求时间
图片优化
雪碧图；
压缩图片（tinypng.com/）；
不影响页面质感的前提下降低图片质量；
小图标使用阿里矢量图的iconfont
预加载与懒加载
减少重绘重排
重排
当改变 DOM 元素位置或大小时，会导致浏览器重新生成渲染树，这个过程叫重排。
重绘
当重新生成渲染树后，就要将渲染树每个节点绘制到屏幕，这个过程叫重绘。
不是所有的动作都会导致重排，例如改变字体颜色，只会导致重绘。
记住，重排会导致重绘，重绘不会导致重排。
重排和重绘这两个操作都是非常昂贵的，因为JavaScript引擎线程与GUI渲染线程是互斥，它们同时只能一个在工作。
什么操作会导致重排？
添加或删除可见的 DOM
元素元素位置改变
元素尺寸改变
内容改变浏
览器窗口尺寸改变
如何减少重排重绘？
用 JavaScript 修改样式时，最好不要直接写样式，而是替换 class 来改变样式。
如果要对 DOM 元素执行一系列操作，可以将DOM元素脱离文档流，修改完成后，再将它带回文档。
推荐使用隐藏元素（display:none）或文档碎片（DocumentFragement），都能很好的实现这个方案。
