Web前端开发面试题之HTTP/HTML/浏览器

一、HTTP

1、说一下 http 和 https

https的SSL加密是在传输层实现的。

(1)http和https的基本概念
http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），
用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https: 是以安全为目标的HTTP通道，简单讲是HTTP的安全版，即HTTP下加入SSL层，HTTPS的安全基础是SSL，因此加密的详细内容就需要SSL。

https协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

(2)http和https的区别？

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说，https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。
主要的区别如下：

https协议需要ca证书，费用较高。

http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443

http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

2、说一下 http2.0 （http2.0 的特性有哪些？）

首先补充一下，http和https的区别，相比于http, https是基于ssl加密的http协议。
简要概括：http2.0是基于1999年发布的http1.0之后的首次更新。

1. 提升访问速度（可以对于，请求资源所需时间更少，访问速度更快，相比http1.0）

2. 允许多路复用：即连接共享，即每一个request都是用作连接共享机制的。一个request对应一个id，这样一个连接上可以有多个request，每个连接的request可以随机的混杂在一起，接收方可以根据request的 id 将request再归属到各自不同的服务端请求里面 。

改善了在http1.1中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。

另外多路复用中也支持了流的优先级，允许客户端告诉服务器那些内容是更优先级的资源，可以优先传输。

3. 二进制格式：http1.X 的解析是基于文本的，http2.0 将所有的传输信息分割为更小的消息和帧，并对他们采用二进制格式编码，基于二进制可以让协议有更多的扩展性，比如引入了帧来传输数据和指令。

4. 首部压缩：http1.x的header带有大量信息，而且每次都要重复发送，http2.0使用encoder来减少需要传输的header大小，通讯双方各自cache一份header fields表，既避免了重复header的传输，又减小了需要传输的大小。

5. 服务器端推送

6. 内容安全：因为http2.0是基于https的，天然具有安全特性，通过http2.0的特性可以避免单纯使用https的性能下降。

3、HTTP支持的方法 （HTTP常见的请求方法）

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

get、post 这两个用的是最多的，还有很多比如 patch、delete、put、options等等

4、 GET 和 POST 的区别

（1）使用 Get 请求时，参数在 URL 中显示，而使用 Post 请求，则不会显示出来。

（2）Post 传输的数据量大，可以达到 2M，而 Get 方法由于受到 URL 长度的限制，只能传递大约 1024 字节。

（3）Get 请求需注意缓存问题， Post 请求不需担心这个问题。

（4）Post请求必须设置 Content-Type 值为 application/x-form-www-urlencoded 。

（5）发送请求时，因为 Get 请求的参数都在 url 里，所以 send 函数发送的参数为null，而 Post 请求在使用 send 方法时，却需赋予其参数。

（6）GET 方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET 方式会带来严重的安全问题。而 POST 方式相对来说就可以避免这些问题。

GET - 从指定的资源请求数据。
POST - 向指定的资源提交要被处理的数据。

GET：不同的浏览器和服务器不同，一般限制在2~8K之间，更加常见的是1k以内。

GET和POST的底层也是TCP/IP，GET/POST都是TCP链接。

GET产生一个TCP数据包；POST产生两个TCP数据包。

对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；

而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。

5、常见的HTTP的头部

可以将http首部分为通用首部，请求首部，响应首部，实体首部

1. 通用首部表示一些通用信息，比如date表示报文创建时间。

2. 请求首部就是请求报文中独有的，如cookie，和缓存相关的如if-Modified-Since。

3. 响应首部就是响应报文中独有的，如set-cookie，和重定向相关的location。

4. 实体首部用来描述实体部分，如 allow 用来描述可执行的请求方法，content-type 描述主题类型，content-Encoding 描述主体的编码方式。

6、介绍知道的HTTP返回的状态码 （说说你知道的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    服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

500    Internal Server Error    服务器内部错误，无法完成请求

501    Not Implemented    服务器不支持请求的功能，无法完成请求

502    Bad Gateway    作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

503    Service Unavailable    由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504    Gateway Time-out    充当网关或代理的服务器，未及时从远端服务器获取请求

