前端面试问题大全-自我复习整理参考

html，http，web基础篇

1. HTML5新特性
答：h5新语义元素，h5提供了sessionStorage、localStorage和indexedDB加强本地存储，使用之前应该先判断支持情况。CSS3提供了更多的选择器

2.canvas相关
-答：HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

3. http和https的区别

• 传输信息安全性不同：
  （1）http协议：是超文本传输协议，信息是明文传输。如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息。
  （2）https协议：是具有安全性的ssl加密传输协议，为浏览器和服务器之间的通信加密，确保数据传输的安全。
• 连接方式不同
  （1）http协议：http的连接很简单，是无状态的。
  （2）https协议：是由SSL＋HTTP协议构建的可进行加密传输、身份认证的网络协议。
• 端口不同
  （1）http协议：使用的端口是80。
  （2）https协议：使用的端口是443．
• 证版书申请方式不同
  （1）http协议：免费申请。
  （2）https协议：需要到ca申请证书，一般免费证书很少，需要交费。

参考资源来源：https://zhidao.baidu.com/question/2686928.html

4. http状态码，尤其301和302区别，304
（1）301 Moved Permanently：永久性重定向
（2）302 Found：临时性重定向
（3）303 See Other：表示请求的资源被分配了新的URL
（4）304：如果客户端发送了一个带条件的GET 请求且该请求已被允许，而文档的内容（自上次访问以来或者根据请求的条件）并没有改变，则服务器应当返回这个304状态码。简单的表达就是：服务端已经执行了GET，但文件未变化。

5.http请求几种方法及区别，get与post有何区别
http请求八种方式：GET，POST，HEAD，PUT，DELETE，OPTIONS，TRACE，CONNECT

• GET在浏览器回退时是无害的，而POST会再次提交请求。 GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。 GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST么有。 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。 GET参数通过URL传递，POST放在Request
  body中。

6. cookie,session,localStorage区别，cookie的长度限制

• cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。
• 存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
• 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
• 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
  以上参考资料来自于：https://blog.csdn.net/ljiechang/article/details/39004683?depth_1-和https://blog.csdn.net/u011127019/article/details/89206016

7.前端性能优化方法

    前端性能优化可以分为两大类分别是:

• 页面级别优化:包含了http请求数以及内联脚本位置优化，
• 代码级别的优化:包含DOM操作优化，CSS选择符优化以及图片优化等

8. 浏览器输入url后发生了什么

• 浏览器的地址栏输入URL并按下回车。
• 浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
• DNS解析URL对应的IP。
• 根据IP建立TCP连接（三次握手）。
• HTTP发起请求。
• 服务器处理请求，浏览器接收HTTP响应。
• 渲染页面，构建DOM树。
• 关闭TCP连接（四次挥手）

9.TCP三次握手：

• TCP：是主机对主机层的传输控制协议，提供可靠的连接服务，采用三次握手确认建立一个连接：位码即tcp标志位，有6种标示：SYN(synchronous建立联机) ACK(acknowledgement 确认) PSH(push传送) FIN(finish结束) RST(reset重置) URG(urgent紧急)Sequence number(顺序号码) Acknowledge number(确认号码)

• 第一次握手：主机A发送位码为syn＝1，随机产生seq number=1234567的数据包到服务器，主机B由SYN=1知道，A要求建立联机；

• 第二次握手：主机B收到请求后要确认联机信息，向A发送ack number=(主机A的seq+1)，syn=1，ack=1，随机产生seq=7654321的包；

• 第三次握手：主机A收到后检查ack number是否正确，即第一次发送的seq number+1，以及位码ack是否为1，若正确，主机A会再发送ack number=(主机B的seq+1)，ack=1，主机B收到后确认seq值与ack=1则连接建立成功。FTP协议及时基于此协议。

10.如何理解websocket

答：WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。
WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。在 WebSocket API 中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。现在，很多网站为了实现推送技术，所用的技术都是 Ajax 轮询。

11. 强缓存，协商缓存

