2020前端面试题01

总结最近几天的面试问题，算2020新题？不过，总的来讲又好像也算不上，毕竟在中偏高级这个阶段，个人感觉面试技术点基本都是一样，属于大同小异哈。

基础部分

js部分，所遇到的面试题，基本是以计算和理论概念为主，计算题就省略了。不难，关键是记不住那么多。题如下：

1. js的基本数据类型有哪些？复杂型有哪些？
2. 怎么判断数据的类型?

追加问题：
1、typeof 和 instanceof的区别是什么？
2、怎么判断是Array还是Object？

3. CSS浮动怎么理解的?

设置了浮动属性的元素会脱离普通标准流的控制，移动到其父元素中指定的位置的过程，将块级元素放在一行，浮动会脱离标准流，不占位置，会影响标准流，浮动只有左右浮动，不会出现上下浮动。

4.CSS如何实现盒子水平垂直居中?

一、没有固定宽高
方案1、Transforms 变形 这是最简单的方法，不仅能实现绝对居中同样的效果，也支持联合可变高度方式使用

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

方案二2、在父级元素上面加上下面3句话(弹性盒子)，就可以实现子元素水平垂直居中

	display:flex;/*弹性盒模型*/
	justify-content: center; /*子元素水平居中*/
	align-items: center; /*子元素垂直居中*/

方案3、margin:auto实现绝对定位元素的居中（该方法兼容ie8以上浏览器）

	position: absolute;
	left:0;
	right:0;
	top: 0;
	bottom: 0;
	margin: auto;

二、有固定宽高（上面的方案三也兼容）
方案1、margin 负间距
关键点：1.必需知道该div的宽度和高度，2.然后设置位置为绝对位置，3.距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，4.最后将该div分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。

   	width: 400px;
   	height: 18px;
   	position: absolute;
   	top:50%;
   	left:50%;
   	margin-top: -9px;
   	margin-left: -200px;

5. Href 和 src的区别?

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。
src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内
href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

6.Px，Rem，Em，% 的区别:

1. px是固定长度单位，不随其它元素的变化而变化；
2. em和%是相对于父级元素的单位，会随父级元素的属性（font-size或其它属性）变化而变化；
3. rem是相对于根目录（HTML元素）的，所有它会随HTML元素的属性（font-size）变化而变化；
4. px和%用的比较广泛一些，可以充当更多属性的单位，而em和rem是字体大小的单位，用于充当font-size属性的单位
5. 一般来说：1em = 1rem = 100% = 16 px

7.移动端怎么做适配?

• 1.meta viewport

	width=device-width：让当前viewport宽度等于设备的宽度
	user-scalable=no：禁止用户缩放
	initial-scale=1.0: 设置页面的初始缩放值为不缩放
	maximum-scale=1.0: 允许用户的最大缩放值为1.0
	minimum-scale=1.0: 允许用户的最小缩放值为1.0

• 2.媒体查询（media）

一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身

• 3.rem布局

rem是根据网页的根元素来设置字体大小，和em的区别是，em是根据父元素的字体大小来设置，而rem则是根据网页的根元素的来设置的

html {
      font-size: 16px; /*现在大部分浏览器，如果不更改字体配置，默认显示的font-size都是16px。*/
	}
/*给一个p标签设置12px的字体就可以这样设置*/
p {
     font-size： 0.75rem；
   }

8.说下遇到的各种兼容性的处理方法？
参考网址：兼容处理
9.
10.Html盒模型的不同？

W3C盒模型是与IE盒模型的区别就是对宽高的定义不同。
W3C认为：宽高是内容区的宽度（只包含节点显示的具体内容）
IE认为：宽高是显示效果的实际效果（包含节点的全部内容）

11.透明度opacity和rgba的区别？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色

12.页面性能优化 && 网站如何优化？

