常见前端面试题

前端面试常见问题及知识点（自我总结）->一文破万面

正值秋招，记录下自己准备秋招中总结的前端面试一些重要的知识点。

记录下这些知识点，让自己了解到新知识的同时，方便以后的复习。

这篇文章我将会实时更新，人无完人，若果读者发现文章中的错误或者有什么疑问，可以评论出来我们一起交流哦。

希望这篇文章能带给和我一样的校招党们一些帮助，也非常希望大伙儿给我点点赞 (●’◡’●)嘻嘻

一、HTML/CSS相关

~ DOCTYPE作用？严格模式与混杂模式区别？

Doctype告诉浏览器以何种方式来渲染页面。

严格模式：排版和JS运作模式以该浏览器支持的最高标准运行。

混杂模式：向后兼容，模拟老式浏览器，防止浏览器无法兼容页面。

~ link和import的区别？

1. link属于Xhtml标签，而@import是css提供的方式。
2. 加载顺序： link 会同时被加载，而@import 引用的 css 会等到页面加载结束后加载。
3. 兼容问题：@import是css2.1才有的，只有IE5以上才能识别。
4. link可以通过Js操作DOM，@import不行。
5. link 方式样式的权重高于@import 的。

~ HTML5和CSS3的新属性？

1. html5：
   • 8个语义元素：header、section、footer、aside、nav、main、article、figure
   • 内容元素：mark高亮、progress进度
   • 新的表单控件：calander、date、time、email、url、search
   • 新的input类型 color、date、datetime、datetime-local、email
   • 移除过时标签big、font、frame、frameset
   • canvas绘图：支持内联SVG。支持MathML
   • 多媒体：audio、video、source、embed、track（兼容问题：写两个source）
   • 本地离线存储：把需要离线存储在本地的文件列在一个manifest配置文件
   • web存储。localStorage、SessionStorage。
2. css3：
   • 边框：如border-radius、box-shadow等
   • 背景：如background-size、background-origin等
   • 2/3D转换：如transform等
   • 动画：如animation等

~ 垂直居中的常见方式？

1. 方法一：设定行高（line-height）

   	.outDiv{
   	    width: 200px;
   	    height: 200px;
   	    border: 1px solid blue;
   	    line-height: 200px;
   	    text-align: center;
   	}
   

2. 方法二：绝对定位（position:relative / absolute)

       .outDiv{
           width: 200px;
           height: 200px;
           border: 1px solid blue;
           position: relative;
       }
       .inDiv{
           width: 100px;
           height: 50px;
           position: absolute;
           top: 0;
           right: 0;
           bottom: 0;
           left: 0;
           margin: auto;
           background-color: pink;
       }
   

3. 方法三：flex弹性布局（align-items + justify-content）

   	.outDiv{
           display: flex;
           align-items: center;
           justify-content: center;
           width: 200px;
           height: 200px;
           background-color: pink;
           }
           .inDiv{
           width: 100px;
           height: 100px;
           background-color: lightskyblue;
       }
   

4. 方法四：grid网格布局（align-items + justify-content）

   • 同弹性布局，只是将展示方式display值由flex改成grid。

   	.outDiv{
           display: grid;
           align-items: center;
           justify-content: center;
           width: 200px;
           height: 200px;
           background-color: pink;
           }
           .inDiv{
           width: 100px;
           height: 100px;
           background-color: lightskyblue;
       }
   

5. 方法五：绝对定位+自身偏移（ position: absolute+transform: translate）

       .outDiv{
           width: 200px;
           height: 200px;
           background-color: pink;
           position: relative;
       }
       .inDiv{
           width: 100px;
           height: 100px;
           background-color: lightskyblue;
           position: absolute;
           left: 50%;
           top: 50%;	//定位点为子容器的左上角
           transform: translate(-50%,-50%);	//将子容器按照自身宽高向左上方向偏移50%
       }										//使子容器中心和父容器中心重合
   

6. 方法六：table-cell布局（不推荐）