• 强缓存：直接从本地副本比对读取，不去请求服务器，返回的状态码是 200。
• 协商缓存：会去服务器比对，若没改变才直接读取本地缓存，返回的状态码是 304。

参考来源及详细介绍来自于：https://www.jianshu.com/p/fb59c770160c

12. 常见的块元素，行内元素，行内块元素

 1. 块元素: <div> <p> <ul> <ol> <li> <dl> <h1>...<h6> <form>
 2. 行内元素: <a>  <span>  <br> <i>  <em>  <strong>
 3. 行内块元素:<img>  <input> <select>

13. 懒加载

• 懒加载(Load On Demand)是一种独特而又强大的数据获取方法,它能够在用户滚动页面的时候自动获取更多的数据,而新得到的数据不会影响原有数据的显示,同时最大程度上减少服务器端的资源耗用。

14. 什么是XSS攻击 ：

• XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript，但实际上也可以包括Java、 VBScript、ActiveX、 Flash或者甚至是普通的HTML。攻击成功后，攻击者可能得到包括但不限于更高的权限（如执行一些操作）、私密网页内容、会话和cookie等各种内容。

15 CSRF攻击：

• CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

参考来源及详细介绍来自于：https://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

16.什么是同源策略：

• 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
• 同源策略是浏览器的行为，是为了保护本地数据不被JavaScript代码获取回来的数据污染，因此拦截的是客户端发出的请求回来的数据接收，即请求发送了，服务器响应了，但是无法被浏览器接收。

17. 什么是CDN：

• CDN（中文：内容分发网络，全称：Content Delivery Network）是构建在网络之上的内容分发网络。CDN的基本原理是广泛采用各种缓存服务器，将这些缓存服务器分布到用户访问相对集中的地区或网络中，在用户访问网站时，利用全局负载技术将用户的访问指向距离最近的工作正常的缓存服务器上，由缓存服务器直接响应用户请求，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储技术、内容分发技术和负载均衡技术。

18. DNS

• 域名系统（英文：Domain Name System，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS使用TCP和UDP端口53。当前，对于每一级域名长度的限制是63个字符，域名总长度则不能超过253个字符。

19. OSI七层模型

• 应用层
  网络服务与最终用户的一个接口。
  协议有：HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
• 表示层
  数据的表示、安全、压缩。（在五层模型里面已经合并到了应用层）
  格式有，JPEG、ASCll、EBCDIC、加密格式等 [2]
• 会话层
  建立、管理、终止会话。（在五层模型里面已经合并到了应用层）
  对应主机进程，指本地主机与远程主机正在进行的会话
• 传输层
  定义传输数据的协议端口号，以及流控和差错校验。
  协议有：TCP UDP，数据包一旦离开网卡即进入网络传输层
• 网络层
  进行逻辑地址寻址，实现不同网络之间的路径选择。
  协议有：ICMP IGMP IP（IPV4 IPV6）
• 数据链路层
  建立逻辑连接、进行硬件地址寻址、差错校验 [3] 等功能。（由底层网络定义协议）
  将比特组合成字节进而组合成帧，用MAC地址访问介质，错误发现但不能纠正。
• 物理层
  建立、维护、断开物理连接。（由底层网络定义协议）
  以上资料参考来源于百度百科：https://baike.baidu.com/item/%E4%B8%83%E5%B1%82%E6%A8%A1%E5%9E%8B/1441391?fr=aladdin

20. 常用端口号

• HTTP服务器，默认端口号为：80
• HTTPS服务器，默认端口号为：443
• FTP（文件传输）协议代理服务器常用端口号：21
• TOMCAT，默认端口号为：8080
• FTP，默认的端口号为：21
• SSH（安全登录）、SCP（文件传输）、端口号重定向，默认的端口号为：22
• Telnet（远程登录）服务器常用端口号：23

参考来源于：来源地址：https://www.php.cn/faq/421518.html

css篇

21. link和@import的区别

• 相同点： 两种方式都是为了加载CSS文件

