面试题整理

一、说一下 HTTP 和 HTTPS（★）

1、HTTP 和 HTTPS 的基本概念
HTTP：超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从万维网 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。
HTTPS：安全套接层超文本传输协议，是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL（安全套接层，是一种网络安全协议），因此加密的详细内容就需要 SSL。HTTPS 的 SSL 加密是在传输层实现的。
HTTPS 协议的主要作用：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。
2、HTTP 和 HTTPS 的区别
（1）安全性：HTTP 是超文本传输协议，信息是明文传输，HTTP 连接简单无状态；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传输、身份认证的网络协议，比 HTTP 协议安全。
（2）使用不同的链接方式，端口也不同，一般而言，HTTP 协议的端口为 80，HTTPS 的端口为 443。
（3）HTTPS 协议需要到 CA 申请证书，一般免费证书较少，因而需要一定费用。

二、HTTP1.0 与 HTTP2.0 的区别（★）

HTTP1.0：
1、每次连接只发送一个请求，浏览器与服务器只保持短暂的连接，即每次只完成一次请求和一次回复，然后断开。
2、对 HTTP 消息体的数据类型支持不够，只支持 text/html 格式的消息体。
3、不支持长连接，每次请求结束，连接也要结束。
HTTP2.0：
1、支持多路复用，可做到同一个连接并发处理多个请求，即一个 TCP 连接可以并发多个请求/应答消息。
2、支持服务端推送，服务端可主动将资源推送给客户端，而客户端根据需要选择订阅。
3、对 header 的数据压缩，提高了传输的效率。
4、支持加密传输，提高了安全性。

三、get 和 post 有什么区别

相同点：都是异步请求的方式来获取服务端的数据。
不同点：
1、传输方式：get 请求会将参数加在 URL 后进行传递，而 post 请求则是作为 HTTP 消息的实体内容发送给 Web 服务器的，用户不可见。
2、数据传输大小：get 方式有 URL 长度限制，传输的数据大小不能超过 2KB，而 post 可以传输大量数据。
3、安全性：get 方式请求的数据会被浏览器缓存起来，安全性低，都不安全。
4、用户刷新时：get 方式不会有任何提示，post 方式会弹出提示框，问用户是否重新提交。
5、编码：get 只能进行 URL 编码，post 支持多种编码方式。
6、缓存：get 请求会被浏览器主动缓存，post 不会缓存，除非手动设置。

四、三种存储方式：cookie、sessionStorage、localStorage

相同点：都保存在浏览器端，用于浏览器端存储的缓存数据。
不同点：
1、传递方式
cookie数据始终在同源的 HTTP 请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。
sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
2、数据存储大小
cookie数据不能超过 4KB，同时因为每次 HTTP 请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。
sessionStorage和localStorage存储大小的限制通常在 5MB 至 10MB，比cookie大得多。
3、数据有效期
cookie：只在设置的cookie 过期时间之前一直有效，即使窗口或浏览器关闭。
sessionStorage：仅在当前浏览器窗口关闭前有效，不能持久保持。
localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据。
4、作用域不同
cookie：每个cookie都有域名的限制，只能在设置cookie的域名及其子域名下使用。
sessionStorage的数据仅在同一个浏览器窗口中共享，即使在同一个域名下，不同窗口之间的sessionStorage是隔离独立的。
localStorage的数据在同一个域名下是共享的，不同的窗口之间也是共享的。即使在不同的浏览器窗口或标签页中，只要它们属于同一个域名，localStorage中的数据都是可以共享的。

localStorage和sessionStorage提供了统一的api来访问和设置数据。

五、Web Storage 与 Cookie 相比存在的优势

Web Storage包括sessionStorage和localStorage。
1、存储空间更大
每个域名下Web Storage的大小限制通常在 5MB 至 10MB，每个cookie的大小限制在 4KB 左右，每个域名下的cookie数量也有限制通常为 20 个。
2、存储内容不会发送到服务器
当设置了cookie后，cookie的内容会随着请求一并发送到服务器，这对于本地存储的数据是一种带宽浪费。而Web Storage中的数据则仅仅是存在本地，不会与服务器发生任何交互。
3、更多丰富易用的接口
Web Storage提供了一套更为丰富的接口，如setItem、getItem、removeItem、clear等，使得数据操作更为简便。cookie需要自己封装。
4、独立的存储空间
每个域（包括子域）有独立的存储空间，各个存储空间是完全独立的，因此不会造成数据混乱。

六、浏览器输入 URL 到页面展示出来的全过程

1、用户在浏览器中输入 URL 地址。
2、浏览器解析域名得到服务器 IP 地址。
浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的 IP 地址，如果没有就开启一个 DNS 域名解析器。DNS 域名解析器会首先访问顶级域名服务器，将对应的 IP 发给客户端；然后访问根域名解析器，将对应的 IP 发给客户端；最后访问本地域名服务器，得到最终的 IP 地址。
3、TCP 三次握手建立客户端和服务器的连接。
因为 HTTP 是基于 TCP 的可靠传输，所以在发送 HTTP 数据报之前，需要先进行 TCP 的三次握手建立连接。三次握手过程如下：
第一次握手：客户端—>服务端 ack=1,seq=x（x 随机生成）
第二次握手：服务端—>客户端 ACK=1,ack=x+1,seq=y（y 随机生成）
第三次握手：客户端—>服务端 ACK=1,ack=y+1,seq=x+1
完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。
4、客户端发送 HTTP 请求获取服务器端的静态资源。
5、服务器发送 HTTP 响应报文给客户端，客户端获取到页面静态资源。
6、TCP 四次挥手关闭客户端和服务器的连接。
数据传输完毕后，TCP 会进行四次挥手断开连接，释放资源。四次挥手过程如下：
第一次挥手：客户端—>服务器 FIN=1,ack=1,seq=u 客户端状态变为 FIN_WAIT_1
第二次挥手：服务器—>客户端 ACK=1,ack=u+1,seq=v 服务器状态变为 CLOSE_WAIT，TCP 进入半关闭状态
第三次挥手：服务器—>客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为 LAST_ACK
第四次挥手：客户端—>服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为 TIME_WAIT，此时 TCP 未释放，需要等待计时器计时完成后，客户端状态变为 CLOSED
7、浏览器解析文档资源并渲染页面。
（1）解析 HTML 文件，创建 DOM 树。
（2）解析 CSS。
（3）DOM 与 CSS 合并，构建渲染树（Render Tree）。
（4）布局和绘制，重绘和重排。

