前端面试题03

最新推荐文章于 2024-06-12 11:13:48 发布

LINGYI_WEN

最新推荐文章于 2024-06-12 11:13:48 发布

阅读量40

点赞数 1

分类专栏：前端面试题文章标签：前端

本文链接：https://blog.csdn.net/weixin_57837275/article/details/132231865

版权

前端面试题专栏收录该内容

10 篇文章 2 订阅

订阅专栏

25、v-show和v-if的区别。

v-show和v-if都是Vue中用于控制元素显示和隐藏的指令，但它们有以下区别：

编译时机：
- v-show：在编译时会一直渲染，只是通过CSS的display属性来控制元素的显示和隐藏。也就是说，元素始终存在于DOM中，只是在满足条件时设置为显示或隐藏。因此，初始渲染时会慢一些，但切换显示和隐藏时的性能开销较小。
- v-if：在编译时仅渲染满足条件的元素，如果条件不满足，则元素不会被渲染到DOM中。因此，初始渲染时会快一些，但切换显示和隐藏时的性能开销较大。
条件判断：
- v-show：使用CSS的display属性来控制元素的显示和隐藏，条件判断是基于布尔值。如果表达式的值为true，元素将显示；如果为false，元素将隐藏。
- v-if：根据表达式的真假值来决定是否渲染元素。如果表达式的值为true，元素将被渲染到DOM中；如果为false，元素将从DOM中移除。
渲染开销：
- v-show：由于元素始终存在于DOM中，所以切换显示和隐藏时没有重新渲染的开销，只有CSS的样式变化。适用于频繁切换显示和隐藏的情况。
- v-if：根据条件动态地添加或移除元素，切换显示和隐藏时会有重新渲染的开销。适用于条件变化较少的情况。

综上所述，v-show适用于频繁切换显示和隐藏的场景，而v-if适用于条件变化较少的场景。在选择使用哪个指令时，需要根据具体情况权衡性能和渲染开销。

26、怎么让一个盒子水平垂直居中

使用Flexbox布局：设置盒子的父元素为display: flex; 并使用justify-content: center; 和 align-items: center; 将子元素水平和垂直居中。
```
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.box {
  /* 设置盒子的样式 */
}
```

使用绝对定位和transform：设置盒子的父元素为相对定位，然后使用绝对定位将盒子居中，并使用transform属性将其水平垂直居中。

.container {
  position: relative;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 设置盒子的样式 */
}

使用表格布局：将盒子的父元素设置为display: table; 然后使用display: table-cell; vertical-align: middle; 将子元素水平和垂直居中。

.container {
  display: table;
  width: 100%;
}
.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  /* 设置盒子的样式 */
}

利用 margin:auto; ：将盒子的父元素设置为相对定位，然后使用 position:absolut; inset:0; margin:auto; 将子元素水平垂直居中。

.container { 
  position: relative; 
}
.box { 
  position: absolute; 
  inset: 0;
  margin: auto; top: 0; 
  /* 设置盒子的样式 */
}

计算父盒子与子盒子的空间距离：利用margin属性设置父盒子与子盒子的空间距离，使得子元素水平垂直居中。
```
.container { 
  width: 500px; 
  height: 500px;
}
.box { 
  width: 100px; 
  height: 100px;
  margin-top: 200px; 
  margin-left: 200px; 
}
```

27、iframe的优缺点

优点：

独立加载：<iframe>可以加载和显示另一个网页或内容，这意味着可以将不同来源的内容嵌入到同一个页面中，实现功能的集成和扩展。
分离内容：通过使用<iframe>，可以将某些内容单独放置在一个框架中，使得页面结构更加清晰和模块化。
异步加载：可以通过设置<iframe>的src属性来动态加载内容，从而提高页面的加载性能和用户体验。
跨域通信：<iframe>可以实现跨域通信，通过window.postMessage方法进行消息传递，从而实现不同域名之间的数据交互。

缺点：

安全风险：由于<iframe>可以加载外部内容，如果嵌入的内容不受信任或存在安全漏洞，可能会导致跨站脚本攻击（XSS）或点击劫持等安全问题。
SEO问题：搜索引擎可能无法正确解析和索引<iframe>中的内容，这可能会影响网页的搜索引擎优化（SEO）效果。
嵌套问题：过多的嵌套<iframe>可能会导致页面加载速度变慢，影响用户体验。
响应式布局：<iframe>的加载和显示可能会受到父页面的布局和尺寸限制，这可能会导致在响应式设计中出现问题。

28、iframe跨域问题

iframe存在跨域问题是因为浏览器的同源策略（Same-Origin Policy）。同源策略限制了一个网页中的脚本只能访问具有相同协议、域名和端口的资源。当一个网页中的<iframe>加载的内容与父页面的域名、协议或端口不一致时，就会出现跨域问题。在这种情况下，父页面的脚本无法直接访问或操作<iframe>中的内容，也无法通过常规的JavaScript交互方式进行通信。为了解决跨域问题，可以使用以下方法：

