前端性能优化

前端性能优化：

一。页面级优化：

1.减少HTTP请求次数：每个请求都是有成本的，包含时间成本和资源成本，一个完整的请求需要经过DNS寻址、与服务器建立链接，发送数据，等待服务器响应，接收数据这个复杂又漫长的过程。

• 从设计层面简化页面
• 合理设置HTTP缓存
• 资源的合并和压缩
• css sprites
• 减少不必要的HTTP跳转
• 避免重复资源请求

二。代码级优化：

1.DOM操作：DOM操作应该是脚本中最耗性能的一类操作，例如增加、修改、删除DOM元素或者对DOM集合进行操作。 

• reflow和repaint
• HTML Collection（HTML收集器，返回的是一个数组内容信息）

2.避免使用eval和Function

3.减少作用域链查找以及闭包的使用

4.字符串拼接，在javascript中使用“+”来拼接字符串的效率是比较低的，因为每次运行都会开辟新的内存并生成新的字符串变量，然后将拼接结果赋值给新变量。与之比较更为高效的做法是使用数组的join方法，即将需要拼接的字符串放在数组中最后调用join方法得到结果，但是由于使用数组也有一定的消耗，因此当需要拼接的字符串较多时可以考虑数组的方法。

以下为上面的具体实现的举例：

一。图片优化

原因：图片占用空间大，占用带宽，分辨率对其影响大。

1.css动画，css效果代替图片。

图片加载效果分两种（原因是压缩算法不同）：一种是模糊再清晰（小波算法），一种是图片很清晰，逐行从上到下加载显示（离散余弦算法）

2.css-Sprites（雪碧图），将上传、下载、主页等小图标放到一张图片上，设置为背景。

涉及到的工具或者软件：

http://alloyteam.github.io/gopng/

http://fis.baidu.com/

http://gruntjs.net/

二。视频优化（video，flash）

1.html5的video：不需要额外引入资源，大多数浏览器支持，但是各个浏览器渲染样式不统一。

2.flash：需要配合swf插件使用，浏览器会把多媒体资源后置，使视频不会先被渲染出来。

一般video和flash结合使用。

为实现设计师的设计稿UI样式以及老板要求的视频先播放，需要手敲UI样式，了解视频的默认操作，用自己的UI覆盖视频的UI。

三。缓存优化

前端常用到的是css样式和javascript文件，我们可以将其缓存，从缓存中取用，减少空间和时间。

用到：sessionStorage，userData，cookie，openDatabase，localStorage

1。sessionStorage：临时性存储，浏览器关闭缓存消失，刷新页面缓存依然存在。

2。userData：先驱者，存储限制太小

3。cookie：兼容性最好的本地存储，但是大小有限制而且每次发送请求给服务器，请求里都会带着Cookie一起发过去，现在基本大多数登录的合法性验证是用Cookie验证的。

4。openDatabase：是一个完整的数据库，偏后台的，对于前端来说学习成本高。

5。localStorage：兼容性中等，操作简单，key-value形式，几乎现代的浏览器都支持，存在大小限制，ie9、ie10不支持，可以关闭浏览器读取到缓存，但是跨浏览器读取不到缓存。

四。写高性能的DOM

影响页面渲染速度的：reflow（回流）和repaint（重绘）

reflow（回流）：页面元素的位置发生变化，需要重新渲染。

repaint（重绘）：页面本身的视觉状态发生改变，比如某个元素的背景色、文字颜色、边框颜色等不影响它周围或者内部布局的属性，只会引起浏览器的repaint。

所以要避免触发repaint和reflow：

1.避免写复杂的css，比如各种伪类和选择器，因为为了匹配会使用更多的CPU。

2.css绑定在元素上时，尽量绑定在子元素上，尽量少的使用style。

3.js中如果需要创建多个DOM节点，可以使用DocumentFragment创建完成后一次性的插入到document，dom结构要尽量一次性的插入到父元素中，尽量减少一次一次的插入的情况。