小笔记（具体业务 篇）

方猴猴
120 阅读4分钟

笔记打算记录，自己整理好的面试题，
争取保持准确性和专业性，然后用直白的语言描述出来，
希望能做成一个API文档，让我日后翻到能直接对着复习就好，
如果也能帮助到你就最好了（我会不定时的更新的）

扫码登录原理

实现扫码登录需 3端配合，PC / 移动设备 / 服务端

大概的流程：

  1. 由pc端 向服务器发起请求，获取登录ID，生成QRCODE（二维码）进行展示
  2. 展示二维码后，判断是否成功，常见有3种模式：
  • pc端 发起定时器轮询（判断登录ID，是否有后续动作）
  • pc端 保持一个接口 pending的长连接等待状态（等待后端接口的返回）
  • 创建一个 websocket（改造成本较高）
  1. APP设备扫码后，会调用接口给服务器传递对应的信息，完成闭环
  2. 接口的结果分为：①未扫码、②已扫码未登录、③登录成功、④超时

掘金网、腾讯云、CSDN：定时器轮询
boss直聘：长连接等待

前端实现截图

  1. html2canvas（插件）
  2. 直接使用canvas（dataURL - image）

前端截图实现学习

数组乱序

实现一个数组里面的元素乱序输出

function random(arr) {
  for (let i = 0; i < arr.length; i++) {
    //先是四舍五入可以获取 [0, 1]的随机数，根据索引将随机数范围进行扩大，然后再一个个增加进行调换
    const r = Math.round(Math.random() * (arr.length - 1 - i)) + i;
    [arr[i], arr[r]] = [arr[r], arr[i]];
  }
  
  return arr;
}

富文本编辑器的理解

  • div标签加上 contenteditable属性 设置为 true
  • window.getSelection API可以获得选中的文字内容
  • document.execCommand 可执行具体的操作内容（加粗、斜体、下划线等）

网站安全的理解

XSS 跨站脚本攻击

  1. 过滤 input textarea 字符串中的 JS代码
  2. cookie 设置 httponly（只允许浏览器使用，JS无法获取到当前cookie信息）

CSRF 跨站伪请求攻击

  1. 请求增加 token
  2. 请求头 referer 校验
  3. 请求头 origin 白名单校验（ 配合网关CORS access-control-allow-origin ）

如何保障 token的安全

  1. token 加入时间戳进行生成
  2. token 是由参数使用密钥（公有密钥、私有）进行加密
  3. 后端服务增加白名单，限制具体的域名、ip 才能获取到token
  4. 后端服务增加缓存机制，记录获取token的URL和时间戳，防止频繁重复调用

白屏检测

  1. 获取根节点，判断是否渲染子节点 childNodes
  2. 使用API方法 mutation Observer 可以检查DOM节点是否有增减的变化

ps：针对于骨架屏，前2种方法没办法正确判断

  1. 使用API方法 document.elementsFromPoint(x, y) x和y表示坐标轴的坐标，API会返回参数坐标下的所有 DOM节点信息。通过对比多个坐标点，一定时间前后的 DOM节点是否有变化来判断
  2. 通过 JS 进行错误捕获

获取浏览器的用户行为指标

性能指标

  1. 使用API方法 window.performance，返回的信息里 timing 属性包括了用户加载网页的所有性能指标的毫秒数信息
  2. 获取所有网站资源的加载耗时明细 window.performance的实例API
//返回当前网站所有资源的加载明细
window.performance.getEntries(i => console.log(i))

捕获错误

  1. window.onerror
  2. addEventListener('error')：可以在 ① 的基础上捕获到 资源加载失败 的错误
  3. 前2种API只能捕获到同步任务（ try.catch 也只能捕获同步任务的错误 ），异步任务 错误的捕获：unhandlerejection

localStorage 设置过期时间

  1. 单独统计整理一份 localStorage的 key，然后将所有的 key 整理成一份 expire Map，缺点是需要维护2份数据
  2. 将传统的 localStorage保存的 key: value，更新一下 key 的保存逻辑，调整为 key|expire: value（更加灵活）

CDN 为什么会快

如果域名使用CDN的话，在URL使用DNS域名解析时，传统是对应到具体的service-ip，而CDN的service-ip称为CNAME

  1. 分布式储存，访问时返回离最近的节点服务器
  2. 负载均衡
  3. 文件有缓存的概念，减少直接访问源站
avatar
文章
阅读
粉丝