中高级前端大厂面试秘籍，为你保驾护航金三银四，直通大厂

check

• 执行setImmediate

跨域

• JSONP: 利用<script>标签不受跨域限制的特点，缺点是只能支持 get 请求

function jsonp(url, jsonpCallback, success) { 
  const script = document.createElement('script') 
  script.src = url 
  script.async = true 
  script.type = 'text/javascript' 
  window[jsonpCallback] = function(data) { 
    success && success(data) 
  } 
  document.body.appendChild(script) 
} 

• 设置 CORS: Access-Control-Allow-Origin：*
• postMessage

安全

• XSS攻击: 注入恶意代码

  • cookie 设置 httpOnly
  • 转义页面上的输入内容和输出内容

• CSPF: 跨站请求伪造，防护:

  • get 不修改数据
  • 不被第三方网站访问到用户的 cookie
  • 设置白名单，不被第三方网站请求
  • 请求校验

框架：Vue

1. nextTick

在下次dom更新循环结束之后执行延迟回调，可用于获取更新后的dom状态

• 新版本中默认是mincrotasks, v-on中会使用macrotasks

• macrotasks任务的实现:

  • setImmediate / MessageChannel / setTimeout

2. 生命周期

• _init_

  • initLifecycle/Event，往vm上挂载各种属性
  • callHook: beforeCreated: 实例刚创建
  • initInjection/initState: 初始化注入和 data 响应性
  • created: 创建完成，属性已经绑定， 但还未生成真实dom
  • 进行元素的挂载： $el / vm.$mount()

  • 是否有template: 解析成render function

    • *.vue文件: vue-loader会将<template>编译成render function
  • beforeMount: 模板编译/挂载之前
  • 执行render function，生成真实的dom，并替换到dom tree中
  • mounted: 组件已挂载

• update:

  • 执行diff算法，比对改变是否需要触发UI更新

  • flushScheduleQueue

    • watcher.before: 触发beforeUpdate钩子 - watcher.run(): 执行watcher中的 notify，通知所有依赖项更新UI
  • 触发updated钩子: 组件已更新
• actived / deactivated(keep-alive): 不销毁，缓存，组件激活与失活

• destroy:

  • beforeDestroy: 销毁开始

  • 销毁自身且递归销毁子组件以及事件监听

    • remove(): 删除节点
    • watcher.teardown(): 清空依赖
    • vm.$off(): 解绑监听
  • destroyed: 完成后触发钩子

（编辑：衢州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!