前端面试宝典：全面涵盖HTTP、框架与面试精华

需积分: 0 151 浏览量更新于2024-06-26 收藏 4.38MB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

前端面试资源是一个全面的指南，旨在帮助求职者准备前端工程师的面试。内容涵盖了前端技术的核心领域，包括但不限于HTTP协议基础知识、HTML/CSS/JavaScript的深入理解、Web开发最佳实践以及流行的前端框架（如Vue、React和Angular）的相关知识。以下是部分内容的详细解析： 1. **HTTP/HTML/CSS/JAVASCRIPT基础** - HTTP：讨论了HTTP和HTTPS的区别，以及HTTP版本（如HTTP/1.x和HTTP/2.0）的特点，如HTTP2.0的多路复用和服务器推送功能。 - HTML5：介绍了语义化标签的重要性和doctype的作用，区分了严格模式和混合模式，并讲解了HTML5的新增元素。 2. **服务端编程** - 简述了RESTful架构原则，强调了HTTP请求方法（GET、POST等）的区别以及状态码的理解，如304 Not Modified、200 OK等。 - cookies、sessionStorage、localStorage的区别，以及如何防范XSS攻击。 3. **前端框架** - Vue、React和Angular框架的概述，可能包括各自的生命周期、组件化开发以及它们在实际项目中的应用场景。 4. **性能优化** - 部分内容涉及前端优化技巧，如缓存策略（强缓存、协商缓存）、GET和POST的区别，以及如何处理301/302状态码迁移。 5. **移动Web开发** - 讲解viewport和移动端布局，以及iOS上click事件的延迟问题及其解决方案。 6. **网络基础知识** - TCP/IP协议的基础概念，如三次握手，以及WebSocket的实现和应用场景。 7. **DOM操作** - 包括BOM（浏览器对象模型）属性和方法，如dragapi，以及addEventListener的参数使用。 8. **缓存与HTTP头部** - 强调了HTTP头部如Cache-Control的重要性，以及304状态码在缓存重用中的应用。 9. **现代HTTP特性** - HTTP/2.0的新特性，如二进制大对象传输（Brotli）和头部压缩。通过这份全面的面试资源，求职者能够系统地复习前端技术要点，提升自己的面试表现，了解行业最新趋势和技术细节，从而更好地应对前端工程师的职位挑战。

资源详情

资源推荐

参考回答：

(1)400 状态码：请求无效

产生原因：

前端提交数据的字段名称和字段类型与后台的实体没有保持一致

前端提交到后台的数据应该是 json 字符串类型，但是前端没有将对象 JSON.stringify

转化成字符串。

解决方法：

对照字段的名称，保持一致性

将 obj 对象通过 JSON.stringify 实现序列化

(2)401 状态码：当前请求需要用户验证

(3)403 状态码：服务器已经得到请求，但是拒绝执行

• fetch 发送 2 次请求的原因

参考回答：

fetch 发送 post 请求的时候，总是发送 2 次，第一次状态码是 204，第二次才成功？

原因很简单，因为你用 fetch 的 post 请求的时候，导致 fetch 第一次发送了一个

Options 请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发

送真正的请求。

• Cookie、sessionStorage、localStorage 的区别

参考回答：

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏

览器和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给

服务器，仅在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属

于某个路径下,存储的大小很小只有 4K 左右。（key：可以在浏览器和服务器端来回

传递，存储容量小，只有大约 4K 左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。（key：

本身就是一个回话过程，关闭浏览器后消失，session 为一个回话，当页面不同即使是

同一页面打开两次，也被视为同一次回话）

localStorage：localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源

窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器

关闭与否都会始终生效）

补充说明一下 cookie 的作用：

保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页

面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设

置过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用

户保持登录状态的时间：常见选项有一个月、三个月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情

况。如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，

系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户

所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所

定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，

那么可以使用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问

时，仍然可以保存上一次访问的界面风格。

• 说一下 web worker

参考回答：

在 HTML 页面中，如果在执行脚本时，页面的状态是不可相应的，直到脚本执行完成

后，页面才变成可相应。web worker 是运行在后台的 js，独立于其他脚本，不会影响

页面你的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的

时候，就不会阻塞主线程了。

如何创建 web worker：

检测浏览器对于 web worker 的支持性

创建 web worker 文件（js，回传函数等）

创建 web worker 对象

• 对 HTML 语义化标签的理解

参考回答：

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如 nav

表示导航条，类似的还有 article、header、footer 等等标签。

• iframe 是什么？有什么缺点？

参考回答：

定义：iframe 元素会创建包含另一个文档的内联框架

提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持 iframe 的浏

览器

缺点：

