写在前面
值新的一岁之际，希望自己可以：勤思考，多动手，善总结，能坚持。
建了一个公众号，每周周一 至 周五，每天发布若干道面试题，并奉上个人觉得还行的解答，周六或周天发一遍汇总~。
希望大家有所得，希望自己有所得。
下面是本周的汇总（2020.07.13 - 2020.07.17）。
目录
- 了解 ES6 的 let 和 const 变量声明吗？跟 ES5 的 var 有哪些区别？
- 介绍 js 的基本数据类型
- JS 中获取原型的方法
- 如何判断一个对象是否属于某个类？
- 什么是堆？什么是栈？他们之间有什么区别和联系
- display 有哪些值及其区别
- position 有哪些值及其区别
- px、em、rem 区别
- 介绍一下 浏览器缓存
- 几种前端存储以及它们之间的区别
- 谈谈 HTTP 中 GET 与 POST 的区别
- HTTP/1.0 和 HTTP/1.1 有什么区别
- 介绍一下 HTTP/2.0 新特性
- 说说 HTTP/2.0 多路复用的基本原理以及解决的问题
- HTTP 和 HTTPS 有何区别
- 什么是 CSRF 攻击，与如何防范。
- 什么是 XSS 攻击，如何防御。
- 介绍 instanceof 原理，并手动实现
- 在项目中如何把 http 的请求换成 https
详情
一、 了解 ES6 的 let 和 const 变量声明吗？跟 ES5 的 var 有哪些区别？
let
在同一个作用域里面：
var可以重复声明变量，let不能重复声明同一变量。ES5是函数作用域，即一个函数里面才是一个作用域。ES6是块级作用域，花括号里面就是一个作用域。var有变量提升，可以在变量声明前使用，let不存在变量提升，在变量之前使用会报错。let有暂时性死区，即父作用域中有var定义，在块作用域里又定义了let， 那再在let之前使用，就是死区
const
const的很多特性和let一样，都有：不可重复声明，不存在变量提升，有暂时性死区，都是块级作用域和
let不同的是：const必须在声明的时候赋值；cosnt声明的变量不能更改（值引用是完全不能更改，引用类型，const只能保证指针是固定的）
二、 介绍 js 的基本数据类型
js 一共有 七种数据类型
- undefined
- null
- boolean
- number
- string
- Symbol（ES6 新增）
- BigInt（尚在提案）
三、JS 中获取原型的方法
obj.__proto__obj.constructor.prototypeObject.getPrototypeOf(obj)
四、 如何判断一个对象是否属于某个类？
使用
instanceOf运算符来判断构造函数的prototype属性是否出现在对象的原型链中的任何位置通过对象的
constructor属性来判断，对象的constructor属性指向该对象的构造函数，但是这种方式并不安全，因为constructor属性可以被改写如果需要判断的是某个内置的引用类型的话，可以使用
Object.prototype.toString()方法来打印对象的[[Class]]属性来进行判断
五、 什么是堆？什么是栈？他们之间有什么区别和联系
堆和栈的概念存在于数据结构中和操作系统内存中。
在数据结构中，栈中数据的存取当时是先进后出。而堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。完全二叉树是堆的一种实现方式。
在操作系统中，内存被分为栈区和堆区。
栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
堆区内存一般有程序员分配释放，若程序员不释放，程序结束时可能由垃圾回收机制回收。
六、 display 有哪些值及其区别
none隐藏元素，不占据空间block块状元素，前后有换行符，能设置宽高inline行内元素，没有换行符，不能设置宽高inline-block行内块状元素，没有换行符，能设置宽高table、flex、grid布局方式
七、position 有哪些值及其区别
static是默认值inherit继承父元素的position值relative相对定位，相对于自身原有位置进行偏移，仍处于标准文档流中absolute绝对定位 相对于最近的已定位的祖先元素，有已定位（指position不是static的元素）祖先元素，以最近的祖先元素为参考标准。如果没有已定位祖先元素，以body元素为偏移参照基准，完全脱离了标准文档流。fixed固定定位的元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。sticky新的属性值，兼容性不好， 元素偏移在达到特定阈值前为相对定位，达到后为固定定位，常用于做悬浮效果
八、 px、em、rem 区别
px固定像素，一旦设置后就无法自适应页面，随着页面的大小而改变em相对父元素来设置字体大小rem相对根元素来设置大小
九、介绍一下 浏览器缓存
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时，获取缓存的流程如下：
- 先根据这个资源的一些
http header判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器； - 当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另一些
request header验证这个资源是否命中协商缓存，称为http再验证，如果命中，服务器将请求返回，但不返回资源，而是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源； - 当协商缓存也没命中时，服务器就会将资源发送会客户端；
- 强缓存和协商缓存的共同之处在于，如果命中缓存，服务器都不会返回资源；
- 区别是，强缓存不会发送请求到服务器，而协商缓存会；
- 当
ctrl + f5强制刷新网页时，直接从服务器加载，跳过强缓存和协商缓存 - 当
f5刷新网页时，跳过强缓存，但是会检查协商缓存
强缓存
Expires（该字段是http1.0时的规范，值为一个绝对时间的GMT格式的时间字符串，代表缓存资源的过期时间）Cache-Control:max-age（该字段是http1.1的规范，强缓存利用其max-age值来判断缓存资源的最大生命周期，它的值单位为秒）
协商缓存
Last-Modified（值为资源最后更新时间，随服务器response返回）If-Modified-Since（通过比较两个时间来判断资源在两次请求期间是否有过修改，如果没有修改，则命中协商缓存）ETag（表示资源内容的唯一表示，随服务器response返回）If-None-Match（服务器通过比较请求头部的If-None-Match与当前资源的ETag是否一致来判断资源是否在两次请求之间有过修改，如果没有修改，则命中协商缓存）
十、 几种前端存储以及它们之间的区别
- cookies：HTML5 之前本地存储的主要方式，大小只有 4k，HTTP 请求头会自动带上 cokkie，兼容性好
- localStorage：HTML5 新特性，持久性存储，即页面关闭也不会被清除，以键值对的方式存储，大小为 5M
- sessionStorage：HTML5 新特性，操作及大小同 localStorage，和 localStorage 的区别在于 sessionStorage 在页面被关闭时即清除，且浏览器不同的 tab 之间的 sessionStorage 不互通
- IndexedDB：NoSQL 型数据库，类似 MongoDB，使用键值对进行存储，异步操作数据库，支持事务，存储空间可以在 250MB 以上，但是 IndexedDB 受同源策略限制
- Web SQL：是在浏览器上模拟的关系型数据库，开发者可以通过 SQL 语句来操作 Web SQL，是 HTML5 以外一套独立的规范，兼容性差
十一、谈谈 HTTP 中 GET 与 POST 的区别
GET 使用 URL 或 cookie 传参，而 POST 将数据放在 BODY 中， 这个是因为 HTTP 协议用法的约定，并非他们的本身区别
GET 方式提交的数据有长度限制，而 POST 的数据则可以非常大，这是因为浏览器限制了 GET 请求的长度
POST 比 GET 安全，因为 GET 提交的数据，会被浏览器历史记录缓存下来
十二、 HTTP/1.0 和 HTTP/1.1 有什么区别
- 长连接：HTTP/1.1 支持场链接和请求的流水线，在一个 TCP 连接上可以传送多个 HTTP 请求，避免了因为多次建立 TCP 连接的时间消耗和延时
- 缓存处理：HTTP/1.1 引入了
Entity tag, IF-Unmodified-Since, If-Match, If-None-Match等新的请求头来控制缓存 - 带宽优化及网络连接的使用：HTTP/1.1 在请求头引入了 range ，支持断点续传功能
- Host 头处理：在 HTTP/1.0 中认为每台服务器都有唯一的 IP 地址，但随着虚拟主机技术的发展，多个主机共享一个 IP 地址愈发普片，HTTP 1.1 的请求消息和响应消息都应该支持 Host 头域，且请求消息中如果没有 Host 头域会 400 错误。
十三、 介绍一下 HTTP/2.0 新特性
- 多路复用：即多个请求都通过一个 TCP 连接并发地完成
- 服务端推送：服务端能够主动把资源推送给客户端
- 新的二进制格式：HTTP/2 采用二进制格式传输数据，相比于 HTTP/1.1 的文本格式，二进制格式具有更好的解析性和拓展性
- header 压缩：HTTP/2 压缩消息头，减少了传输数据的大小
十四、说说 HTTP/2.0 多路复用的基本原理以及解决的问题
HTTP/2 解决的问题，就是 HTTP/1.1 存在的问题：
- TCP 慢启动：TCP 连接建立后，会经历一个先慢后快的发送过程，如果我们的资源都经过一次慢启动，对性能是不小的损耗。另外慢启动是 TCP 为了减少网络拥塞的一种策略，我们是没有办法改变的。
- 多条 TCP 连接竞争带宽：如果同时建立多条 TCP 连接，当带宽不足时就会竞争带宽，影响关键资源的下载。
- HTTP/1.1 队头阻塞：尽管 HTTP/1.1 长连接可以通过一个 TCP 连接传输多个请求，但同一时刻只能处理一个请求，当前请求未结束前，其他请求只能处于阻塞状态。
为了解决以上的问题，HTTP/2 一个域名只能使用一个 TCP 长连接来传输数据，而且请求之间是并行的、非阻塞的，这就是多路复用。
实现原理：HTTP/2 引入了一个二进制分帧层，客户端和服务端进行传输时，数据会先经过二进制分帧层处理，转化为一个个带有请求 ID 的帧，这些帧在传输完成后根据 ID 组合对应的数据。
十五、 HTTP 和 HTTPS 有何区别
- HTTPS 使用 443 端口，而 HTTP 使用 80
- HTTPS 需要申请证书
- HTTP 是超文本传输协议，是明文传输；HTTPS 是经过 SSL 加密的协议，传输更安全
- HTTPS 比 HTTP 慢，因为 HTTPS 除了 TCP 握手的三个包，还要加上 SSL 握手的九个包
十六、 什么是 CSRF 攻击，与如何防范。
CSRF 即 Cross-site request forgery（跨站请求伪造），是一种挟持用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法
加入黑客在自己的站点上放置了其他网站的外链，默认情况下，黑客网站静默调用其他网站的接口时，浏览器会待着对应网站的 cookie 访问这个网址，如果用户已登录过该网站且网站没有对 CSRF 进行防御，那么服务器就会认为是用户本人在调用此接口并执行相关操作，致使账号被劫持。
十七、 什么是 XSS 攻击，如何防御。
XSS 即 Cross-site Scripting（跨站脚本），指的是利用网页开发时留下的漏铜，注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。常见的例如在评论区植入 JS 代码，用户进入评论页时代码被执行，造成页面被植入广告、账号信息被窃取
XSS 攻击有哪些类型
- 存储型：即攻击被存储在服务端，常见的是在评论区插入攻击脚本，如果脚本被存储到服务端，那么所有看见对应评论的用户都会受到攻击
- 反射性：攻击者将脚本混在 URL 里，服务端接收到 URL ，将恶意代码当做参数去除并拼接在 HTML 里返回，浏览器解析此 HTML 后即执行恶意代码
- DOM 型：将攻击脚本写在 URL 中，诱导用户点击该 URL，如果 URL 被解析，那么攻击脚本就会被运行。
如何防御 XSS 攻击
- 输入检查：对输入内容中的标签进行转义或过滤
- 设置 httpOnly：很多 XSS 攻击目标都是窃取用户 cookie 伪造身份认证，设置此属性可防止 JS 获取 cookie
- 开启 CSP，即开启白名单，可组织白名单以外的资源加载和运行。
十八、 介绍 instanceof 原理，并手动实现
instanceof 主要原理是检测某个构造函数的原型对象在不在某个对象的原型链上
实现：
function myInstanceof(left, right) {
let rightProto = right.prototype;
leftProto = left.__proto__;
// 或者
// leftProto = Object.getPrototypeOf(left)
while (true) {
if (leftProto === null) return false;
if (leftProto === rightProto) return true;
leftProto = leftProto.__proto__;
}
}
十九、 在项目中如何把 http 的请求换成 https
在请求库发送之前做一层 baseURL 封装，正则替换掉
使用
meta标签自动预检<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />关键在
upgrade-insecure-requests，服务器在收到请求后会返回Content-Security-Policy: upgrade-insecure-requests头，告诉浏览器，可以把所属本站的所有 http 连接升级为 https 连接。注意：
- 升级后的链接在服务器端必须有对应的资源
- 只会升级网站内部的链接，对于不属于网站同部的链接，保持默认状态
- 有兼容性问题
Nginx 好像可以配置，不懂...
写在最后
前端的世界纷繁复杂，远非笔者所能勾画，部分面试题不是靠背诵记忆就能掌握的，希望我摘录的、总结的简单答案可以引起读者的兴趣，闲暇时可以自己深入总结，如果读者有更好的答案，或有想了解的题目，欢迎留言。
笔者新建了一个 github 仓库，对公众号内发布的面试题做进一步分类，同时也会在周六同步本周题目、公布下周问题，欢迎大家关注~
想要实时关注笔者最新的文章和最新的文档更新请关注公众号前端地基,后续的文章会优先在公众号更新.
github：关注笔者最新的仓库[1]
参考资料
[1]关注笔者最新的仓库: https://github.com/lionel178/easy-web
