百度前端暑期实习一二三面

已经过去半个多月啦，发现这篇文章还在草稿箱里，发出来供自己以后回顾学习

----------------分割线------------------------

三面真的是快把我打趴下了...压力太足了，全是底层原理+优化

如何防止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触发时记录结束坐标和时间，并计算起始-结束距离和时间差。给距离和时间分别设定一个阈值，判断计算出的距离和时间差是否都小于对应阈值，若是则判断用户意图为点击，否则判断是拖动。（只看距离可能会出现用户拖了又回到原处，但仍会触发点击）