面试准备（6）js基础

js的事件流模型

“事件冒泡”： 事件开始由具体的元素接受，然后逐级向上传播

“事件捕捉”：事件由不具体的节点接收，然后逐级向下，一直到具体的

DOM事件流

• 事件捕捉

• 目标阶段

• 事件冒泡

浏览器对象模型BOM里常用的对象。

• window js的最顶层对象

• document 文档对象

• location 浏览器当前url信息

• screen 客户端屏幕信息

• history 浏览器访问历史信息

• navigator 浏览器本身信息

window对象的常用方法

• alert()

• confirm()

• prompt()

• open()

• close()

什么是requestIdleCallback?

当关注用户体验，不希望因为一些不重要的任务（如统计上报）导致用户感觉到卡顿的话，

就应该考虑使用requestIdleCallback。因为requestIdleCallback回调的执行的前提条件是当前浏览器处于空闲状态。

requestIdleCallback用法示例

    requestIdelCallback(myNonEssentialWork);
    
    
    function myNonEssentialWork (deadline) {
    
      // deadline.timeRemaining()可以获取到当前帧剩余时间
      while (deadline.timeRemaining() > 0 && tasks.length > 0) {
        doWorkIfNeeded();
      }
      if (tasks.length > 0){
        requestIdleCallback(myNonEssentialWork);
      }
    }

总结

一些低优先级的任务可使用 requestIdleCallback 等浏览器不忙的时候来执行，

同时因为时间有限，它所执行的任务应该尽量是能够量化，细分的微任务（micro task）

所以不建议在 requestIdleCallback 里再操作 DOM，这样会导致页面再次重绘。

浏览器的渲染过程

• | 构建DOM树

• | 构建CSSOM树

• | 构建渲染树

• | 渲染树布局

• | 渲染树绘制到页面

1. 浏览器将获取的HTML文档解析成DOM树。

2. 处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)。

3. 将DOM和CSSOM合并为渲染树(rendering tree)，代表一系列将被渲染的对象。

4. 渲染树的每个元素包含的内容都是计算过的，它被称之为布局layout。

   浏览器使用一种流式处理的方法，只需要一次绘制操作就可以布局所有的元素。

5. 将渲染树的各个节点绘制到屏幕上，这一步被称为绘制painting

关键渲染路径

在首屏渲染中必须发生事件。

详细解释