摘要：前端中小厂面试中，发现场景题出现的频率还可以，另外就是八股和项目，所以干脆整理了160多道题，以供最近面试前端的人参考，对你们有帮助的话可以，如果同样目标是中小厂，我的文章或许能帮到一些忙！
前端中小厂面试中，发现场景题出现的频率还可以，另外就是八股和项目，所以干脆整理了160多道题，以供最近面试前端的人参考，对你们有帮助的话可以，如果同样目标是中小厂，我的文章或许能帮到一些忙！
面试题部分77.如何通过设置失效时间清除本地存储的数据？【热度：1,085】要清除本地存储的数据，可以通过设置失效时间来实现。以下是一种常见的方法：
1. 将数据存储到本地存储中，例如使用localStorage或sessionStorage。
2.在存储数据时，同时设置一个失效时间。可以将失效时间存储为一个时间戳或特定的日期时间。
3.在读取数据时，检查当前时间是否超过了失效时间。如果超过了失效时间，则认为数据已过期，需要清除。
4. 如果数据已过期，则使用localStorage.removeltem(key)或sessionStorage.removeltem(key)方法删除该数据。
以下是一个示例代码：
要实现一个命令行工具来统计输入目录下指定代码的行数，你可以使用Node.js的fs模块来读取文件
内容并进行行数统计。以下是一个简单的实现示例：
你可以将上述代码保存为一个JavaScript文件，比如line-counter.js。然后，在终端中运行以下命令：
其中/path/to/directory是你要统计的目录路径，·js是你要统计的文件扩展名。运行命令后，程序将会输出指定文件类型在指定目录中的总行数。
你可以根据需要自定义输出格式、文件过滤规则等。此示例只是一个基本的实现，你可以根据具体需求进行扩展和优化。
90.JS执行100万个任务，如何保证浏览器不卡顿?【热度：806】Web Workers
要确保浏览器在执行100万个任务时不会卡顿，你可以考虑使用WebWorkers来将这些任务从主线程中分离出来。WebWorkers允许在后台线程中运行脚本，从而避免阻塞主线程，保持页面的响应性。
在这个示例中，主线程创建了一个新的WebWorker，并向其发送了一个包含任务范围的消息。Web
Worker在后台线程中执行任务，并将结果发送回主线程。
requestAnimationFrame来实现任务分割
使用requestAnimationFrame来实现任务分割是一种常见的方式，它可以确保任务在浏览器的每
一帧之间执行，从而避免卡顿。以下是一个使用requestAnimationFrame来分割任务的简单例子:
在这个例子中，我们使用requestAnimationFrame来循环执行处理小块任务的函数
processChunkWithRAF，从而实现对大数组的任务分割。这样可以确保任务在每一帧之间执行，
避免卡顿。
针对上面的改进一下
constchunkSize=1000；//每个小块的大小是不能保证不卡的，那么久需要动态调整
chunkSize的大小，代码可以参考下面的示范：
在这个例子中，我们动态调整chunkSize的大小，根据处理时间来优化任务分割。根据处理时间的
表现，动态调整chunkSize的大小，以确保在处理大量任务时，浏览器能够保持流畅，避免卡顿。
92.Eslint代码检查的过程是啥？【必会]93.虚拟混动加载原理是什么，用JS代码简单实现一个虚拟滚动加咖载
94.[React]react-router和原生路由区别
95.html的行内元素和块级元素的区别[京东一面】
96.介绍-下 requestldleCallback api
97.documentFragment api是什么，有哪些使用场景？【必会
98. git pull 和 git fetch 有啥区别?
99.前端如何做页面主题色切换【腾讯一面】
100.前端视角-如何保证系统稳定性【字节一面]
101.如何统计长任务时间、长任务执行次数【腾讯二面】
102.V8里面的 JT是什么?[京东一面]
103.用JS 写一个Cookies 解析函数，输出结果为一个对象
104.vue中 Scoped Styles是如何实现样式隔离的，原理是啥
105.样式阿商方式有哪些【字节一面]
106.在JS中，如何解决递归导致栈溢出问题？
113.[webpack]打包时hash码是如何生成的【必会]
114.如何从0到1搭建前端基建【京东一面】
115.你在开发过程中，使用过哪些TS 的特性或者能力？【美团—面]
116.JS的加载会阻塞浏览器渲染吗？【百度一面】
117.浏览器对队头阻寒有什么优化？[百度一面）
118.Webpack项目中通过script标签引入资源，在项目中如何处理？
119.应用上线后，怎么通知用户刷新当前页面？【腾讯一面】
120.Eslint代码检查的过程是啥？
121.HTTP是一个无状态的协议，那么Web应用要怎么保持用户的登录态呢？
122.如何检测网页空闲状态（一定时间内无操作）【百度二面】
123.为什么 Vite 速度比 Webpack 快?
124.列表分页，快速翻页下的竞态问题【百度二面】
125.JS执行100万个任务，如何保证浏览器不卡顿？
126.git仓库迁移应该怎么操作
127.如何禁止别人调试自己的前端页面代码？【字节二面】
128.web系统里面，如何对图片进行优化？【必会]
129.OAuth2.0是什么登录方式
130.单点登录是如何实现的？
131.常见的登录鉴权方式有哪些？
132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作？
133.vite 和 webpack 在热更新上有啥区别？
134.封装一个请求超时，发起重试的代码
135.前端如何设置请求超时时间timeout[必会]
136.nodejs如何充分利用多核CPU?[字节二面]
137.后端一次性返回树形结构数据，数据量非常大，前端该如何处理？
138.你认为组件封装的一些基本准则是什么？
139.页面加载速度提升(性能优化)应该从哪些反向来思考？
140.前端日志埋点SDK设计思路
141.token进行身份验证了解多少？[腾讯一面】
142.在前端应用如何进行权限设计？【字节二面】
143.【低代码]代码平台一般泊染是如何设计的？
144.【低代码】代码平台一般底层协议是怎么设计的
145.[Webpack]有哪些优化项目的手段?
150.在你的项目中，使用过哪些webpack plugin,说一下他们的作用
151.在你的项目中，使用过哪些webpackloader,说一下他们的作用
152.[React]如何避免不必要的染？[美团一面】
153.全局样式命名冲突和样式盖问题怎么解决？
154.[React]】如何实现专场动画？
155.[React]从React层面上，能做的性能优化有哪些?
156.[VUE]中为何不要把v-if和v-for同时用在同一个元素上，原理是什么？
157.将静态资源缓存在本地的方式有哪些？
158.SPA首屏加载速度慢的怎么解：决
159.axios是如何区分是nodejs环境还是浏览器环境的？
160.如何拦截web应用的请求
161.前端有哪些跨页面通信方式？
162.H5下拉刷新如何实现？
163.如何修改第三方npm包?
对你们有帮助的话可以，三月份大概有几个朋友也都是依靠场景题的功劳拿下了offer，所以希望大家可以加油，能在四月下半旬收到满意的offer！
来源：瑾瑜教育