~ 如何实现两列等高布局？

        给每列加上
        padding-bottom:9999px，
        margin-bottom:-9999px，
        父元素设置overflow:hidden;

~ 左侧固定，右侧自适应如何实现？（镜像：左侧自适应，右侧固定？）

1. 左侧固定宽+左浮动，右侧自适应（margin-left=左侧宽）。
2. 左侧绝对定位+top和left:0来固定位置，右侧margin-left。
3. 左、右侧均为左浮动，右侧设置width:calc(100%-200px)。
4. 父元素弹性布局display:flex，左侧设置flex：0 0 200px，右侧flex:1。

~ CSS如何实现三角形？

            .triangle{
                width: 0;
                height: 0;
                border-bottom: 8px solid red;
                border-right: 8px solid transparent;
                border-left: 8px solid transparent;
            }

~ CSS盒模型中的Box-sizing属性？

1. content-box：宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。
2. border-box：为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
3. Inherit:应从父元素继承 box-sizing 属性的值。

~ 元素类型有哪些，有什么特点？

1. 块元素：可以设置宽高大小，默认宽百分百，独占一行。（ul/p/h1/div/form/table）
2. 内联元素：无法设置宽高，元素大小随内容变化，所有元素默认排在一行。（i/b/span/a）
3. 内联块元素：能设置宽高大小、又能排在一行显示。（img/input）

~ 为什么img可以设置宽高？

img既是行内元素，也是可替换元素，和它自身的src属性有关。可替换属性是浏览器根据元素的标签和属性，来决定元素的具体显示内容。

~ BFC触发条件是什么？

1. 根元素，即html元素。
2. float的值不为none。
3. overflow的值不为visible。
4. display的值为inline-block、table-cell、table-caption。
5. position的值为absolute或fixed。

~ BFC布局规则？

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算。

~ BFC解决什么问题？

1. 撑开边距。（上下元素均设置margin)
2. 撑开父盒子。（子元素浮动，需要让父元素BFC，否则父元素高度塌陷）

~ 清除浮动的方式有哪些？

1. 子元素在最后一个元素标签后，新加一个标签，style="clear:both;"。
2. 父级元素设置溢出隐藏，style="overflow:hidden;"。
3. 父级加::after伪元素清除：.clear::after{content:""; display:block; height=0; clear:both; visibility:hidden; }

~ 伪类和伪元素的区别？

1. :伪类：对元素当前状态的修饰。（:hover，:focus，:first-child）
2. ::伪元素：对元素当前内容的修饰。（::after，::before）

二、Javascript相关

~ document onload和window onload的区别？

1. Document.onload：是在结构和样式加载完成才执行的Js。
2. Window.onload：不仅仅要在结构和样式加载完，还要执行完所有的样式，图片这些资源文件，完全加载完才会触发Window.onload事件。

~ 什么是闭包，说一说？

1. 闭包就是能够读取其他函数内部变量的函数，或者子函数在外部调用，子函数所在的父函数的作用域不会被释放。
   • 作用:可以让外部访问函数内部变量，读取函数内部的函数,局部变量始终保持在内存中。
   • 优点:变量长期保持在内存中,不会清除,避免全局污染。
   • 缺点:增大内存使用,导致内存泄漏（有一块内存被长期占用，得不到释放），网页性能问题。

~ 介绍一下promise，及其底层如何实现？

Promise是一个对象，保存着未来将要结束的事件，她有两个特征:

1. 对象的状态不受外部影响。Promise对象代表一个异步操作，有三种状态，pending进行中，fulfilled已成功，rejected已失败，只有异步操作的结果，才可以决定当前是哪一种状态，任何其他操作都无法改变这个状态，这也就是promise名字的由来。
2. 一旦状态改变，就不会再变。promise对象状态改变只有两种可能，从pending改到fulfilled或者从pending改到rejected，只要这两种情况发生，状态就凝固了，不会再改变，这个时候就称为定型resolved。

~ 什么是事件流？

