【学姐面试宝典】—— 前端基础篇Ⅰ（HTTP/HTML/浏览器）(面试学弟学妹问题)

推荐整理分享【学姐面试宝典】—— 前端基础篇Ⅰ（HTTP/HTML/浏览器）(面试学弟学妹问题)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:面试官是学姐怎么称呼,面试学弟学妹问题,面试小姐姐,学长学姐面试要注意哪些细节,学姐面试别人时一般问什么问题,学长学姐面试,学长学姐面试怎么称呼,学姐面试别人时一般问什么问题,内容如对您有帮助，希望把文章链接给更多的朋友！

前言

博主主页👉🏻蜡笔雏田学代码 专栏链接👉🏻【前端面试专栏】 今天开始学习前端面试题相关的知识！ 感兴趣的小伙伴一起来看看吧~🤞

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

主要的区别如下：

客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：

http2.0 的特性如下：

一句话概括：客户端和服务端都需要直到各自可收发，因此需要三次握手。 简化三次握手：

从图片可以得到三次握手可以简化为：C 发起请求连接 S 确认，也发起连接 C 确认我们 再看看每次握手的作用：第一次握手：S 只可以确认 自己可以接受 C 发送的报文段第 二次握手：C 可以确认 S 收到了自己发送的报文段，并且可以确认 自己可以接受 S 发 送的报文段第三次握手：S 可以确认 C 收到了自己发送的报文段。

什么是 Bom?

Bom 是浏览器对象。

有哪些常用的 Bom 属性呢？ 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()——重载当前页面 history 对象 history.go() ——前进或后退指定的页面数 history.go(num); history.back() ——后退一页 history.forward() ——前进一页 Navigator 对象 navigator.userAgent ——返回用户代理头的字符串表示(就是包括浏览器版本信息等的字 符串) navigator.cookieEnabled ——返回浏览器是否支持(启用)cookie

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

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

Cookie：cookie 数据始终在同源的 http 请求中携带（即使不需要），即 cookie 在浏览器 和服务器间来回传递。而 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅 在本地保存。cookie 数据还有路径（path）的概念，可以限制 cookie 只属于某个路径下, 存储的大小很小只有 4K 左右。 （key：可以在浏览器和服务器端来回传递，存储容量 小，只有大约 4K 左右） sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage： 始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie 只在设置的 cookie 过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关 闭浏览器后消失，session 为一个回话，当页面不同即使是同一页面打开两次，也被视为 同一次回话） localStorage：localStorage 在所有同源窗口中都是共享的；cookie 也是在所有同源窗口中 都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与 否都会始终生效）

补充说明一下 cookie 的作用： 保存用户登录状态。例如将用户 id 存储于一个 cookie 内，这样当用户下次访问该页面 时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie 还可以设置 过期时间，当超过时间期限后，cookie 就会自动消失。因此，系统往往可以提示用户保 持登录状态的时间：常见选项有一个月、三个 月、一年等。 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie 后就会显得很人性化了，系统能 够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区 的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一 样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使 用 cookie 来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以 保存上一次访问的界面风格。

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

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

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

一句话概括：DNS解析 => TCP 连接 => 发送 HTTP 请求 => 服务器处理请求并返回 HTTP 报文 => 浏览器解析渲染页面 => 连接结束

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

CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求，比如用户登录了一个网站后，立刻在另一个tab页面访问量攻击者用来制造攻击的网站，这个网站要求访问刚刚登陆的网站，并发送了一个恶意请求，这时候 CSRF 就产生了，比如这个制造攻击的网站使用一张图片，但是这种图片的链接却是可以修改 数据库的，这时候攻击者就可以以用户的名义操作这个数据库，防御方式：使用验证码，检查 https 头部的 refer字段，使用 token XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击，比如获取 cookie，或者其他用户身份信息，可以分为存储型和反射型，存储型是攻击者输入一些数据并且存储到了数据库中，其他浏览者看到的时候进行攻击，反射型的话不存储在数据库中，往往表现为将攻击代码放在 url 地址的请求参数中，防御方式：为 cookie 设置 httpOnly 属性，对用户的输入进行检查，进行特殊字符过滤。

今天的分享就到这里啦✨\textcolor{red}{今天的分享就到这里啦✨}今天的分享就到这里啦✨

原创不易，还希望各位大佬支持一下\textcolor{blue}{原创不易，还希望各位大佬支持一下}原创不易，还希望各位大佬支持一下

🤞 点赞，你的认可是我创作的动力！\textcolor{green}{点赞，你的认可是我创作的动力！}点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！\textcolor{green}{收藏，你的青睐是我努力的方向！}收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！\textcolor{green}{评论，你的意见是我进步的财富！}评论，你的意见是我进步的财富！