CSS：重绘与重排、优化图片、渐进式渲染、CSS3新增属性、CSS hack

1.重绘与重排的区别

• 重排：部分渲染树(或者整个渲染树)需要重新分析并且节点尺寸需要重新计算，表现为重新生成布局，重新排列元素
• 重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景颜色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让 UI 展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

重绘不一定会出现重排，重排必然出现重绘

2.如何优化图片

1.对于很多装饰图片，尽量不用图片，因为这类修饰图片完全可以用 CSS 去代替

2.对于移动端来说，屏幕宽度就那么点，完全没有必要去加载原图浪费带宽，一般图片都用 CDN 加载，可以计算出适配屏幕的宽度，然后去请求相应裁剪好的图片。

3.小图使用 base64 格式

4.将多个图标文件整合到一张图片中(雪碧图)

5.选择正确的图片格式:

• 对于能够显示 WebP 格式的浏览器尽量使 WebP 格式。因为 WebP 格式具有更好的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量，缺点就是兼容性并不好
• 小图使用 PNG，其实对于大部分图标这类图片，完全可以使用 SVG 代替
• 照片使用 JPEG

3.如何在页面上实现一个图形的可点击区域

首先使用 CSS3 新增的 border-radius 属性来将一个区域变成圆形，然后再使用 JS 绑定事件

4.什么是渐进式渲染(progressive rendering)

渐进式渲染是用于提高网页性能(尤其是提高用户感知的加载速度)，以尽快呈现页面的技术

在以前互联网带宽较小的时期，这种技术更为普遍。如今，移动终端的盛行，而移动网络往往不稳定，渐进式渲染在现代前端开发中仍然有用武之地

一些举例:

• 图片懒加载–页面上的图片不会一次性全部加载，当用户滚动页面到图片部分时，JavaScript 将加载并显示图像
• 确定显示内容的优先级(分层次渲染)–为了尽快将页面呈现给用户，页面只包含基本的最少量的 CSS、脚本和内容，然后可以使用延迟加载脚本或监听 DOMContentLoaded/load 事件加载其他资源和内容
• 异步加载 HTML 片段–当页面通过后台渲染时，把 HTML 拆分，通过异步请求，分块发送给浏览器

5.CSS3 新增了哪些东西

CSS3 新增东西众多，这里列举一些关键的新增内容：

• 选择器
• 盒子模型属性:border-radius、box-shadow、border-image
• 背景：background-size、background-origin、background-clip
• 文本效果：text-shadow、word-wrap
• 颜色：新增 RGBA、HSLA 模式
• 渐变：线性渐变、径向渐变
• 字体：@font-face
• 2D/3D 转换：transform、transform-origin
• 过渡与动画：transition、@keyframes、animation
• 多列布局
• 媒体查询

6.box-sizing 有什么作用

box-sizing 是用于告诉浏览器如何计算一个元素的总宽度和总高度，主要用来切换标准盒模型和 IE 盒模型

-标准盒模型：box-sizing:content-box content-box:width = content width;height = content height

• IE 盒模型 box-sizing:border-box border-box:width = border + padding + content width; height = border + padding + content height

7.Bootstrap 响应式的原理是什么

bootstrap 使用的是栅格布局，栅格布局的实现原理，是通过定义容器大小，平分 12 份，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。

8.什么是响应式设计

响应式设计简而言之，就是一个网站能够兼容多个终端–而不是为每个终端做一个特定的版本。

优点：

• 面对不同分辨率的设备灵活性强
• 能够快捷解决多设备显示适应问题

缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长

其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况

9.对 CSS hack 技术的理解

什么是 CSS hack由于不同厂商的浏览器或某浏览器的不同版本(如 IE6-IE11、Firefox/Safari/Opera/Chrome)，对 CSS 的支持，解析不一样，导致在不同浏览器的环境中呈现出不一致的页面展现效果。这时，我们为了获得统一的页面效果，就需要针对不同的浏览器或不同的版本写特定的 CSS 样式，我们把被这个针对不同的浏览器/不同版本写相应的 CSS code 的过程，叫做 CSS hack！

CSS hack 的原理：由于不同的浏览器和浏览器版本对 CSS 的支持及解析结果不一样，以及 CSS 优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的 CSS

CSS hack 分类：CSS Hack 大致有 3 种表现形式，CSS 属性前缀法、选择器前缀法以及 IE 条件注释法(即 HTML 头部引用 if IE)Hack，实际项目中 CSS Hack 大部分是针对 IE 浏览器不同版本之间的表现差异而引入的。

10.px 与 em 的区别

• px 即 pixel 像素，是相对于屏幕分辨率而言的，是一个相对绝对单位，即在同一设备上每个设备所代表的物理长度是固定不变的(绝对性)，但在不同设备间每个像素所代表的物理长度是可以变化的(相对性)
• em 是一个相对单位，不是一个固定的值，来源于纸张和印刷业，在 web 领域它指代基准字号，浏览器默认值渲染文字大小是 16px，它会继承计算后的父级元素的 font-size。