前端面试题目100及最佳答案

以下是一些前端面试题及其最佳答案的整理：

1. 请求的三次握手

  • 答案 ：

  • 客户端发送SYN包(SYN=x)到服务器，并进入SYN_SENT状态，等待服务器确认；

  • 服务器收到SYN包，确认客户的SYN(ACK=x+1)，同时自己也发送一个SYN包(SYN=y)，即SYN+ACK包，此时服务器进入SYN_RECV状态；

  • 客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ACK=y+1)，此包发送完毕，客户端和服务器进入ESTABLISHED状态，完成三次握手。

2. CSS居中方式

  • 答案 ：

  • 水平居中 ：

  • 内联元素：使用text-align: center；

  • 块级元素：设置margin-left和margin-right为auto；

  • 垂直居中 ：

  • 使用Flex布局：display: flex； flex-direction: column； justify-content: center；

  • 使用伪元素：父容器内放置一个100%高度的伪元素，实现垂直对齐。

3. HTTP缓存策略

  • 答案 ：

  • GET ：从服务器获取数据，有大小限制，不安全；

  • POST ：向服务器传送数据，无大小限制，更安全，常用于表单提交和文件上传。

4. JavaScript闭包

  • 答案 ：闭包允许一个函数在嵌套的函数里去引用外部函数(enclosing function)的变量，即使外部函数执行完毕，闭包仍然可以访问这些变量。

5. HTML语义化

  • 答案 ：使用正确的HTML标签来表示页面结构，使代码易于阅读，有助于搜索引擎优化(SEO)，并提高可访问性。

6. CSS选择器优先级

  • 答案 ：选择器的优先级由选择器的类型和特异性决定。内联样式(如style属性)优先级最高，ID选择器优先级高于类选择器和属性选择器，通用选择器(*)优先级最低。

7. JavaScript中的this关键字

  • 答案 ：this关键字在JavaScript中指向函数调用的上下文对象。在全局作用域中，this指向全局对象(在浏览器中是window)，在函数作用域中，this指向全局对象，在对象方法中，this指向调用该方法的对象。

8. 前端性能优化

  • 答案 ：

  • 减少HTTP请求次数；

  • 使用CDN加速静态资源加载；

  • 压缩和合并CSS和JavaScript文件；

  • 利用浏览器缓存；

  • 延迟加载非关键资源；

  • 使用懒加载技术加载图片等大文件；

  • 代码分割和按需加载；

  • 优化渲染性能，比如避免强制同步布局。

9. HTTP状态码

  • 答案 ：

  • 200 OK：请求成功；

  • 404 Not Found：请求的资源不存在；

  • 500 Internal Server Error：服务器内部错误；

  • 301 Moved Permanently：永久重定向；

  • 302 Found：临时重定向。

10. 虚拟DOM

  • 答案 ：虚拟DOM是React框架中的一个核心概念，它是一个轻量级的JavaScript对象，用于表示真实DOM的结构。React通过对比前后两个虚拟DOM树的差异，然后只更新有差异的部分，从而提高渲染效率。

以上是部分前端面试题及其答案的整理。

Top
×
×