BAT大厂前端面试题整合，持续更新中

自己备战BAT大厂整合前端经典面试题

点赞收藏，拒绝白嫖！！！！！

持续更新中~~~~

1.介绍一下HTTP与HTTPS；他们之间有什么不同？

• http协议：全称为超文本传输协议，是因特网上应用最为广泛的一种网络传输协议，所有的www文件都必须遵守这个标准，它是一个基于TCP/IP通信来传递数据。
• https协议：是以安全为目标的http通道，简单讲就是http的安全版，即http下加入了ssl层，https的安全基础是ssl，因此加密的详细内容就需要ssl，https协议的主要作用可以分为两种：一种是建立一个信息安全通道；另一种是确认网站的安全性。

2.当一个网址输入后发生的事情

• DNS解析(域名解析)
• 客户端发起TCP连接；建立TCP连接要经历三次握手的过程；
• 客户端发送http/https请求；以及根据url中除去目的主机地址后身下的字符串发送请求。
• 服务端响应请求http请求，并传回相应html文件；
• 客户端加载并解析html文件资源
• 在页面渲染完毕之后（文件资源加载完毕），客户端主动关闭TCP连接

3.常见的前端安全性问题，以及如何防范

• SQL注入：SQL注入即是指web应用程序对用户输入数据的合法性没有判断或过滤不严，攻击者可以在web应用程序中事先定义好的查询语句的结尾上添加额外的SQL语句，在管理员不知情的情况下实现非法操作，以此来实现欺骗数据库服务器执行非授权的任意查询，从而进一步得到相应的数据信息。
• XSS攻击：跨站脚本攻击（XSS）是最普遍的Web应用安全漏洞。这类漏洞能够使得攻击者嵌入恶意脚本代码到正常用户会访问到的页面中，当正常用户访问该页面时，则可导致嵌入的恶意脚本代码的执行，从而达到恶意攻击用户的目的。从攻击代码的工作方式可以分为三个类型：
  • 持久型跨站：最直接的危害类型，跨站代码存储在服务器（数据库）。
  • 非持久型跨站：反射型跨站脚本漏洞，最普遍的类型。用户访问服务器-跨站链接-返回跨站代码。
  • DOM跨站（DOM XSS）：DOM（document object model文档对象模型），客户端脚本处理逻辑导致的安全问题。
• CSRF攻击：跨站请求伪造(CSRF)，是一种挟制用户在当前已登录的Web应用程序上执行非本意的操作的攻击方法。跟跨网站脚本（XSS）相比，XSS 利用的是用户对指定网站的信任，CSRF 利用的是网站对用户网页浏览器的信任。

4.如何处理跨域问题

• 跨域：就是指浏览器不能执行其他网站的脚本，它是由浏览器的同源策略造成的，是浏览器对javascript施加的安全限制。注意它针对的是js中的动态http请求，对html页面中的src、href资源加载请求是不做限制的
• 同源：所谓的同源指的是协议、域名、端口号都要相同，只要有一个不相同，那么都是非同源。
• 同源策略：浏览器在执行脚本的时候，都会检查这个脚本属于哪个页面，即检查是否同源，只有同源的脚本才会被执行；而非同源的脚本在请求数据的时候，浏览器会报一个异常，提示拒绝访问。
• 虽然localhost等同于 127.0.0.1 但是也是非同源的。

跨域问题产生的过程

• 游览器发现该请求跨域，于是发送一个CORS请求给服务器；
• 服务器检查请求中的Origin字段，判断是否在允许访问的站点内，并给予回复。
• 客户端收到响应后检查响应头中的Access-Control-Allow-Credentials，如果存在且为true，则说明服务端同意此次跨域请求，跨域请求成功；否则说明游览器拒绝加载对于的资源文件，并在控制台报错。

如何处理跨域问题

• JSONP：这种方式是利用script等具有src属性的标签没有跨域限制的问题来达到与第三方通讯的目的
• 跨域资源共享CORS：CORS需要浏览器和服务器同时支持。目前，所有主流浏览器都支持该功能，IE浏览器不能低于IE10。在浏览器端, 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。
  • 利用该方法实现跨域的关键就是“游览器支持”以及后端在响应头中设置正确的字段值；
  • 对于简单请求, 浏览器直接发出CORS请求, 即浏览器自动在请求header中加上Origin字段, 告诉服务器这个请求来自哪个源(请求协议+域名+端口)
  • 服务器收到请求后, 会对比这个字段, 如果字段值不在服务器的许可范围内, 服务器会返回一个正常的HTTP响应, 但是其响应头中不会包含Access-Control-Allow-Origin字段, 浏览器发现后, 就会抛出一个异常提示响应头中没有这个字段。
  • 如果这个源在服务器的许可范围内, 服务器的响应头会加上以下字段:
    Access-Control-Allow-Origin:http://ip:port：必需项, 值为请求头中的Origin的值，或者为*，表示支持所有网站访问。
    Access-Control-Allow-Credentials:true：可选项, 值为boolean, 表示是否允许浏览器发送cookie, 需要在服务器配置。
• 设置前端代理：前端设置代理，借助代理服务器转发请求到目的主机，常用在开发环境下（如webpack和vue的proxy）；

5.var、let、const的区别

• var特性：
  • 只有函数作用域和全局作用域，没有块级作用域
  • 变量提升、可以重复声明
• let和const：
  • 新增了块级作用域
  • 不存在变量提升现象、使用前必须声明

6.如何提高页面的加载速度？

• 减少http请求数量

• 图片采用lazyload懒加载

• wepack等前端打包工具合并css、js等静态资源为一个文件

• 利用浏览器缓存

• 减少dom操作

• 图标替换为iconfont

