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是单线程的,后端语言大多数是多线程的 )
网友评论