Web前端性能优化

Web前端性能优化

1 页面级优化

 

1.1 减少http请求

1.2 加快DNS解析

1.3 设置http缓存

1.4 资源合并(JS,CSS)

1.5 资源前端压缩

1.6 图片精灵(sprite)

1.7 data: URL scheme

1.8 服务端压缩gzip

1.9 图片懒加载

1.10 css头部加载

1.11 JS异步加载

1.12 JS按需加载

1.13 减少http重定向

1.14 优化DOM结构

1.15 图片不失真压缩

1.16 接口合并

2 部署优化

 

2.1 多域名资源服务器

2.2 CDN

2.3 静态资源缓存服务器

3 代码级优化

3.1 减少Dom节点查找(缓存DOM选择器)

3.1.1 Html Collection

3.1.2 减少Reflow(重排)

3.1.3 减少Repaint(重绘)

3.2 避免使用eval和Function

3.3 慎用with

3.4 减少作用域链查找

3.5 数据访问，利用局部变量

3.6 字符串拼接用数组join

3.7 事件绑定多用委托

3.8 css选择符（从右往左）

3.9 resize使用计时器绑定时间间隔

3.10 内存使用与释放控制

3.11 scroll和resize等事件触发采用函数节流(setTimeout)

3.12 巧用缓存

4 JQuery优化

4.1 总是从ID选择器开始继承

4.2 在class前使用tag

4.3 将jquery对象缓存起来

4.4 掌握强大的链式操作

4.5 使用子查询

4.6 对直接的DOM操作进行限制

4.7 冒泡

4.8 消除无效查询

4.9 推迟到 $(window).load