牛客网前端工程师面经汇总—HTTP/HTML/浏览器（一）

一、http和https

1. http和https的基本概念

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

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

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

2. http和https的区别

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

   （2）Https协议需要ca证书，费用较高。

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

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

3. https协议的工作原理

   （1）客户使用https url访问服务器，则要求web 服务器建立ssl链接。

   （2）web服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），返回或者说传输给客户端。

   （3）客户端和web服务器端开始协商SSL链接的安全等级，也就是加密等级。

   （4）客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。

   （5）web服务器通过自己的私钥解密出会话密钥。

   （6）web服务器通过会话密钥加密与客户端之间的通信。

4. https协议的优点

   （1）使用HTTPS协议可认证用户和服务器，确保数据发送到正确的客户机和服务器；

   （2）HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，要比http协议安全，可防止数据在传输过程中不被窃取、改变，确保数据的完整性。

   （3）HTTPS是现行架构下最安全的解决方案，虽然不是绝对安全，但它大幅增加了中间人攻击的成本。

   （4）谷歌曾在2014年8月份调整搜索引擎算法，并称“比起同等HTTP网站，采用HTTPS加密的网站在搜索结果中的排名将会更高”。

5. https协议的缺点

   （1）https握手阶段比较费时，会使页面加载时间延长50%，增加10%~20%的耗电。

   （2）https缓存不如http高效，会增加数据开销。

   （3）SSL证书也需要钱，功能越强大的证书费用越高。

   （4）SSL证书需要绑定IP，不能再同一个ip上绑定多个域名，ipv4资源支持不了这种消耗。

二、tcp三次握手、四次挥手

1. 三次握手

   （1）第一次握手：Client将标志位SYN置为1，随机产生一个值seq=J，并将该数据包发送给Server，Client进入SYN_SENT状态，等待Server确认。

   （2）第二次握手：Server收到数据包后由标志位SYN=1知道Client请求建立连接，Server将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给Client以确认连接请求，Server进入SYN_RCVD状态。

   （3）第三次握手：Client收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给Server，Server检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，Client和Server进入ESTABLISHED状态，完成三次握手，随后Client与Server之间可以开始传输数据了。

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q3hbs1Xr-1579702175220)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200112152448164.png)]

2. 四次挥手

   （1）第一次挥手：Client发送一个FIN，用来关闭Client到Server的数据传送，Client进入FIN_WAIT_1状态。

   （2）第二次挥手：Server收到FIN后，发送一个ACK给Client，确认序号为收到序号+1（与SYN相同，一个FIN占用一个序号），Server进入CLOSE_WAIT状态。

   （3）第三次挥手：Server发送一个FIN，用来关闭Server到Client的数据传送，Server进入LAST_ACK状态。

   （4）第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2uZH60Ze-1579702175221)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200112152434688.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yvYOW7it-1579702175221)(C:\Users\Admin\AppData\Roaming\Typora\typora-user-images\image-20200112145314959.png)]

三、TCP和UDP的区别

1. TCP是面向连接的，udp是无连接的即发送数据前不需要先建立链接。
2. TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付。 并且因为tcp可靠，面向连接，不会丢失数据因此适合大数据量的交换。
3. TCP是面向字节流，UDP面向报文，并且网络出现拥塞不会使得发送速率降低（因此会出现丢包，对实时的应用比如IP电话和视频会议等）。
4. TCP只能是1对1的，UDP支持1对1,1对多。
5. TCP的首部较大为20字节，而UDP只有8字节。
6. TCP是面向连接的可靠性传输，而UDP是不可靠的。

四、Websocket

1. WebSocket是HTML5新增的协议，它的目的是在浏览器和服务器之间建立一个不受限的双向通信的通道，比如说，服务器可以在任意时刻发送消息给浏览器。

2. 为什么传统的HTTP协议不能做到WebSocket实现的功能？这是因为HTTP协议是一个请求－响应协议，请求必须先由浏览器发给服务器，服务器才能响应这个请求，再把数据发送给浏览器。换句话说，浏览器不主动请求，服务器是没法主动发数据给浏览器的。

3. 这样一来，要在浏览器中搞一个实时聊天，在线炒股（不鼓励），或者在线多人游戏的话就没法实现了，只能借助Flash这些插件。

4. 首先，WebSocket连接必须由浏览器发起，因为请求协议是一个标准的HTTP请求，格式如下：

   GET ws://localhost:3000/ws/chat HTTP/1.1
   Host: localhost
   Upgrade: websocket
   Connection: Upgrade
   Origin: http://localhost:3000
   Sec-WebSocket-Key: client-random-string
   Sec-WebSocket-Version: 13
   

五、几个很实用的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

六、HTML5 drag api

1. dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发，。

   darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

   dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

   dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

   dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

   drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

   dragend：事件主体是被拖放元素，在整个拖放操作结束时触发

七、补充状态码400、401、403

