前端优化总结！

什么是前端性能优化？
从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度

为什么要做前端性能优化?
在构建web站点的过程中，任何一个细节都有可能影响网站的访问速度，如果不了解性能优化知识，很多不利网站访问速度的因素会形成累加，从而严重影响网站的性能，导致网站访问速度变慢，用户体验低下，最终导致用户流失

前端性能优化的原则
1、不要按照准则照本宣科的做，需要根据实际情况因地制宜；
2、不出bug！
HTML部分

	给图片加上正确的宽高值：这可以减少页面重绘，同时防止图片缩放；正确的闭合标签：如避免使用<div/>，浏览器会多一个将它解析成<div\></div\>的过程；样式放在页头，JS放在页尾避免 HTML 中书写 CSS 代码，因为这样难以维护。使用Viewport加速页面的渲染。使用style标签，减少 CSS 代码，增加可读性减少标签的使用，DOM解析是一个大量遍历的过程，减少不必要的标签，能降低遍历的次数。避免 src、href等的值为空，因为即时它们为空，浏览器也会发起 HTTP 请求。

Javscript部分

    尽量少用全局变量；使用事件代理绑定事件，如将事件绑定在body上进行代理；避免频繁操作DOM节点；减少对象查找，如a.b.c.d这种查找方式非常耗性能，尽可能把它定义在变量里；对字符串进行循环操作，比如替换、查找，应使用正则表达式；删除重复的JS；尽可能把 <script> 标签放在 body 之后，避免JS 的执行卡住 DOM 的渲染，最大程度保证页面尽快地展示出来。尽可能合并 JS代码：提取公共方法CSS 能做的事情，尽量不用JS 来做，毕竟 JS 的解析执行比较粗暴，而CSS 效率更高。尽可能逐条操作 DOM，并预定好 CSS 样式，从而减少 reflow 或者 repaint的次数。尽可能少地创建 DOM，而是在HTML 和 CSS中使用 display: none 来隐藏，按需显示。压缩文件大小，减少资源下载负担

csst部分

	精准样式：使用padding-left: 10px 而不是 padding: 0 0 0 10px。雪碧图：将小的图标合并到一张图中，这样所有的图片只需要请求一次。避免通配符：.a .b * {} 这样的选择器，根据从右到左的解析顺序在解析过程中遇到通配符 * {} 会遍历整个DOM，性能大大损耗。少用 float：float 在渲染时计算量比较大，可以使用 flex布局为 0 值去单位：增加兼容性。压缩文件大小，减少资源下载负担使用CSS缩写，减少代码量删除重复的CSS；CSS放在<header></header>部分：在渲染body部分时，可以渲染已经规定好样式。若将CSS样式放到要渲染的DOM节点之后，就会出现最开始按照默认形式渲染，执行到css样式又重新渲染。造成样式跳转：用户体验差；性能差：需渲染两次。

图片懒加载
所谓懒加载，就是当用户下拉到该页面时再加载图片，而不是当用户打开页面就将所有图片全部加载完毕。