前端性能优化

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能优化很重要。

前端性能优化分为如下几个方面：

一、代码部署

1、代码的压缩与合并

2、图片、js、css等静态资源使用和主站不同域名地址存储，从而使得在传输资源时不会带上不必要的cookie信息。

3、使用内容分发网络CDN

4、为文件设置Last-Modified【上次访问时间】、Expires【过期事件】和Etag（为文件做本地的缓存）

5、使用GZIP压缩传送

6、权衡DNS查找次数（使用不同域名会增加DNS查找）

7、避免不必要的重定向（加"/"）

二、编码

html

1、使用结构清晰，简单，语义化标签

2、避免空的src和href

3、不要在HTML中缩放图片

css

1、精简css选择器

2、把CSS放在顶部

3、避免@import方式引入样式

4、css中使用base64图片数据取代图片文件，减少请求数，在线转base64网站：http://tool.css-js.com/base64.html

5、使用css动画来取代javascript动画

6、使用字体图标，图标库网站：http://fontawesome.io/icons/，在线制作网站：www.iconfont.cn

7、使用css sprite（使用雪碧图）

8、使用svg图形

9、避免使用css表达式   a{star:expression(onfous=this.blur)}

10、避免使用滤镜（filter）

javascript

1、减少引用库的个数

2、使用requirejs或seajs异步加载js

3、JS放到页面底部引入

4、避免全局查找（$("#div1 span");）

5、减少属性查找

6、使用原生方法（document.getElementById("div1");）

7、用switch语句代替复杂的if else语句

8、减少语句数，比如说多个变量声明可以写成一句

9、使用字面量表达式来初始化数组或者对象

10、使用DocumentFragments或innerHTML取代复杂的元素注入

11、使用事件代理（事件委托）

12、避免多次访问dom选择集（把常用的元素存在一个变量中。var $li = $("#ul li");）

13、高频触发事件设置使用函数节流，如：onmousemove、onmouseover

14、使用Web Storage缓存数据

15、使用Array的join方法来替代字符串的"+"连接（先将要连接的字符串放在数组）

 

常用此方法：