• 控制资源文件加载优先级: 浏览器在加载HTML内容时，是将HTML内容从上至下依次解析，解析到link或者script标签就会加载href或者src对应链接内容，为了第一时间展示页面给用户，就需要将CSS提前加载，不要受 JS 加载影响。

  一般情况下都是CSS在头部，JS在底部。

7.cookie和webStorage，他们之间有什么区别？

8.介绍一下ES6的Promise？如何手动实现Promise类？

9.你平时都用过哪些ES6的新特性？

10.JS中的事件循环(Event Loop)？

引言：javascript是单线程，所以一次只能执行一个任务，多个任务执行则需要排队执行

任务：任务可以分为 同步任务和异步任务，同步任务会加入到执行栈(主线程)，而异步任务则会加入到任务队列中。

事件循环：主线程中的同步任务按照顺序一个一个先执行，异步队列中的异步任务则需要等待主线程的通知，当主线程的任务执行完之后，js引擎才会从异步队列中取第一个任务到执行栈中执行

执行栈中执行 => 执行栈空 => 任务队列调取事件到执行栈 => 执行栈执行 => … => 执行栈空、任务队列空。这个机制就是事件循环( Event Loop )

11.JS中的原型链？

12.ES5和ES6的区别？

ES5新特性：

• strict严格模式，use strict严格按照标准来规范代码
• Array增加方法:增加了every、some 、forEach、filter 、indexOf、lastIndexOf、isArray、map、reduce、reduceRight方法

ES6新特性：

• 块级作用域，关键字let、常量const

• 箭头函数

• 模板字符串

• 对象字面量的属性赋值简写（property value shorthand）

• Iterators（迭代器）+ for…of

• Modules：ES6的内置模块功能借鉴了CommonJS和AMD各自的优点

• Map(有序可重复)、Set集合(无序且唯一)

• 解构赋值

• 扩展运算符

13.javaScript有哪些基本类型？哪些引用类型？

基本类型：string，number，boolean，object，null，undefined

引用类型：String，Number，Boolean，Object，Function，Array，Date，RegExp，Error

14.Http的三次握手四次挥手？

三次握手：

• SYN： Synchronize Sequence Numbers，同步序列编号。建立连接的信号。客户端在接受到 SYN 消息时，就会在自己的段内生成一个随机值 X。
• SYN-ACK：服务器收到 SYN 后，打开客户端连接，发送一个 SYN-ACK 作为答复。确认号设置为比接收到的序列号多一个，即 X + 1，服务器为数据包选择的序列号是另一个随机数 Y。
• ACK：Acknowledge character, 确认字符，表示发来的数据已确认接收无误。最后，客户端将 ACK 发送给服务器。序列号被设置为所接收的确认值即 Y + 1。
• FIN: 断开连接信号

1. 首先客户端会发送一个SYN，例如X(随机数)。
2. 当服务端收到后返回确认消息X+1,以及连接数据包Y(随机数)。这就是SYN-ACK
3. 客户端收到后返回最后确认字符Y+1，这就是ACK。如果客户端这个时候发现服务端返回的并不是X+1，会重新发起SYN，直至正确方可连接，这也就是他的重试机制

四次挥手：

1. 当客户端决定断开时，向服务端发送FIN信号，进入 FIN_WAIT_1 状态，等待来自服务器的 ACK 响应
2. 客户端收到服务器发送的 ACK 响应后，客户端就进入 FIN_WAIT_2 状态，然后等待来自服务器的 FIN 信号
3. 服务器发送 ACK 确认消息后，一段时间（可以配置关闭）会发送 FIN 信号给客户端，告知客户端可以进行关闭。
4. 客户端收到从服务端发送的 FIN 消息时，客户端就会由 FIN_WAIT_2 状态变为 TIME_WAIT 状态，在这里要注意这个时候客户端可以重新连接到服务端为了防止信息丢失，如果不进行连接，那么在一段时间连接关闭，客户端所有数据包括端口号缓存数据等全部释放

15.GET和POST请求的区别？

1. GET请求会被浏览器主动cache，而POST不会，除非手动设置。
2. GET请求只能进行url编码，而POST支持多种编码方式。
3. GET请求在URL中传送的参数是有长度限制的，而POST没有。
4. 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
5. GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
6. GET参数通过URL传递，POST放在Request body中。

16.HTML5新特性？

• 绘画canvas(通过javascript绘画)
• video标签(视频播放)和audio标签(音频播放)
• html语义化标签，如header、footer、article、nav、section、
• 本地离线存储localStorage、sessionStorage
• 表单元素：
  • input类型：file、url、date、number、email、
  • datalist（规定输入域的选项列表）
  • output（用于不同元素的输出）
  • keygen（提供一种验证用户的可靠方法）

17.CSS你用过什么单位？

• px、rpx、em、rem、vw、vh

18.form表单当前页面无刷新提交？

通过建立一个display为none的iframe元素，在表单添加name值，和iframe中添加target值，两个值要相等，就可以实现form表单提交不刷新页面了

19.如何防止网页被iframe嵌套

在head标签中加入如下js脚本

<script>
//如果当前窗口和顶层窗口的地址不一样，设置当前窗口的链接和顶层窗口的链接一致，即iframe里面访问顶层页面的地址
if (top.location != location) top.location.href = location.href; 
</script>

20.CSS常见选择器有哪些？选择器优先级顺序？

常见的选择器：

• id选择器
• 类选择器
• 标签选择器

选择器优先级：id选择器 > 类选择器 > 标签选择器 > 子选择器 > 后代选择器

21.===和==的区别？

===是比较类型和值是否相同 ==是比较值是否相同

22.js中forEach和for的区别？

forEach一般用于遍历数组，而for一般用于遍历和修改数组

23.js的函数类型?