前端优化总结大全

前端优化总结！

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

为什么要做前端性能优化?
在构建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样式又重新渲染。造成样式跳转：用户体验差；性能差：需渲染两次。

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