B站（猫耳） vs. 莉莉丝 前端实习，均base上海

投的Web前端开发岗，两场技术面都围绕实习项目和框架原理一面（60分钟）重点扣项目细节，问了支付收银台首屏优化，我讲了用Webpack拆包、图片转WebP、Workbox缓存，压测数据从3.2s到1.2s挺加分。移动端适配说了REM+VW混合方案，测了20+机型面试官点头了。还问到React动态路由权限和Webpack树摇不生效原因，记得说ES6模块和sideEffects字段！二面（90分钟）深挖原理，Vue3响应式用Proxy拦截这点必背，我还举了markRaw解决深层对象的例子。高并发优化讲了虚拟列表和WebSocket防抖，防重复支付方案里的UUID+Redis校验面试官追问了实现细节。最难的性能问题我讲了合成层优化，用RAF控制动画频率救了低端机卡顿。

自我介绍sessionstorge 和localstorge的区别是什么为什么用sessionstorge 不用localstorge了解cookies是什么吗居中布局，绝对定位let const var的区别，变量提升是什么promise有哪些方法apply、bind、call的区别双等号和三等的区别事件循环typeof和instanceof的区别响应拦截器和请求拦截器中都封装了什么防抖和截流的区别反问面的咋样主要的业务整体面试20分钟左右，感觉还是很舒服的，问题比较基础，面试官很和蔼

一二面全是八股盛宴一面1、大数据量的图表有没有遇到过什么性能瓶颈，怎么做的优化呢？2、在网慢的情况下，进入页面，资源的下载顺序是怎么做的？async和defer的区别是什么？3、语义化标签有哪些？好处有哪些？SEO优化？4、服务端渲染？5、盒模型是什么？box-sizing的作用是什么？为什么要切换计算方式呢？6、如何实现一个元素的水平垂直居中7、flex布局怎么去写，双飞翼布局8、定位的方式有哪些？三大定位哪些脱离文档流？9、absolute相对什么来定位的？10、JS的数据结构有哪些？从基础数据类型和引用数据类型来说11、null和undefined有什么区别？==返回是什么？12、var、let、const有什么区别？13、闭包说一下，是怎么造成内存泄漏的影响的？14、手写一个防抖函数15、说一下事件循环，JS为何这样设计呢？16、说一下对promise的理解17、浏览器输入URL到成功渲染出来的过程中发生了什么18、DNS解析是怎么做的呢？这是递归的查询还是迭代的查询呢19、websocket如果断掉了这么检测？20、SEE是什么？是一个什么连接？二面1、TCP连接为什么需要三次握手？具体过程是什么？2、重排和重绘是什么？修改一个DIV的width属性是重排还是重绘？3、UDP知道吗？4、浏览器中的进程和线程指的是什么？5、JS为什么是单线程的？6、什么是JS异步？解释一下事件循环？每次循环执行几个宏任务7、浏览器的跨域？JSONP的原理是什么？script是在干什么？发了请求回去怎么通信的？8、HTML的第一排的就是type，不加会有什么问题？加上和不加分别是什么模式9、CSS的盒模型是什么？border- box的作用是什么？包含哪些？10、什么叫盒模型的塌陷？为什么会发生？怎么解决？11、display float的float是干嘛的12、flex和grid有什么区别？哪个是一维的？13、如果子级是200px的宽度，父级是小于200px，会发生什么？14、什么是闭包？如果定义了一个变量，是一个一两个G的话，用完之后怎么手动销毁呢？15、防抖和节流一般用来干嘛？区别是什么？16、什么是事件的冒泡和捕获？17、nodejs中的commonJS和ESmodule的区别是什么？18、静态分析的tree-shaking是干嘛的？具体的实现逻辑是什么样的？怎么去分析哪些是静态代码的？什么叫抽象语法树？19、用过哪些打包编译的工具？20、webpack的plugin和loader分别是干嘛的？21、使用less-loader的时候，过程中发生了什么？比如把less转成CSS，这个转变的过程了发生了什么？22、现在很多都是SPA，那为什么会有SSR呢？23、了解哪些跨端的框架？为什么要出现这些跨端的框架？24、RN是怎么和原生的APP通信的？他的渲染机制是什么样的？25、手撕：将数组的0移动到末尾，其他的非0数字的顺序保持不变

在前端面试中，Webpack 一直是高频考点之一。而在所有模块化相关的问题中，“import 导入时 Webpack 在干什么” 这类问题经常被问到。乍看只是一个语法糖，但背后其实包含了 模块解析、依赖图构建、代码转换、打包优化 等一整套复杂流程。本文小圆将带你从源码构建视角，彻底弄清楚 import 背后 Webpack 的工作原理～～～一、整体流程概览当你在代码中写下这一行时： import { foo } from './b.js'; Webpack 的处理流程大致如下：解析阶段（Parsing）：扫描代码，提取所有 import 语句；模块定位（Resolving）：根据路径或模块名找...