14:00开始面试，14:05就出来了，问题变态？
1. 如何操作让一个盒子右移50px，开销最小？
// 这种方式不会触发文档重排和重绘，性能开销很小。
.box {
transform: translateX(50px);
}
2. 前端怎么判断一个密钥有没有被修改过?
在前端中，可以使用数字签名来验证密钥是否被修改过。数字签名是一种用于验证数据完整性和认证来源的技术，常用于验证数据是否经过篡改。
具体步骤如下：
使用私钥对数据进行签名，生成数字签名。 将数据和数字签名传输到前端。 前端使用公钥对接收到的数据和数字签名进行验证，来确定数据是否被篡改过。
这样，如果密钥或数据在传输过程中被修改，数字签名验证将失败，从而可以判断密钥是否被修改过。在实际应用中，可以使用类似 JSON Web Token（JWT）等方式进行数字签名和验证，以确保数据完整性和安全性。
3. transform2d和3d谁性能好?
在大多数情况下，
transform属性的 2D 变换（transform: translateX(50px);）通常比 3D
变换（例如transform: translate3d(50px, 0, 0);）性能更好。这是因为 2D
变换只涉及在二维平面上的操作，而 3D 变换涉及在三维空间内的操作，需要更复杂的计算。另外，在移动设备上，使用硬件加速的 2D 变换通常比 3D 变换表现更好，因为硬件加速对于处理简单的 2D 变换更有效率。
总的来说，如果只需要在二维平面上进行简单的变换，推荐使用 2D 变换以获得更好的性能。只有在需要复杂的三维变换时才使用 3D 变换。
4. 怎么区分内外网？
在计算机网络中，内网和外网是相对的概念，通常用来描述一个网络环境与互联网之间的关系。
内网（Intranet）指的是一个私有网络，通常是指在一个组织或者公司内部建立的局域网。这个网络通常是受到严格管控的，只有组织内部的设备可以连接到这个网络上。
外网（Internet）指的是互联网，也就是全球范围内的公共网络，任何连接到互联网的设备都可以在全球范围内进行通信和数据交换。
要区分内网和外网，通常可以通过 IP 地址或者网络配置来判断：
- 内网通常使用私有 IP 地址范围，比如 192.168.0.0/16、172.16.0.0/12 或 10.0.0.0/8 等。当设备的 IP 地址属于这些范围时，通常可以认为它在内网中。
- 外网则是指除了这些私有 IP 地址之外的公共 IP 地址范围，这些 IP 地址可以在全球范围内被路由器和互联网使用。
另外，也可以通过网络配置和防火墙规则来限制内网和外网的访问权限，从而实现对内外网的区分和管理。
5. 如何写一个加密，需要可逆？
当涉及简单的可逆加密方法时，可以考虑以下几种方式：
- 异或运算（XOR）：通过将文本与固定密钥进行异或运算来实现加密和解密。
- Base64编码：将二进制数据转换为文本字符串，可轻松进行编码和解码操作。
- 简单替换加密（Caesar Cipher）：通过对字符进行偏移或替换来实现加密和解密。
这些方法都是简单易行的可逆加密方式，但安全性较低，不适合用于保护敏感数据。在实际应用中，建议选择更安全的加密算法，如CryptoJS库（对称加密算法AES）等，以确保数据的安全性。
6. 不用vuex怎么实现全局状态管理？
在Vue应用中，如果不使用Vuex来实现全局状态管理，你仍然可以采用其他方式来管理全局状态。以下是几种替代方案：
- 使用Vue的事件总线：你可以通过创建一个空的Vue实例作为事件总线，利用该实例来触发和监听事件，从而实现组件之间的通信和全局状态管理。
// main.js
Vue.prototype.$eventBus = new Vue();
// 在组件中触发事件
this.$eventBus.$emit('eventName', data);
// 在其他组件中监听事件
this.$eventBus.$on('eventName', (data) => {
// 处理数据
});
-
通过属性传递：你可以通过props属性将状态从父组件传递给子组件，或者通过自定义事件将子组件的状态传递给父组件，从而实现状态管理。
-
使用混入（Mixins）：通过混入可以在多个组件之间共享同样的逻辑和状态。你可以创建一个混入对象，然后在需要的组件中引入和使用。
-
通过localStorage或sessionStorage：将状态存储在localStorage或sessionStorage中，以实现全局状态管理。这种方式适合简单的应用程序，但不适合处理大量数据或敏感信息。
虽然这些方法可以帮助你实现全局状态管理，但随着应用规模的增长，可能会出现管理和维护上的困难。因此，对于大型应用程序，推荐使用Vuex或其他专门的状态管理工具来更好地管理全局状态。
7. 页面混动，怎么防止他的父级元素跟着滚动?
要防止页面滚动时其父级元素也跟着滚动，可以通过以下几种方法来实现：
- 使用CSS属性
overflow: hidden：将父级元素的overflow属性设置为hidden，可以阻止其内容滚动。这样，即使页面内容滚动，父级元素也不会跟着滚动。
.parent-element {
overflow: hidden;
}
- 固定父级元素位置：通过CSS的position属性将父级元素固定在页面上的某个位置，可以使其保持固定而不随页面滚动而滚动。
.parent-element {
position: fixed;
top: 0;
left: 0;
}
- 监听页面滚动事件并取消事件冒泡：在父级元素上监听页面滚动事件，并通过阻止事件冒泡来阻止父级元素跟着滚动。
document.addEventListener('scroll', function(event) {
event.stopPropagation();
}, true); // 使用捕获模式捕获事件
以上方法可以根据具体情况选择适合的方式来防止父级元素跟随页面滚动。
8. webpack做了哪些优化？有哪些常见的loader和Plugin？
Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，可以将各种资源，如
JavaScript、样式表、图片等，打包成静态资源文件。在实际项目中，为了提高性能和效率，Webpack 可以进行许多优化操作。以下是
Webpack 常见的优化方式：
代码分割 (Code Splitting)：
- 通过代码分割可以将代码拆分成多个小块，实现按需加载，减少初始加载时间。
- 使用动态 import、webpack 的 splitChunks 配置等方式实现代码分割。
懒加载 (Lazy Loading)：
- 将不同路由或组件单独打包，实现页面级懒加载，减少首屏加载时间。
- 可以结合路由懒加载或动态 import 实现懒加载。
Tree Shaking：
- 通过 Tree Shaking 只打包项目中使用的代码，去除未引用的代码，减小打包体积。
- 主要针对 ES6 模块静态引入的情况，需要在 webpack 配置中启用
optimization.providedExports: true和optimization.sideEffects: true。代码压缩：
- 使用 UglifyJSPlugin、TerserPlugin 等插件对代码进行压缩，减小文件体积。
- 在生产环境下一般会自动开启代码压缩。
缓存优化：
- 使用 hash、chunkhash、contenthash 等方式生成文件名，实现文件内容改变时对应文件名也改变，防止浏览器缓存问题。
- 利用缓存可以减少文件请求，提高加载速度。
多进程打包：
- 使用 webpack-parallel-uglify-plugin、thread-loader 等工具实现多进程打包，加快打包速度。
- 多进程打包可以利用多核 CPU 资源，提高打包效率。
模块热替换 (Hot Module Replacement)：
- 在开发环境下使用模块热替换可以实现局部刷新，提高开发效率。
- HMR 可以保持应用的状态，使开发过程更加流畅。
分离第三方库：
- 将第三方库单独打包，避免频繁变动的业务代码影响第三方库的缓存。
- 可以使用 webpack 的 splitChunks 配置来实现第三方库的分离。
以上是 Webpack
中常见的优化方式，通过这些优化可以提高项目的性能、减小打包体积、加快打包速度等。根据具体项目需求和情况，可以选择适合的优化策略来优化
Webpack 打包过程。
一、Loader:
babel-loader：将ES6+的代码转换成ES5的代码。
css-loader：解析CSS文件，并处理CSS中的依赖关系。
style-loader：将CSS代码注入到HTML文档中。
file-loader：解析文件路径，将文件赋值到输出目录，并返回文件路径。
url-loader：类似于file-loader，但是可以将小于指定大小的文件转成base64编码的Data URL格式
sass-loader：将Sass文件编译成CSS文件。
less-loader：将Less文件编译成CSS文件。
postcss-loader：自动添加CSS前缀，优化CSS代码等。
vue-loader：将Vue单文件组件编译成JavaScript代码。
二、Plugin：
HtmlWebpackPlugin：生成HTML文件，并自动将打包后的javaScript和CSS文件引入到HTML文件中。
CleanWebpackPlugin：清除输出目录。
ExtractTextWebpackPlugin：将CSS代码提取到单独的CSS文件中。
DefinePlugin：定义全局变量。
UglifyJsWebpackPlugin：压缩JavaScript代码。
HotModuleReplacementPlugin：热模块替换，用于在开发环境下实现热更新。
MiniCssExtractPlugin：与ExtractTextWebpackPlugin类似，将CSS代码提取到单独的CSS文件中。
BundleAnalyzerPlugin：分析打包后的文件大小和依赖关系。
9. 强缓存和协商缓存？
强缓存和协商缓存是浏览器缓存的两种主要方式，用于优化网络请求，减少加载时间。下面我将简要介绍强缓存和协商缓存的概念和区别：
强缓存 (HTTP Cache-Control: max-age 和 Expires)：
- 概念：强缓存是利用 HTTP 头中的一些字段来告诉浏览器，在缓存未过期之前可以直接使用本地缓存副本，不需要再发起请求到服务器。
- 实现方式：
- 使用
Cache-Control: max-age=xxx或Expires头来指定资源缓存的有效期，单位为秒。- 如果客户端的本地缓存未过期，浏览器会直接使用本地缓存，不会向服务器发送请求。
协商缓存 (HTTP ETag 和 Last-Modified)：
- 概念：协商缓存是在强缓存失效时，浏览器通过与服务器协商确定是否可以使用缓存的一种机制。
- 实现方式：
- 服务器端会在响应头中提供
ETag和Last-Modified字段，分别表示资源的标识和最后修改时间。- 浏览器在发起请求时，会在请求头中携带
If-None-Match和If-Modified-Since字段，用于与服务器进行比较判断资源是否有更新。- 如果资源未发生变化，服务器返回 304 Not Modified 状态码，浏览器从本地缓存获取资源，否则服务器返回最新资源。
区别：
- 强缓存：浏览器在本地判断是否使用缓存，不会发起请求到服务器。
- 协商缓存：浏览器会发起请求到服务器，由服务器判断是否可以使用缓存。
如何同时使用强缓存和协商缓存：
- 可以在响应头中同时设置
Cache-Control、Expires、ETag和Last-Modified，让浏览器既可以根据缓存的有效期判断是否使用本地缓存，又能够通过协商缓存与服务器确认是否需要重新获取资源。综上所述，强缓存和协商缓存是 Web
开发中常用的缓存策略，可以有效减少网络请求，提升网站性能。合理配置缓存策略可以减少服务器压力、提高用户体验。
10. 深拷贝和浅拷贝
浅拷贝是指将一个对象或数组复制到一个新的对象或数组中，但只复制了对象或数组的引用，而不是实际的内容。
当对原始对象或数组进行修改时，复制后的对象或数组也会受到影响，因为它们共享相同的引用。 常见的浅拷贝方法包括
Object.assign(), Array.prototype.slice(), 扩展运算符 … 等。
深拷贝是指将一个对象或数组以及其所有嵌套对象或数组都完全复制到一个新的对象或数组中，而不共享任何引用。
深拷贝会递归地复制所有的子对象或数组，确保复制后的对象与原始对象完全独立，互不影响。 实现深拷贝，可以使用第三方库（如 Lodash 的_.cloneDeep() 方法）或自行编写递归函数来实现。
11. 移动端开发中常见的兼容性的问题？
- 音视频问题-------自动播放
ios safari中不支持，但在webview中可能被开启；iOS开发文档明确说明蜂窝网络下不允许autoplay；
chrome中，设置mouted后可以自动播放
微信中不允许自动播放。但是可以借助WeixinJSBridge实现
- 经典的1px边框
一般是采用伪元素模拟的方式，原理：把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位
.scale{
position: relative;
border:none;
}
.scale:after{
content: '';
position: absolute;
bottom: 0;
background: #000;
width: 100%;
height: 1px;
transform: scaleY(0.5);
transform-origin: 0 0;
}
- android，border-radius:50%不圆，设置具体的px数值，不用50%即可
- 安卓部分版本input的placeholder偏上，解决：input的line-height设为normal
- ios 滚动不流畅
使用了absolute布局之后，ios会发现元素内的滚动非常不流畅，滑动的手指松开后，滚动立刻停止，失去了原本的流畅滚动特性。百度一下弹性滚动的问题，发现在
webkit 中，下面的属性可以恢复弹性滚动。
-webkit-overflow-scrolling: touch;
- ios日期格式问题
具体就是，new Date(‘2020-11-12 00:00:00’)在ios中会为NAN
解决方案：用new Date(‘2020/11/12 00:00:00’)的日期格式，或者写个正则把-转换/
12. redux的原理以及工作流程？
Redux是什么？
Redux是一个独立于React的、可预测的状态管理库。它最初是为JavaScript应用设计的，但通常与React框架一起使用。Redux可以帮助你在应用中维护一个统一的、可预测的状态，这对于大型应用或复杂的状态管理场景特别有用。
Redux的三大原则：
- 单一数据源： 整个应用的状态被存储在一个单一的store对象中。
- State是只读的： 要改变应用的状态，你需要发出一个action对象，这是唯一的方式来触发状态变化。
- 使用纯函数来执行修改： Reducers是纯函数，用于接收先前的状态和action，然后返回一个新的状态。
Redux的工作流程：
-
初始化：
- 你首先定义应用的初始状态（initial state）。
- 创建一个reducer函数，它根据接收到的action类型来处理状态变化。
-
创建Store：
- 使用Redux的
createStore方法，将你的reducer传递给它，以创建一个全局的store实例。
- 使用Redux的
-
派发Action：
- 当应用中的某个部分（比如UI组件）需要改变状态时，它会创建并发送一个action对象到store。
- Action通过
store.dispatch()方法发送。
-
执行Reducer：
- Store接收到action后，会调用reducer函数，并将当前的state和action作为参数传递给reducer。
- Reducer根据action类型处理这个动作，并返回一个新的state。
-
更新State：
- Store接收来自reducer的新state，并更新自己的内部状态。
-
订阅State变化：
- 组件可以通过
store.subscribe()方法来注册监听器，当store中的状态发生变化时，监听器会被调用。 - 这时，组件可以获取更新后的state（通过
store.getState()）并重新渲染。
- 组件可以通过
-
UI响应：
- 组件在监听到状态变化后，会根据新的state更新其UI。
代码示例：
// 1. 初始状态
const initialState = {
count: 0
};
// 2. Reducer
const reducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
// 3. 创建Store
const store = Redux.createStore(reducer);
// 4. 订阅State变化
store.subscribe(() => {
console.log(store.getState().count);
});
// 5. 派发Action
store.dispatch({ type: 'INCREMENT' }); // state.count 现在为 1
store.dispatch({ type: 'DECREMENT' }); // state.count 现在为 0