• 常见方式
  1、资源压缩合并，减少http请求;
  2、非核心代码异步加载 --> 异步加载的方式 --> 异步加载的区别;
  3、利用浏览器缓存 --> 缓存的分类 --> 缓存的原理 缓存是所有性能优化的方式中最重要的一步【重要】;
  ps: 有的人可能会回答local storage 和session storage，其实不是这个。浏览器缓存和存储不是一回事。-
  4、使用CDN 浏览器第一次打开页面时，缓存是起不了作用的。这个时候，CDN就上场了;
  5、DNS预解析
• 1.html

1. 脚本放到 HTML 代码页底部 (Put Scripts at the Bottom)
2. 从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
3. 精简 JavaScript 与 CSS (Minify JavaScript and CSS)
4. 移除重复脚本 (Remove Duplicate Scripts)

• 2.css
  1、把 CSS 放到代码页上端 (Put Stylesheets at the Top)
  2、从页面中剥离 JavaScript 与 CSS (Make JavaScript and CSS External)
  3、精简 JavaScript 与 CSS (Minify JavaScript and CSS)
  4、避免 CSS 表达式 (Avoid CSS Expressions)
• 3.javaScript
  非核心代码异步加载，异步加载的方式
  动态脚本加载document.createElement('script')
  defer：<script src="./defer1.js" defer></script>
  async :<script src="./async1.js" async></script>
• 4.image
  合并图片（css sprites）、CSS和JS文件合并、CSS和JS文件压缩;
  图片较多的页面也可以使用 lazyLoad 等技术进行优化;
  精灵图

13.Js闭包是如何理解的

• 1、闭包是什么?
  理解一: 闭包是嵌套的内部函数；
  理解二: 包含被引用变量(函数)的对象；即函数中有 Closure 对象（在chrome可以查看).
• 2、产生闭包的两个条件?
  * 1.函数嵌套;
  * 2.内部函数引用了外部函数的数据(变量/函数) ===>> 内部函数执行函数定义就会产生闭包(不用调用内部函数).

14.请描述一下cookies，sessionStorage和localStorage的区别？

特性	cookies	sessionStorage	localStorage
特性	一般由服务器生成，可设置失效时间。如果在浏览器端生成Cookie，默认是关闭浏览器后失效	除非被清除，否则永久保存	仅在当前会话下有效，关闭页面或浏览器后被清除
存放数据大小	4K	一般5M	一般5M
与服务器端通信	每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题	仅在客户端（即浏览器）中保存，不参与和服务器的通信	仅在客户端（即浏览器）中保存，不参与和服务器的通信
易用性	需要程序员自己封装，源生的Cookie接口不友好	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持	源生接口可以接受，亦可再次封装来对Object和Array有更好的支持

15.一次完整的HTTP事务是怎样的一个过程？

网络答案：域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码 --> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户;

  	1.在浏览器中输入url（解析IP地址）；
	2.应用层DNS解析域名；
	3.应用层客户端发送HTTP请求；
	4.传输层TCP传输报文(3次握手)；
	5.网络层IP协议查询MAC地址；
	6.数据到达数据链路层；
	7.服务器接收数据；
	8.服务器响应请求；
	9.服务器返回相应文件。

16.从URshiL发送请求到页面渲染发生了什么？

• 1.url解析，即协议、服务器、域名、端口、虚拟文件目录、参数。
• 2.DNS解析，即域名解析，

DNS阶段发生的事：
* 1.查看浏览器缓存，如果没有；
* 2.检测系统缓存，如果没有；
* 3.查看路由缓存，如果没有；
* 4.查看本地服务器缓存，如果没有；
- 5.递归查询（迭代查询）：从根域名服务器 -> *域名服务器 -> 极限域名服务器，依次对目标查询。

• 3.建立浏览器与服务器端的连接：通过TCP/IP协议三次握手机制建立连接。
• 4.接收数据
• 5.渲染DOM树（下载接收的数据）

加载中过程：
* 1.解析HTML文档，生成DOM
* 2.解析CSS文档，生成CSSDOM
* 3.将JS代码交给JS引擎执行
* 4.合并DOM和CSSDOM，生成Render Tree
* 5.根据Rende Tree进行渲染

