基于TOP-K的面试题解总结（2）

5.    简述 Javascript 中的防抖与节流的原理并尝试实现
  • 防抖： 防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。
// fn 是需要防抖处理的函数
// wait 是时间间隔
function debounce(fn, wait = 50) {
    // 通过闭包缓存一个定时器 timer
    let timer = null
    // 将 debounce 处理结果当作函数返回
    // 触发事件回调时执行这个返回函数
    return function(...args) {
        // 如果已经设定过定时器就清空上一次的定时器
        if (timer) clearTimeout(timer)
      
        // 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
        timer = setTimeout(() => {
            fn.apply(this, args)
        }, wait)
    }}
 
 
// DEMO
// 执行 debounce 函数返回新函数
const betterFn = debounce(() => console.log('fn 防抖执行了'), 1000)
// 停止滑动 1 秒后执行函数 () => console.log('fn 防抖执行了')
document.addEventListener('scroll', betterFn)
 
  •  节流： 函数节流指的是某个函数在一定时间间隔内（例如 3 秒）只执行一次，在这 3 秒内 无视后来产生的函数调用请求，也不会延长时间间隔。3 秒间隔结束后第一次遇到新的函数调用会触发执行，然后在这新的 3 秒内依旧无视后来产生的函数调用请求，以此类推。
// fn 是需要执行的函数
// wait 是时间间隔
const throttle = (fn, wait = 50) => {
  // 上一次执行 fn 的时间
  let previous = 0
  // 将 throttle 处理结果当作函数返回
  return function(...args) {
    // 获取当前时间，转换成时间戳，单位毫秒
    let now = +new Date()
    // 将当前时间和上一次执行函数的时间进行对比
    // 大于等待时间就把 previous 设置为当前时间并执行函数 fn
    if (now - previous > wait) {
      previous = now
      fn.apply(this, args)
    }
  }}
 
 
// DEMO// 执行 throttle 函数返回新函数const betterFn = throttle(() => console.log('fn 函数执行了'), 1000)// 每 10 毫秒执行一次 betterFn 函数，但是只有时间差大于 1000 时才会执行 fnsetInterval(betterFn, 10)
 
6.     promise 有哪些状态？简述 promise.all 的实现原理
  • 三种状态：
    • Pending：进行中
    • Resolved/Fulfilled：已完成
    • Rejected：已失败
  • promise.all(参数)：
    • 参数：一个promise的参数。可以是一个可迭代对象，如Array、String等
    • 只有待所有输入的promise参数都返回resolved，promise.all才返回resolved，若有一个rejected，则返回第一个rejected的回调执行。
 
7.      简述 CSS 盒模型
  • CSS盒模型：
    • 基本盒模型：content+padding+border+margin
      • IE模型：元素宽度width=content+padding+border
      • 标准模型：元素宽度widh=content
    • 外边距重叠： 当两个垂直外边距相遇时，他们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。
  • BFC块级格式化上下文：
    • BFC内的元素垂直方向的边距会发生重叠。属于不同BFC的元素外边距不会发生重叠
    • BFC的区域不会与浮动元素的布局重叠。
    • 创建BFC：例如设置display：flex/inline-blocks、float只要不是none就行、overflow不为visible等
 
 
8.       简述 Javascript 原型以及原型链
  • 原型：
    • 每个对象拥有一个原型对象，对象以其原型为模板，从原型继承方法和属性，这些属性和方法定义在对象的构造器函数的 prototype 属性上，而非对象实例本身。
    • 每个构造函数都有一个属性xxx.prototype，指向原型对象
    • 任意函数._proto_的指向是Function，但Function._proto_===Function.prototype
  • 原型链：
    • 当访问一个对象的某个属性时，会先在这个对象本身属性上查找，如果没有找到，则会去它的 __proto__隐式原型上查找，即它的构造函数的 prototype，如果还没有找到就会再在构造函数的prototype的__proto__中查找，这样一层一层向上查找就会形成一个链式结构，我们称为原型链。
 
9.       简述什么是 XSS 攻击以及 CSRF 攻击？
  • XSS攻击：
    • 定义：是一种代码注入攻击， 攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
    • 常见方式：
      • 在 HTML 中内嵌的文本中，恶意内容以 script 标签形成注入。
      • 在标签属性中，恶意内容包含引号，从而突破属性值的限制，注入其他属性或者标签。
      • 在标签的 href、src 等属性中，包含 javascript: (伪协议)等可执行代码。
    • 防范方式：
      • HttpOnly：在cookie 中设置 HttpOnly 属性后，js脚本将无法读取到 cookie 信息。
      • 输入过滤：在前端进行输入格式的检查，后端也做相应的过滤检查。
  • CSRF跨站点请求伪造：
    • 定义： 攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。
    • 防范方式：
      • token：token 验证的 CSRF 防御机制是公认最合适的方案。
 
9.        CSS 的选择器优先级是怎样？
  • 优先级通用规则：
    • ！important
    • 在stayle属性里写的行内样式
    • id选择器（#id）
    • class选择器（.class名）
    • 标签选择器（<div>、<p>等）
    • 通配符选择器（*）
    • 伪选择器
  • CSS叠加规则：
    • 不同的样式可以叠加
    • 相同的样式且权重相同的情况下：后来者居上
posted @ 2022-04-08 11:16  Vegatable_Bird  阅读(55)  评论(0)    收藏  举报