前端面试题 ---- 个人总结

今天总结一下之前面试遇到的一些比较有含量的前端面试题    以此与大家共勉

1，get和post区别

参考：

GET：倾向于向服务器获取数据，大小限制在2KB左右，可以直接在浏览器后面拼接，
采用明文发送不是很安全，数据格式必须是URL编码格式,会被浏览器主动缓存

POST:倾向于向服务器传递数据，大小理论上没有限制，需要在请求体中发送，采用暗文发送
相比起GET比较安全，数据格式理论上没有要求但要与请求头一致，不会被浏览器主动缓存，
需要手动设置。

2，你了解 HTTP 状态码吗，请随便介绍一下。

参考：
100 Continue 继续，一般在发送 post 请求时，已发送了 http header 之后服务端将返回
此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置
302 Found 临时性重定向
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI
304 Not Modified 自从上次请求后，请求的网页未修改过
400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容
发起请求
401 Unauthorized 请求未授权
403 Forbidden 禁止访问
404 Not Found 找不到如何与 URI 相匹配的资源
500 Internal Server Error 最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）

        http:超文本传输协议，信息是明文传输。用于前后端数据的沟通。默认使用80端口。
        https：是具有安全性的SSL加密传输协议，简单来讲就是http的安全版。
为浏览器和服务器之间的通信加密，确保数据传输安全。默认使用443端口。

                怎样配置一个网站，让它是https协议：
                1.购买、下载SSL证书

                2.升级前做好网站备份

                3.安装证书

3，Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？

参考：
        AJAX 的全称是异步的 Javascript 和 XML ，是一种创建快速动态的技术，通过在
后台与服务器进行少量数据交互，实现网页的异步更新，在不重新加载整个界面的
情况下，做到网页的部分刷新；
        AJAX 的交互模型（ AJAX 的过程）
        用户发出异步请求；
        创建 XMLHttpRequest 对象；
        创建请求，用 open 方法指定是 get 还是 post ，是否异步， url 地址；
        发送请求， send 方法，post方法参数在send（）中
        接收结果并分析；使用onreadystatechange 判断readyState是否等于4，再判断status状态码是否为200
        实现刷新

        同步：脚本会停留并等待服务器发送回复然后再继续
        异步：脚本允许页面继续其进程并处理可能的回复

    
4，如何阻止事件冒泡和默认行为?

event.stopPropagation
event.preventDefault

5.描述事件冒泡的流程

基于DOM树形结构
事件会顺着触发元素网上冒泡
应用场景∶事件代理

6，promise

回调地狱是：把函数A当做参数传递到函数B中，在函数B中以形参的方式进行调用；
当回调函数嵌套过多时会出现回调地狱，即没有可维护性和可读性代码；
promise：ES6中有个内置构造函数叫promise，主要用于异步计算，每个异步事件在执行时都有三个
状态：执行中(pending)、成功(resolve)、失败(rejected)；是解决回调地狱的方案之一，把回调地狱
写的优雅的方案之一；
async和await
async和await是promise的语法糖
async为异步的，await为等待
async是声明某个函数式异步的，await是等待某个操作的完成
语法上强制规定await只能出现在async函数中

7，call, apply, bind：

共同点：都可以改变this指向
区别：传参方式不同；除第一个参数以外(要改变的this指向)，call可以接收一个参数列表、
apply最多接受两个参数，新的this对象和数组；
bind其他两个方法作用也是一致的，只是该方法会返回一个函数，后面还需要()来进行调用才可以，
还可以在调用的时候再进行传参。

8，redux和sessionStorage，localStorage的区别

1.redux中的数据，在刷新（手动或者js触发）页面时，就会消失（或者说被初始化），无法持久化。
2.sessionStorage中的数据，关闭页面消失（会话结束）。
3.localStorage中的数据，永不消失（持久化在硬盘）。
4.redux中的数据发生变化，相关页面（connect），会自动变化，其他两者无此功能，这是主要区别。
5.最重要的区别：redux存储在内存，localstorage则以文件的方式存储在本地
6.应用场景：redux用于组件之间的传值，localstorage则主要用于不同页面之间的传值。
7.永久性：当刷新页面时redux存储的值会丢失，localstorage不会。

9，什么是闭包？闭包有什么危害？如何解决闭包带来的危害？

简单来说，闭包就是一个定义在函数内部的函数。

优点

        1，可以再函数外部访问内部数据
        2，保护私有变量
        3，延长了变量的生命周期
形成了一个不会销毁的空间
应用场景： 回调函数，定时器

闭包的危害：

因为闭包会将内部变量储存在内存中，如果长时间不清除的话会造成内存泄漏的问题，影响程序的性能。

