2024前端学习每天背4道八股文(持续更新中....
HTTP和HTTPS
基本概念
http：是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。
http 和 https 的区别及优缺点？
http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取、改变，确保数据的完整性(当然这种安全性并非绝对的，对于更深入的 Web 安全问题，此处暂且不表)。
http 协议的默认端口为 80，https 的默认端口为 443。
http 的连接很简单，是无状态的。https 握手阶段比较费时，会使页面加载时间延长 50%，增加 10%~20%的耗电。
https 缓存不如 http 高效，会增加数据开销。
Https 协议需要 ca 证书，费用较高，功能越强大的证书费用越高。
SSL 证书需要绑定 IP，不能再同一个 IP 上绑定多个域名，IPV4 资源支持不了这种消耗。
https 协议的工作原理
客户端在使用 HTTPS 方式与 Web 服务器通信时有以下几个步骤：
客户端使用 https url 访问服务器，则要求 web 服务器建立 ssl 链接。
web 服务器接收到客户端的请求之后，会将网站的证书（证书中包含了公钥），传输给客户端。
客户端和 web 服务器端开始协商 SSL 链接的安全等级，也就是加密等级。
客户端浏览器通过双方协商一致的安全等级，建立会话密钥，然后通过网站的公钥来加密会话密钥，并传送给网站。
web 服务器通过自己的私钥解密出会话密钥。
web 服务器通过会话密钥加密与客户端之间的通信。
TCP三次握手
第一次握手：建立连接时，客户端发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；SYN：同步序列编号（Synchronize Sequence Numbers）。
第二次握手：服务器收到syn包并确认客户的SYN（ack=j+1），同时也发送一个自己的SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
3.src和href的区别
src和href都是对外部资源的引用，区别如下：
src: 表示对资源的引用，用在js脚本、img、frame等元素上，当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完成，所以js脚本会放在页面的底部，而不是头部。
href：表示超文本引用，指向一些网络资源，当浏览器识别它指向的文件时，就会并行下载资源，不会停止对当前文件的处理，用在a、link上
4.行内元素与块级元素
块级元素： 独占一行，可以设置宽高，设置margin和padding都有效，代表如下：
div、p、h1…h6、table、tr、ol、li、ul
行内元素元素： 可以排成一行，设置宽高无效，对margin设置左右方向有效，而上下无效，padding设置都无效，代表如下：
基本上都是文本标签
span、img、b、strong、font、br、a
4.回流（重拍）与重绘
先了解下HTML文文件渲染的过程
都发生在渲染DOM树(Render Tree)后的过程中，其中Layout是回流，Painting是重绘
回流：浏览器中进行布局的过程就是回流
重绘：浏览器进行 渲染就是重绘
触发回流的一些条件：
1、添加或者删除可见的DOM元素；
2、元素位置改变；
3、元素尺寸改变——边距、填充、边框、宽度和高度
4、内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
5、页面渲染初始化；
6、浏览器窗口尺寸改变——resize事件发生时；
触发重绘的一些条件：
1、改变背景色
2、改变透明度
简单的说，就是不影响布局的情况下，改变的就是重绘
性能优化方法：
减少浏览器的回流行为达到性能优化。
1、用transform代替位移
2、用visibility:hidden透明度代替display:none
3、使用display:none技术，只引发两次回流和重绘；
4、使用cloneNode(true or false)和replaceChild技术，引发一次回流和重绘；
5、让元素脱离动画流，减少回流的Render tree的规模；
5.阻止默认事件
在面试中我们会被问到事件冒泡、默认事件等概念，下面做一些简单的了解：
事件冒泡：
1.原理：元素自身的事件被触发后，如果父元素有相同的事件，如click事件，那么元素本身的触发状态就会传递，也就是冒到父元素，父元素的相同事件也会一级一级根据嵌套关系向外触发，直到document/window，冒泡过程结束。
2.使用范围：冒泡事件只是针对于click相关的事件，还有click的分支事件：mouseup、mousedown
默认事件：
比如点击a标签会默认打开、input提交表单按钮，都是默认事件
阻止默认事件但是不阻止事件冒泡
event.preventDefault()
阻止事件冒泡阻止默认事件
event.stopPropagation();
在jquery中阻止事件冒泡和默认行为，在原生js中只阻止事件冒泡
return false
6.文档流，文本流清除浮动
文档流：
我理解的是页面中的块级元素等DOM元素按照默认的方式去进行排列
文本流：
网页页面上的一些文字的排列
清除浮动的方法及原理：
原理：其实就是让目标元素脱离文档流即可，手段有float:left、position中的绝对定位和固定定位等
方法：
1、用伪类去清除浮动
2、在浮动元素上添加一个空盒子，写上clear:both的样式
3、双伪类清除浮动
7.== 和 === 区别
== 表示相等 （值相等）
===表示恒等（类型和值都要相等）
js在比较的时候如果是 == 会先做类型转换，再判断值得大小，如果是===类型和值必须都相等。
8.script 标签放在 header 里和放在 body 底部里有什么区别？
放在 header 中
你能看到 html 第一时间被加载进来，但页面 body 内容迟迟没有渲染出来。因为在等待 header 标签中 script 脚本的加载，3 秒后，整个页面渲染完成。
放在 body 底部
这次 html 内容第一时间渲染完成，随后等待 js 的加载。
总结：
脚本会阻塞页面的渲染，所以推荐将其放在 body 底部，因为当解析到 script 标签时，通常页面的大部分内容都已经渲染完成，让用户马上能看到一个非空白页面。
另外你能看到多个脚本之间都是异步向服务器请求，他们之间不互相依赖，最终只等待 3 秒，而非 3+3+3 秒。
9.HTML5 新特性有哪些
语义化标签
音视频处理API(audio,video)
canvas / webGL
拖拽释放(Drag and drop) API
history API
requestAnimationFrame
地理位置(Geolocation)API
webSocket
web存储 localStorage、SessionStorage
表单控件，calendar、date、time、email、url、search
10.HTTP 状态码
1xx：指示信息类，表示请求已接受，继续处理（临时响应）
2xx：指示成功类，表示请求已成功接受
3xx：指示重定向，表示要完成请求必须进行更近一步的操作
4xx：指示客户端错误，请求有语法错误或请求无法实现
5xx：指示服务器错误，服务器未能实现合法的请求
常见状态码
【403】表示【服务器拒绝执行客户端的请求】
【404】表示【服务器找不到客户端所请求的资源（网页）】
【304】表示【所请求的资源并未修改（命中协商缓存）
11.HTTP 请求跨域问题
跨域的原理
跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。
同源策略,是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一同，都被当作是不同的域。
跨域原理，即是通过各种方式，避开浏览器的安全限制。
解决办法
JSONP：
ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。
步骤：
去创建一个script标签
script的src属性设置接口地址
接口参数，必须要带一个自定义函数名，要不然后台无法返回数据
通过定义函数名去接受返回的数据
JSON 只支持 get，因为 script 标签只能使用 get 请求； JSONP 需要后端配合返回指定格式的数据。
CORS
CORS(Cross-origin resource sharing)跨域资源共享 服务器设置对CORS的支持原理：服务器设置Access-Control-Allow-Origin HTTP响应头之后，浏览器将会允许跨域请求
12.说一说cookie sessionStorage localStorage 区别？
1.都是浏览器存储 2.都存储在浏览器本地
区别：
1.cookie由服务器写入， sessionStorage以及localStorage都是由前端写入
2.cookie的生命周期由服务器端写入时就设置好的，localStorage是写入就一直存在，除非手动清除，sessionStorage是由页面关闭时自动清除
3.cookie存储空间大小约4kb， sessionStorage及localStorage空间比较大，大约5M
4.3者的数据共享都遵循同源原则，sessionStorage还限制必须是同一个页面
5.前端给后端发送请求时，自动携带cookie, session 及 local都不携带
6.cookie一般存储登录验证信息或者token，localStorage常用于存储不易变动的数据，减轻服务器压力，sessionStorage可以用来监测用户是否是刷新进入页面，如音乐播放器恢复进度条功能
13.怎么判断数据类型？怎么判断一个值到底是数组类型还是对象?
三种方式，分别为 typeof、instanceof 和 Object.prototype.toString.call()
typeof null // 'object' 无法判定是否为 null 有误差
typeof undefined // 'undefined'
typeof {} // 'object'
typeof [] // 'object'
instanceof
通过 instanceof 操作符也可以对对象类型进行判定，其原理就是 测试构造函数的 prototype 是否出现在被检测对象的原型链上。
[] instanceof Array // true
({}) instanceof Object // true
(()=>{}) instanceof Function // true
Object.prototype.toString() （推荐款）
可以说是判定 JavaScript 中数据类型的终极解决方法了，具体用法请看以下代码：
Object.prototype.toString.call({}) // '[object Object]'
Object.prototype.toString.call([]) // '[object Array]'
Object.prototype.toString.call(() => {}) // '[object Function]'
Object.prototype.toString.call('seymoe') // '[object String]'
Object.prototype.toString.call(1) // '[object Number]'
Object.prototype.toString.call(true) // '[object Boolean]'
Object.prototype.toString.call(Symbol()) // '[object Symbol]'
Object.prototype.toString.call(null) // '[object Null]'
Object.prototype.toString.call(undefined) // '[object Undefined]'