DOM树的加载步骤：

	1. 解析HTML文档
	2. 引入样式和脚本文件
	3. 解析并执行脚本
	4. DOM树构建完成
	5. 加载图片等资源文件
	6. 页面加载完成

17.什么是TCP/IP协议，什么是HTTP协议？

网络协议是对网上进行数据交互而建立的一种规则、标准、约定的集合。
TCP/IP　是协议集合，即是一个网络通信模型，以及一整个网络传输协议家族。其中==TCP（传输控制协议）==是通过三次握手机制实现TCP客户端和服务器端的数据交互的，IP协议是网络传输的地址，有两个基本功能　寻址和分段，主要是为计算机分配IP地址和确定那些地址是在同一个子网络的下面。
核心要点：TCP协议是安全的把数据传输给对方，IP协议是找到对方的详细地址。
HTTP协议（超文本传输协议） 是网络应用最广泛的一种协议，是WWW都要遵循的标准。是在TCP协议之上建立的应用，客户端发送一次请求，服务器端就要响应一次的"一次连接"。

18.怎么实现节点的添加、复制、删除、移动、创建和查找？

• 1、首先创建DOM片段 document.createDocumentFragment()；添加DOM节点时，也可以使用document.body.append()；进行添加，但是，这种方法每使用一次就会刷新一次页面，会造成效率低下。
• 2、创建节点 document.createElement(‘名称’)//具体节点，document.createTextNode(‘内容’)//创建文本节点；
• 3、添加节点document.appendChild()；
• 4、删除节点 document.removeChild()；
• 5、移动节点

    var newLi =document.getElementById('Document1').lastChild;
   document.getElementById('Document2').appendChild(newLi); 

• 6、插入节点 document.inserBefore()；
• 7、替换节点 document.replaceChild(newnode,oldnode)；
• 8、查找节点

   getElementsByTagName() //通过标签名称；
   getElementsByClassName() //通过元素的class属性名称；
   getElementById() //通过元素 Id，唯一性；

• 9、复制节点

   var newLi =document.getElementById('Document1').Child(('名称'));
   document.getElementById('Document1').appendChild(newLi);

19.模块开发要遵循的规范？

1. AMD规范也叫异步模块加载规范,在这个规范下模块会异步加载,不影响后面语句的执行,可以使用define定义模块,使用require调用模块。
2. CommonJS规范是服务器端模块的规范,node.js就采用了这个规范,每个模块都有一个单独的作用域,模块内部的变量无法被其他模块读取,除非定义为global的对象和属性。
3. CMD规范通用模块定义.CMD是按需加载,一个模块就是一个文件。

20.什么是BFC？怎么触发BFC？

1. 什么是BFC？
   BFC它是一个独立的渲染区域，只有Block-level box（块元素）参与，它规定了内部的Block-level box如何布局，并且与这个区域外部毫不相关。
2. BFC的原理是什么？
   1）内部的Box会在垂直方向，一个接一个地放置；
   2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
   3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；
   4）BFC的区域不会与float box重叠；
   5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此；
   6）计算BFC的高度时，浮动元素也参与计算。
3. 如何创建BFC?
   1）根元素；　
   2）float属性不为none；　
   3）position不为static和relative；　
   4）overflow不为visible；　
   5）display为inline-block, table-cell, table-caption, flex, inline-flex。
4. BFC作用？
   1）防止外边距重叠。
   bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)；
   我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。
   2）清除浮动的影响（块级子元素浮动，如果块级父元素没有设置高度，其会有高度塌陷的情况发生。）；
   原因：子元素浮动后，均开启了BFC，父元素不会被子元素撑开；
   解决方法：由第六条原理得，计算BFC的高度时，浮动元素也参与计算。所以只要将父容器设置为bfc，就可以把子元素包含进去：这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流；
   3）防止文字环绕。