面试-不喜欢背的

[qugemingzizhenmafan]

URL到页面——浏览器（简化版）

解析算法篇

1. 构建dom树
   • 对开闭标签进行词法分析
   • 语法分析建立AST
2. 构建样式树
   • css文本转为stylesheets
   • 标准化样式属性, em->px, red->#ff0000, fold->700
   • 子节点继承父节点样式, 样式的层叠覆盖
3. 生成布局树(仅包含可见元素) ps: 比较新的版本中已经不会生成渲染树

   渲染过程篇

4. 构建图层树
   • 产生层叠上下文 重绘不会影响其他图层
5. 把图层数据发送到显卡在显示器显示

[qugemingzizhenmafan]

BFC（块级格式上下文）

概念

BFC 是 Block Formatting Context 的缩写，即块级格式化上下文。是一个独立容器，容器内部的子元素不会影响到外面的元素（其中比较重要的布局规则有内部 box 垂直放置，计算 BFC 的高度的时候，浮动元素也参与计算）。

创建条件

• 根元素，即HTML元素
• position 为 absolute 或 fixed
• display 的值为 inline-block、弹性盒 flexbox
• float 的值不为 none
• overflow 的值不为 visible

  布局规则

• 一个BFC下的两个相邻 box 的 margin 会发生重叠
• BFC是一个独立容器，容器内部的子元素不会影响到外面的元素

  使用场景

• 去除上下 margin 重叠现象
• 清除浮动

清除浮动

clear: both

[qugemingzizhenmafan]

slice（切片）

• 从start开始截取到end但是不包括end
• 返回值为截取部分
• 不会改变原始数组

  splice（捻接）

• 从开始位置（第一个参数）删除几个元素（第二个参数）
• 后面参数为要添加的元素
• 返回值为被删除的元素数组
• 会改变原始数组