解决方案

[py-tofee]

大型文件断点续传-思路

• 文件切片 Blob.slice
• 给每个切片一个标识，用于后续merge切片
• 创建一个Web Worker，负责上传，避免影响JS主线程运行
• 由于一个网页有最大tcp可连接数的限制，每个http请求都会有一个tcp链接
• 所以每次并行发起n个请求（假设n=3)，promise.all([req1, req2, req3])
• 当所有请求都返回结果，再发起下一次3个并行请求
• 由于http是无状态传输协议，切片标识还有一个作用，就是服务器可以知道这个切片是否已经上传
• 当发送完所有的切片之后，最后要向服务器发送一个merge请求，表示切片发送完毕，可以合并
• 服务器合并切片，输出成文件，然后删除切片文件和切片标识

[py-tofee]

webpack

• 运行原理，执行webpack函数时，会生成一个compiler实例，用于编译代码，
• 然后webpack会配置很多插件和loader用于优化和预编译我们的代码
• 遍历这些插件，将compiler实例注入到插件的apply方法中，
• 这样插件可以监听compiler的钩子函数，在特定的时候执行相关操作，
• 最终优化输出的打包文件

HMR热更新原理

webpack执行，将代码编译打包，并将打包文件保存在内存中， 启动webpack-dev-server的时候，通过sockjs在devserver和浏览器之间建立了一个websoket长连接； 每当重新编译完成之后，devserver通过websoket通知浏览器新的打包文件生成， 并将新的文件hash值告诉浏览器 浏览器重新请求最新的代码，将最新的代码返回给 负责热更新的插件 该插件对比新旧打包文件，更新模块之间的依赖关系，重新执行相关代码， 实现不刷新页面的情况下 更新视图 如果热更新失败，会自动刷新浏览器，实现代码更新

防抖

lodash中debounce函数 _.debounce(func, delay)

• 监听容器尺寸变化事件

• elementUI内置有addResizeListener和removeResizeListener方法，用于监听容器尺寸的变化

• 基于Web API：ResizeObserver实现，ResizeObserver可以监听Element的内容区域（不包含padding）和SVGElement的边界框改变

• ResizeObserver使用观察者模式，避免element在自身回调中去调整尺寸大小，触发无限回调

• 远程搜索，控制http请求

节流

lodash中throttle函数 _.throttle(func, delay)

Map Object

Object的键名可以是字符串类型和symbol类型，object可以读写原型上的属性，object自定义的键名可能与原型对象的键名冲突，导致原型对象属性被覆盖，object是无序的，且原型上没有迭代器方法，所以默认不能使用for..of迭代；但是可以自定义迭代器方法，或者使用Object.keys/object.values辅助遍历； map的键名可以是任意类型，包括null和undefined，map是有序的，且可以按插入顺序迭代，内置迭代器 map.get(key)方法只能访问自身的属性，不能访问原型上的属性map.get('constructor') === undefined map不支持序列化，序列化后都为'{}'

vue style-scoped 是怎么实现组件之间的样式不相互影响的

在单文件vue组件中，对使用了scoped 的样式的组件，都会生成一个唯一的hash值data-v-xxx vue生成的dom节点，都携带这个data-v-xxx属性 同一个组件中的所有dom元素，data-v-xxx相同 不同组件之间data-v-xxx不相同 组件中自定义的样式类都会加上这个data-v-xxx属性后缀 这就保证了组件的样式不会污染全局 如果要修改当前组件中用到的第三方UI库的组件样式 由于第三方UI库的样式不会有data-v-xxx后缀 所以需要使用/deep/或者>>> 实现对当前组件下的第三方UI库样式的重写 使用/deep/或者>>>后生成的样式类，不会有data-v-xxx属性后缀

vue once off

once 监听一个自定义事件，在当前组件生命周期中，只执行一次，一旦触发之后，监听器会自动移除 off(事件，回调) 移除自定义监听事件，如果不传参，则移除所有的自定义事件 如果提供了事件，则移除该事件的所有监听器 如果提供了事件和回调，则移除这个回调的监听器 原理：组件实例的自定义事件都存在事件中心_events属性中，不管是添加、移除还是触发事件，都是操作_events

系统自动检测是否有更新，有更新就重新加载页面

在package.json中的scripts命令中配置，每次build的时候，执行node src/build-version 向public目录中写入一个js文件，文件中判断window.getVersion方法是否存在，存在就调用。。。

自定义组件使用v-model

v-model是value和input事件的语法糖 组件选项 model:{value: '', event: ''}可以指定v-model绑定哪个属性，和使用哪个事件监听器

v-model与.sync修饰符

v-model只能实现一个变量的双向绑定 .sync修饰符可以实现多个变量的双向绑定 update:prop的语法糖 vue3中，v-model指令可以传参v-model:propName

$attr

子组件实例上的属性，表示父组件传来的所有自定义属性，除了style和class

$listeners

子组件实例上的属性，表示父组件传来的所有自定义事件

父子组件生命周期钩子函数执行顺序

alt title

alt是图片加载失败时，显示在页面上的代替文字，是对图片的描述，搜索引擎判断图片信息，主要是依靠alt属性 title属性是对文本或者图片的进一步说明，鼠标移入会显示

剩余参数和arguments

剩余参数是指没有对应形参的实参，函数的第一个参数不能是剩余参数，剩余参数是数组 arhuments是指传递给函数的所有实参，是一个类数组对象，箭头函数没有arguments

new.target

普通函数内部属性，箭头函数没有 用于检测函数是否是通过new关键字调用的

map forEach

map循环数组，并返回一个新数组 forEach循环数组，数组的每一项都会执行callback函数，但是forEach函数返回undefined

cookie session

cookie是存在客户端的内存或者硬盘中，由服务器设置，也可以由客户端设置，服务器可以设置httpOnly的cookie，表示不允许客户端修改 客户端不可以读取和修改httpOnly的cookie cookie通常用于存储sessionID和token值 cookie可以设置有效期，但是清空页面缓存后失效

session是存储在服务器中的，当请求某个页面时，服务器会为这个页面分配一块内存，就是session，内存中也存有sessionID 这个sessionID在客户端请求时，保存在cookie中，这样页面刷新或者跳转，就能把sessionID传给服务端，服务器就能知道原页面的状态信息

sessionstorage和localstorage的区别

localstorage 只有当用户清除缓存才会被清除，否则一直存在 sessionstorage 的生命周期在 当前窗口，当窗口或者标签页被关闭，就会被删除， 如果是浏览器崩溃，可能会将sessionstorage保留在内存中一段时间 这时可以借助这个恢复之前的页面

vue prop传递事件于 on/emit方式的区别

prop必须传入，否则调用会报错 子组件必须显示的声明prop 跨级传递不友好 prop是单向的，只能有父组件到子组件传递

on/emit 函数不是必须要定义，emit的时候，如果没有对应的事件监听器，也不会报错； 可以创建一个eventbus，用于处理跨级组件的通信，发布订阅模式，且父子组件通过这个可以实现双向通信

css预处理器的作用

开发更方便，支持变量，函数，混入 扩展等功能 基于模块化实现css文件的拆分，对import的一个扩展，编译后可以合并成一个css文件，减少http请求数 还可以配合webpack style-loader，动态的创建