谈谈本人前段时间面试过程中常遇到的部分前端技术问题：
CSS
1. 移动端自适应方案
1.1 媒体查询：
使用CSS3的媒体查询可以根据设备的屏幕尺寸来应用不同的CSS样式。通过设置不同的断点，可以针对不同的屏幕尺寸、设备方向等应用不同的样式。
以下为简单的媒体查询的CSS代码片段示例：
1.2 rem：
使用REM单位可以实现相对于根元素的字体大小进行自适应布局。通过设置根元素的字体大小为屏幕宽度的比例，其他元素的大小也会相应地根据屏幕尺寸进行调整。
举个例子：
假设设计稿的宽度是750px，在移动端中，我们希望将其适配到不同的屏幕尺寸上。使用rem单位可以实现根据屏幕尺寸自动调整元素大小的效果。
然后，我们需要编写CSS样式，并使用rem作为单位。假设设计稿中某个元素的宽度为100px，高度为200px。我们可以通过计算得出相应的rem值。 假设我们将屏幕宽度除以设计稿的宽度得到一个缩放比例（例如：屏幕宽度为375px，缩放比例为0.5），那么我们可以使用该缩放比例来计算元素的rem值。
在上面的代码中，元素的宽度和高度都使用了rem单位，并乘以缩放比例。这样，在不同屏幕尺寸下，元素的大小会按照相应的比例进行自适应调整。 需要注意的是，为了便于计算，我们可以将1rem定义为设计稿宽度的1/10，即75px。这样，在计算rem值时，可以直接使用设计稿像素值除以75来得到相应的rem值。 这就是移动端适配方案中使用rem的一个例子。通过使用rem单位并根据屏幕尺寸进行缩放计算，可以实现在不同屏幕上自适应调整元素大小的效果。
1.3 Flexbox布局/Grid布局；
2. BFC
3. 清除浮动的方法
Ⅰ. 在浮动元素后使用一个空元素；
Ⅱ. 使用 CSS 的 overflow 属性（通过触发BFC方式，实现清除浮动）；
Ⅲ. 给浮动元素后面的元素添加 clear 属性；
Ⅳ. 使用 CSS 的:after 伪元素（推荐）；
清除浮动的方法可以分成两类：
一是利用 clear 属性，包括在浮动元素末尾添加一个带有 clear: both 属性的空 div 来闭合元素，其实利用 :after 伪元素的方法也是在元素末尾添加一个内容为一个点并带有 clear: both 属性的元素实现的。
二是触发浮动元素父元素的 BFC，使到该父元素可以包含浮动元素。
JavaScript
1. typeof 和 instanceof
1.1 手写instanceof：
2. this的指向
3. 节流和防抖
3.1 节流：
节流是一种限制函数调用频率的技术。当一个函数被频繁调用时，节流可以确保该函数以一定的时间间隔被执行。这样可以减少不必要的函数调用，特别是在处理用户输入或滚动事件等情况下。节流可以通过设置一个时间间隔，在该时间间隔内只允许函数执行一次来实现。
3.2 防抖：
防抖是一种延迟执行函数的技术。当一个函数需要在连续事件触发后才能执行，并且我们希望它在一段时间内没有新的事件触发时才执行，就可以使用防抖来控制函数的执行时机。防抖可以确保在一定时间段内只有最后一次函数调用会被执行。
3.3 手写：
4. 简述事件循环机制
Ⅰ. 整体的script(作为第一个宏任务)开始执行，会把所有代码分为两部分：“同步任务”、“异步任务”；
Ⅱ. 同步任务会直接进入主线程依次执行；
Ⅲ. 异步任务会再分为宏任务(进入宏任务队列) 和 微任务(进入微任务队列)；
Ⅳ. 当主线程内的任务执行完毕（主线程为空时），会检查微任务的任务队列，如果有任务，就进入主线程全部执行，如果没有就从宏任务队列读取下一个宏任务执行；
Ⅴ. 事件循环的每个循环迭代称为一个tick。在每个tick中，事件循环首先执行所有微任务队列中的任务，然后选择一个宏任务执行。每执行完一个宏任务就清空一次微任务队列，此过程会不断重复，这就是Event Loop；
4.1 宏任务和微任务
Webpack
1. 常使用的 Loader 和 Plugin
1.1 Loader
1.1.1 style-loader：将 CSS 添加到 DOM 的内联样式标签 里；
1.1.2 css-loader：允许通过 require 的方式引入 CSS 文件，并返回 CSS 代码；
1.1.3 postcss-loader：用 PostCSS 来处理 CSS，例如添加浏览器前缀等；
1.1.4 less-loader 处理 LESS 文件，使用 sass-loader 处理 SASS 文件；
1.1.5 file-loader 分发文件到 output 目录并返回相对路径（Webpack 5 内置支持 asset/resource）；
1.1.6 url-loader 类似于 file-loader，但是当文件小于设定的 limit 时可以返回一个 Data URL（Webpack 5 内置支持 asset/inline）；
1.1.7 babel-loader 转换 ES6 文件到 ES5；
1.2 Plugin
1.2.1 html-webpack-plugin：在打包结束后，自动生成一个 HTML 文件，并将打包生成的 JS 模块引入到该 HTML 中;
1.2.2 clean-webpack-plugin：删除（清理）构建目录。请注意，Webpack 5 已经内置了输出目录的清理功能，无需额外安装插件;
1.2.3 mini-css-extract-plugin：提取 CSS 到一个单独的文件中，而不是将样式代码以内联方式添加到 HTML 或 JS 文件中;
1.2.4 copy-webpack-plugin：复制文件或目录到执行区域，例如将一些静态资源文件从源代码目录复制到打包后的目录
浏览器
1. 浏览器是如何渲染UI的？
2. DOM Tree是如何构建的？
3. 回流与重绘
3.1 回流（Reflow）：
- 当元素的样式属性发生改变，但不影响其几何属性或位置时，浏览器会进行重绘。例如，修改背景颜色、字体颜色等。
- 当页面上的一部分内容需要更新，但不影响布局时，也会触发重绘。
3.2 重绘（Repaint）：
- 当 DOM 结构发生变化，包括添加、删除、修改元素等，会导致整个或部分页面的重新布局和渲染，从而触发回流操作。
- 当页面布局计算发生变化，如窗口大小改变、元素尺寸、位置等发生变化，会导致回流。
- 获取某些元素的尺寸、位置信息（如offsetTop、offsetLeft、clientWidth等）也会触发回流。
结语
第一次在掘金发文章，不足之处，请多包涵！
答案仅供大家参考，欢迎讨论！
大家有什么想看的，可以在评论区告诉我，谢谢！