505    HTTP Version not supported    服务器不支持请求的HTTP协议的版本，无法完成处理

7、补充400和401、403状态码

(1)400状态码：请求无效，客户端请求的语法错误，服务器无法理解
产生原因：
1. 前端提交数据的字段名称和字段类型与后台的实体没有保持一致
2. 前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

解决方法：
1. 对照字段的名称，保持一致性
2. 将obj对象通过JSON.stringify实现序列化

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

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

8、状态码304和200的区别 (说说301，302，304的状态码) (知道304吗，什么时候用304？)

状态码200：请求已成功，一般用于GET与POST请求，请求所希望的响应头或数据体将随此响应返回。即返回的数据为全量的数据，如果文件不通过GZIP压缩的话，文件是多大，则要有多大传输量。

状态码304：如果客户端发送了一个带条件的 GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。
即客户端和服务器端只需要传输很少的数据量来做文件的校验，如果文件没有修改过，则不需要返回全量的数据。

状态码301：永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替。

状态码302：临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI。

字面上的区别就是：301是永久重定向，而302是临时重定向。
301比较常用的场景是使用域名跳转。
302用来做临时跳转 比如未登陆的用户访问用户中心重定向到登录页面。

二、HTML

1、对HTML语义化标签的理解

HTML5 语义化标签是指正确的标签包含了正确的内容，结构良好，便于阅读，比如nav 表示导航条，类似的还有 article、header、footer 等标签。

2、HTML5新增的元素

（1）首先 HTML5 为了更好的实践 web 语义化，增加了 header，footer，nav，aside，section 等语义化标签；

（2）在表单方面，为了增强表单，为 input 增加了 color，emial，data ，range等类型；

（3）在存储方面，提供了 sessionStorage，localStorage 和离线存储，通过这些存储方式方便数据在客户端的存储和获取；

（4）在多媒体方面规定了音频和视频元素 audio 和 vedio；

（5）另外还有地理定位，canvas 画布，拖放，多线程编程的 web worker 和 websocket 协议。

3、HTML5和CSS3用的多吗？你了解它们的新属性吗？有在项目中用过吗？

html5：
1）标签增删

8个语义元素 header section footer aside nav main article figure

内容元素mark高亮 progress进度

新的表单控件calander date time email url search

新的input类型 color date datetime datetime-local email

移除过时标签big font frame frameset

2）canvas绘图，支持内联SVG。支持MathML

3）多媒体audio video source embed track

4）本地离线存储，把需要离线存储在本地的文件列在一个manifest配置文件

5）web存储。localStorage、SessionStorage


CSS3：
CSS3边框，如 border-radius，box-shadow 等；
CSS3背景，如 background-size，background-origin 等；
CSS3 2D，3D转换，如 transform 等；
CSS3动画，如 animation 等。
参考 https://www.cnblogs.com/xkweb/p/5862612.html

4、iframe是什么？有什么缺点？

定义：iframe元素会创建包含另一个文档的内联框架
提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器
缺点：
	1. 会阻塞主页面的onload事件
	2. 搜索引擎无法解读这种页面，不利于SEO
	3. iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

三、浏览器

1、浏览器在生成页面的时候，会生成哪两颗树？

构造两棵树，DOM 树和 CSSOM 规则树。

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

2、页面渲染机制

1、HTML 的加载

HTML 是一个网页的基础，下载完成后解析。

2、其他静态资源加载

解析 HTML 时，发现其中有其他外部资源链接比如 CSS、JS、图片等，会立即启用别的线程下载。

但当外部资源是 JS 时，HTML 的解析会停下来，等 JS 下载完执行结束后才继续解析 HTML，防止 JS 修改已经完成的解析结果。
　　
3、DOM 树构建

在 HTML 解析的同时，解析器会把解析完成的结果转换成 DOM 对象，再进一步构建 DOM 树。

4、CSSOM 树构建

CSS 下载完之后对 CSS 进行解析，解析成 CSS 对象，然后把 CSS 对象组装起来，构建 CSSOM 树。

5、渲染树构建

当 DOM 树和 CSSOM 树都构建完之后，浏览器根据这两个树构建一棵渲染树。

