百度前端暑期实习一二三面
已经过去半个多月啦，发现这篇文章还在草稿箱里，发出来供自己以后回顾学习
----------------分割线------------------------
三面真的是快把我打趴下了...压力太足了，全是底层原理+优化
如何防止H5中的Native通过JSBridge提供的接口被攻击者恶意调用？
这个问题在网上也找不到答案....评论区有懂哥讲讲吗
我自己的分析是本质是XSS攻击，用防御XSS攻击的方式。
vite和webpack区别？在开发模式和生产模式区别？
vite可以类比成webpack+webpack-dev-server，特点是：
- 快速的冷启动
- 即时的模块热更新（HMR）
- 按需编译
vite会直接启动开发服务器，而webpack需要构建依赖图等等，将所有代码打包到一起，再放到开发服务器上运行。
主要区别在开发阶段，生产阶段的区别主要是Rollup和Webpack的区别
开发阶段
冷启动
- Webpack：启动时执行webpack打包命令，将所有模块的依赖都打包到一起放到服务器上运行
- Vite：快速冷启动，只启动一个开发服务器。遇到模块时作为单独的HTTP请求向开发服务器请求，开发服务器编译，加载相关依赖后返回
HMR
- Webpack：重新编译被改动的模块的所有相关依赖模块
- Vite：重新请求被改动的模块
生态
- Webpack：生态更成熟，plugins更多
- Vite：还比较年轻
生产阶段
- Webpack：适合开发应用，对于CommonJS，AMD，ES Module语法都兼容
- Rollup：适合开发类库，只支持ES Module
写一个禁用Object.assign()的plugin？
从来没写过webpack plugin，被问到直接蒙b。
下来自己学习了很多相关的概念和知识，从0到1写一个webpack plugin还挺有意思的，也加深了对plugin的认识。
自己写一个plugin，首先要满足一个框架：
- 是一个类
- 在apply方法下实现功能，apply方法接收第一个参数是compiler对象
class ObjectAssignPlugin {
apply(compiler) {
compiler.hooks.compilation.tap('ObjectAssignPlugin', (compilation) => {
compilation.hooks.buildModule.tap('ObjectAssignPlugin', (module) => {
// console.log(module)
module.parser.hooks.call.for('Object.assign').tap('ObjectAssignPlugin', () => {
throw new Error(`Error: Object.assign is not allowed!`);
});
});
});
}
}
module.exports = ObjectAssignPlugin
其中使用compilation的buildModule钩子，以此介入编译过程，在parser遇到Object.assign方法时抛出错误。
小程序底层原理？
双线程架构
区别于传统Web的单线程模型，小程序中的渲染层和逻辑层分别由两个线程管理。渲染层-Webview，逻辑层-JSCore。所有的通信都要经过Native，包括网络请求。
逻辑层和视图层通过setData和Event通信：
逻辑层数据变更setData驱动渲染层的视图更新，渲染层交互触发事件，触发逻辑层的事件响应函数。
小程序中的JSBridge和普通的JSBridge有什么区别？
小程序中的JSBridge没有完整的浏览器环境，依赖客户端提供的环境
其他在网上真找不到答案...评论区各位大哥可以给点思路吗
首屏加载时间长如何解决？
SSR服务端渲染流程和原理？
优化题：用户在屏幕上微小的移动可能会触发click事件，不希望触发click，如何用mousemove事件替代click事件做优化？
磕磕绊绊说了，但面试官不知道为啥一直要说mousemove，再加上他之前问的问题真的很难，所以整个人都很紧张也很疲劳。
下来整理思路之后，我的做法是在mousedown触发时记录起始坐标和时间，mouseup触发时记录结束坐标和时间，并计算起始-结束距离和时间差。给距离和时间分别设定一个阈值，判断计算出的距离和时间差是否都小于对应阈值，若是则判断用户意图为点击，否则判断是拖动。（只看距离可能会出现用户拖了又回到原处，但仍会触发点击）