会阻塞主页面的 onload 事件

搜索引擎无法解读这种页面，不利于 SEO

iframe 和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

• Doctype 作用?严格模式与混杂模式如何区分？它们有何意义?

参考回答：

• addEventListener 参数

参考回答：

addEventListener(event, function, useCapture)

其中，event 指定事件名；function 指定要事件触发时执行的函数；useCapture 指定

事件是否在捕获或冒泡阶段执行。

• cookie sessionStorage localStorage 区别

参考回答：

cookie 数据始终在同源的 http 请求中携带(即使不需要)，即 cookie 在浏览器和服务

器间来回传递

cookie 数据还有路径（path）的概念，可以限制。cookie 只属于某个路径下

存储大小限制也不同，cookie 数据不能超过 4K，同时因为每次 http 请求都会携带

cookie，所以 cookie 只适合保存很小的数据，如回话标识。

webStorage 虽然也有存储大小的限制，但是比 cookie 大得多，可以达到 5M 或更大

数据的有效期不同 sessionStorage：仅在当前的浏览器窗口关闭有效；

localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；

cookie：只在设置的 cookie 过期时间之前一直有效，即使窗口和浏览器关闭

作用域不同 sessionStorage：不在不同的浏览器窗口中共享，即使是同一个页面；

localStorage：在所有同源窗口都是共享的；cookie：也是在所有同源窗口中共享的

• cookie session 区别

参考回答：

1. cookie 数据存放在客户的浏览器上，session 数据放在服务器上。

2. cookie 不是很安全，别人可以分析存放在本地的 COOKIE 并进行 COOKIE 欺

骗

考虑到安全应当使用 session。

3. session 会在一定时间内保存在服务器上。当访问增多，会比较占用你服务

器的性能

考虑到减轻服务器性能方面，应当使用 COOKIE。

4. 单个 cookie 保存的数据不能超过 4K，很多浏览器都限制一个站点最多保存

20 个 cookie。

• 介绍知道的 http 返回的状态码

参考回答：

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换

协议。只能切换到更高级的协议，例如，切换到 HTTP 的新版本协议

200 OK 请求成功。一般用于 GET 与 POST 请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返

回的 meta 信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新

网页的情况下，可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功，用户终端（例如：

浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分 GET 请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应

可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新

URI，返回信息会包括新的 URI，浏览器会自动定向到新 URI。今后任何新的请求都应

使用新的 URI 代替

302 Found 临时移动。与 301 类似。但资源只是临时被移动。客户端

应继续使用原有 URI

303 See Other 查看其它地址。与 301 类似。使用 GET 和 POST 请求查

看

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态

码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指

出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的 HTTP 状态码

307 Temporary Redirect 临时重定向。与 302 类似。使用 GET 请求重

定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通

过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

405 Method Not Allowed 客户端请求中的方法被禁止

406 Not Acceptable 服务器无法根据客户端请求的内容特性完成请求

407 Proxy Authentication Required 请求要求代理的身份认证，与

401 类似，但请求者应当使用代理进行授权

408 Request Time-out 服务器等待客户端发送的请求时间过长，超时

409 Conflict 服务器完成客户端的 PUT 请求是可能返回此代码，服务

器处理请求时发生了冲突

410 Gone 客户端请求的资源已经不存在。410 不同于 404，如果资源

以前有现在被永久删除了可使用 410 代码，网站设计人员可通过 301 代码指定资源的

新位置

411 Length Required 服务器无法处理客户端发送的不带 Content-

Length 的请求信息

412 Precondition Failed 客户端请求信息的先决条件错误

剩余173页未读，继续阅读

小杨很困1

粉丝: 242
资源: 1

会员权益专享

前端面试宝典：全面涵盖HTTP、框架与面试精华

超全vue面试题，前端进阶汇总

前端面试资料2024年大厂进阶秘诀

2023前端工程师面试题手册

前端开发进阶：JavaScript基础与DOM操作

深入探究jQuery基础与进阶用法

2023 前端开发 HTML CSS 宝典：进阶掌握CSS选择器和样式

Web前端实战进阶体验课Vue3脚手架使用方法

前端性能优化进阶: Ajax的懒加载与预加载

2023web前端面试手册

b站 飞哥 大前端进阶 笔记

天津安鑫一家前端面试题

前端面试常考哪些基础知识点？

2021前端面试真题pdf

阿里主管面试前端面试题

2021前端面试题docx

web前端面试八股文pdf

解锁前端面试体系核心攻略.rar

bat前端面试题2019

前端基础面试题2021 pdf

前端面试题 43578943

会员权益专享

最新资源

b站飞哥大前端进阶笔记