与前端训练营的日子 --Week10

不知不觉，训练营的课程已经过半了，现在剩下三十多个小伙伴交作业了。虽然只是 20 周的课程，每周的强度也不低，但能走完全程的小伙伴估计也不多😂😂

排版流程

• 预处理，处理flexDirection和wrap相关属性，将width、height、left、right、top、bottom等属性抽象成main、cross的相关属性

• 分行

• 计算主轴方向

• 计算交叉轴方向

渲染步骤

• 准备工作

• 准备图形环境，npm install images
  

• 在`viewpoint`上进行绘制

• 绘制相关属性

• background-color
  

• background-image
  

• border
  

• 绘制

• 递归调用子元素的绘制方法完成 DOM 树的绘制，并忽略一些不需要的节点

• toy-browser项目忽略了部分功能

• 文字绘制，该功能需要用到字体库

• 对图层进行`compositing`

本周学习内容

• 排版

• 渲染--绘制