• 不同点1： 引用方式不同
  link的引入方式为：<link href="styles.css" type="text/css" />
  @import引用方式如下： <link href="styles.css" type="text/css" />

• 不同点2:适用范围不同
  @import可以在网页页面中使用，也可以在css文件中使用，用来将多个css文件引入到一个css文件中；而link只能将css文件引入到网页页面中。

• 不同点3: 功能范围不同
  link属于XHTML标签，而@import是CSS提供的一种方式，link标签除了可以加载CSS外，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。

• 不同点4: 加载顺序不同
  当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显。

• 不同点5:兼容性
  由于@import是css2.1提出的，所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

• 不同点6: 控制样式时的差别
  使用link方式可以让用户切换CSS样式.现代浏览器如Firefox,Opera,Safari都支持rel=”alternate stylesheet”属性(即可在浏览器上选择不同的风格),当然你还可以使用Javascript使得IE也支持用户更换样式。

  参考来源为：https://zhidao.baidu.com/question/1694114302789480548.html?fr=iks&word=link%BA%CD%40import%B5%C4%C7%F8%B1%F0&ie=gbk

22. 盒模型

• 在网页中，一个元素占有空du间的大小由几个部分zhi构成，其dao中包括元素的内容版（content），元素权的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

  参考来源为：https://zhidao.baidu.com/question/1952317432684432988.html?fr=iks&word=%BA%D0%C4%A3%D0%CD&ie=gbk

25. display:none，visibility:hidden和opacity:0的区别

• display:none ：不为被隐藏的对象保留其物理空间 ，元素隐藏不占据原位置
• visibility：hidden ：为被隐藏的对象保留其物理空间，元素虽隐藏仍占据原位置
• opacity：为元素设置透明度，取值范围为：0-1；0为完全透明，1不透明，元素所占位置不消失

27. BFC相关理解

• BFC(Block Formatting Context—块级格式化上下文)是Web页面中盒模型布局的CSS渲染模式，是一个独立的渲染区域。它的定位体系属于常规文档流。也可以理解为正常的html排版方式，内部的Box会在垂直方向，一个接一个地放置。

参考来源及详细说明请点击：https://blog.csdn.net/ll_0801xyz/article/details/77323261

29. margin塌陷
    margin塌陷分两种情况：一种是：相邻盒子之间的margin塌陷，一种是：嵌套关系的margin塌陷(父级元素塌陷)。

• 相邻盒子塌陷：当两个相邻盒子在同方向上设置margin值时，会出现一个有趣的塌陷现象。比如对box1我们为其设置margin-bottom：50px;对box2我们为其设置margin-top： 40px;我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.两盒子之间的实际距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：塌陷的原则是以两盒子最大的外边距为准。
• 嵌套关系的margin塌陷：例如当一个div（父盒子）包含一个div（子盒子），给子盒子设置margin-top：10px；我们想要的效果应该是子盒子的上方外边距会出现与父盒子10px的间隙，但实际效果是父盒子的外边距偏移了10px；子元素的margin外边距没变。这就叫嵌套关系的margin塌陷。
  
  参考来源为：https://www.cnblogs.com/syp172654682/p/7671830.html

31. 清除浮动
    如果一个父盒子中有一个子盒子，并且父盒子没有设置高，子盒子在父盒子中进行了浮动，那么将来父盒子的高度为0.由于父盒子的高度为0，下面的元素会自动补位，所以这个时候要进行浮动的清除。清除浮动的常用的方法为：

• 给浮动元素的父级元素设置overflow:hidden
• 在浮动元素的同级下添加一个空标签，并且设置clear:both;
• 浮动元素的父级元素使用::after{clear:both;content:'';display:block;}
  参考来源为：https://blog.csdn.net/qq_42720683/article/details/94008926

