前端基础面试题（后续待补充）

1.http 和 https 的基本概念

http: 是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
https:是以安全为目标的 HTTP 通道，即 HTTP 下 加入 SSL 层进行加密。其作用是：建立一个信息安全通道，来确保数据的传输，确保网站的真实性。

2.Cookie、sessionStorage、localStorage 的区别

相同点：存储在客户端。

不同点：

• cookie数据大小不能超过4k；sessionStorage和localStorage的存储比cookie大得多，可以达到5M+
• cookie设置的过期时间之前一直有效；localStorage永久存储，浏览器关闭后数据不丢失除非主动删除数据；sessionStorage数据在当前浏览器窗口关闭后自动删除
• cookie的数据会自动的传递到服务器；sessionStorage和localStorage数据保存在本地

3.从输入URL到页面加载的全过程

1. 首先在浏览器中输入URL
2. 查找缓存：浏览器先查看浏览器缓存-系统缓存-路由缓存中是否有该地址页面，如果有则显示页面内容。如果没有则进行下一步。
3. DNS域名解析：浏览器向DNS服务器发起请求，解析该URL中的域名对应的IP地址。DNS服务器是基于UDP的，因此会用到UDP协议
4. 建立TCP连接：解析出IP地址后，根据IP地址和默认80端口，和服务器建立TCP连接
5. 发起HTTP请求：浏览器发起读取文件的HTTP请求，，该请求报文作为TCP三次握手的第三次数据发送给服务器
6. 服务器响应请求并返回结果：服务器对浏览器请求做出响应，并把对应的html文件发送给浏览器
7. 关闭TCP连接：通过四次挥手释放TCP连接
8. 浏览器渲染：客户端（浏览器）解析HTML内容并渲染出来

4.浏览器重绘与重排的区别？

• 重排/回流（Reflow）：当DOM的变化影响了元素的几何信息，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。表现为重新生成布局，重新排列元素。

• 重绘(Repaint): 当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。表现为某些元素的外观被改变

单单改变元素的外观，肯定不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重排和重绘代价是高昂的，它们会破坏用户体验，并且让UI展示非常迟缓，而相比之下重排的性能影响更大，在两者无法避免的情况下，一般我们宁可选择代价更小的重绘。

『重绘』不一定会出现『重排』，『重排』必然会出现『重绘』。

5.如何触发重排和重绘

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加、删除、更新DOM节点
• 通过display: none隐藏一个DOM节点-触发重排和重绘
• 通过visibility: hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

6.如何避免重排和重绘

• 集中改变样式，不要一条一条地修改 DOM 的样式。

• 不要把 DOM 结点的属性值放在循环里当成循环里的变量。

• 为动画的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他们的 CSS 是不会 reflow 的。

• 不使用 table 布局。因为可能很小的一个小改动会造成整个 table 的重新布局。

• 尽量只修改position：absolute或fixed元素，对其他元素影响不大

• 动画开始GPU加速，translate使用3D变化

7.HTML5的新特性、语义化

• 语义化标签：header nav main article section aside footer
• 语义化优点：
  • 在没CSS样式的情况下，页面整体也会呈现很好的结构效果
  • 代码结构清晰，易于阅读，
  • 利于开发和维护 方便其他设备解析（如屏幕阅读器）根据语义渲染网页。
  • 有利于搜索引擎优化（SEO），搜索引擎爬虫会根据不同的标签来赋予不同的权重

8.什么是块级格式上下文？BFC（块级格式上下文）

BFC(Block Formatting Context)的英文缩写简称，block可以理解为一个简单的盒模型， Formatting Context则为block的上下文渲染环境。其作用是使内部元素的布局不受外部元素影响。

BFC的触发条件：

• 根元素,也就是html根标签；
• position：fixed/absoluted;
• float属性值不是none的；
• overflow属性值不是visible的；
• display属性值：inline-display/table-cell/table-caption/flex/inline-flex;

BFC的作用：

• bfc内部元素的布局不受外部元素影响。
• bfc区域不会出现margin重叠
• bfc区域计算高度时候会自动计算浮动元素。
• bfc区域不会和浮动元素重合。

9.JS中的8种数据类型及区别

基本数据类型：Number、String 、Boolean、Null和Undefined

引用类型数据：Object 、Array 、Function 、Data等

10.JS中数组类型检测方案

1.typeof 2.instanceof 3.Object.prototype.toString.call（）

11.作用域和作用域链

定义：简单来说作用域就是变量与函数的可访问范围，由当前环境与上层环境的一系列变量对象组成
1.全局作用域：代码在程序的任何地方都能被访问，window 对象的内置属性都拥有全局作用域。
2.函数作用域：在固定的代码片段才能被访问

作用域链参考链接：一般情况下，变量到 创建该变量 的函数的作用域中取值。但是如果在当前作用域中没有查到，就会向上级作用域去查，直到查到全局作用域，这么一个查找过程形成的链条就叫做作用域链。

12.谈谈对闭包的理解

在js中变量的作用域属于函数作用域, 在函数执行完后,作用域就会被清理,内存也会随之被回收,但是由于闭包函数是建立在函数内部的子函数, 由于其可访问上级作用域,即使上级函数执行完, 作用域也不会随之销毁, 这时的子函数(也就是闭包),便拥有了访问上级作用域中变量的权限,即使上级函数执行完后作用域内的值也不会被销毁。