七、HTML 是怎么渲染的？或者说浏览器如何渲染页面？

1、解析 HTML 文件，创建 DOM 树
自上而下解析，遇到任何样式（link、style）和脚本（script）都会阻塞。
（1）CSS 加载不会阻塞 HTML 文件的解析，但会阻塞 DOM 的渲染。
（2）CSS 加载会阻塞后面 JS 语句的执行。
（3）JS 会阻塞 HTML 的解析和渲染。
（4）没有 defer 和 async 标签的 script 会立即加载并执行。
（5）有 async 标签的 JS，JS 的加载执行和 HTML 的解析渲染并行。
（6）有 defer 标签的 JS，JS 的加载和 HTML 的解析渲染并行，但会在 HTML 解析完成后执行，在触发 DOMContentLoaded 事件前执行。
（7）DOMContentLoaded 和 onload 的区别：DOMContentLoaded 在 HTML 解析完成后执行，onload 在页面完全加载完成后执行（包括样式和图片）。
2、解析 CSS
优先级：HTML 中的 style 样式>内联样式>外部样式>用户设置>浏览器默认设置。
3、DOM 与 CSS 合并，构建渲染树（Render Tree）。
4、布局和绘制，重绘和重排。
（1）重绘：根据元素的新属性重新绘制，使元素呈现新的外观。
（2）重排：当渲染树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建。
（3）重排必定会引发重绘，但重绘不一定会引发重排。

八、常见的浏览器内核有哪些

浏览器内核也就是渲染引擎（Rendering Engine），负责对网页语法的解释并渲染网页。

• IE：Trident
• Firefox：Gecko
• Opera：Presto（已废弃），Opera 现已改用 Google Chrome 的 Blink 内核。
• Safari：Webkit
• Chrome：Blink（基于 Webkit，Google 与 Opera Software 共同开发）

九、简述事件冒泡

1、DOM 事件流存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
2、事件捕获：当鼠标点击或触发 DOM 事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应事件，会先触发父元素绑定的事件。
3、事件冒泡：与事件捕获相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。
4、触发顺序：触发 DOM 事件时，先捕获再冒泡。
5、两个用于事件捕获的方法：
（1）addEventListener(event，listener，userCapture)
（2）attachEvent(event，listener)
（3）参数说明：
event——事件名称，如 click，不带 on
listener——事件监听函数
userCapture——是否采用事件捕获，默认 false 是事件冒泡方式

十、如何创建一个 Ajax

1、创建 XMLHttpRequest 对象。
2、创建一个新的 HTTP 请求，并指定该 HTTP 请求的方法、URL 及验证信息。
3、设置响应 HTTP 请求状态变化的函数。
4、发送 HTTP 请求。
5、获取异步调用返回的数据。
6、使用 JavaScript 和 DOM 实现局部刷新。

十一、什么是 Ajax 和 JSON，它们的优缺点

1、Ajax 的概念：Ajax 是异步 JavaScript 和 XML，是一种用于创建快速动态网页的技术。Ajax 通过在后台与服务器之间交换少量数据的方式，实现网页的异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的局部内容进行更新。
2、JSON 的概念：是一种轻量级的数据交换格式。在使用 Ajax 时，经常会使用 JSON 来传递数据。
3、Ajax 的优缺点：
优点：异步请求响应快，用户体验好；页面无刷新，数据局部更新；按需取数据，减少了冗余请求和服务器的负担。
缺点：
（1）异步回调问题：f2() 的执行需要用到 f1() 回调的内容，各部分之间高度耦合，在代码逻辑复杂时形成“回调地狱”。
（2）this 指向问题：Ajax 中的 this 所指的上下文是 Ajax 作用域内的上下文，想要将获取到的数据重新赋值给变量时要注意。
（3）路由跳转 back 问题：Ajax 会使返回上一页history.back()失效。
（4）对搜索引擎的支持比较弱，对于一些手机还不是很好的支持。
4、JSON 的优缺点：
优点：
（1）数据格式比较简单，易于读写，格式都是压缩的，占用宽带小。
（2）支持多种语言，.JSON 格式的编码比较简单。
（3）JSON 的解码难度较低比起 XML 简单的多。
（5）JSON 和 JS 交互更加方便。
（6）JSON 的速度远远快于 XML。
早期缺点：
（1）没有 XML 格式这么推广的深入人心和使用广泛，没有 XML 那么通用性。
（2）JSON 格式目前在 Web Service 中推广还属于初级阶段。
（3）现在服务器返回的都是 JSON 格式的数据，XML 格式已经过时了。

十二、SEO 搜索引擎优化有哪些方法

1、创建唯一且准确的网页标题<title>。
2、使用<meta>的keywords元数据来设置网页的关键字，以及description元数据准确总结网页内容。
3、使用语义化标签。
4、利用<img>中的alt属性。
5、设置rel='nofollow'忽略跟踪。
6、尽量让 HTML、CSS、JavaScript 三者分离。

• Previous
  VS Code 快捷键
• Next
  HTML 基础知识