郭靖大侠

个人成长地图

浏览器渲染网页的过程

1. 首先渲染引擎将 HTML 解析成 DOM 树；
2. 再将 CSS 代码解析成 CSSOM(CSS Object Model)；
3. 结合 DOM 和 CSSOM 生成渲染树。通过 CSSOM 中的 class,id 等属性将对应的样式挂载到 DOM Tree 上。（即对每个节点描述视觉信息）；
4. 根据渲染树生成页面布局。即将渲染树的视觉信息进行平面合成； - layout
5. 将布局绘制到屏幕上。- paint

重排和重绘

网页生成，至少需要渲染一次。用户访问的过程中，还会不断的重新渲染。
由于浏览器采用流式布局模型（Flow Based Layout），对渲染树布局计算通常只需要遍历一次就能完成。但对于 table 及其内部的子元素，可能需要多次计算，这是为什么要避免使用 table 布局的主要原因。

重新渲染就是重新生成布局和重新绘制

函数防抖（debounce）

事件再被触发n秒后执行回调，如果在等待时间内再次触发事件，则计时从新开始。

1
2
3
4
5
6
7
8
9
10

function debounce(fun, delay) {
  let timer = null
  return function(args) {
    clearTimout(timer)
    timer = setTimeout(() => {
      fun(args)
    }, delay)
  }
}

什么是BFC

格式化上下文（Block Formatting Context, BFC）是Web页面可视化CSS渲染的一部分，是块盒子的布局发生的区域，也是浮动元素和其他元素交互的区域。

简单理解BFC是一个属性，而这个属性不能显示定义。拥有这个属性的元素的内部和外部会表现出一些特性。

牢记一下规则：

什么是闭包

闭包是指有权访问另一个函数作用域中变量的函数。
当函数被调用时，会创建一个执行环境和作用域链。然后，结合arguments和其他命名参数的值初始化函数的活动对象（activation object），但是在作用域链中，外部函数的活动对象始终处于第二位。

概念及特性

localStorage和sessionStorage都是只有现代浏览器支持的HTML5标准的本地存储接口。主要用于键值对形式的数据存储在浏览器中，是客户端持久存储的解决方案。

区别

sessionStorage特性与服务端的session类似，表示会话。sessionStoarge只是将数据存储在本次会话中，关闭页面后数据将丢失。
localStorage则是用户没有主动调用api删除，则会一直保存在浏览器中。

localStorage、sessionStorage一般存储大小5M。

使用场景