从页面接收数据的顺序。包括事件捕获阶段、目标处理阶段、事件冒泡阶段（IE只支持事件冒泡）。DOM2指定的事件处理程序方法是：addEventListener(事件名,事件处理函数,布尔值)，ture在事件处理阶段调用，false在冒泡阶段调用。

~ 如何让事件先冒泡后捕获？

对同一个事件，进行监听捕获和冒泡，当监听到捕获时，暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

~ 什么是事件委托/事件代理，有什么好处？

1. 不在事件发生的DOM上直接设置监听，将监听设置在需要监听的DOM的父元素上，通过事件冒泡，父元素可以监听到子元素触发了什么，通过判断事件发生元素DOM的类型，做出相应的响应。
2. 优点：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。（比如ul动态创建li，就可以让新生成的li也具有监听函数 ，有事件触发机制）

~ 什么是事件监听？

addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为element.addEventListener(event, function, useCapture);。第一个参数是事件的类型(如 “click” 或 “mousedown”)，第二个参数是事件触发后调用的函数，第三个参数是个布尔值用于描述事件是ture捕获还是false冒泡，该参数是可选的。事件传递有两种方式，冒泡和捕获。事件传递定义元素事件触发的顺序，如果将P元素插入到div元素中，用户点击P元素，在冒泡中，内部元素先被触发，然后再触发外部元素，捕获中，外部元素先被触发，再触发内部元素。

~ mouseover和mouseenter区别？

1. Mouseover:鼠标移入元素或子元素都会触发事件，会重复触发有冒泡过程（对应mouseout）。
2. Mouseenter:鼠标移入元素本身(不包含元素的子元素)触发事件，不产生事件冒泡（对应mouseleave）。

~ Eval（）函数的是什么？

它的功能是将对应的字符串解析成js并执行，应该避免使用js，因为非常消耗性能（2次，一次解析成js，一次执行）。

例如：	var str = "var a = {}";
	  eval(str);
	  即相当于执行var a ={};

三、计网/协议/浏览器相关

~ HTTP缓存？

1. 强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。
   • 相关字段：expires，cache-control（http1.1出现)。cache-control的优先级高于expires。
2. 协商缓存：浏览器发送请求到服务器，服务器判断是否可使用本地缓存。
   • 相关字段：Last-Modified/If-Modified-Since，Etag/If-None-Match。

~ 缓存策略有哪些？

1. 不同系统的数据访问模式不同，采用的最佳缓存策略也不同。
   • 基于访问时间：缓存项被访问时间来组织缓存队列，决定替换对象。LRU（least recently used 最近最少使用）
   • 基于访问频率：缓存项的被访问频率来组织缓存。LFU（least frequently used 最不经常使用）
   • 访问时间与频率兼顾：FBR

~ 缓存后数据不一致性产生的原因？

1. 分布式环境下，数据的读写都是并发的，先操作缓存，在写数据库成功之前，如果有读请求发生，可能导致旧数据入缓存，引发数据不一致。
2. 先操作数据库，再清除缓存。如果删缓存失败了，就会出现数据不一致问题。

~ 什么时候用哪种缓存？

根据服务器上的资源是否更新来判断用哪种缓存方式。

~ 如何强制页面不进行缓存？

1. 手动添加版本号

   <link rel="stylesheet" type="text/css" href="/css/user.css?v=201806251715" />

   <script src="/js/userinfo.js?v=201806251715"></script>

2. 添加meta标签

   <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

   <meta http-equiv="Pragma" content="no-cache" />

   <meta http-equiv="Expires" content="0" />

~ HTTP1.0与HTTP 1.1的主要区别？

