CSS：重绘与重排、优化图片、渐进式渲染、CSS3新增属性、CSS hack
重绘(Repaint)与重排(Reflow)：
- 重绘：当元素的外观被改变，但不影响布局（如颜色改变），浏览器会将新样式添加到渲染树中，并重新绘制影响的部分。
- 重排：布局发生改变（如大小、位置改变），浏览器需要重新构建渲染树。
优化图片：
- 使用CSS属性
background-size: cover;来确保背景图像适应容器大小。 - 对于动态内容，使用
canvas元素处理图像。
- 使用CSS属性
渐进式渲染：
- 使用
<link rel="preload">来指定先加载的资源。 - 使用
<script>标签的async或defer\`属性来异步加载JavaScript。
- 使用
CSS3新增属性：
- 边框、阴影、圆角：
border-radius、box-shadow。 - 渐变、变换：
linear-gradient、transform。 - 动画、过渡：
animation、transition。
- 边框、阴影、圆角：
CSS Hack：
- 浏览器特定样式：例如
_moz仅Firefox、*zoom:1为IE6-7。 - 条件注释：例如
<!--[if IE 6]>只针对IE6。
- 浏览器特定样式：例如
注意：在实际开发中应尽量避免使用Hack，并且优化CSS以减少重排和重绘。
评论已关闭