《浏览器原理》学习笔记Day52

WebApi: XMLHttpRequest是怎么实现的？

• 回调函数

  • 将一个函数作为参数传递给另一个函数，作为参数的函数就是回调函数

  • 同步回调

    • 回调函数callback在主函数main返回之前执行的

    • 执行过程：

      • 在当前执行上下文中执行回调函数

• 异步回调

  • 回调函数callback在主函数main执行结束之后执行，callback并没有在主函数内部调用

  • 执行过程：

    • 第一种方式：把异步函数做成一个任务，添加到消息队列尾部；
    • 第二种方式：把异步函数添加到微任务队列中，这样可以在当前任务末尾处执行微任务。

• 系统调用栈

  • 类似于JavaScript引擎的调用栈

• XMLHttpRequest运作机制

  1. 第一步：创建XMLHttpRequest对象

  2. 第二步：为xhr对象注册回调函数

     1. ontimeout
     2. onerror
     3. onreadystatechange

  3. 配置基础的请求信息

     1. 请求地址、请求方法、请求方式、超时时间、responseType

  4. 发起请求

     • 渲染进程会将请求发送给网络进程，网络进程负责资源的下载，等网络进程接收到数据之后，就会利用IPC来通知渲染进程；渲染进程接收到消息后，会将xhr对象的回调函数封装成任务添加到消息队列中，等主线程循环系统执行到到该任务的时候，会根据相关的状态来调用对应的回调函数。
     • 如果网络出错了，就回执行xhr.onerror
     • 如果超时了，就会执行xhr.timeout
     • 如果正常的数据接收，就会执行xhr.onreadystatechange来反馈相应的函数

• XMLHttpRequest使用过程中的“坑”

  1. 跨域问题
  2. HTTPS混合内容问题

此文章为4月Day13学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