使用window.postMessage：通过在父页面和<iframe>中的脚本中使用postMessage方法进行跨域通信。这种方式需要在两端都编写相应的代码来进行消息传递和处理。
设置document.domain：如果父页面和<iframe>中的域名是同一个主域名下的不同子域名，可以通过设置document.domain来解决跨域问题。这种方法只适用于主域名相同但子域名不同的情况。
使用服务器代理：将跨域请求发送给服务器，然后由服务器代为请求目标资源并返回结果给父页面。这种方式需要服务器端的支持。

需要注意的是，跨域问题是为了保护用户隐私和安全而存在的，因此在解决跨域问题时应该遵循安全原则，确保跨域通信不会引起安全漏洞。

29、解决跨域问题的方法有哪些

JSONP（JSON with Padding）：JSONP是一种利用<script>标签的跨域机制。通过在页面中动态创建一个<script>标签，将跨域请求的URL作为src属性值，服务器返回的数据封装在一个回调函数中调用，以实现跨域数据的获取。但是JSONP只支持GET请求，并且需要服务器端的支持。
CORS（Cross-Origin Resource Sharing）：CORS是一种现代浏览器支持的跨域机制，通过在服务器端设置响应头信息来控制跨域访问。在CORS中，浏览器发送一个预检请求（OPTIONS请求）给服务器，服务器返回响应头信息，包括允许跨域访问的域、方法和头部信息等。然后浏览器根据响应头信息决定是否发送真正的跨域请求。
代理服务器：通过在同域下搭建一个代理服务器，将跨域请求发送给代理服务器，再由代理服务器转发请求并返回结果。这种方式需要服务器端的支持，可以实现对所有跨域请求的代理处理。
WebSocket：WebSocket是一种全双工通信协议，不受同源策略的限制。通过在服务器端开启WebSocket服务，客户端可以与服务器进行双向通信，从而实现跨域通信。WebSocket需要服务器端的支持，并且在使用时需要注意安全性。
window.postMessage方法：window.postMessage方法是HTML5提供的一种跨文档通信机制。通过在父窗口和子窗口（包括iframe）之间使用postMessage方法进行消息传递，实现跨域通信。这种方式需要在两端都编写相应的代码来进行消息传递和处理。

需要注意的是，在使用这些方法解决跨域问题时，应该考虑安全性和合法性，并确保不会引起其他安全漏洞。

30、什么是闭包

闭包（Closure）是指一个函数能够访问其词法作用域以外的变量。简单来说，闭包是由函数以及其相关引用的变量组合而成的组合体。在JavaScript中，当一个函数内部定义的函数引用了外部函数的变量时，就形成了闭包。闭包使得函数内部的变量在函数执行完毕后依然可以被访问和使用。

闭包的特点包括：

函数内部定义的函数可以访问外部函数的变量，即使外部函数已经执行完毕。
闭包可以保留外部函数的变量状态，因此在后续调用时可以继续使用。

闭包的应用场景包括：

封装私有变量：通过闭包可以创建私有变量，只能通过内部函数访问，外部无法直接访问。
记忆函数状态：闭包可以保存函数的状态，例如保存函数的参数或局部变量，以便在后续调用时继续使用。
实现模块化：通过闭包可以实现模块化，将一组相关的函数和变量封装在一个闭包中，避免全局命名冲突。

需要注意的是，闭包在使用时需要注意内存管理，因为闭包会导致外部函数的变量无法被垃圾回收，可能造成内存泄漏问题。因此，在使用闭包时应该合理管理内存，避免出现不必要的内存占用。

31、Webpack打包的流程

解析配置：Webpack首先会读取并解析项目中的配置文件，如webpack.config.js，获取配置信息。
解析入口：Webpack会根据配置文件中的entry配置，找到项目的入口文件。入口文件可以是一个或多个，Webpack会根据入口文件的依赖关系构建出一个依赖图。
解析模块：Webpack会根据入口文件的依赖图，递归地解析所有的模块文件。在解析过程中，Webpack会根据配置文件中的rules配置，通过对应的loader对模块文件进行转换，比如将ES6代码转换为ES5代码、将SCSS文件转换为CSS文件等。
构建依赖图：Webpack在解析模块的过程中，会根据模块之间的依赖关系，构建出一个完整的依赖图。这个依赖图包含了项目中所有的模块，以及它们之间的依赖关系。
生成打包文件：在构建完依赖图后，Webpack会根据配置文件中的output配置，将所有模块打包成一个或多个输出文件。输出文件的格式可以是JavaScript、CSS、图片等，Webpack会根据不同的文件类型使用对应的插件进行处理。
优化打包结果：Webpack还会对打包结果进行优化，比如通过tree shaking、代码分割、压缩等方式，减少打包文件的体积，提升加载速度。
输出打包文件：最后，Webpack会将打包生成的文件输出到指定的目录中，完成整个打包流程。

