【前端面试宝典】话题挑战赛第1期——第1弹

写在前面

CSDN话题挑战赛第1期

• 活动详情地址：CSDN

• 参赛话题：前端面试宝典

• 话题描述：欢迎各位加入话题创作得小伙伴，如果我没有猜错得话，我觉得你是应该同我一样是一位前端人。如今前端在IT事业中的占比越来越重，已经成为不可缺少的部分，前端技术也是层出不穷，各种技术类、技术框架也蜂拥而出，前端面试的难度也随之增加，如果我们拥有一套前端面试宝典。如果你是应聘者：你就可以从容的solo面试官，如果你是面试官：你就可以将应聘者拷问到骨子里！
  总之我们大家一起将自己的面试经验以及学习到的知识点汇聚于此，形成一套体系的前端面试宝典。让读者无论是面试还是学习都能够有非常大的收获。就让我们携手共筑前端面试宝典吧！！！

携手共筑前端面试宝典

目录

题目一：说一下 http 和 https

答案

题目二：说说 TCP 三次握手

答案

题目三：TCP 和 UDP 的区别

答案

题目四：WebSocket 与 Http

答案

题目五：HTTP 请求中的 Head 请求与 Options 请求

答案

题目六：fetch 发送 2 次请求的原因

答案

题目七：cookie、sessionStorage、localStorage 的区别

答案

题目八：对 HTML 语义化标签的理解

答案

题目九：iframe 是什么，有什么缺点

答案

题目十：Cookie 如何防范 XSS 攻击

答案

题目十一：简单描述一下 RESTful

答案

题目十二：说一下从哪些角度入手前端优化

答案

题目十三：GET 和 POST 的区别

答案

题目十四：浏览器在生成页面的时候，会生成哪两颗树

答案

题目十五：输入 URL 到页面加载显示完成发生了什么

答案

题目一：说一下 http 和 https

答案

• http 是无状态的超文本传输协议，是客户端与服务端请求与应答的标准，用于从 WWW 服务器传输超文本到本地浏览器的传输协议。
• https 是 http 的安全增强版，在 http 的传输层中加入了 SSL 加密，改善了 http 明文传输数据的缺点。
• https 协议的工作原理：
  1. 首先，使用 https 的 URL 访问服务器，要求 web 服务器建立 SSL 连接。web 服务器在接收到服务器的请求之后，会将网站的 CA 证书返回给客户端，客户端就可以拿到包含在证书中的公钥；
  2. 然后，客户端与 web 服务器开始协商 SSL 连接的加密等级。协商后，客户端根据定好的加密等级，建立会话密钥，并使用证书中的公钥，加密会话密钥，传输给服务器；
  3. 最后，服务器使用自己保存的私钥解密出会话密钥，并用其加密与客户端之间的通信。
• https 协议的优点：
  1. 可对用户和服务器进行认证，确保数据发送到正确的客户机和服务器；
  2. 更安全，防止数据在传输过程中被窃取、篡改；
  3. 现行架构下最安全的解决方案，虽然不是绝对安全，但大幅增加了中间人的攻击成本。
• https 协议的缺点：
  1. 相对于 http 协议增加了 SSL 加密的环节，在握手阶段会比较费时，增加页面的加载时间，增加服务器耗电；
  2. 缓存不如 http 高效，增加数据开销；
  3. CA 证书是需要付费的，功能越强大，费用越高；
  4. CA 证书需要绑定 IP 地址，不能在同一个 IP 上绑定多个域名，IPV4 资源无法支撑这种消耗。

题目二：说说 TCP 三次握手

答案

客户端与服务端都需要知道各自可收发，因此需要三次握手。

1. 第一次握手是 S 端确认自己可以接收 C 端发来的报文段；
2. 第二次握手是 C 端确认 S 端收到了自己发送的报文段，同时自己能够接收 S 端发来的报文段；
3. 第三次握手是 S 端确认 C 端收到了自己发送的报文段。

题目三：TCP 和 UDP 的区别

答案