6、布局计算

渲染树构建完成以后，浏览器计算所有元素大小和绝对位置

7、渲染

布局计算完成后，浏览器在页面渲染元素。经过渲染引擎处理后，整个页面就显示出来

3、 说一下浏览器缓存 （浏览器缓存机制）（具体有哪些请求头是跟缓存相关的）强缓存、协商缓存什么时候用哪个

（1）缓存分为两种：强缓存和协商缓存，根据响应的header内容来决定。

	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存中获取	200（from cache）	否，直接从缓存取
协商缓存	从缓存中获取	304（not modified）	是，通过服务器告知缓存是否可用

当服务器资源没有变化的时候使用强缓存；当服务器资源发生变化时使用协商缓存（弱缓存）。

（2）强缓存相关字段有 expires，cache-control。如果 cache-control 与 expires 同时存在的话，cache-control 的优先级高于 expires。

（3）协商缓存相关字段有 Last-Modified/If-Modified-Since，Etag/If-None-Match 。

参考：HTTP 强缓存和协商缓存

4、浏览器输入网址到页面渲染全过程 （输入URL到页面加载显示完成发生了什么?）

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

5、 在地址栏里输入一个URL，到这个页面呈现出来，中间会发生什么？

这是一个必考的面试问题。

DNS 解析
（1）输入 URL 后，首先需要找到这个 URL 域名的服务器 IP ，为了寻找这个 IP，浏览器首先会寻找缓存，查看缓存中是否有记录，缓存的查找记录为：浏览器缓存 -> 系统缓存 -> 路由器缓存，缓存中没有，则查找系统的 hosts 文件中是否有记录，如果没有则查询 DNS 服务器。

TCP 连接和发送 HTTP 请求
（2）得到服务器的 IP 地址后，浏览器根据这个 IP 以及相应的端口号，构造一个 http 请求，这个请求报文会包括这次请求的信息，主要是请求方法，请求说明和请求附带的数据，并将这个 http 请求封装在一个 tcp 包中，这个 tcp 包会依次经过传输层，网络层，数据链路层，物理层到达服务器，服务器解析这个请求来作出响应，返回相应的 html 给浏览器 。

DOM 树构建
（3）因为 html 是一个树形结构，浏览器根据这个 html 来构建 DOM 树，在 DOM 树的构建过程中，如果遇到 JS 脚本和外部 JS 连接，则会停止构建 DOM 树来执行和下载相应的代码，这会造成阻塞，这就是为什么推荐 JS 代码应该放在 html 代码的后面 。

CSSOM 树构建以及渲染树构建
（4）之后根据外部样式，内部样式，内联样式构建一个 CSS 对象模型树 CSSOM 树，构建完成后和 DOM 树合并为渲染树，这里主要做的是排除非视觉节点，比如 script，meta 标签和排除 display为 none 的节点 。

布局计算
（5）之后进行布局，布局主要是确定各个元素的位置和尺寸，之后是渲染页面，因为 html 文件中会含有图片，视频，音频等资源，在解析 DOM 的过程中，遇到这些都会进行并行下载，浏览器对每个域的并行下载数量有一定的限制，一般是 4-6 个 。

渲染页面
（6）当然在这些所有的请求中我们还需要关注的就是缓存，缓存一般通过 Cache-Control、Last-Modify、Expires 等首部字段控制。 Cache-Control 和 Expires 的区别在于 Cache-Control 使用相对时间，Expires 使用的是基于服务器端的绝对时间，因为存在时差问题，一般采用 Cache-Control，在请求这些有设置了缓存的数据时，会先查看是否过期。

• 如果没有过期则直接使用本地缓存（这就是强缓存）。
• 过期则请求并在服务器校验文件是否修改，如果上一次响应设置了 ETag 值会在这次请求的时候作为 If-None-Match 的值交给服务器校验，如果一致，继续校验 Last-Modified，没有设置 ETag 则直接验证 Last-Modified，再决定是否返回 304 （这就是协商缓存）。

参考：HTTP 强缓存和协商缓存

6、前端优化 （ web性能优化）

