重绘重排

• 重排，dom 的变化影响到了几何属性，浏览器重新计算元素的几何属性，其他元素的几何属性和位置也会发生变化，浏览器需要重新构造渲染树
• 引起重排，规模尺寸，布局，隐藏显示
• 重绘，浏览器将受影响的元素重新绘制到屏幕上的过程称为重绘
• 引起重绘，改变元素外观属性，比如 color，background-color
• 重排必定重绘，重绘不一定重排
• 优化
  • 减少重绘重排的操作，合并多次 DOM 和样式的修改操作；
  • 使用 fragment 创建虚拟节点
  • 将需要多次重排重绘的元素 position 属性改为 absolute 或 fixed，使其脱离文档流

盒子模型

• 水平垂直居中方法：
  • display: flex
  • display: table-cell
  • js
  • 定位
• 标准盒模型，大小=content+padding+border+margin。box-sizing: content-box
• ie 盒模型，大小=content+margin。box-sizing: border-box

布局

• 弹性布局
• 圣杯布局，浮动和负 margin
• 双飞翼布局
• 左右固定，中间自适应

弹性布局优缺点

响应式布局优缺点

伪类和伪元素

• ::before，伪元素
• :before，伪类

骨架屏的实现思路

过渡和动画效果

• css3 动画
  • animation，定义动画帧的效果（@keyframes，设置帧）
  • transition，定义元素变化过程中的行为
  • transform，定义元素变化结果
  • 优点：浏览器对 css3 会做优化，性能更好
  • 缺点：兼容性不好，动画控制不够灵活
• js 动画
  • 优点：动画控制好，兼容性好

系统分辨率和固定分辨率优缺点

display:none 与 visibility:hidden

canvas 动画

• threejs
• 白鹭引擎
• 虚幻 4

WebGL\SVG\Canvas

canvas

• Canvas 通过 JavaScript 来绘制 2D 图形，Canvas 只是一个 HTML 元素，其中的图形不会单独创建 DOM 元素。因此我们不能通过 JavaScript 操控 Canvas 内单独的图形，不能对其中的具体图形进行监控
• 在 Canvas 中，一旦图形被绘制完成，它就不会继续得到浏览器的关注。如果其位置发生变化，那么整个场景也需要重新绘制，包括任何或许已被图形覆盖的对象
• 标量图，放大缩小会失真

svg

• svg 创建的每一个元素都是一个独立的 DOM 元素，既然是独立的 DOM 元素，那么我们就可以通过 css 和 JavaScript 来操控 dom。可以对每一个 DOM 元素进行监听。
• 并且因为每一个元素都是一个 DOM 元素，所以修改 svg 中的 DOM 元素，系统会自动进行 DOM 重绘
• 矢量图，放大缩小不会失真

margin 塌陷

• 同级元素设置 margin 上下边距会出现合并
• 父子元素，子元素设置上边距，会传递到父元素
• 解决：
  • 父盒子设置透明 border
  • 父盒子添加 overflow：hidden
  • 父盒子设定 padding 值
  • 伪元素给子元素的前面添加一个空元素

行内元素 float 后的效果

• 行内元素 float 后变得像是 inline-block，同时拥有行内和块级的特性，最明显的不同是默认 width 不是 100%，可以设置 padding、width、height

sass/less/stylus

• 具有变量，缓和，嵌套，继承，颜色混合等基本特性
• less 需要{}，sass/stylus 可以缩进表示嵌套关系
• scss 无全局变量的概念，less/stylus 有作用域的概念
• sass 基于 ruby，less/styleus 基于 nodejs

css 实现硬件加速

• 硬件加速是指通过创建独立的复合图层，让 GPU 来渲染这个图层，从而提高性能
• 一般触发硬件加速的 css 属性有：transform、opacity、filter，为了避免 2d 动画在开始和结束的时候重绘操作，一般使用 transform: translateZ(0)