32. 选择器优先级
    当两个规则都作用到了同一个html元素上时，如果定义的属性有冲突，那么应该用谁的值的，CSS有一套优先级的定义。
    不同级别：
    1.在属性后面使用 !important 会覆盖页面内任何位置定义的元素样式。
    2.作为style属性写在元素内的样式
    3.id选择器
    4.类选择器
    5.标签选择器
    6.通配符选择器
    7.浏览器自定义或继承
    总结排序：!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

33. absolute和relative的区别

absolute：绝对定位，相对最近父元素，原有空间不保留会被其他元素挤占。宽度为文本宽度，且宽度不会影响父元素宽度

relative：相对定位，相对自身原来位置，原有空间保留，不会被挤占。宽度为父元素宽度，且宽度会撑大/缩小父元素宽度

区别
Absolution：元素会脱离文档流，定位是相对于离它最近的且不是static定位的父元素而言，若该元素没有设置宽度，则宽度由元素里面的内容决定，且宽度不会影响父元素，定位为absolution后，原来的位置相当于是空的，下面的的元素会来占据。

Relative：元素仍处于文档流中，定位是相对于原本自身的位置，若没有设置宽度，则宽度为父元素的宽度，该元素的大小会影响父元素的大小。

36. 水平垂直居中

37. css做圆形，三角形

38. 媒介查询相关的自适应布局

39. px，em，rem

40. 回流和重绘

41. 动画相关

42. flex布局

43. 精灵图

44. 伪类和伪元素

45. （3）js篇

46. 闭包，内存泄漏

47. 作用域链，变量提升

48. let，var，const

49. 常用数组，字符串方法

50. map和foreach区别

51. js事件循环机制，宏任务微任务，async/await,读代码运行顺序

52. 原型链

53. 对象继承方法

54. new做了什么操作

55. bind,call,apply的区别，手撕源码

56. ajax原理，手撕源码（xmlhttprequest）

57. this指向

58. 设计模式，应用场景，手撕源码

59. promise，promise.all,promise.race源码手撕（让你写一个请求，5秒内执行完就返回执行结果，否则返回超时）

60. 垃圾回收

61. 基本数据类型

62. 和=的区别

63. 隐式转换（坑1）var a=?;console.log(a1&&a2&&a3);//返回true 坑2）为什么[]![]）

64. 如何判断数组

65. js动画和css动画区别

66. dom0级事件dom2级事件

67. 模块化

68. 防抖节流

69. 深浅拷贝

70. 事件流

71. 浏览器渲染过程

72. generator

73. 数组去重

74. 数组展平

75. typeof 和instance of

76. 为什么0.1+0.2！=0.3

77. 用symbol.iterator实现对象遍历（清晰的记得是b站的问题，难搞哦）

78. （4）webpack篇

79. 怎么打包

80. 分包合包

81. 热更原理

82. loader和plugin

83. （5）vuejs篇

84. 双向绑定原理，手撕简单源码

85. vue3新特性，proxy和defineProperty的区别

86. mvvm和mvc差异（和项目开发一个道理，小公司接小项目，boss从客户那接了单给程序员做，程序员做了给客户看，客户看了不满意找领导，领导找程序员，这么个循环就是mvc；公司大了，项目大了领导不管了，那就是客户需求和产品经理说，产品经理和程序员对接，程序员做完给产品经理看，产品再去把东西给客户，这就是mvvm）

87. 父子通信

88. 非父子通信

89. 生命周期

90. key的作用

91. v-if和

92. vue-router原理，路由如何跳转

93. vuex数据流向，mutation和action

94. （6）react及react native篇

95. react和vue的区别

96. diff算法

97. 虚拟dom

98. setstate同步还是异步，具体过程

99. 事件代理

100. redux原理

101. hook

102. 生命周期

103. 容器组件和展示组件

104. 父子通信

105. 非父子通信

106. 高阶组件（高阶组件不是组件）

107. shouldComponentUpdate

108. react native性能调优

109. （7）其他

110. 怎么理解大前端方向

111. LRU原理

112. 常用数据结构和算法

113. 线程和进程

114. 图片资源压缩显示

115. 前端性能检测

116. 伪随机算法