前端面试点复习整合——前端基础篇（1）HTML、HTTP、浏览器

*为面试最后一波准备啦~

*内容参考整理自牛客网

一、HTTP和HTTPS

HTTP是超文本传输协议，它可以使浏览器更加高效，使网络传输减少。

HTTPS 由HTTP和SSL协议构建的可进行加密传输和身份认证的网络协议，比HTTP协议的安全性更高 ，但缓存不如HTTP高效，会增加数据开销，页面加载时间延长50%，耗电增加10%到20%。

二、TCP和UDP

TCP是面向连接的。TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达，因此适合大数据量的交换。

UDP是无连接的，即发送数据前不需要先建立链接。UDP尽最大努力交付，即不保证可靠交付。

三、列举几个很实用的BOM属性对象方法

1、 location对象

location.href– 返回或设置当前文档的URL 。

location.host – 返回URL中的域名部分 。

location.port – 返回URL中的端口部分 。

location.reload() – 重载当前页面 。

2、 history对象

history.go(num)– 前进或后退指定的页面数。

history.back() – 后退一页 。

history.forward()– 前进一页 。

3、 Navigator对象

navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)。

navigator.cookieEnabled– 返回浏览器是否支持(启用)cookie 。

四、说一下HTML5 drag api

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

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

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

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

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

五、400和401、403状态码

1、400状态码：请求无效。

产生原因：前端提交数据的字段名称和字段类型与后台的实体没有保持一致。前端提交到后台的数据应该是json字符串类型，但是前端没有将对象JSON.stringify转化成字符串。

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

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

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

第一次状态码是204，第二次才成功 ， fetch 第一次发送了一个Options请求，询问服务器是否支持修改的请求头，如果服务器支持，则在第二次中发送真正的请求。

七、Cookie、sessionStorage、localStorage的区别

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

Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。 cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。

sessionStorage：不会自动把数据发给服务器，仅在本地保存。 仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持 。

localStorage：不会自动把数据发给服务器，仅在本地保存。 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据 。

补充：cookie的作用： 保存用户登录状态。 跟踪用户行为， 例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。

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

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

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

定义：iframe元素会创建包含另一个文档的内联框架。

提示：可以将提示文字放在<iframe></iframe>之间，来提示某些不支持iframe的浏览器。

缺点：

会阻塞主页面的onload事件；

搜索引擎无法解读这种页面，不利于SEO；

iframe和主页面共享连接池，而浏览器对相同区域有限制所以会影响性能。

十、 一句话概括RESTFUL

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

十一、介绍知道的http返回的状态码

200：OK 请求成功。一般用于GET与POST请求 。

304：Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源 。

404：Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面 。

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

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

十二、GET和POST的区别

get参数通过url传递，post放在request body中。

get请求在url中传递的参数是有长度限制的，而post没有。

get比post更不安全，因为参数直接暴露在url中，所以不能用来传递敏感信息。

get请求只能进行url编码，而post支持多种编码方式

十三、 HTML5新增的元素

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

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

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

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

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

十四、输入URL到页面加载显示完成发生了什么?

DNS解析

TCP连接

发送HTTP请求

服务器处理请求并返回HTTP报文

浏览器解析渲染页面

连接结束

十五、说一下浏览器缓存

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

强缓存相关字段有expires，cache-control。如果cache-control与expires同时存在的话，cache-control的优先级高于expires，状态码200。

协商缓存相关字段有Last-Modified/If-Modified-Since，Etag/If-None-Match，状态码304。

服务器上的资源更新了浏览器就请求新的资源（协商缓存），没有更新就使用本地的缓存（强缓存），以最大程度的减少因网络请求而产生的资源浪费。

十六、常见的HTTP的头部

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

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

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

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

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