13.原型和原型链

原型关系：

• 每个 class都有显示原型 prototype
• 每个实例都有隐式原型 _ proto_
• 实例的_ proto_指向对应 class 的 prototype

‌ 原型: 在 JS 中，每当定义一个对象（函数也是对象）时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype 属性，这个属性指向函数的原型对象。

**原型链 **：函数的原型链对象constructor默认指向函数本身，原型对象除了有原型属性外，为了实现继承，还有一个原型链指针__proto__,该指针是指向上一层的原型对象，而上一层的原型对象的结构依然类似。因此可以利用__proto__一直指向Object的原型对象上，而Object原型对象用Object.prototype.__ proto__ = null表示原型链顶端。如此形成了js的原型链继承。同时所有的js对象都有Object的基本防范

14.说说你对promise对象的理解：

• promise是异步编程的一种解决方法，从语法上说promise是一个对象，从它可以获取异步操作的消息
• promise主要作用是：可以把异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，promise对象提供了统一的接口，使得控制异步操作更简单
• promise对象的特点：对象状态不受外界影响（公3种pending（进行中），resolved（已完成），reject（已失败））。 只有异步操作的结果可以决定是当前哪一种状态，任何其他操作都无法改变 一旦状态改变就不会再变，任何时候都可以得到这个结果。 promise对象改变只有两种可能：从pending到resolved，从pending到reject
• promise对象的缺点：无法取消promise，一旦创建就立即执行，无法中途取消 如果不设置回调函数，promise内部抛出错误，不会反映到外部 当处于pending状态时，无法得知目前进展到那个阶段（刚刚开始还是即将完成）

15.js实现数据的绑定

知识点：object.defineProperty()

三个参数：

• 第一个：要定义属性的对象
• 第二个：要定义或者修改的属性的名称
• 第三个：将被定义或者修改的属性的描述

<input type="text" id="inp"/>
<p id="showText"></p>

<script>
　　var obj = {};
　　Object.defineProperty(obj,"newProp",{
　　　　get:function(){
　　　　　　return obj;
　　　　},
　　　　set:function(newVal){
　　　　　　document.getElementById("inp").value = newVal;
　　　　　　document.getElementById("showText").innerHTML = newVal;
　　　　}
　　})
　　document.addEventListener("keyup",function(e){
　　　　obj.newProp = e.target.value;
　　})

</script>

16.ES6的新特性

新增了箭头函数、let、const、class类、模板字符串、解构赋值、…展开运算符、for of遍历、Map、Proxies等

17.js高阶函数

• map：map()方法定义在JavaScript的Array中,它返回一个新的数组,数组中的元素为原始数组调用函数处理后的值。
• filter：filter也是一个常用的操作，它用于把Array的某些元素过滤掉，然后返回剩下的元素。和map()类似，Array的filter()也接收一个函数。和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
• sort排序算法：因为Array的sort()方法默认把所有元素先转换为String再排序，结果’10’排在了’2’的前面，因为字符’1’比字符’2’的ASCII码小。如果不知道sort()方法的默认排序规则，直接对数字排序，绝对栽进坑里！

18.link和@import的区别是什么

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。

结论

就结论而言，强烈建议使用link标签，慎用@import方式。
这样可以避免考虑@import的语法规则和注意事项，避免产生资源文件下载顺序混乱和http请求过多的烦恼。

19.火狐浏览器和谷歌浏览器渲染页面的区别

1.chrome不管html读取完毕没有，总是有一个预加载的、img图片或者其他元素都是预加载上来了的，而firefox没有这个预加载的过程，中规中矩的等待整个html文件读取完毕，再加载各元素

共同的：

1. js脚本执行阻塞了页面的渲染
2. 样式的渲染都是css文件加载完毕后才开始的

20.forEach（）和map（）的区别

1. forEach()方法没有返回值，而map（）方法有返回值
2. forEach（）遍历通常都是直接引入当前遍历数组的内存地址，生成的数组的值发生变化，当前遍历的数组对应的值也发生变化。
3. map（）遍历后的数组通常都是生成一个新的数组，新的数组的值发生变化，当前遍历的数组值不会变化

21.介绍节流防抖原理、区别以及应用

节流：事件触发后，规定时间内，事件处理函数不能再次被调用。也就是说在规定的时间内，函数只能被调用一次，且是最先被触发调用的那次。

防抖：多次触发事件，事件处理函数只能执行一次，并且是在触发操作结束时执行。也就是说，当一个事件被触发准备执行事件函数前，会等待一定的时间（这时间是码农自己去定义的，比如 1 秒），如果没有再次被触发，那么就执行，如果被触发了，那就本次作废，重新从新触发的时间开始计算，并再次等待 1 秒，直到能最终执行！

使用场景：
节流：滚动加载更多、搜索框搜的索联想功能、高频点击、表单重复提交……
防抖：搜索框搜索输入，并在输入完以后自动搜索、手机号，邮箱验证输入检测、窗口大小 resize 变化后，再重新渲染。