哔哩哔哩T2前端实习二面面经
哔哩哔哩T2前端实习二面面经
-
自我介绍
-
深浅拷贝用过吗？说下怎么浅拷贝
-
es6解构赋值、Object.assign或者自己写一个简单的浅拷贝
-
-
手写深拷贝，考虑对象属性循环引用的情况
-
function deepClone(obj, map = new WeakMap()) { if (typeof obj !== 'object' || !obj) return obj let res = map.get(obj) if (res) return res res = Array.isArray(obj) ? [] : {} map.set(obj, res) for (let key of Object.keys(obj)) { res[key] = deepClone(obj[key], map) } return res }
-
-
Promise是什么？
-
ES6新语法，为解决回调地狱应运而生，处理异步任务
-
-
Promise如何实现的异步？
-
Promise内置三种状态，Promise的状态发生改变后，状态就不能再改变了
-
通过在适当的时机调用构造函数中的resolve或者reject方法，修改Promise实例状态，来将then方法中的回调添加的微任务队列中
-
等待主线程中的同步任务执行完后，再执行微任务队列中的函数，达到异步的效果
-
-
Promise延迟修改状态，then方法中的回调函数什么时候被添加到微任务队列中？
-
then方法中的回调函数，根据当前promise实例的状态决定如何处理
-
如果调用then方法的时候，promise实例状态为pending，这个时候需要将该回调函数暂存起来，在修改该promise实例的状态后，将该回调添加到微任务队列中
-
如果promise实例状态为fulfilled或者rejected，直接将回调函数注册到微任务队列中
-
-
跨域怎么解决？
-
JSONP、CORS（简单请求和非简单请求）、前端脚手架配置、Nginx反向代理、Websocket（没有同源限制）
-
-
vue的vue.config.js如何修改webpack配置？
-
vue.config.js向外导出一个对象，对象中有一个叫chainWebpack的方法，接收一个Webpack配置对象作为参数
-
通过这个参数对象修改webpack配置
-
-
一般用来修改那些webpack配置？
-
配置splitChunks分包策略，externals忽略公共基础包，采用CDN的方式引入资源等
-
添加loader配置
-
-
首屏加载如何优化？
-
webpack配置分包，externals，静态资源压缩，静态资源缓存，路由懒加载，图片懒加载，防抖，节流
-
-
图片懒加载原理？
-
img容器标签设置data-src为真实图片地址，判断图片容器的scrollTop与视图窗口高度clientHeight+窗口滚动过的距离scrollTop的大小关系
-
图片容器出现在可视区，就将其data-src属性赋值给src，加载图片
-
-
路由懒加载原理？
-
路由配置懒加载后，需要被懒加载的路由文件被单独打包成一个chunk文件
-
在打包出来的HTML模板中配置该chunk文件为预提取，在浏览器空闲时加载路由文件
-
在切换到对应路由时，通过函数引入预提取的路由文件，实现懒加载
-
-
手写节流函数
-
function throttle(callback, time = 300) { let timer = null return function (...args) { if (!timer) { timer = setTimeout(() => { callback.apply(this, args) timer = null }, time) } } }
-
-
this指向分哪几类情况？
-
全局环境下调用this（全局对象）
-
函数作为对象方法被调用（指向该对象）
-
通过call、apply和bind方法显式指定this
-
作为构造函数调用（指向创建的对象实例）
-
-
箭头函数的this？
-
没有自己的this，继承自最外层普通函数，一但确定无法被修改
-
-
为啥用vite，vite好在哪里？
-
对公共依赖库做预构建，启动速度快
-
业务代码通过loader处理后，直接通过浏览器支持的ESModule加载依赖模块
-
打包阶段基于rollup，做了默认的打包优化
-
-
场景题，后端给你一万条数据，如何展示？
-
指定一个渲染容器，可以滚动，初始渲染少量数据
-
在滚动这个容器列表的时候，当最后一个元素出现在可视区，再渲染部分数据
-
如果存在大量的DOM操作可以通过文档碎片来批量操作
-
-
如果需要保存上一次用户的操作结果，怎么做？
-
通过浏览器本地存储缓存数据，下次访问页面时，判断本地存储有无数据，进而条件渲染
-
-
vue的nextTick原理是什么，实际用处？
-
vue模拟异步任务的方法，内部通过判断当前执行环境是否支持promise、mutationObserver、setImmediate、setTimeout来实现优雅降级
-
在nextTick的回调函数中可以获取到vue数据更新后的真实DOM
-
在手动操作DOM绘制Echarts图形时用过
-
-
vue与jQuery操作DOM最大的不同是什么？
-
vue引入的虚拟DOM的概念
-
-
vue的diff算法？
-
项目问题
-
技术选型
-
介绍项目
-
做了多久
-
项目难点
-
怎么上线的（后端同学弄的）
-
做了那些优化
-
-
最近在学什么？
-
反问
