携程前端开发暑期实习一面

跟面试官聊了挺多，问的问题是真的多...而且很细致。写几个没答好的问题吧..

微信开发中unionid和openid的区别？

• openid：一个用户+一个微信应用（微信开发平台下的应用，如公众号，小程序）唯一确定一个openid
• unionid：一个用户唯一确定一个unionid（换言之，一个用户在微信平台下所有的unionid都是相同的）

ps：pc端和客户端同一用户获取的openid不一样

ES6中Map和Object的区别？WeakMap？

共同点：存储键值对的数据结构

不同点

• 键类型：Object中的键类型只能是字符串或者Symbol；而Map的键类型可以是任何类型；WeakMap的键类型只能是对象
• 遍历顺序：Object中的遍历顺序是不确定的；而Map的遍历顺序跟插入顺序相同，可以直接实现LRU缓存；WeakMap的键不可遍历
• 键引用：Map中的键是强引用，键跟内存地址绑定；WeakMap中的键是弱引用，在键的引用计数清零时会被垃圾回收

Map和WeakMap

左：Map 右：WeakMap

有用过JS中的装饰器模式吗？（对装饰器模式不太熟悉，后续有时间补充一下相关知识）

在不改变对象基础上，动态为对象添加行为或者功能。ES6引入语法糖"@"。装饰器可以分为三类：函数装饰器，类装饰器，类成员装饰器。是类继承的一种替代方案，比继承更简洁且易于管理。

@readonly

webpack中loader和plugin的区别？（webpack知识点是真的枯燥，真没看多少）

作用：loader加载器主要是负责加载各种非js文件并进行编译，打包和压缩；plugin插件则是补足webpack原本无法完成的一些其他任务，如打包优化，环境变量注入等

作用时间：loader在webpack打包文件前作用；plugin作用贯穿整个生命周期，监听webpack广播出的生命周期事件，使用webpack API实现功能扩展

使用方法：webpack配置文件中，loader在rules字段对不同类型文件进行解析规则指定；plugins则在plugins字段以新建插件实例的方式引入

scss文件在webpack中的编译打包过程是怎么样的？

1. 加载scss：sass-loader在js文件中根据模块化规则找到scss文件
2. 编译scss：sass编译器将scss编译为css
3. css-loader解析：根据css-loader对css文件进行加载并解析其中的@import和url()
4. style-loader工作：将css样式插入html文件中

POST请求会返回几次？

两次，一次先发送header，返回100 continue，再发送body，返回200 OK。

后端传1w条数据，前端如何处理？

分片渲染（setTimeout / requestAnimationFrame）

将时间分片，隔一段时间插入一些DOM并做一次渲染。

文档碎片（document.createDocumentFragment）

调用多次document.body.append(),每次都要刷新页面一次。效率也就大打折扣了，而使用document_createDocumentFragment()创建一个文档碎片，把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，这也就只需要一次页面刷新就可（fragment存在于内存中）

虚拟列表（仅渲染视窗内区域）

根据列表项高度计算视窗内可渲染列表项数，动态维护需要展示的列表项，减少渲染压力。

https://codesandbox.io/s/virtuallist-1-rp8pi?file=/src/components/VirtualList.vue