1. 长连接：HTTP1.0使用短连接（每进行一次HTTP操作，就建立一次连接，任务结束就中断连接），需要使用keep-alive参数来告知服务器端要建立一个长连接，而HTTP1.1默认支持长连接。（HTTP是基于TCP/IP协议的，创建一个TCP连接是需要经过三次握手的,有一定的开销，如果每次通讯都要重新建立连接的话，对性能有影响。因此最好能维持一个长连接，可以用一个长连接来发多个请求）
2. 节约带宽：HTTP1.1支持只发送header信息(不带任何body信息)，如果服务器认为客户端有权限请求服务器，则返回100，否则返回401。客户端如果接收到100，才开始把请求body发送到服务器。这样当服务器返回401的时候，客户端就可以不用发送请求body了，节约了带宽。
3. HOST域：HTTP1.0是没有host域的，HTTP1.1才支持这个参数。
   • HOST为系统文件用于记录网站IP地址和域名的关系。作用：加快域名解析——跳过DNS域名解析步骤。
4. cache-control机制。

~ HTTP1.1与HTTP2.0的主要区别？

1. 多路复用：HTTP2.0使用了多路复用的技术，做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级。
2. 二进制分帧：在应用层（HTTP2.0）和传输层（TCP/UDP）之间增加一个二进制分帧层。
   • 将传输的消息分割为更小的消息和帧，并对其进行二进制编码。首部封装到Headers帧，请求体封装到Data帧。
3. 首部压缩：HTTP1.1不支持header数据压缩，HTTP2.0对header的数据进行压缩。
4. 服务器推送：在HTTP2.0中，服务器可以对客户端的一个请求发送多个响应。
   • 服务端可以额外的向客户端推送资源，客户端可以对这些资源进行缓存，由不同页面共享（遵循同源策略）。
5. 安全：http2.0是基于https，天然具有安全性。

~ HTTP头部包含哪些信息？

Accept: 允许哪些媒体类型。

Accept-Charset: 允许哪些字符集。

Accept-Encoding: 允许哪些编码。

Accept-Language: 允许哪些语言。

Cache-Control: 缓存策略，如no-cache。

Connection: 连接选项，例如是否允许代理。

Host: 请求的主机。

If-None-Match: 判断请求实体的Etag是否包含在If-None-Match中，如果包含，则返回304，使用缓存，见Etag。

If-Modified-Since: 判断修改时间是否一致，如果一致，则使用缓存。

If-Match: 与If-None-Match相反。

If-Unmodified-Since: 与If-Modified-Since相反。

Referer: 表明这个请求发起的源头。

User-Agent: 这个大家相信应该很熟悉了，就是经常用来做浏览器检测的userAgent。

Cache-Control: 缓存策略，如max-age:100。

Connection: 连接选项，例如是否允许代理。

Content-Encoding: 返回内容的编码，如gzip。

Content-Language: 返回内容的语言。

Content-Length: 返回内容的字节长度。

Content-Type: 返回内容的媒体类型，如text/html。

Data: 返回时间。

Etag: entity tag，实体标签，给每个实体生成一个单独的值，用于客户端缓存，与If-None-Match配合使用。

Expires: 设置缓存过期时间，Cache-Control也会相应变化。

Last-Modified: 最近修改时间，用于客户端缓存，与If-Modified-Since配合使用。

Pragma: 似乎和Cache-Control差不多，用于旧的浏览器。

Server: 服务器信息。

~ 常见HTTP状态码有什么？

100 Continue 继续。客户端应继续其请求

101 Switching Protocols 切换协议。服务器根据客户端的请求切换协议。只能切换到更高级的协议，例如，切换到HTTP的新版本协议

200 OK 请求成功。一般用于GET与POST请求

201 Created 已创建。成功请求并创建了新的资源

202 Accepted 已接受。已经接受请求，但未处理完成

203 Non-Authoritative Information 非授权信息。请求成功。但返回的meta信息不在原始的服务器，而是一个副本

204 No Content 无内容。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档

205 Reset Content 重置内容。服务器处理成功，用户终端（例如：浏览器）应重置文档视图。可通过此返回码清除浏览器的表单域

206 Partial Content 部分内容。服务器成功处理了部分GET请求

300 Multiple Choices 多种选择。请求的资源可包括多个位置，相应可返回一个资源特征与地址的列表用于用户终端（例如：浏览器）选择

301 Moved Permanently 永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

302 Found 临时移动。与301类似。但资源只是临时被移动。客户端应继续使用原有URI

