我们知道，在前端开发中，HTML和CSS代码的可读性和可扩展性非常重要。 在保证两者的前提下，提高代码的分析速度可以进一步优化代码。
1、css选择器代码优化使用原则
(1)避免使用通配符表示在页面加载时用于匹配所有元素，尽量避免使用通配符，给页面增加负担。
)2)避免使用标签选择器
)3)避免在选择器中定义多阶段，增加查找的负担
高效选择
css选择器在匹配中经历了那些步骤吗？ 首先，css选择器的匹配原理是从右到左，然后一步一步地匹配到左对应的元素。 左侧选择器越准确，匹配效率越高
代码量优化
(1)相关CSS的集成
. box{ padding-left:2px； padding-right:2px； padding-top:3px； padding-bottom:3px； //. box { padding :3改为px2px； (2)合并相同的css定义
)3)定义简洁的css规则
2、性能优化性能优化有一个重要指标，就是页面上最重要的内容。 这个指标会影响用户看页面之前等待的时间，CSS的优化可以减少这个时间
)1) CSS异步加载将立即使用的文件放在页面的开头进行加载。 可以使用loadCSS和Preload在呈现页面后异步加载其他模块的CSS
)2)使用压缩代码的代码压缩工具，消除多余的空格和换行符
)3)减少块负载@不使用@import负载。 这将影响CSS的加载速度
)优先使用transition，动画效果与其他属性transfrom交叉可以直接减少主线程的计算量
)5)图像懒惰加载客户端向服务器发送的请求有限(一般4-8，IE67 2)。如果页面有较多的请求，页面加载时间会变长。 懒惰加载可以缓解这个问题，在拦截页面幻灯片的位置实时拦截，并根据页面的位置请求资源
)避免重绘并减少重排元素的外观变化会导致页面重绘。 虽然浏览器对此进行了优化，但是更平滑地重新定位页面会导致浏览器重新计算整个文档并重建渲染树，从而大大降低浏览器的渲染速度，并且避免重新定位。 禁止使用以下属性：width、height、padding、padding:display、float、position、top、left、bottom、font-size、overers
3、优化格式(1)消除多余的css
)2)将样式表放在顶部
)3)正确使用display属性
)4)谨慎浮动
)5)避免使用复杂的选择器，层次最好在3个层次以下