前端性能优化

个人把优化分为两个方面网络性能优化和执行性能优化

 

　　1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。

　　2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

 

网络性能优化 （减少HTTP请求）

0 页面简洁 减少资源请求（这一般是不可能的）

1 资源合并与压缩（合并文件）

　　尽可能讲外部脚本，样式进行合并，css、JavaScript、Image 都可以相应的进行压缩

2 CSS Sprites（雪碧图）

　　合并CSS图片 减少请求

3 图片懒加载

4 将外部js文件放在底部（js阻塞加载）

5 Lazy Load JavaScript （只有在需要的时候加载，一般情况下不加载信息内容）

　YUI 中，最初只是加载核心模块，其他模块可以等到需要使用的时候才加载

6 CSS 放在head中

7 DOMReady

8 使用缓存

9 DNS （后）

10 CDN Content Delivery Network，即内容分发网络（后）

    CDN通过将资源存储在更接近用户的位置，缩短到服务器的往返行程，加快页面加载时间来解决性能问题

11 多域名

 

执行性能

1 尽量不使用全局变量

2 减少定时器

3 使用正则

4 少用for 、 while、 for in 等循环

5 尽量不使用属性 把它赋值给变量

6 减少dom操作

7 及时关闭定时器

8 图片不要缩放

9 使用base64 （利弊同在）

　　优点

　　　　1 减少了HTTP请求

　　　　2 某些文件可以避免跨域问题

　　　　3 没有图片更新要重新上传，还有清理缓存

　　缺点

　　　　ie6 /ie7不支持 但是在ie9 下的ie7 支持

　　　　增加了css文件的尺寸

　　　　增加工作量

　　　　用在：①不能以雪碧图的形式存储 ②很少更新的 ③图片尺寸实际很小④这类图片在网站中大规模使用

 

 附上一张图标一张