303 See Other 查看其它地址。与301类似。使用GET和POST请求查看

304 Not Modified 未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

305 Use Proxy 使用代理。所请求的资源必须通过代理访问

306 Unused 已经被废弃的HTTP状态码

307 Temporary Redirect 临时重定向。与302类似。使用GET请求重定向

400 Bad Request 客户端请求的语法错误，服务器无法理解

401 Unauthorized 请求要求用户的身份认证

402 Payment Required 保留，将来使用

403 Forbidden 服务器理解请求客户端的请求，但是拒绝执行此请求

404 Not Found 服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面

500 Internal Server Error 服务器内部错误，无法完成请求

501 Not Implemented 服务器不支持请求的功能，无法完成请求

502 Bad Gateway 作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应

503 Service Unavailable 由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中

504 Gateway Time-out 充当网关或代理的服务器，未及时从远端服务器获取请求

505 HTTP Version not supported 服务器不支持请求的HTTP协议的版本，无法完成处理

~ XSS和CSRF攻击及防御手段是什么？

1. XSS：跨站脚本攻击，是说攻击者通过注入恶意的脚本，在用户浏览网页的时候进行攻击。
   • 防御方式：①为cookie设置httpOnly属性（设置为true后，通过js无法获取到cookie）②为cookie设置secure属性③对用户输入进行检查，进行url中特殊字符过滤。
2. CSRF：跨站请求伪造，可以理解为攻击者盗用了用户的身份，以用户的名义发送了恶意请求。
   • 防御方式：①使用验证码②检查https头部的refer。

~ 对称加密和非对称加密的区别？

1. 对称加密—采用单密钥加密。数据发送方将原始数据分割成固定大小的块，经过密钥和加密算法逐个加密后，发送给接收方；接收方收到加密后的报文后，结合密钥和解密算法解密。
2. 非对称加密—采用公钥、私钥进行加解密。公钥和私钥是成对存在，公钥是从私钥中提取产生公开给所有人的，如果使用公钥对数据进行加密，那么只有对应的私钥才能解密，反之亦然。
3. 非对称效率低于对称。

~ HTTPS中为什么要使用非对称加密和对称加密两种加密方式?

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-X3zlrg32-1622388663609)(C:\Users\machenike\AppData\Roaming\Typora\typora-user-images\image-20210530222604970.png)]

~ Cookie,localstorage,sessionstorage区别？

	Cookie	localstorage	sessionstorage
数据生命周期	expires属性设置过期时间，默认浏览器关闭清除	除非手动清除，否则一直存在	关闭页面或浏览器，则清除
与服务器通信	参与服务器通信，每次cookie都会携带在http请求头中	不参与	不参与
存放数据大小	4KB∩20条	5M	5M
作用域	所有同源窗口共享	所有同源窗口共享	不在不同的浏览器窗口中共享，即使是同一个页面
易用性	自己封装get/setcookie	可以用原生接口，也可以再次封装	可以用原生接口，也可以再次封装
共同点	存在于客户端	存在于客户端	存在于客户端

~ Cookie,session区别？

	Cookie	session
数据生命周期	expires属性设置过期时间，默认浏览器关闭清除	除非手动清除，否则一直存在
与服务器端通信	浏览器端	服务器端
存放数据大小	4KB∩20条	无限制
安全性	相对较低，他人可以通过分析本地cookie进行攻击	安全性大于cookie
选择	当数据量大时，选用cookie，因为session占服务器性能	对安全有要求时，选用session

~ 输入URL到加载页面完成发生了什么？

1. DNS解析
   • 将域名地址解析成IP地址
2. TCP连接（三次握手）
3. 发送HTTP请求
4. 服务器处理请求并返回HTTP报文
5. 浏览器解析渲染页面
   • a.解析HTML，生成DOM树
   • b.解析CSS，生成CSSOM树
   • c.JS引擎解析JS代码
   • d.DOM树+CSSOM树生成render树
   • e.layout布局（计算、排版标签位置）
   • f.render渲染
6. 连接结束（四次挥手）