浏览器的渲染原理

TL;DR

  1. The DOM and CSSOM trees are combined to form the render tree.
    • 构建渲染 DOM 和 CSSOM 树
  2. Render tree contains only the nodes required to render the page.
    • 渲染树仅包含渲染页面所需要的节点
  3. Layout computes the exact position and size of each object.
    • 布局需要计算每个节点的位置和大小
  4. The last step is paint, which takes in the final render tree and renders the pixels to the screen.
    • 最后一步是绘制，采用最终的渲染树，并将最终的渲染结果渲染到屏幕上面

具体步骤

  1. Process HTML markup and build the DOM tree.
    • 解析 HTML 并构建 DOM 树
  2. Process CSS markup and build the CSSOM tree.
    • 解析 CSS 并构建 CSSOM 树
  3. Combine the DOM and CSSOM into a render tree.
    • 解析 DOM 树和 CSSOM 树并构建渲染树
  4. Run layout on the render tree to compute geometry of each node.
    • 解析渲染树并且计算出每个节点的大小和形状
  5. Paint the individual nodes to the screen.
    • 上色，并绘制到屏幕上

动画的两种做法

transition

transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。

transform

animation: 时长 | 过渡方式 | 延迟 | 次数 | 方向 |填充模式 |　是否暂停　｜　动画名;

完整示例：即加 @keyframes

其他List

  • 感觉不大熟悉的是 float 里面那个 负margin
  • 以及 清除浮动 感觉有点陌生，这几节的笔记要经常翻一下
    • 多做一些小项目吧，把学到的都复习一下 不大容易忘了就