【前端】-- 面试题大合集（持续更新）

目录

♡ ‧₊˚  HTTP 和 HTTPS的区别  ‧₊˚ ♡

♡ ‧₊˚  重排和重绘 ‧₊˚ ♡ 

♡ ‧₊˚ 事件委托 / 事件代理 ‧₊˚ ♡

♡ ‧₊˚ 事件流 ‧₊˚ ♡

♡ ‧₊˚ 阻止事件冒泡 & 阻止事件默认行为 ‧₊˚ ♡

♡ ‧₊˚ DOM 0级 | DOM 2级 事件处理程序 ‧₊˚ ♡

♡ ‧₊˚event.target | event.currentTarget 的区别‧₊˚ ♡

♡ ‧₊˚事件类型‧₊˚ ♡

♡ ‧₊˚ DOCTYPE 的作用‧₊˚ ♡

 ♡ ‧₊˚ 说一说前端/web存储 ‧₊˚ ♡

♡ ‧₊˚ ES6模块与CommonJS模块的差异‧₊˚ ♡

---

♡ ‧₊˚  HTTP 和 HTTPS的区别  ‧₊˚ ♡

1. HTTP是客户端和服务器遵循的超文本传输协议，请求和响应的标准都是明文传输数据，安全性不高
2. HTTPS是具有安全传输密钥ssl 的传输协议，请求数据和相应的报文都经过加密处理，具有更高的安全性
3. HTTP的端口号是80，HTTPS的端口号是443
4. HTTP简单无状态，因此握手时间短页面加载时间短，HTTPS握手时间长，需要的加载时间会延长，也会增加耗电
5. HTTPS需要获得CA（给数据绑定加密证书）证书，费用较高

♡ ‧₊˚  重排和重绘 ‧₊˚ ♡ 

重排：当DOM的操作影响元素的几何信息（位置），那么浏览器就需要重新计算元素的几何属性，并将其重新安放在正确的位置，这个过程就叫做重排。表现为重新生成布局，排列元素。

重绘：当一个元素的外观（字体/颜色……）发生变化，但是没有改变布局，重新将外观绘制出来的过程就叫重绘。表现为元素外观被改变。

相同之处：都会影响浏览器性能，造成页面卡顿，占用内存，ui显示迟缓

不同之处：相比之下重排更影响性能，当两者不可避免时我们选择重绘。

重绘不一定重排，但是重排一定重绘。

何种情况下触发重排和重绘？

• 添加/删除节点 --- 重排，更新节点 --- 重绘
• display：none； --- 重排
• visibility：hidden；--- 重绘
• 添加动画  /  添加样式表（会涉及宽高） --- 重排
• 用户行为 --- 重排或重绘

♡ ‧₊˚ 事件委托 / 事件代理 ‧₊˚ ♡

事件委托也称为事件代理，就是利用事件冒泡的原理指定一个事件处理程序管理一类事件处理程序。简单来说，就是将本该绑定给子元素的事件绑定给父元素。

目的/优点：减少DOM操作与减少浏览器的重排与重绘，并且新添加的节点也能被添加事件。

♡ ‧₊˚ 事件流 ‧₊˚ ♡

事件流就是事件执行的顺序，分为冒泡型事件流和捕获型事件流。

• 冒泡型事件流：事件由内向外触发
• 捕获型事件流：事件由外向内触发

事件流的三个阶段：事件捕获 ----> 事件触发 --- > 事件冒泡

♡ ‧₊˚ 阻止事件冒泡 & 阻止事件默认行为 ‧₊˚ ♡

阻止事件冒泡：event.stopPropagation()

阻止事件默认行为：event.preventDefault()

♡ ‧₊˚ DOM 0级 | DOM 2级 事件处理程序 ‧₊˚ ♡

DOM 0级事件处理程序：事件不可追加，绑定在事件流的冒泡阶段，通过将事件处理程序的属性值设为null来移除事件。

btn.onclick=function(){

    }

//	解绑:
btn.onclick=null

DOM 2级事件处理程序：事件可以追加，新增了两个

addEventListener(事件名，事件处理函数(具名)，布尔值)和removeEventListener(事件名，事件处理函数(目标具名)，布尔值)的方法用来分别添加和移除事件，第三个参数是一个布尔值，如果为true，表示在捕获阶段调用事件处理程序，若为false则在冒泡阶段调用事件处理程序。

注意点： 要给事件处理程序一个具名才能通过上述方式移除。

♡ ‧₊˚event.target | event.currentTarget 的区别‧₊˚ ♡

target：触发事件的源头

 currentTarget：当前正在执行事件的元素

♡ ‧₊˚事件类型‧₊˚ ♡

•     失焦 onblur
•     聚焦 onfocus
•     滚动 onscroll
•     鼠标双击 ondblclick
•     鼠标移入 onmouseenter
•     鼠标移出 onmouseleave
•     鼠标移动 onmousemove
•     双击     ondblclick
•     键盘按下 onkeydown
•     持续按下键盘 onkeypress
•     放下键盘 onkeyup

♡ ‧₊˚ DOCTYPE 的作用‧₊˚ ♡

 <!DOCTYPE>  声明一般位于文档的第一行，告诉浏览器该以什么文档标准解析这个文档，如果制定了的话就说明应该以标准（严格）模式对文档进行解析，否则就以兼容（怪异）模式解析文档。标准模式是以最新标准来解析的，而兼容模式则会向后兼容来模拟一些比较老旧的浏览器行为，以保证老旧浏览器的正常访问。

 ♡ ‧₊˚ 说一说前端/web存储 ‧₊˚ ♡

1. 前端存储分为cookie和webStorage，webStorage又分为sessionStorage（会话存储）和localStorage（本地存储）；
2. cookie：产生于服务器端，保存在客户端，同一服务器下的cookie是共享的，不同服务器下cookie不会共享，传输数据的大小限制为4kb；
3. sessionstorage：针对于选项卡，若选项卡或者浏览器关闭会话立即失效，传输的数据可以达到5Mb；
4. localStorage：将数据存放在本地磁盘中，即使选项卡或者浏览器关闭，数据依旧存在，传输的数据可以达到5Mb；
5. sessionStorage（会话存储）和localStorage（本地存储）和 cookie的方法。

 

♡ ‧₊˚ ES6模块与CommonJS模块的差异‧₊˚ ♡

1. CommonJS 模块输出的是一个值的拷贝/复制，一旦输出一个值，模块内部的变化就影响不到这个值。ES6 模块输出的是值的引用，模块内部的变化也会影响到值。
2. CommonJS 模块是运行时加载，ES6 模块是编译时加载

(1条消息) 前端存储 -- cookie、sessionStorage、localStorage_愛 / 滥 / 時的博客-CSDN博客 

                                             ---------->>>>>>未完待续……