2024年最新【前端面试】计算机网络 与 前端(1)，一篇文章教你搞定计算机网络面试

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

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

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）

• 路由选择协议，：确定数据报在源与目的地之间采用的路径

HTPP请求

======

• HTTP（HyperText Transfer Protocol，超文本传输协议），即计算机通过网络通信的规则。HTTP通信机制是在一次完整的HTTP通信过程中，Web浏览器与Web服务器之间将完成下列7个步骤：

1. 建立TCP连接

在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立TCP连接，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作TCP/IP网络。

HTTP是比TCP更高层次的应用层协议，根据规则，低层协议建立之后才能进行更层协议的连接，因此，首先要建立TCP连接

一般TCP连接的端口号是80

2. Web浏览器向Web服务器发送请求命令

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令

例如：GET/sample/hello.jsp HTTP/1.1

3. Web浏览器发送请求头信息

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

4. Web服务器应答

客户机向服务器发出请求后，服务器会向客户机回送应答，

HTTP/1.1 200 OK

应答的第一部分是协议的版本号和应答状态码

5. Web服务器发送应答头信息

服务器随同应答向用户发送关于它自己的数据及被请求的文档。

6. Web服务器向浏览器发送数据

以Content-Type应答头信息所描述的格式发送用户所请求的实际数据

7. Web服务器关闭TCP连接

一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码

Connection:keep-alive

TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。

保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

cookie

======

• HTTP Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数据，它会在浏览器下一次发起请求时被携带并发送到服务器上。比较经典的，可以它用来确定两次请求是否来自于同一个浏览器，从而能够确认和保持用户的登录状态。Cookie的使用使得基于无状态的HTTP协议上记录稳定的状态信息成为了可能。

• cookie的属性

• key-value：cookie通过key-value的方式存储属性名和值。

• domain：规定了需要发送Cookie的主机名。如果没有指定，默认为当前的文档地址上的主机名（但是不包含子域名）。如果指定了Domain，则一般包含子域名。

• path:Path指令表明需要发送Cookie的URL路径。字符%x2F (即”/”)用做文件夹分隔符，子文件夹也会被匹配到。

• hostOnly：布尔型的值，true表示cookie只能匹配domain中指定好的请求路径。反之则不。

• httpOnly：HTTP-only类型的Cookie不能使用Javascript通过Document.cookie

属性来访问，从而能够在一定程度上阻止跨域脚本攻击（XSS）。

• secure：布尔型的值，true表示cookie只在安全的情况下有效。一般是在https情况下。即在使用SLL和HTTPS协议向服务器发起请求时，才能确保Cookie被安全地发送到服务器。

• expirationDate：指明cookie的过期的时间。

• Max-Age：指明cookie的有效期。

• session：布尔值，true表示cookie是session cookie。false的话表示持续的cookie且不过期。

• storeId：代表存放cookie的id的字符串。

HTTP与HTTPS

总结

我在成长过程中也是一路摸爬滚打，没有任何人的指点，所以走的很艰难。例如在大三的时候，如果有个学长可以阶段性的指点一二，如果有已经工作的师兄可以告诉我工作上需要什么，我应该前面的三年可以缩短一半；后来去面试bat，失败了有5、6次，每次也不知道具体是什么原因，都是靠面试回忆去猜测可能是哪方面的问题，回来学习和完善，当你真正去招人的时候，你就会知道面试记录是多么重要，面试官可以从面试记录里看到你的成长，总是去面试，总是没有成长，就会被定义为缺乏潜力。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中…(img-BJ4IBfuU-1715720546809)]
[外链图片转存中…(img-OcPpfKIf-1715720546810)]