解决方法：对于不使用的变量及时的清除

我的理解是，闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将
函数内部和函数外部连接起来的一座桥梁。

10，全局  和  局部

全局作用域中声明的变量和函数，会作为window对象的属性和方法保存；
        变量在函数外声明，即为全局变量，拥有全局作用域。 

局部作用域

        局部作用域内的变量只能在函数内部使用，所以也叫函数作用域；
        变量在函数内声明，即为局部变量，拥有局部作用域。

11，递归函数

        什么是递归函数

        在编程世界里面，递归就是一个自己调用自己的手段

        递归函数： 一个函数内部，调用了自己，循环往复

        一般来说，递归需要有边界条件、递归前进段和递归返回段。

        当边界条件不满足时，递归前进；当边界条件满足时，递归返回。

        需要有初始化，自增，执行代码，条件判断的，
        不然就是一个没有尽头的递归函数，我们叫做 **死递归**
        function fn() {
                    fn()
          }
          fn()

12，同源策略:浏览器的安全策略、是为了保护本地数据不被JavaScript代码获取回来的数据污染
浏览器具有同源策略，当请求的传输协议、域名、端口号有任意一个不同时，浏览器会认为你在请求

别人的服务器，它会阻止，显示触发'同源策略'；同源策略也叫跨域请求；

跨域问题的解决方案有：JSONP、CORS跨域、前端代理；
JSONP是利用script不受同源策略的影响来请求数据
CORS是让后端开启跨域资源共享来请求数据

代理是我常用的一种解决跨域的方式；在浏览器同源设置一个代理服务器，用来处理我发送的请求并且接受
服务器的响应，在devSever字段中，配置proxy字段

13， 防抖和节流

防抖是指事件触发后在规定时间内回调函数只执行一次，如果规定时间内又触发了该事件，则会重新开始
计算时间。可以总结为延迟执行。原理是：通过定时器将回调函数进行延迟，如果在规定时间内继续回调
，发现存在之前的定时器，则将该定时器清除，并重新设置定时器。应用场景：

+ 节流是当持续触发事件时，在规定时间内只能调用一次回调函数。如果规定时间内再次触发了该事件，
则什么也不做，也不会重置定时器。

+ 节流与防抖相比，防抖是将多次执行变成最后一次执行，会重置定时器。用于搜索框，用户在不断输入
值时，用防抖来节约请求资源。
节流是将多次执行变为规定时间内只执行一次，不会重置定时器。应用场景：监听滚动事件，比如下滑页面出现
回到顶部按钮；鼠标不停点击触发时；

11. 知道的网页制作会用到的图片格式有哪些？

png，jpeg，gif，svg。
但是上面的那些都不是面试官想要的最后答案。面试官希望听到是 Webp。（是否有关注
新技术，新鲜事物）
科普一下 Webp：WebP 格式，谷歌（google）开发的一种旨在加快图片加载速度的图
片格式。图片压缩体积大约只有 JPEG 的 2/3，并能节省大量的服务器带宽资源和数据空
间。Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。

在质量相同的情况下，WebP 格式图像的体积要比 JPEG 格式图像小 40%

12，split() 、join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

数组方法 pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除

13， 强制转换 与 隐式转换

强制转换（parseInt(),parseFloat(),Number()）
隐式转换（== ,!!）

14， sdk和api的区别

有一杯密封饮料，它的名字叫做“SDK”。饮料上插着吸管，吸管的名字叫“API”。
把你叫做“XX系统”。
如果你想喝到SDK里的饮料（让系统拥有SDK中的功能），
你必须通过API这根吸管来实现（通过API连接你的系统和SDK工具包），否则你就喝不到饮料。
所以：SDK＝放着你想要的软件功能的软件包API＝SDK上唯一的接口

15，set和Map的区别

Set类似于数组，但是成员的值都是唯一的，没有重复的值。 
Map类似对象，但它的 key可以为任意数据类型。

      Set没有重复的值，Set 本身是一个构造函数，用来生成 set数据结构
     “键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，
     Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，
     是一种更完善的 Hash 结构实现。

16. js 的事件循环是什么？

因为 js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈
中来保证代码的有序执行。任务队列可以分为宏任务对列和微任务对列，
宏任务按时间顺序先后执行，script，setTimeout，setInterval
微任务在宏任务中，例如Promise

17，js数组去重怎末实现？

1，创建一个新的临时数组来保存数组中已有的元素
2，使用Set实现数组去重要简单很多。使用Array.from转成数组 let item = Array.from(new Set(arr));
3，第二种数组去重方法（使用...扩展运算符）：let item = [...new Set(arr)];

18，介绍 js 的基本数据类型。

