前端优化总结

html层级优化
减少HTML的层级嵌套
减少空标签、无用标签的滥用
减少标签中style的使用，增加复用性，维护起来更加高效、简便。

css层级优化
样式继承与复用
避免同一类名多次渲染
少用高优先级选择器，慎用！Important
伪类选择器的妙用
不要使用层级过深的css选择器
避免float滥用
css雪碧图
可以使用media query媒体查询，减少使用window.resize。window.resize不断重绘和重排，非常消耗性能，有时会造成死循环效果，导致页面卡死，崩溃

javascript层级优化
用好定时器：大多数定时器影响性能因为使用不恰当（一些动画实现使浏览器过于频繁地重排、重绘），不用的内容及时清除，避免重复生成clearInterval
事件绑定：
多利用事件委托代理：document.querySelector(“ul”).addEventListener(“click”,function(e){

})
避免重复的事件监听
事件冒泡机制
事件冒泡是浏览器默认的行为，就是说事件会从被触发的那一层的具体元素开始，逐级往父级元素传播，直到document或window。冒泡所需的时间更短

资源加载优化
http缓存

加载模式
懒加载：按需加载
分页加载
css预处理及压缩
javascript代码压缩处理
Base64的妙用：小图不能合并到雪碧图的，使用base64
图片压缩
屏蔽开发时的调试，日志代码

合理利用sessionStorage和localStorage

浏览器请求并发性限制：常见的限制是6条
减少和后端交互请求数
前端负责展示，后端负责数据处理。（js是单线程的，后端语言大多数是多线程的 ）