1. TCP 是面向连接的，而 UDP 无需连接；
2. TCP 传输数据时，比较可靠没有差错，而 UDP 尽最大努力交付，不保证可靠交付。因此在大数据量传输时，应选择 TCP；
3. TCP 面向字节流，而 UDP 面向报文，网络出现拥堵时不会降低速率，因此容易出现丢包；
4. TCP 只支持 1 对 1，而 UDP 支持 1 对多；
5. TCP 首部大，有 20 字节，而 UDP 只有 8 字节。

题目四：WebSocket 与 Http

答案

http 支持一个 Request 对应一个 Response，且这个 Response 是被动的，也无法持续连接，只能瞬时连接。而 WebSocket 支持持续连接，且可以由服务器主动发起。

题目五：HTTP 请求中的 Head 请求与 Options 请求

答案

• head 请求：类似 get 请求，但返回的响应中无具体内容，只用于获取报头
• options 请求：用于向服务端请求其支持的请求方法

题目六：fetch 发送 2 次请求的原因

答案

举例：fetch 发送 post 请求时，会发送两次请求，第一次会返回的状态码是 204，第二次才会返回想要的结果。因为他第一次发送的是 options 请求，用来查询服务端支持哪些 request method。

题目七：cookie、sessionStorage、localStorage 的区别

答案

• 共同点：都保存在浏览器端，并且是同源的。
• 不同点：
  • cookie 可以在同域名（不同端口）下共享，且能够被 http 请求携带，容量小只有 4k；
  • sessionStorage 与 localStorage 的容量要比 cookie 大的多，但是仅用于存储作用，不具备 cookie 所具备的那些功能，且 sessionStorage 在浏览器窗口关闭后就会被清空。

题目八：对 HTML 语义化标签的理解

答案

• HTML5 新增了诸如 main、header、footer、article、nav、section 等语义比较明显的标签，且提倡使用正确的标签包含正确的内容，而不是 div 套 div；
• 此外，正确使用语义化标签有助于优化项目的 SEO。

题目九：iframe 是什么，有什么缺点

答案

• 用于在页面中嵌套显示另一个页面的标签；
• 缺点：
  • 阻塞主页面的 onload 事件；
  • 搜索引擎一般无法解析这种页面，不利于 SEO；
  • iframe 和主页面共享连接池，而浏览器会限制同一区域，所以会影响性能。

题目十：Cookie 如何防范 XSS 攻击

答案

主要有两个属性：

1. httponly：禁止 JavaScript 访问 cookie；
2. secure：仅在 https 的请求中携带 cookie。

题目十一：简单描述一下 RESTful

答案

REST 这个概念最早是在罗伊·托马斯·菲尔丁的博士论文中提出的，直译过来就是表现层状态转移。而符合 REST 理念的架构风格就称为 RESTful。简单描述一下就是用 URL 定位资源，用 HTTP 描述操作。

题目十二：说一下从哪些角度入手前端优化

答案

• 降低请求量：减少 http 请求、懒加载、雪碧图，gzip 等；
• 加快请求速度：预解析 DNS、CDN 分发等；
• 缓存：http 缓存、localStorage 缓存等；
• 渲染：js/css 优化、加载顺序、SSR 等。

题目十三：GET 和 POST 的区别

答案

• get 传参使用 query 参数，且有长度限制，而 post 使用 request body，一般没有长度限制，二者都可使用路径参数；
• post 相对于 get 较为安全，因为参数不会暴露在 URL 中；
• get 请求只能使用 URL 编码，而 post 可以使用多种编码方式；
• 浏览器会主动 cacheget 请求，而 post 不会；
• get 会产生一个 TCP 数据包，而 post 会产生两个 TCP 数据包；
• get 和 post 本质都是 TCP 连接，并无差别，只是 HTTP 的规定以及浏览器/服务器的限制，导致他们在使用时出现了一些差异。

题目十四：浏览器在生成页面的时候，会生成哪两颗树

答案

DOM 树与 CSSOM 规则树。浏览器在接收到服务器传来的 HTML 文档后，会遍历文档的节点，生成 DOM 树。CSSOM 规则树则由浏览器解析 CSS 文件后生成。

题目十五：输入 URL 到页面加载显示完成发生了什么

答案

DNS 解析——建立 TCP 连接——发送 HTTP 请求——服务器处理请求——返回 HTTP 报文——浏览器解析——渲染页面——连接结束。

写在最后

CSDN话题挑战赛第1期

• 活动详情地址：CSDN