当前位置：首页 > article >正文

前端八股文第四篇

article 2024/12/27 4:08:32

31. HTTPS 和 HTTP 的区别

HTTP（Hypertext Transfer Protocol）是一种用于传输超文本数据（例如 HTML、CSS、JavaScript）的应用层协议。而 HTTPS（HTTP Secure）则是在 HTTP 的基础上添加了 SSL/TLS 加密层，使得数据在传输过程中更加安全。主要区别包括：

安全性：HTTPS 使用 SSL/TLS 加密协议对数据进行加密传输，可以有效防止数据被窃取或篡改，提供了更高的安全性。
协议：HTTP 使用 TCP 协议进行通信，而 HTTPS 在 TCP 上加入 SSL/TLS 加密层进行数据传输。
默认端口：HTTP 默认端口是 80，HTTPS 默认端口是 443。
证书：HTTPS 需要使用数字证书来验证服务器的身份，确保通信双方的安全性，而 HTTP 则不需要。
速度：由于 HTTPS 需要进行加密解密操作，可能会比 HTTP 稍慢一些，但现代的硬件和加密算法已经大大减少了这种差异。

32. 前端缓存

前端缓存是指将网页的部分或全部内容存储在客户端，以便于用户再次访问时能够更快地加载页面内容，减少服务器的负载和网络流量。前端缓存主要分为浏览器缓存和本地缓存两种类型。常见的浏览器缓存包括 HTTP 缓存、Service Worker 缓存、Memory Cache、Disk Cache 等；而本地缓存主要是通过 Web Storage（localStorage 和 sessionStorage）、IndexedDB 等技术实现的。使用前端缓存能够显著提高页面的加载速度和用户体验，但也需要注意缓存的更新策略和缓存安全性。

33. ES6 新增了哪些特性

ES6（ECMAScript 2015）是 JavaScript 的一次重大更新，引入了许多令人激动的新特性，包括箭头函数、模板字符串、解构赋值、let 和 const 关键字、Promise、class 类、模块化等。这些新特性使得 JavaScript 更加强大和易用，提高了开发效率和代码质量。

34. Vuex

Vuex 是 Vue.js 的状态管理模式和库，用于集中式管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 主要包含了状态（State）、变更（Mutation）、行为（Action）、获取（Getter）这四个核心概念。通过在 Vuex 中存储共享状态，可以方便地实现跨组件的状态共享和管理，使得大型 Vue 应用的开发和维护更加简单和可靠。

35. 原型和原型链

在 JavaScript 中，每个对象都有一个原型对象（prototype），而原型对象又可能有自己的原型，这样就形成了原型链。原型链是 JavaScript 实现继承的主要方式之一。当访问一个对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 引擎会沿着原型链往上查找，直到找到对应的属性或方法或者查找到原型链的顶端为止。原型链的终点是 Object.prototype，它是所有对象的顶层原型。

原型（prototype）是 JavaScript 中的一个关键概念，它实现了对象之间的继承关系。每个对象都有一个原型对象，可以通过 __proto__ 属性访问。当访问对象的属性或方法时，如果对象本身没有该属性或方法，JavaScript 引擎会沿着原型链往上查找，直到找到对应的属性或方法或者查找到原型链的顶端为止。原型链的终点是 Object.prototype，它是所有对象的顶层原型。

36. 异步任务分为哪些

在前端开发中，常见的异步任务包括：

回调函数：通过回调函数来处理异步操作的结果，例如事件处理、定时器等。
Promise 对象：ES6 中新增的异步解决方案，用于处理复杂的异步操作，提供了更加清晰和可读的代码结构。
Async/Await：ES8 中新增的异步编程语法，基于 Promise 对象，提供了更简洁、易用的方式来处理异步操作，使得异步代码的编写更加类似于同步代码。
事件监听：通过监听事件来处理异步操作的完成或状态改变。
Ajax 请求：通过发送异步的 XMLHttpRequest 请求来与服务器进行数据交互。

37. 前端性能优化问题

前端性能优化是提升网站性能和用户体验的重要手段，常见的优化方式包括：

减少 HTTP 请求：合并文件、使用雪碧图、减少资源大小等方式来减少页面的 HTTP 请求次数。
资源压缩和缓存：对静态资源进行压缩和缓存，减少网络传输时间和服务器压力。
使用 CDN 加速：将静态资源部署到 CDN 上，加快资源的加载速度。
异步加载资源：将不必要的资源延迟加载或异步加载，提升页面的渲染速度。
优化图片：使用适当的图片格式、压缩图片大小、懒加载图片等方式来优化图片加载。
代码优化：减少不必要的代码、减少重排和重绘、避免使用过多的全局变量等，提升代码的执行效率。
优化网络请求：减少请求的大小、使用 HTTP/2、使用缓存策略等方式来优化网络请求的效率。
前端框架优化：合理使用前端框架，避免过多的渲染和重复渲染，提高页面的性能和交互体验。

38. 垂直居中的方式

在 CSS 中，实现元素的垂直居中可以使用以下几种方式：

使用 Flexbox 布局：通过设置父元素的 display: flex; 和 align-items: center; 来实现元素的垂直居中。
使用 Grid 布局：通过设置父元素的 display: grid; 和 align-items: center; 来实现元素的垂直居中。
使用绝对定位：通过设置父元素为相对定位，子元素为绝对定位，并设置 top: 50%; transform: translateY(-50%); 来实现元素的垂直居中。
使用表格布局：将父元素设置为 display: table;，子元素设置为 display: table-cell; vertical-align: middle; 来实现元素的垂直居中。
使用 line-height：设置父元素的 line-height 等于父元素的高度，将子元素的 vertical-align 属性设置为 middle 来实现元素的垂直居中。

39. 怎么理解回流和重绘

在浏览器渲染页面时，会经历两个阶段：回流（Reflow）和重绘（Repaint）。

回流（Reflow）：当 DOM 结构发生变化，或者浏览器窗口大小发生变化时，浏览器会重新计算页面上元素的位置和几何结构，这个过程称为回流。回流是页面布局或几何属性发生变化时的一个全局性操作，会导致整个页面的重新渲染。
重绘（Repaint）：当页面中元素的样式发生变化，但是不影响其布局时，浏览器会重新绘制页面上受影响的元素，这个过程称为重绘。重绘不会改变元素的几何属性，只会改变元素的外观，不涉及布局的重新计算。

理解回流和重绘可以帮助我们优化页面性能，尽量减少页面的回流次数和重绘次数，从而提高页面的渲染效率。

40. 元素显示和隐藏的方法有哪些

在前端开发中，常见的元素显示和隐藏的方法包括：

使用 CSS display 属性：设置元素的 display 属性为 none 来隐藏元素，设置为其他值（如 block、inline、inline-block 等）来显示元素。
```
/* 隐藏元素 */
.hidden {
    display: none;
}

/* 显示元素 */
.visible {
    display: block;
}
```
使用 CSS visibility 属性：设置元素的 visibility 属性为 hidden 来隐藏元素，设置为 visible 来显示元素。不同于 display，visibility 隐藏的元素仍占据页面布局空间，只是不可见。
```
/* 隐藏元素 */
.hidden {
    visibility: hidden
```