一些题

zz_xx
59 阅读6分钟

Javascirpt

  1. js实现异步编程
  • callback
  • Promise实现链式调用
  • async/await ， 基于 Promise 的语法糖，使得异步代码看起来像同步代码，从而提高可读性和可维护性

  1. async/await 的工作原理

    语法糖，用于简化promise的使用，使异步代码看起来更像同步，虽然简化了异步代码的编写，但在底层，仍然依赖于promise

    async函数：使用async声明一个函数时，该函数会被转换成一个返回Promise的函数，也就是 async声明的函数内部的代码会被封装成一个promise实例

    await：在 async 函数内部使用 await 时，它会暂停 async 函数的执行，等待 Promise 对象的解决，在等待期间，async 函数会立即返回一个未决的 Promise，并将执行权交回到调用栈，允许其他代码继续执行。一旦 Promise 解决，await 表达式返回 Promise 解决时的值，并继续执行 async 函数后面的代码

  2. http和https的区别

    HTTPS 使用 SSL/TLS 协议对数据进行加密传输，保证数据的机密性和完整性。通过 SSL/TLS 握手过程，客户端和服务器建立安全通道，然后使用对称加密和非对称加密等技术对数据进行加密和验证。

  3. https的加密通信流程

    1）.客户端向服务器发送连接请求。

    2).服务器返回证书。

    3).客户端验证证书。

    4).客户端生成对称密钥。

    5).客户端使用服务器公钥加密对称密钥并发送给服务器。

    6).服务器使用私钥解密密钥。

    7).建立安全通道，使用对称密钥进行加密通信。

  4. HTTP 2.0 与 HTTP 1.0

    多路复用：HTTP/2.0 支持多路复用，允许在单个连接上同时发送多个请求和响应，避免了 HTTP/1.x 中的队头阻塞问题，提高了网络利用率和页面加载速度。

    二进制传输：HTTP/2.0 使用二进制协议，而不是 HTTP/1.x 中的文本协议，使通信更高效、更紧凑，减少了解析的开销。

    头部压缩：HTTP/2.0 使用 HPACK 算法对请求和响应头部进行压缩，减少了数据传输的大小，降低了网络延迟。

    服务器推送：HTTP/2.0 支持服务器推送机制，允许服务器在客户端请求之前主动向客户端发送资源，提高了页面加载速度和性能。

    优化连接建立：HTTP/2.0 使用单个连接处理多个请求和响应，减少了连接的建立和关闭次数，降低了连接的延迟和资源消耗。

  5. 缓存策略：

    强缓存，命中 200。协商缓存，命中 304

  6. 性能提升方案

    1. CDN
    2. 缓存策略配合
    3. HTTP2.0
    4. script 预加载
    5. 图片懒加载

  7. 浏览器的事件循环机制

    1. 执行同步任务，将函数调用压入调用栈，依次执行。
    2. 当调用栈为空时，检查微任务队列，依次执行微任务，直至微任务队列为空。
    3. 当微任务队列为空时，检查宏任务队列，依次执行宏任务，直至宏任务队列为空。
    4. 重复步骤 1-3，不断循环执行，直至程序结束或关闭页面。

  8. 宏任务和微任务有什么区别 宏任务是浏览器提供的异步任务，通常包括定时器事件、网络请求、用户交互事件等，它们的执行时机是在事件循环的宏任务阶段执行。

    微任务是由 JavaScript 引擎提供的异步任务，例如 Promise 的回调、MutationObserver 的回调等，它们的执行时机是在当前任务执行完成后、下一个任务开始之前执行。

    微任务的优先级高于宏任务，微任务会在当前任务执行完成后立即执行，而不需要等待事件循环的下一轮

  9. XSS 跨站脚本攻击

    通过向 Web 页面注入恶意脚本，使得这些脚本在其他用户的浏览器中执行，从而窃取用户信息、劫持会话或进行其他恶意操作。

    • 存储型
    • 反射型
    • DOM 文档型

    防范：

    1. 输入验证，输出转码；
    2. 配置内容安全策略，通过设置 HTTP 头 Content-Security-Policy 来限制页面能够加载的资源类型和来源；
    3. Cookie 设置 HttpOnly 安全标志。

  10. 性能优化方案

    1. 网络层面

      • CDN，
      • HTTP2.0 多路复用；

    2. 资源层面

      • 图片压缩，
      • 关键资源预加载，
      • 延迟加载非关键资源；

    3. 代码层面

      • script 和 css 拆分，
      • 减少在加载过程中插入或删除 DOM 元素，
      • 缩减 JavaScript 文件，避免长任务，
      • 复杂计算和任务移到 Web Worker 中。

  11. Vue3 中的响应式系统实现

    当把一个普通js对象传给vue实例来作为它的data时，vue会遍历它的属性，用object.defineProperty将他们转化为getter/setter，用户看不到getter/setter，但是在内部他们让vue追踪依赖，在属性被访问和更新时通知变化

    vue的双向数据绑定结合了observer，compile和watcher 三者 ，通过observer来监听自己的model数据变化，通过compile 来解析编译模版指令，最终利用watcher 搭起observer和compile之间的桥梁，达到数据变化-> 视图更新，视图交互变化（表单input/select）-> 数据modal变更的双向绑定结果

  12. vue2 和 vue3 的区别

    vue2:defineProperty，vue3:Proxy

    使用Object.defineProxy 可以拦截对数组元素的读写操作，但无法直接检测数组的索引变化，也无法检测数组length的变化，因此：通过直接修改数据索引 和length属性时，无法出发响应式更新

    并且Object.defineProxy只能拦截 get 和set操作，defineProprtyt无法劫持一个对象的删除和增加属性操作， 如果存在深层次的嵌套数据结构，需要更深层次的监听，在性能上有一定的开销

    es6的proxy，提供了丰富的拦截操作，包括 get/set/has/deleteProperty等 ，可以直接劫持整个对象，轻松的实现递归观察对象树的变化，可以更准确的拦截数据的变化

  13. vue 通信

    • 父传子：prop
    • 子传父：this.$emit("事件",“数据”)
    • 兄弟组件 event/bus 事件总线
    • 多层级：父组件用provide， 子组件用inject
    • 统一状态管理 pinia 活vueX
avatar
文章
阅读
粉丝