细枝末节
- 版本兼容
prefix browser -webkit- chrome/safari -moz- firefox -ms- ie -o- opera -
响应式网页设计
渐进增强--> iphone6向上兼容 兼容最新设备
优雅降级--> 开发通用版本 再兼容老版本,向下兼容
先移动端-->再pc端
先iphone6为初始原型开发-->兼容其它设备-->渐进增强 -
性能相关
reflow 对dom结构影响了就要reflow,消耗性能(改变窗体文字大小、内容,激活伪类,操作class属性,操作Dom,计算offsetWidth/Height,设置style属性)
repaint 只是改变颜色等,性能消耗就少一点,而且速度快于reflow
触发GPU的方法:
opacity:
transform: translate3d() translatez(0)(用了transform就写上z,提醒浏览器用GPU,提高效率)
GPU加速标准方法:will-change:transform; (提前告诉浏览器将transform变化放到另一个层)但是不能填all,属性值为具体哪个属性。最好就是属性变化前设置,不行就全局(相对耗多一点性能)
div{
width:100px;
height:100px;
}
div:hover{
will-change:transform;
}
div:active{
transform:scale(2,3)
}