js 一共有六种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中
新增的 Symbol 和 ES10 中新增的 BigInt 类型。Symbol 代表创建后独一无二且不可变的数据类型，它
的出现我认为主要是为了解决可能出现的全局变量冲突的问题。   2的五十三次方减一

19，localstorage/sessionstorage

- localstorage用于长久存储整个网站的数据。保存的数据没有过期时间，直到手动删除
- seesionstorage用于会话临时存储，只有会话时才存在，当我们关闭浏览器，他其实不会消失
它的销毁应该是过期时间到了才进行销毁

20,你用过哪些深复制?

JSON.parse(JSON.stringify(state.goodObj))
第一，不会拷贝对象上的 value 值为 undefined 和 函数的键值对
第二，NaN，无穷大，无穷小会被转为 null

自己封装过，也使用第三方库的别人封装好的

21，axios是用于发送和接收请求。一般我工作中会对axios进行二次封装；封装出一个api.js文件，这个

文件里可以放不同请求，专门用于调接口；再通过axios去处理发送接收请求等。受同源策略的影响，需
要通过react.config.js进行代理。

22，node.js 我觉得学前端有必要学习node.js

1，前端工程化已经离不开node.js了，
2，中台开发已经逐渐向前端偏移了，中台开发就是分离出后端的增删改查，方便后端更加专注的处理业务，

23，px、em、rem

- px: PC端的尺寸单位；像素、绝对单位
- em: 相对于最近父元素的倍数
- rem：移动端尺寸单位；根元素倍数；相对于根元素html的font-size计算值的大小。简单理解为屏幕宽度百分比

24，强制缓存机制：简单理解为设置一个时间，浏览器在这个时间内都不会向服务器发送请求，而是使用缓存中的资源文件。

当浏览器请求资源的时候会查看缓存中的资源是否存在并且确定该缓存的资源是否过了“保质期”，若没有超过保质期则将
取得缓存中的资源进行下一步处理。

协商缓存（对比缓存）：浏览器第一次请求数据时，服务器会将缓存标识与数据一起返回给客户端，客户端将二者备份至缓存数据库中。
再次请求数据时，客户端将备份的缓存标识发送给服务器，服务器根据缓存标识进行判断，判断成功后，返回304状态码，通知客户端比
较成功，可以使用缓存数据

25，网络攻击

- XSS攻击：跨站脚本攻击，web中主流的攻击方式，利用web漏洞，恶意程序为javascript。这类漏洞能使得攻击者嵌入恶意脚本
代码到正常用户会访问到的界面中，当正常用户访问到该页面时，则会导致该恶意脚本的执行。
  - 解决方案：过滤和转义。将特殊的符号转义、替换。不然innerHTML-->innerText
- CSRF攻击：跨站请求伪造.利用了web中用户身份验证的一个漏洞.解决：加token

26，原型和原型链

- 原型对象Prototype:      每个构造函数天生自带一个成员叫做prototype；构造函数中、公共的方法存放在原型对象上；它的作用
是共享方法；
- 对象原型proto：每个对象天生自带一个成员叫proto；它指向构造函数的prototype原型对象；之所以实例对象可以使用构造
函数prototype原型对象的属性和方法，就是因为有proto原型的存在；
- 实例对象的proto和构造函数的prototype指向的是同一个对象空间，是等价的；
- 原型链：访问一个对象成员时，如果自己身上没有就会去proto中找，如果没有就再去构造函数的prototype的proto里找，直到
找到object、prototype里没有，返回undefine；这样一层层的往上找会形成一个链式结构、称为原型链

27，深浅拷贝

- 浅复制：浅复制一般用于基本数据类型。基本数据类型存在栈中，直接复制即可。
- 深复制：对象层级过深时，无法自动更新，需要用到深复制。就是把数据粉碎再组装。原理：对象的地址在栈里面，内容在堆里面。
直接复制时只是复制它的地址，但指向的是同一个堆。深复制不仅能复制地址还能复制堆。JSON.parse(JSON.stringify(state.goodObj))

28.window和document

- window：是浏览器内置对象，包含操作浏览器的方法；可以获取浏览器的相关信息如：窗口位置、确定窗口大小、弹出对话框等等
- document对象：是浏览器内置对象，存储着用来操作元素的方法

29，从输入url到页面加载完成发生了什么？

- 1.浏览器的地址栏输入URL并按下回车
- 2.浏览器查找当前URL的DNS缓存记录
- 3.DNS解析URL对应的IP
- 4.根据IP建立TCP连接
- 5.HTTP发起请求
- 6.服务器处理请求，浏览器接收HTTP响应
- 7.渲染页面，构建DOM树
- 8.关闭TCP连接