在开始今天的内容之前，我想问大家一个问题：前端性能对一个Web应用到底有多重要？ 为了有最直观的印象，我们直接上图： 如上图显示，如果Web应用的页面加载速度非常快，对用户
在开始今天的内容之前，我想问大家一个问题：前端性能对一个Web应用到底有多重要？
为了有最直观的印象，我们直接上图：
如上图显示，如果Web应用的页面加载速度非常快，对用户的操作可及时响应，那么该应用的用户体验将非常好，随着加载时间的增多，超过某个阈值后，用户体验会呈现断崖式的下降。（由图看出，5秒是一个用户能接受的中位值，超过5秒就开始扣分了...）
那么，你的Web页面的速度够快吗？是不是在5秒之内？（PS：即使在5秒之内，可能你认为已经够快了，但其实仍有许多有待进一步优化的地方。）
那么，如何进行优化呢？下面来看看Web性能优化最佳实践，开始优化进阶之路吧。如果你想要全面的学习Web前端性能优化的知识，请认真看完接下来的内容，趁这个特殊的五一假期，我们想送大家一本这个方面的图书：《Web前端性能优化》。
web前端性能优化主要分为以下几个重点:
- HTML层级优化
- 减少HTML的层级嵌套
- 减少空标签、无用标签的滥用
- 标签的Style属性
- 标签的自定义属性
- 合理利用模板引擎
- link标签妙用
- <img>标签
- 标签的src属性及href属性
- CSS层级优化
样式继承与复用
尽量避免同一类名多次渲染
少用高优先级选择器，慎用！import
伪选择器的妙用
忌层级过深的CSS选择器
不用曾经的CSS表达式
你用过*通配符吗
......
JavaScript层级优化
如何及时清除定时器
合理使用CSS3动画
多利用事件代理委托，避免重复的事件监听
事件冒泡机制
一些优秀的JavaScript层级思想
资源加载优化
DNS优化
CDN部署与缓存
HTTP缓存
懒加载，分页加载，区域无刷Aiax加载
CSS预处理及压缩
JavaScript代码压缩处理
Base64的妙用
大、中、小图片方案及图片压缩
屏蔽开发时的调用、日志代码
其他层级优化
页面渲染过程
控制交互请求
合理的数据结构
有趣的异步
充分利用硬件GPU加速