1. 降低请求量：合并资源，减少HTTP 请求数，minify / gzip 压缩，webP，lazyLoad。

2. 加快请求速度：预解析DNS，减少域名数，并行加载，CDN 分发。

3. 缓存：HTTP 协议缓存请求，离线缓存 manifest，离线数据缓存localStorage。

4. 渲染：JS/CSS优化，加载顺序，服务端渲染，pipeline。

7、 cookie 和 session 的区别，localstorage 和 sessionstorage 的区别

参考：cookie、session、localstorage和 sessionstorage 的解释与区别（详解）
（1）cookie 和 session 的区别

cookie和session都可用来存储用户信息
1. cookie数据存放在客户的浏览器上，即客户端，session数据放在服务器上，即服务器端。
2. cookie不是很安全，cookie存放于客户端有可能被窃取，所以cookie一般用来存放不敏感的信息，比如用户设置的网站主题。敏感的信息用session存储，比如用户的登陆信息，session可以存放于文件，数据库，内存中都可以。
3. 别人可以分析存放在本地的COOKIE并进行COOKIE欺骗，考虑到安全应当使用session。
4. session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用cookie。
5. 单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。

（2）cookie 、localstorage 和 sessionstorage 的区别

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

1、生命周期和作用域：

cookie：

• 只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• cookie 在所有同源窗口中都是共享的

localstorage：

• 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；除非被手动清除，否则永久保存。
• 在所有同源窗口中都是共享的（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

sessionstorage：

• 仅在当前浏览器窗口关闭前有效，关闭页面或浏览器后就会被清除.
• sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面

2、存放数据：

cookie：4k左右

localstorage和sessionstorage：可以保存5M的信息

3、http请求：

cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，如果使用cookie保存过多数据会带来性能问题

localstorage和sessionstorage：不会自动把数据发给服务器，仅在客户端即浏览器中保存（本地保存），不参与和服务器的通信

4、易用性：

cookie：需要程序员自己封装，原生的cookie接口不友好

localstorage和sessionstorage：即可采用原生接口，亦可再次封装

5、应用场景：

从安全性来说，因为每次http请求都回携带cookie信息，这样子浪费了带宽，所以cookie应该尽可能的少用，此外cookie还需要指定作用域，不可以跨域调用，限制很多，但是对用户登陆来说，cookie还是比storage好用，其他情况下可以用storage，localstorage可以用来在页面传递参数，sessionstorage可以用来保存一些临时的数据，防止用户刷新页面后丢失了一些参数。

补充说明一下cookie的作用：
保存用户登录状态。 例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。
跟踪用户行为。

8、cookie有哪些字段可以设置

name 字段： 为一个cookie的名称。

value 字段 ： 为一个cookie的值。

path 字段： 为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age 字段： 为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

Size 字段： 此cookie大小。

http 字段： cookie 的 httponly 属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过 document.cookie 来访问此 cookie。

secure 字段 ： 设置是否只能通过 https 来传递此条 cookie。

domain 字段： 为可以访问此 cookie 的域名。

非顶级域名，如二级域名或者三级域名，设置的cookie的domain只能为顶级域名或者二级域名或者三级域名本身，不能设置其他二级域名的cookie，否则cookie无法生成。

顶级域名只能设置domain为顶级域名，不能设置为二级域名或者三级域名，否则cookie无法生成。

二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面或者到这个cookie的值了。
顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

9、几个很实用的BOM属性对象方法?

什么是Bom? 
Bom是浏览器对象。

有哪些常用的Bom属性呢？

(1)location对象
location.href-- 返回或设置当前文档的URL
location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
location.hash -- 返回URL#后面的内容，如果没有#，返回空
location.host -- 返回URL中的域名部分，例如www.dreamdu.com
location.hostname -- 返回URL中的主域名部分，例如dreamdu.com
location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
location.assign -- 设置当前文档的URL
location.replace() -- 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);
location.reload() -- 重载当前页面

(2)history对象
history.go() -- 前进或后退指定的页面数 history.go(num);
history.back() -- 后退一页
history.forward() -- 前进一页

(3)Navigator对象
navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie