笔记

zz_xx
46 阅读7分钟

节流和防抖的区别

节流

高频触发时，一段儿时间（n秒内）只执行一次，节流会稀释函数的执行频率

理念：每次触发事件时都判断当前是否有等待执行的延时函数

防抖

高频触发后，n秒内只触发一次，如果n秒内高频事件再次被触发，则重新计算时间。

理念：每次触发事件时都取消之前的延时调用方法

区别：防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行

手写深拷贝：

function deepclone(obj,hash){
    // 处理 null
  if (source === null) return source
  // 处理正则
  if (source instanceof RegExp) return new RegExp(source)
  // 处理日期
  if (source instanceof Date) return new Date(source)
  // 处理 Symbol
  if (typeof source === 'symbol') return Symbol(source.description) // +
  // 处理对象和数组
    let cloneObj = Array.isArray(obj) ? [] : {};
    for(let key in obj){
        if(obj.hasOwnProperty(key)){
            if(obj[key] && typeof obj[key]==='object'){
               cloneObj[key]= deepclone(obj[key])
            }else{
                cloneObj[key]=obj[key]
            }
        }
    }
       
    return cloneObj
}
  1. Promise 解决地狱回调的问题；async/await 使用，异步过程同步化
  2. vue 响应式原理：观察者订阅者模式，2.0 是 defineProproty；3.0 是 proxy
  3. 虚拟 dom 原理
  4. 算法基于啥算法实现的，原理
  5. vue 组件传值方式，兄弟组件的传值
  6. created 为啥不能用箭头函数定义？this 指向不对；如果用箭头函数定义，this 是啥值
  7. 前端性能优化思路，具体实现
  8. 从输入 url 到浏览器渲染经过了哪些流程
  9. 强缓存，协商缓存；两种方案优势缺点；分别使用情况，使用条件
  10. js 事件循环机制
  11. 前端性能优化,具体实现，优化指标等，骨架屏优化；减少重排或者重绘等
  12. 比较关注的性能指标：包大小，请求数量，浏览器缓存合理使用，页面渲染阻塞情况
  13. webpack 个性化配置：拆包；less，sass 处理；打包加速优化；dll plugins；图片资源压缩
  14. 提升效率的方式：组件封装，公共函数封装（时间格式化等）
  15. 性能优化，白屏的处理：百度统计优化
  16. 并行压缩；dllplugin；splitchunk；混淆压缩；happypack 多线程；includes 减少范围；cache 属性，对性能优化作用最大，改善构建速度
  17. 接口服务端定义的：接口文档，沟通交流；后端定义接口不规范咋办？数据的处理由前端，还是后端处理；如何定义规划的
  18. cookie 的理解；domain(域名，顶级域名), path, expires(session), http-only
  19. 脚手架，一般会改哪些配置；压缩的处理：插件的压缩处理，gzip 压缩，代码压缩
  20. ES6 常用属性和方法,async/await 的使用，和 promise 使用的区别 21.http 协议的理解：1.1 和 2.0 的区别；长链接如何做到的，分成更小的帧，二进制传输 H5 开发，如何做真机调试,http 是有状态还是无状态的，请求有无区别
  • react native 可以进行真机调试：usb 调试
  • vConsole / Eruda 查看报错信息
  • Fildder(手机和 fildder 链接同一个网络，然后手机开启手动代理并安装证书)
  • android 手机 chrome 浏览器，开启 usb 调试，chrome://inspect/#devices
  • Charles 代理调试
  1. 21.移动端 1px 的问题
    • 小程序 api 有 setData 方法，为啥要合并操作，减少操作次数的原因
    • 会导致卡顿，操作反馈延迟严重，渲染结果不实时
    • 当数据量过大时会增加脚本的编译执行时间，占用 WebView JS 线程
  3. 遍历对象的方式

  • for in：主要用来遍历对象（for keys in obj）

    • 遍历自身和继承的可枚举属性（延续原型链遍历出对象的原型属性）
    • 有什么问题：要使用 hasOwnProperty 判断，只处理自身的，不处理继承的

  • for of： ES6 新增的，遍历所有数据结构的统一的方法

    • 只要部署了 Symbol.iterator 属性，就被视为具有 iterator 接口，就可以用 for…of 循环遍历它的成员
    • 包括数组、Set 和 Map 结构、某些类似数组的对象（比如 arguments 对象、DOM NodeList 对象）、Generator 对象，以及字符串

  • Object.keys：返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)

  • Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性(不含 Symbol 属性，但是包括不可枚举属性)

  • Object.getOwnPropertySymbols()

  • Reflect.ownKeys(obj)遍历：返回一个数组，包含对象自身的所有属性，不管属性名是 Symbol 或字符串，也不管是否可枚举

  1. vue 的组件通信方式：attr；父组件调用子组件的方法（attr；父组件调用子组件的方法（emit；$refs）
  2. js 原型链
  3. 单点登录实现，前端还是后端实现
  4. SSR 渲染原理
  5. vue3 和最新的 react 有啥区别，对比有啥优势
  6. 团队前端人数，任务分工；团队技术栈规划；团队前端，代码质量如何管控；'
  7. async 和 defer 区别；prefetch 和 preload 区别
  8. vue diff 算法 比较只会在同层级进行, 不会跨层级比较：节点类型不同，直接用新的替换旧的；相同，就比较子节点 在 diff 比较的过程中，循环从两边向中间比较
  9. vue 虚拟 DOM 的作用
  • 不会进行回流和重绘；
  • 对于频繁操作，只进行一次对比差异并修改真实 DOM，减少了真实 DOM 中多次回流重绘引起的性能损耗；
  • 有效降低大面积的重绘与排版，只更新差异部分，进行渲染局部
  1. vue key 的作用：高效的更新虚拟 dom
    • 高阶函数作用：柯里化(curry)；组合函数(compose)；管道函数(pipe)
    • vue 双向数据绑定：数据劫持结合发布者-订阅者模式
  4. SSR 服务端原理(NuxtJS)
    • keep-alive 动态组件
    • 单点登录 SSO 实现
  7. vue2.0 和 vue3.0 区别

  • 2.0

    • 双向数据绑定：Object.defineProperty

  • 3.0

    • 双向数据绑定：Proxy，Reflect
    • Composition API：更好的逻辑复用和代码组织
    • Fragment：可以用多个根元素
    • Teleport（任意门）
    • 使用 Typescript 开发
    • 重构 Virtual DOM，修改了 diff 算法