需要注意的是，Webpack的打包流程可以根据项目的配置和需求进行自定义。可以通过配置插件、优化规则等来实现更灵活、高效的打包过程。

32、前端发送请求时，对数据加密有哪些方法？

HTTPS/SSL：使用HTTPS协议进行数据传输，通过SSL/TLS协议对数据进行加密和身份验证，确保数据在传输过程中的安全性。
对称加密：前端可以使用对称加密算法（如AES、DES等）对请求数据进行加密，然后在发送请求前将加密后的数据进行传输。服务器接收到请求后，使用相同的密钥进行解密。
非对称加密：前端可以使用非对称加密算法（如RSA）生成公钥和私钥。前端将数据使用公钥进行加密，然后发送给服务器。服务器使用私钥进行解密。
混淆和编码：前端可以对数据进行混淆和编码，增加数据的复杂性。例如，可以对数据进行Base64编码或者使用自定义的混淆算法进行加密，然后在请求中传输加密后的数据。
加密算法库：前端可以使用现有的加密算法库，如CryptoJS等，提供了常用的加密算法和相关函数，方便进行数据加密和解密操作。

需要注意的是，前端加密只是对数据进行传输过程中的保护，服务器端也需要对接收到的数据进行解密和验证，确保数据的完整性和安全性。因此，在前端加密的同时，服务器端也需要相应的解密和验证逻辑。

33、null和undefined的区别

undefined：undefined表示一个变量已经被声明，但尚未被赋值。在以下情况下，变量的值会被自动设置为undefined：
- 声明了一个变量但未给它赋值。
- 访问对象属性或数组元素时，属性或元素不存在。
- 函数没有返回值，默认返回undefined。
null：null表示一个变量被明确地赋值为null，即表示该变量的值为空。它是一个表示"空"的特殊值，可以用于显式地将变量的值设为空。
类型：undefined是一个表示未定义值的数据类型，而null是表示空值的数据类型。
typeof返回值：使用typeof操作符检测undefined时，会返回"undefined"字符串；而检测null时，会返回"object"字符串。
转换：在进行强制类型转换时，undefined会被转换为NaN，null会被转换为0。例如，Number(undefined)会返回NaN，Number(null)会返回0。
使用场景：一般情况下，可以将undefined作为变量的默认初始值，而将null用于表示空值、清空变量或重置对象属性的值。总之，undefined表示变量未定义或未赋值，而null表示变量的值为空。

34、TypeScript相对于JavaScript有什么优点？

静态类型检查：TypeScript是一种静态类型的编程语言，可以在编译阶段发现潜在的类型错误，提供更早的错误检测和更好的代码健壮性。
更好的代码提示和自动补全：TypeScript通过类型注解和类型推断，可以提供更丰富的代码提示和自动补全功能，提高开发效率和代码可读性。
更好的重构支持：由于有类型信息的存在，重构代码更加安全和可靠。例如，重命名一个变量或函数时，TypeScript可以自动更新相关的引用。
高级特性支持：TypeScript支持ECMAScript的最新特性，并且自身还提供了一些高级特性，如接口、泛型、枚举等，可以使代码更加模块化、可复用和可扩展。
更好的工具生态系统：TypeScript有一个强大的工具生态系统，包括编辑器（如Visual Studio Code）、构建工具（如Webpack）和调试器等，提供了更好的开发体验和工作流程。
渐进式采用：TypeScript是JavaScript的超集，可以无缝地与现有的JavaScript代码集成。可以逐步采用TypeScript，只需在需要的地方添加类型注解即可。
社区支持和学习资源丰富：TypeScript拥有庞大的社区支持和丰富的学习资源，可以通过文档、教程、社区论坛等获得帮助和支持。

综上所述，TypeScript相对于JavaScript具有静态类型检查、更好的代码提示和自动补全、更好的重构支持、高级特性支持、更好的工具生态系统等优点，可以提高代码的可维护性和开发效率。

LINGYI_WEN

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
前端面试题03

闭包（Closure）是指一个函数能够访问其词法作用域以外的变量。简单来说，闭包是由函数以及其相关引用的变量组合而成的组合体。在JavaScript中，当一个函数内部定义的函数引用了外部函数的变量时，就形成了闭包。闭包使得函数内部的变量在函数执行完毕后依然可以被访问和使用。函数内部定义的函数可以访问外部函数的变量，即使外部函数已经执行完毕。闭包可以保留外部函数的变量状态，因此在后续调用时可以继续使用。封装私有变量：通过闭包可以创建私有变量，只能通过内部函数访问，外部无法直接访问。
复制链接

扫一扫