1. 400状态码：请求无效

   产生原因：

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

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

   解决方法：

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

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

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

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

八、fetch发送2次请求的原因

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

   原因很简单，因为你用fetch的post请求的时候，导致fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

九、Cookie、sessionStorage、localStorage

1. 三者共同点：都是保存在浏览器端，并且是同源的
2. 作用域不同：Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
3. 生命周期不同：sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

十、web worker

1. Web Worker 的作用：为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。

2. Web Worker 有以下几个使用注意点。

   （1）同源限制

   分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源。

   （2）DOM 限制

   Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象。

   （3）通信联系

   Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。

   （4）脚本限制

   Worker 线程不能执行alert()方法和confirm()方法，但可以使用 XMLHttpRequest 对象发出 AJAX 请求。

   （5）文件限制

   Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。

3. 基本用法

   （1）创建：

   var worker = new Worker('work.js');
   

   （2）主线程调用worker.postMessage()方法，向 Worker 发消息：

   worker.postMessage('Hello World');
   worker.postMessage({method: 'echo', args: ['Work']});
   

   （3）主线程通过worker.onmessage指定监听函数，接收子线程发回来的消息：

   worker.onmessage = function (event) {
     console.log('Received message ' + event.data);
     doSomething();
   }
   
   function doSomething() {
     // 执行任务
     worker.postMessage('Work done!');
   }
   

   （4）Worker 完成任务以后，主线程就可以把它关掉：

   worker.terminate();
   

   （5）Worker 线程内部需要有一个监听函数，监听message事件：

   self.addEventListener('message', function (e) {
     self.postMessage('You said: ' + e.data);
   }, false);
   

十一、对HTML语义化标签的理解

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

十二、iframe是什么？有什么缺点？

1. iframe也称作嵌入式框架，嵌入式框架和框架网页类似，它可以把一个网页的框架和内容嵌入在现有的网页中。

2. 缺点：

   （1）会产生很多页面，不容易管理

   （2）代码复杂,无法被一些搜索引擎索引到

   （3）多数小型的移动设备（PDA 手机）无法完全显示框架

   （4）框架的页面会增加服务器的http请求

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

1. 声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行，这并不是一个 HTML 标签。

2. 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

3. 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

4. 区分：

   （1）如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。

   （2）包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。

   （3）DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。

   （4）HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。

5. 意义：严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

十四、Cookie如何防范XSS攻击

1. XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本。XSS 的本质是：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。

2. 需要在HTTP头部配上，set-cookie：

   httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

   secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

十五、Cookie和session的区别

1. 存储位置不同：cookie的数据信息存放在客户端浏览器上。session的数据信息存放在服务器上。

2. 存储容量不同：单个cookie保存的数据<=4KB，一个站点最多保存20个Cookie。对于session来说并没有上限，但出于对服务器端的性能考虑，session内不要存放过多的东西，并且设置session删除机制。

3. 存储方式不同：cookie中只能保管ASCII字符串，并需要通过编码方式存储为Unicode字符或者二进制数据。session中能够存储任何类型的数据，包括且不限于string，integer，list，map等。

4. 隐私策略不同：cookie对客户端是可见的，别有用心的人可以分析存放在本地的cookie并进行cookie欺骗，所以它是不安全的。session存储在服务器上，对客户端是透明的，不存在敏感信息泄漏的风险。

5. 有效期不同：开发可以通过设置cookie的属性，达到使cookie长期有效的效果。session依赖于名为JSESSIONID的cookie，而cookie JSESSIONID的过期时间默认为-1，只需关闭窗口该session就会失效，因而session不能达到长期有效的效果。

6. 服务器压力不同：cookie保管在客户端，不占用服务器资源。对于并发用户十分多的网站，cookie是很好的选择。session是保管在服务器端的，每个用户都会产生一个session。假如并发访问的用户十分多，会产生十分多的session，耗费大量的内存。

7. 浏览器支持不同：

   （1）假如客户端浏览器不支持cookie：

   • cookie是需要客户端浏览器支持的，假如客户端禁用了cookie，或者不支持cookie，则会话跟踪会失效。关于WAP上的应用，常规的cookie就派不上用场了。

   • 运用session需要使用URL地址重写的方式。一切用到session程序的URL都要进行URL地址重写，否则session会话跟踪还会失效。

   （2）假如客户端支持cookie：

   • cookie既能够设为本浏览器窗口以及子窗口内有效，也能够设为一切窗口内有效。

   • session只能在本窗口以及子窗口内有效。

8. 跨域支持上不同：cookie支持跨域名访问。session不支持跨域名访问。

十六、一句话概括RESTFUL

1. 就是用URL定位资源，用HTTP描述操作

十七、addEventListener参数

1. addEventListener(event, function, useCapture)方法用于向指定元素添加事件句柄，其中，event指定事件名；function指定要事件触发时执行的函数；useCapture指定事件是否在捕获或冒泡阶段执行。