浏览器缓存：cookie localstorage，sessionstorage， http缓存：强制缓存/协商缓存，

强制缓存，请求头设置Expires缓存时间，此时间范围内，则从内存（或磁盘）中读取缓存返回--不推荐，因为时间戳取的是本地时间戳，更推荐响应头加入cache-control每单位是秒s 'Cache-Control':'max-age=10'

协商缓存：

  1. 读取服务器修改时间，
  2. 将读出来的修改时间赋给响应头的last-modified字段。
  3. 最后设置Cache-control:no-cache
  4. 当客户端读取到last-modified的时候，会在下次的请求标头中携带一个字段:If-Modified-Since
  5. 之后每次对该资源的请求，都会带上If-Modified-Since这个字段，服务端拿到时间并再次读取该资源的修改时间，让他们两个做一个比对来决定是读取缓存还是返回新的资源

重排（reflow）和重绘（repaint）

重排，无论通过何种方式影响了元素的几何信息（元素在视口内的位置和尺寸），浏览器需要重新计算元素在视口内的几何属性，叫重排

重绘：通过渲染和重排阶段，浏览器知道了元素是否可见，以及可见元素的几何信息，并将节点渲染为屏幕上的实际像素，这个阶段叫做重绘

闭包：可以在一个内层函数中访问到其外层函数的作用域

avatar
文章
阅读
粉丝