震惊！（真细）重学前端——300个基础面试题+答案、分类学习整理（良心制作）持续更新。。。

注：花半个月时间，重学基础，学习完、整理完、总结归纳完，痛并快乐着。

（欢迎提出问题和建议，采纳后会附上提议者名字链接）

HTML 篇

图片中 title 和 alt 区别？

通常当⿏标滑动到元素上的时候显示
alt 是的特有属性，是图⽚内容的等价描述，⽤于图⽚⽆法加载时显示、读屏器阅读图⽚。可提图⽚⾼可访问性，除了纯装饰图⽚外都必须设置有意义的值，搜索引擎会重点分析。

Html5 有哪些新特性、移除了哪些元素

新增元素：
- 绘画canvas
- 用于媒介回放的video 和 audio 元素
- 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
- sessionStorage 的数据在浏览器关闭后自动删除
- 语义化更好的内容元素，比如 article 、footer、header、nav、section
- 表单控件，calendar 、 date 、 time 、 email 、 url 、 search
- 新的技术 webworker 、 websocket 、 Geolocation
移除的元素：
- 纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u
- 对可⽤性产⽣负⾯影响的元素： frame 、 frameset 、 noframes
⽀持 HTML5 新标签：
- IE8/IE7/IE6 ⽀持通过 document.createElement ⽅法产⽣的标签
- 可以利⽤这⼀特性让这些浏览器⽀持 HTML5 新标签
- 浏览器⽀持新标签后，还需要添加标签默认的样式

浏览器是怎么对 Html5 的离线储存资源进⾏管理和加载的呢

如何使⽤：

⻚⾯头部像下⾯⼀样加⼊⼀个 manifest 的属性；
在 cache.manifest ⽂件的编写离线存储的资源
在离线状态时，操作 window.applicationCache 进⾏需求实现

在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest ⽂件，如果是第⼀次访问 app ，那么浏览器就会根据manifest⽂件的内容下载相应的资源并且进⾏离线存储。如果已经访问过 app 并且资源已经离线存储了，那么浏览器就会使⽤离线的资源加载⻚⾯，然后浏览器会对⽐新的 manifest ⽂件与旧的 manifest ⽂件，如果⽂件没有发⽣改变，就不做任何操作，如果⽂件改变了，那么就会重新下载⽂件中的资源并进⾏离线存储。

iframe有那些缺点？

iframe 会阻塞主⻚⾯的 Onload 事件
搜索引擎的检索程序⽆法解读这种⻚⾯，不利于 SEO
iframe 和主⻚⾯共享连接池，⽽浏览器对相同域的连接有限制，所以会影响⻚⾯的并⾏加载
使⽤ iframe 之前需要考虑这两个缺点。如果需要使⽤ iframe ，最好是通过javascript 动态给 iframe 添加 src 属性值，这样可以绕开以上两个问题

HTML W3C的标准

标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离

Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

<!DOCTYPE> 声明位于⽂档中的最前⾯，处于 html 标签之前。告知浏览器的解析器，⽤什么⽂档类型规范来解析这个⽂档
严格模式的排版和 JS 运作模式是以该浏览器⽀持的最⾼标准运⾏
在混杂模式中，⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现

HTML全局属性(global attribute)有哪些

class :为元素设置类标识
data-* : 为元素增加⾃定义属性
draggable : 设置元素是否可拖拽
id : 元素 id ，⽂档内唯⼀
lang : 元素内容的的语⾔
style : ⾏内 css 样式
title : 元素相关的建议信息

viewport的content属性作用

<meta name="viewport" content="" />
    width viewport的宽度[device-width | pixel_value]width如果直接设置pixel_value数值，大部分的安卓手机不支持，但是ios支持；
    height – viewport 的高度 （范围从 223 到 10,000 ）
    user-scalable [yes | no]是否允许缩放
    initial-scale [数值] 初始化比例（范围从 > 0 到 10）
    minimum-scale [数值] 允许缩放的最小比例
    maximum-scale [数值] 允许缩放的最大比例
    target-densitydpi 值有以下（一般推荐设置中等响度密度或者低像素密度，后者设置具体的值dpi_value，另外webkit内核已不准备再支持此属性）
         -- dpi_value 一般是70-400//没英寸像素点的个数
         -- device-dpi设备默认像素密度
         -- high-dpi 高像素密度
         -- medium-dpi 中等像素密度
         -- low-dpi 低像素密度

附带问题：怎样处理移动端 1px 被渲染成 2px 问题?

局部处理

mate 标签中的 viewport 属性， initial-scale 设置为 1
rem 按照设计稿标准⾛，外加利⽤ transfrome 的 scale(0.5) 缩⼩⼀倍即可；

全局处理

mate 标签中的 viewport 属性， initial-scale 设置为 0.5
rem 按照设计稿标准⾛即可

meta 相关

<!DOCTYPE html> <!--H5标准声明，使⽤ HTML5 doctype，不区分⼤⼩写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明⽂档使⽤的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用指定浏览器使用特定的文档模式-->
<meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述-->
<meta name=”keywords” content=””/> <!-- ⻚⾯关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--⽹⻚作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标
是否启⽤ WebApp 全屏模式，删除苹果默认的⼯具栏和菜单栏-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使⽤兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对⼿持设备优化，主要是针对一些老的不识别viewport的浏览器-->
<meta name=”MobileOptimized” content=”320″> <!--微软的⽼式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应⽤模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone
设置⻚⾯不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>

了解更多参考：https://blog.csdn.net/kongjiea/article/details/17092413

div+css的布局较table布局有什么优点

改版的时候更⽅便只要改 css ⽂件。
⻚⾯加载速度更快、结构化清晰、⻚⾯显示简洁。
表现与结构相分离。
易于优化（ seo ）搜索引擎更友好，排名更容易靠前。

src与href的区别

src ⽤于替换当前元素，href⽤于在当前⽂档和引⽤资源之间确⽴联系。
src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素

href 是 Hypertext Reference 的缩写，指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档（链接）之间的链接，如果我们在⽂档中添加
link href="common.css" rel="stylesheet" 那么浏览器会识别该⽂档为 css ⽂件，就会并⾏下载资源并且不会停⽌对当前⽂档的处理。这也是为什么建议使⽤ link ⽅式来加载 css ，⽽不是使⽤ @import ⽅式

CSS 篇

link 与 @import 的区别

link 是 HTML ⽅式， @import 是CSS⽅式
link 最⼤限度⽀持并⾏下载， @import 过多嵌套导致串⾏下载，出现 FOUC (⽂档样式短暂失效)
link 可以通过 rel="alternate stylesheet" 指定候选样式
浏览器对 link ⽀持早于 @import ，可以使⽤ @import 对⽼浏览器隐藏样式
@import 必须在样式规则之前，可以在css⽂件中引⽤其他⽂件
总体来说： link 优于 @import ，link优先级也更高

BFC 有什么用

创建规则：
- 根元素
- 浮动元素（ float 不取值为 none ）
- 绝对定位元素（ position 取值为 absolute 或 fixed ）
- display 取值为 inline-block 、 table-cell 、 table-caption 、 flex 、inline-flex 之⼀的元素
- overflow 不取值为 visible 的元素
作用
- 可以包含浮动元素
- 不被浮动元素覆盖
- 阻⽌⽗⼦元素的 margin 折叠

清除浮动的⼏种⽅式

⽗级 div 定义 height
结尾处加空 div 标签 clear:both
⽗级 div 定义伪类 :after 和 zoom
⽗级 div 定义 overflow:hidden
⽗级 div 也浮动，需要定义宽度
结尾处加 br 标签 clear:both

Css3 新增伪类 - 伪元素

p:first-of-type 选择属于其⽗元素的⾸个 <p> 元素的每个 <p> 元素。
p:last-of-type 选择属于其⽗元素的最后 <p> 元素的每个 <p> 元素。
p:only-of-type 选择属于其⽗元素唯⼀的 <p> 元素的每个 <p> 元素。
p:only-child 选择属于其⽗元素的唯⼀⼦元素的每个 <p> 元素。
p:nth-child(2) 选择属于其⽗元素的第⼆个⼦元素的每个 <p> 元素。
:enabled 已启⽤的表单元素。
:disabled 已禁⽤的表单元素。
:checked 单选框或复选框被选中。
::before 在元素之前添加内容。
::after 在元素之后添加内容,也可以⽤来做清除浮动。
::first-line 添加一个特殊的样式到文本的首字母。
::first-letter 添加一行特殊样式到首行。

相信大家也看出来他们的不同，

伪类语法一个：，它是为了弥补css常规类选择器的不足
伪元素语法两个：，它是凭空创建的一个虚拟容器生成的元素

IE盒子模型、W3C盒子模型

W3C盒模型：内容(content)、填充( padding )、边界( margin )、边框( border )；
- box-sizing: content-box
- width = content width;
IE盒子模型： IE 的content 部分把 border 和 padding 计算了进去;
- box-sizing: border-box
- width = border + padding + content width

display:inline-block 什么时候不会显示间隙？

移除空格
使⽤ margin 负值
使⽤ font-size:0
letter-spacing
word-spacing

⾏内元素float:left后是否变为块级元素？

⾏内元素设置成浮动之后变得更加像是 inline-block （⾏内块级元素，设置成这个属性的元素会同时拥有⾏内和块级的特性，最明显的不同是它的默认宽度不是 100% ），这时候给⾏内元素设置 padding-top 和 padding-bottom 或者 width 、 height 都是有效果的

如果需要⼿动写动画，你认为最⼩时间间隔是多久，为什么？

多数显示器默认频率是 60Hz ，即 1 秒刷新 60 次，所以理论上最⼩间隔为 1/60*1000ms ＝ 16.7ms

CSS不同选择器的权重(CSS层叠的规则)

！important 规则最重要，⼤于其它规则
⾏内样式规则，加 1000
对于选择器中给定的各个 ID 属性值，加 100
对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加 10
对于选择其中给定的各个元素标签选择器，加1
如果权值⼀样，则按照样式规则的先后顺序来应⽤，顺序靠后的覆盖靠前的规则

stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜⾊混合”五⼤基本特性
Sass 和 LESS 语法较为严谨， LESS 要求⼀定要使⽤⼤括号“{}”， Sass 和 Stylus 可以通过缩进表示层次与嵌套关系
Sass ⽆全局变量的概念， LESS 和 Stylus 有类似于其它语⾔的作⽤域概念
Sass 是基于 Ruby 语⾔的，⽽ LESS 和 Stylus 可以基于 NodeJS NPM 下载相应库后进⾏编译；

这也是为什么安装Sass的时候有时候会报错，需要安装python脚本

优点：就不用我多说了，谁用谁知道，真香。

rgba()和opacity的透明效果有什么不同？

rgba() 和 opacity 都能实现透明效果，但最⼤的不同是 opacity 作⽤于元素，以及元素内的所有内容的透明度，
⽽ rgba() 只作⽤于元素的颜⾊或其背景⾊。（设置 rgba 透明的元素的⼦元素不会继承透明效果！）

⽔平居中的⽅法

元素为⾏内元素，设置⽗元素 text-align:center
如果元素宽度固定，可以设置左右 margin 为 auto ;
如果元素为绝对定位，设置⽗元素 position 为 relative ，元素设left:0;right:0;margin:auto;
使⽤ flex-box 布局，指定 justify-content 属性为center
display 设置为 tabel-ceil

垂直居中的⽅法

将显示⽅式设置为表格， display:table-cell ,同时设置 vertial-align：middle
使⽤ flex 布局，设置为 align-item：center
绝对定位中设置 bottom:0,top:0 ,并设置 margin:auto
绝对定位中固定⾼度时设置 top:50%，margin-top 值为⾼度⼀半的负值
⽂本垂直居中设置 line-height 为 height 值

浏览器篇

浏览器内核的理解

主要分两个部分：渲染引擎、js引擎
渲染引擎：负责取得网页的内容（html css img ...），以及计算网页的显示方式，然后会输出至显示器或者打印机。浏览器的内核不同对于网页的语法解释也不同，所以渲染的效果也不一样
js引擎：解析和执行javascript 来实现网页的动态效果
最开始渲染引擎和js引擎并没有区分的很明确，后来js引擎越来越独立，内核就倾向于只值渲染引擎
IE : trident 内核
Firefox ： gecko 内核
Safari : webkit 内核
Opera :以前是 presto 内核， Opera 现已改⽤Google - Chrome 的 Blink 内核
Chrome:Blink (基于 webkit ，Google与Opera Software共同开发)

HTTP 请求+作用？

Get 方法：发送一个请求来获取服务器资源
POST 方法：向服务器提交数据
PUT 方法：与POST方法很像，也是提交数据，但PUT制定了资源在服务器上的位置，常用在修改数据
HEAD 方法：只请求页面的首部信息
DELETE 方法：删除服务器上的资源
OPTIONS 方法：用于获取当前URL支持的请求方式
TRACE 方法：用于激活一个远程的应用层请求消息回路
CONNECT 方法：把请求链接转换到透明的TCP/IP的通道

HTTP状态吗

1XX ：信息状态吗
- 100 continue 继续，⼀般在发送 post 请求时，已发送了 http header 之后服务端将返回此信息，表示确认，之后发送具体参数信息
2XX ：成功状态吗
- 200 ok 正常返回信息
- 201 created 请求成功并且服务器创建了新资源
- 202 accepted 服务器已经接收请求，但尚未处理
3XX ：重定向
- 301 move per 请求的网页已经永久重定向
- 302 found 临时重定向
- 303 see other 临时冲重定向，且总是使用get请求新的url
- 304 not modified 自从上次请求后，请求的网页未修改过
4XX ：客户端错误
- 400 bad request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求
- 401 unauthorized 请求未授权
- 403 forbidden 禁止访问
- 404 not found 找不到如何与url匹配的资源
5XX ：服务器错误
- 500 internal server error 最常见的服务器端的错误
- 503 service unacailable 服务器端暂时无法处理请求（可能是过载活维护）

从浏览器地址栏输入URL后发生了什么？

基础版本

1.的浏览器根据请求的 URL 交给 DNS 域名解析，找到真实 IP ，向服务器发起请求；
2.服务器交给后台处理完成后返回数据，浏览器接收⽂件（ HTML、JS、CSS 、图象等）；
3.浏览器对加载到的资源（ HTML、JS、CSS 等）进⾏语法解析，建⽴相应的内部数据结构（如 HTML 的 DOM ）；
4.载⼊解析到的资源⽂件，渲染⻚⾯，完成。

详细版

1.从浏览器接收 url 到开启⽹络请求线程（这⼀部分可以展开浏览器的机制以及进程与线程之间的关系）
2.开启⽹络线程到发出⼀个完整的 HTTP 请求（这⼀部分涉及到dns查询， TCP/IP 请求，五层因特⽹协议栈等知识）
3.从服务器接收到请求到对应后台接收到请求（这⼀部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
4.后台和前台的 HTTP 交互（这⼀部分包括 HTTP 头部、响应码、报⽂结构、 cookie 等知识，可以提下静态资源的 cookie 优化，以及编码解码，如 gzip 压缩等）
5.单独拎出来的缓存问题， HTTP 的缓存（这部分包括http缓存头部， ETag ， catchcontrol 等）
6.浏览器接收到 HTTP 数据包后的解析流程（解析 html -词法分析然后解析成 dom 树、解析 css ⽣成 css 规则树、合并成 render 树，然后 layout 、 painting 渲染、复合图层的合成、 GPU 绘制、外链资源的处理、 loaded 和 DOMContentLoaded 等）
7.CSS 的可视化格式模型（元素的渲染规则，如包含块，控制框， BFC ， IFC 等概念）
8.JS 引擎解析过程（ JS 的解释阶段，预处理阶段，执⾏阶段⽣成执⾏上下⽂， VO ，作⽤域链、回收机制等等）
9.其它（可以拓展不同的知识模块，如跨域，web安全， hybrid 模式等等内容）

详细升级版

1.在浏览器地址栏输⼊URL
2.浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤
- 2.1 如果资源未缓存，发起新请求
- 2.2 如果已缓存，检验是否⾜够新鲜，⾜够新鲜直接提供给客户端，否则与服务器进⾏验证。
- 2.3 检验新鲜通常有两个HTTP头进⾏控制 Expires 和 Cache-Control ：
  - 2.3.1 HTTP1.0提供Expires，值为⼀个绝对时间表示缓存新鲜⽇期
  - 2.3.2 HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最⼤新鲜时间
3.浏览器解析URL获取协议，主机，端⼝，path
4.浏览器组装⼀个HTTP（GET）请求报⽂
5.浏览器获取主机ip地址，过程如下：
- 5.1 浏览器缓存
- 5.2 本机缓存
- 5.3 hosts文件
- 5.4 路由器缓存
- 5.5 ISP DNS缓存
- 5.6 DNS递归查询（可能存在负载均衡导致每次IP不一致）
6.打开一个socket与目标IP地址，端口建立TCP链接，三次握手如下：
- 6.1 客户端发送一个TCP的SYN=1，Seq=X的包到服务器端口
- 6.2 服务器发回SYN=1，ACK=x+1,Seq=Y的相应包
- 6.3 客户端发送ACK=Y+1，Seq=z
7.TCP链接建立后发送HTTP请求
8.服务器接收请求后解析，将请求转发到服务器程序，如虚拟主机使用HTTP Host头部判断请求的服务程序
9.服务器检测HTTP请求头是否包含缓存验证信息，如果验证缓存新鲜，返回304等对应状态
10.出合理程序读取完整请求并准备HTTP相应，可能需要查询数据库等操作
11.服务器将相应报文通过TCP链接发送回浏览器
12.浏览器接收HTTP相应，然后根据情况选择关闭TCP链接或者保留重用，关闭TCP链接的四次握手如下：
- 12.1 主动方发送Fin=1,ACK=z,Seq=x报文
- 12.2 被动方发送ACK=X+1,Seq=Y报文
- 12.3 被动方发送Fin=1,ACK=X,Seq=Y报文
- 12.4 主动方发送ACK=Y,Seq=x 报文
13.浏览器检查相应状态码
14.如果资源可缓存，进行缓存
15.对相应进行解码
16.根据资源类型决定如何处理
17.解析HTML文档，构建DOM树，下载资源，构建CSSOM树，执行js脚本，这些操作每月严格的先后顺序
18.构建DOM树：
- 18.1 Tokenizing：根据HTML规范将字符流解析为标记
- 18.2 Lexing：词法分析将标记转换为对象并定义属性和规则
- 18.3 DOM construction：根据HTML标记关系将对象组成DOM树
19.解析过程中遇到图⽚、样式表、js⽂件，启动下载
20.构建CSSOM树：
- 20.1 Tokenizing：字符流转换为标记流
- 20.2 Node：根据标记创建节点
- 20.3 CSSOM：节点创建CSSOM树
1. 根据DOM树和CSSOM树构建渲染树
- 21.1 从DOM树的根节点遍历所有可⻅节点，不可⻅节点包括：1） script , meta 这样本身不可⻅的标签。2)被css隐藏的节点，如 display: none
- 21.2 对每⼀个可⻅节点，找到恰当的CSSOM规则并应⽤
- 21.3 发布可视节点的内容和计算样式
22.js解析如下
- 22.1 浏览器创建Document对象并解析HTML，将解析到的元素和⽂本节点添加到⽂档中，此时document.readystate为loading
- 22.2 HTML解析器遇到没有async和defer的script时，将他们添加到⽂档中，然后执⾏⾏内或外部脚本。这些脚本会同步执⾏，并且在脚本下载和执⾏时解析器会暂停。这样就可以⽤document.write()把⽂本插⼊到输⼊流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的⽂档内容
- 22.3 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析⽂档。脚本会在它下载完成后尽快执⾏，但是解析器不会停下来等它下载。异步脚本禁⽌使⽤document.write()，它们可以访问⾃⼰script和之前的⽂档元素
- 22.4 当⽂档完成解析，document.readState变成interactive
- 22.5 所有defer脚本会按照在⽂档出现的顺序执⾏，延迟脚本能访问完整⽂档树，禁⽌使⽤document.write()
- 22.6 浏览器在Document对象上触发DOMContentLoaded事件
- 22.7 此时⽂档完全解析完成，浏览器可能还在等待如图⽚等内容加载，等这些内容完成载⼊并且所有异步脚本完成载⼊和执⾏，document.readState变为complete，window触发load事件
23.显示⻚⾯（HTML解析过程中会逐步显示⻚⾯）

cookies ， sessionStorage 和 localStorage 的区别

cookie 是⽹站为了标示⽤户身份⽽储存在⽤户本地终端上的数据（通常经过加密）
cookie数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递（优化点）
sessionStorage 和 localStorage 不会⾃动把数据发给服务器，仅在本地保存
存储⼤⼩：
- cookie 数据⼤⼩不能超过4k
- sessionStorage 和 localStorage 虽然也有存储⼤⼩的限制，但⽐ cookie ⼤得多，可以达到5M或更⼤
有期时间：

localStorage 存储持久数据，浏览器关闭后数据不丢失除⾮主动删除数据

sessionStorage 数据在当前浏览器窗⼝关闭后⾃动删除

cookie 设置的 cookie 过期时间之前⼀直有效，即使窗⼝或浏览器关闭

浏览器缓存

先根据这个资源的⼀些 http header 判断它是否命中强缓存，如果命中，则直接从本地获取缓存资源，不会发请求到服务器；
当强缓存没有命中时，客户端会发送请求到服务器，服务器通过另⼀些 request header验证这个资源是否命中协商缓存，称为 http 再验证，如果命中，服务器将请求返回，但不返回资源，⽽是告诉客户端直接从缓存中获取，客户端收到返回后就会从缓存中获取资源；
强缓存和协商缓存共同之处在于，如果命中缓存，服务器都不会返回资源；区别是，强缓存不对发送请求到服务器，但协商缓存会。
当协商缓存也没命中时，服务器就会将资源发送回客户端。
当 ctrl+f5 强制刷新⽹⻚时，直接从服务器加载，跳过强缓存和协商缓存；
当 f5 刷新⽹⻚时，跳过强缓存，但是会检查协商缓存；

强缓存-协商缓存：这篇文章介绍挺细的：https://juejin.cn/post/6844903763665240072#heading-5

JS 篇

说⼏条写JavaScript的基本规范

不要在同⼀⾏声明多个变量
请使⽤ ===/!== 来⽐较 true/false 或者数值
使⽤对象字⾯量替代 new Array 这种形式
不要使⽤全局函数
Switch 语句必须带有 default 分⽀
If 语句必须使⽤⼤括号
for-in 循环中的变量应该使⽤ let 关键字明确限定作⽤域，从⽽避免作⽤域污

绕不过去的闭包

闭包就是能够读取其他函数内部变量的函数
闭包是指有权访问另⼀个函数作⽤域中变量的函数，创建闭包的最常⻅的⽅式就是在⼀个
函数内创建另⼀个函数，通过另⼀个函数访问这个函数的局部变量,利⽤闭包可以突破作⽤链域
闭包的特性：
- 函数内再嵌套函数
- 内部函数可以引⽤外层的参数和变量
- 参数和变量不会被垃圾回收机制回收
优点：能够实现封装和缓存等
缺点：消耗内存、使用不当会内存溢出，
解决⽅法：在退出函数之前，将不使⽤的局部变量全部删除

说说你对作⽤域链的理解

作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能

向上访问，变量访问到 window 对象即被终⽌，作⽤域链向下访问变量是不被允许的

简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和

⽣命周期

JavaScript原型，原型链 ? 有什么特点？

每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)，当我们访问⼀个对象的属性时,如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个prototype ⼜会有⾃⼰的 prototype ，于是就这样⼀直找下去，也就是我们平时所说的原型链的概念
关系： instance.constructor.prototype = instance._proto_
特点：JavaScript 对象是通过引⽤来传递的，我们创建的每个新对象实体中并没有⼀份属于⾃⼰的原型副本。当我们修改原型时，与之相关的对象也会继承这⼀改变当我们需要⼀个属性的时， Javascript 引擎会先看当前对象中是否有这个属性，如果没有的,就会查找他的 Prototype 对象是否有这个属性，如此递推下去，⼀直检索到 Object 内

建对象

请解释什么是事件委托/事件代理

事件代理（ Event Delegation ），⼜称之为事件委托。是 JavaScript 中常⽤绑定事件的常⽤技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给⽗元素，让⽗元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。使⽤事件代理的好处是可以提⾼性能
可以⼤量节省内存占⽤，减少事件注册，⽐如在 table 上代理所有 td 的 click 事件就⾮常棒
可以实现当新增⼦对象时⽆需再次对其绑定

Javascript如何实现继承？

构造继承
原型继承
实例继承
拷贝继承
原型 prototype 机制或 apply 和 call ⽅法去实现较简单，建议使⽤构造函数与原型混合⽅式

function Parent(){
this.name = 'wang';
}
function Child(){
 this.age = 28;
}
Child.prototype = new Parent();//继承了Parent，通过原型
var demo = new Child();
alert(demo.age);
alert(demo.name);//得到被继承的属性

谈谈This对象的理解

this 总是指向函数的直接调⽤者（⽽⾮间接调⽤者）
如果有 new 关键字， this 指向 new 出来的那个对象
在事件中， this 指向触发这个事件的对象，特殊的是， IE 中的 attachEvent 中的this 总是指向全局对象 Window

事件模型

冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发
捕获型事件：当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发
DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件
阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble =true
阻⽌捕获：阻⽌事件的默认⾏为，例如 click - a 后的跳转。在 W3c 中，使⽤preventDefault() ⽅法，在 IE 下设置 window.event.returnValue = false

new操作符具体⼲了什么呢?

创建⼀个空对象，并且 this 变量引⽤该对象，同时还继承了该函数的原型
属性和⽅法被加⼊到 this 引⽤的对象中
新创建的对象由 this 所引⽤，并且最后隐式的返回 this

Ajax原理

Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascript来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服务器获得请求数据
Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是ajax的核⼼机制

如何解决跨域问题?

通过jsonp跨域

var script = document.createElement('script');
script.type = 'text/javascript';
// 传参并指定回调执⾏函数为onBack
script.src = 'http://www.....:8080/login?user=admin&callback=onBack';
document.head.appendChild(script);
// 回调执⾏函数
function onBack(res) {
 alert(JSON.stringify(res));
}

document.domain + iframe跨域

//⽗窗⼝：(http://www.domain.com/a.html)
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
 document.domain = 'domain.com';
 var user = 'admin';
</script>

//⼦窗⼝：(http://child.domain.com/b.html)
document.domain = 'domain.com';
// 获取⽗窗⼝中变量
alert('get js data from parent ---> ' + window.parent.user);

nginx代理跨域
nodejs中间件代理跨域
后端在头部信息⾥⾯设置安全域名

说说你对AMD和Commonjs的理解

CommonJS 是服务器端模块的规范， Node.js 采⽤了这个规范。 CommonJS 规范加载模

块是同步的，也就是说，只有加载完成，才能执⾏后⾯的操作。 AMD 规范则是⾮同步加载模块，允许指定回调函数

AMD 推荐的⻛格通过返回⼀个对象做为模块对象， CommonJS 的⻛格通过对

module.exports 或 exports 的属性赋值来达到暴露模块对象的⽬的

js的7种基本数据类型

Undefined 、 Null 、Boolean 、Number 、String 、Biginit 、Symbol

介绍js有哪些内置对象

Object 是 JavaScript 中所有对象的⽗对象
数据封装类对象： Object 、 Array 、 Boolean 、 Number 和 String
其他对象： Function 、 Arguments 、 Math 、 Date 、 RegExp 、 Error

JS有哪些⽅法定义对象

对象字⾯量： var obj = {};
构造函数： var obj = new Object();
Object.create(): var obj = Object.create(Object.prototype);

你觉得jQuery源码有哪些写的好的地⽅

jquery 源码封装在⼀个匿名函数的⾃执⾏环境中，有助于防⽌变量的全局污染，然后通过传⼊ window 对象参数，可以使 window 对象作为局部变量使⽤，好处是当 jquery 中访问 window 对象的时候，就不⽤将作⽤域链退回到顶层作⽤域了，从⽽可以更快的访问window对象。同样，传⼊ undefined 参数，可以缩短查找 undefined 时的作⽤域链
jquery 将⼀些原型属性和⽅法封装在了 jquery.prototype 中，为了缩短名称，⼜赋值给了 jquery.fn ，这是很形象的写法
有⼀些数组或对象的⽅法经常能使⽤到， jQuery 将其保存为局部变量以提⾼访问速度
jquery 实现的链式调⽤可以节约代码，所返回的都是同⼀个对象，可以提⾼代码效率

null，undefined 的区别

undefined 表示不存在这个值。
undefined :是⼀个表示"⽆"的原始值或者说表示"缺少值"，就是此处应该有⼀个值，但是还没有定义。尝试读取时会返回 undefined
例如变量被声明了，但没有赋值时，就等于 undefined
null 表示⼀个对象被定义了，值为“空值”
null : 是⼀个对象(空对象, 没有任何属性和⽅法)
例如作为函数的参数，表示该函数的参数不是对象；
在验证 null 时，⼀定要使⽤ === ，因为 == ⽆法分别 null 和 undefined

谈谈你对ES6的理解

新增模板字符串（为 JavaScript 提供了简单的字符串插值功能）
箭头函数
for-of （⽤来遍历数据—例如数组中的值。）
arguments 对象可被不定参数和默认参数完美代替。
ES6 将promise 对象纳⼊规范，提供了原⽣的 Promise 对象。
增加了 let 和 const 命令，⽤来声明变量。
还有就是引⼊ module 模块的概念

更多ES新语法：阮一峰的ES入门：https://es6.ruanyifeng.com/#docs/style

⾯向对象编程思想

基本思想是使⽤对象，类，继承，封装等基本概念来进⾏程序设计
易维护
易扩展
开发⼯作的重⽤性、继承性⾼，降低重复⼯作量。
缩短了开发周期

如何通过JS判断⼀个数组

instanceof 运算符是⽤来测试⼀个对象是否在其原型链原型构造函数的属性

var arr = [];
arr instanceof Array; // true

isArray

Array.isArray([]) //true
Array.isArray(1) //false

constructor 属性返回对创建此对象的数组函数的引⽤，就是返回对象相对应的构造函数

var arr = [];
arr.constructor == Array; //true

Object.prototype

Object.prototype.toString.call([]) == '[object Array]'
// 写个方法
var isType = function (obj) {
 return Object.prototype.toString.call(obj).slice(8,-1);
 //return Object.prototype.toString.apply([obj]).slice(8,-1);
}
isType([])  //Array

异步编程的实现⽅式

回调函数
- 优点：简单、容易理解
- 缺点：不利于维护，代码耦合⾼
事件监听(采⽤时间驱动模式，取决于某个事件是否发⽣)
- 优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数
- 缺点：事件驱动型，流程不够清晰
发布/订阅(观察者模式)
- 类似于事件监听，但是可以通过‘消息中⼼ʼ，了解现在有多少发布者，多少订阅者
Promise对象
- 优点：可以利⽤then⽅法，进⾏链式写法；可以书写错误时的回调函数；
- 缺点：编写和理解，相对⽐较难
Generator函数
- 优点：函数体内外的数据交换、错误处理机制
- 缺点：流程管理不⽅便
async函数
- 优点：内置执⾏器、更好的语义、更⼴的适⽤性、返回的是Promise、结构清晰。
- 缺点：错误处理机制

对原⽣Javascript了解方向

数据类型、运算、对象、Function、继承、闭包、作⽤域、原型链、事件、 RegExp 、JSON 、 Ajax 、 DOM 、 BOM 、内存泄漏、跨域、异步装载、模板引擎、前端MVC 、路由、模块化、 Canvas 、 ECMAScript

sort 快速打乱数组

var arr = [1,2,3,4,5,6,7,8,9,10];
arr.sort(()=> Math.random() - 0.5)
//利用sort return 大于等于0不交换位置，小于0交换位置
// [5, 8, 4, 3, 2, 9, 10, 6, 1, 7]

数组去重操作

ES6 Set
for循环 indexOf
for循环 includes
sort

详细操作前往：https://juejin.cn/post/6844904035619700750

JS 原生拖拽节点

给需要拖拽的节点绑定 mousedown , mousemove , mouseup 事件
mousedown 事件触发后，开始拖拽
mousemove 时，需要通过 event.clientX 和 clientY 获取拖拽位置，并实时更新位置
mouseup 时，拖拽结束
需要注意浏览器边界值，设置拖拽范围

深拷贝、浅拷贝

所有的基础数据类型的赋值操作都是深拷贝
通常利用上面这点，来对引用数据类型做递归深拷贝
浅拷贝：Object.assign 或者扩展运算符
深拷贝：JSON.parse(JSON.stringify(object)) 深层递归
- 局限性：会忽略 undefined，不能序列化函数，不能解决循环引⽤的对象

详细信息更多：https://juejin.cn/post/6906369563793817607**

节流防抖

节流：每隔一段时间执行一次，通常用在高频率触发的地方，降低频率。--如：鼠标滑动拖拽
防抖：一段时间内连续触发，不执行，直到超出限定时间执行最后一次。--如：input 模糊搜索

更多节流、防抖，细节介绍：https://juejin.cn/post/6844903592898330638

变量提升

b() // call b
console.log(a) // undefined
var a = 'Hello world'
function b() {
 console.log('call b')
}

b() // call b second
function b() {
 console.log('call b fist')
}
function b() {
 console.log('call b second')
}
var b = 'Hello world'

js单线程

单线程 - 只有⼀个线程，只能做⼀件事
原因 - 避免 DOM 渲染的冲突
- 浏览器需要渲染 DOM
- JS 可以修改 DOM 结构
- JS 执⾏的时候，浏览器 DOM 渲染会暂停
- 两段 JS 也不能同时执⾏（都修改 DOM 就冲突了）
- webworker ⽀持多线程，但是不能访问 DOM
解决⽅案 - 异步

说说event loop

更详细的介绍前往：https://juejin.cn/post/6844903598573240327

描述下this

ajax、axios、fetch区别

ajax：

本身是针对 MVC 的编程,不符合现在前端 MVVM 的浪潮
基于原⽣的 XHR 开发， XHR 本身的架构不清晰，已经有了 fetch 的替代⽅案
JQuery 整个项⽬太⼤，单纯使⽤ ajax 却要引⼊整个 JQuery ⾮常的不合理（采取个性化打包的⽅案⼜不能享受CDN服务）

axios：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
⽀持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
⾃动转换 JSON 数据
客户端⽀持防⽌ CSRF/XSRF

fetch：

只对⽹络请求报错，对 400 ， 500 都当做成功的请求，需要封装去处理
默认不会带 cookie ，需要添加配置项
不⽀持 abort ，不⽀持超时控制，使⽤ setTimeout 及 Promise.reject 的实现的超时控制并不能阻⽌请求过程继续在后台运⾏，造成了量的浪费
没有办法原⽣监测请求的进度，⽽XHR可以

优化篇

SEO优化

合理的 title 、 description 、 keywords ：搜索对着三项的权重逐个减⼩， title值强调重点即可，重要关键词出现不要超过2次，⽽且要靠前，不同⻚⾯ title 要有所不同； description 把⻚⾯内容⾼度概括，⻓度合适，不可过分堆砌关键词，不同⻚⾯description 有所不同； keywords 列举出重要关键词即可
语义化的 HTML 代码，符合W3C规范：语义化代码让搜索引擎容易理解⽹⻚
重要内容 HTML 代码放在最前：搜索引擎抓取 HTML 顺序是从上到下，有的搜索引擎对抓取⻓度有限制，保证重要内容⼀定会被抓取
重要内容不要⽤ js 输出：爬⾍不会执⾏js获取内容
少⽤ iframe ：搜索引擎不会抓取 iframe 中的内容
⾮装饰性图⽚必须加 alt
提⾼⽹站速度：⽹站速度是搜索引擎排序的⼀个重要指标

server优化

减少HTTP请求，合并文件、雪碧图
减少DNS查询，使用缓存
减少Dom元素的数量
使用CDN
配置ETag,http缓存的手段
对组件使用Gzip压缩
减少cookie的大小

css优化

将样式表放在页面顶部
使用less scss表达式
使用link 不适用@import引入样式
压缩css
禁⽌使⽤ gif 图⽚实现 loading 效果（降低 CPU 消耗，提升渲染性能）
使⽤ CSS3 代码代替 JS 动画（尽可能避免重绘重排以及回流）
对于⼀些⼩图标，可以使⽤base64位编码，以减少⽹络请求。
⻚⾯头部的 <style> <script> 会阻塞⻚⾯；（因为 Renderer进程中 JS 线程和渲染线程是互斥的）
当需要设置的样式很多时设置 className ⽽不是直接操作 style

js方面

将脚本放到页面底部
将js 外部引入
压缩js
使用Eslint语法检测
减少Dom的操作
熟练使用设计模式
禁⽌使⽤ iframe （阻塞⽗⽂档 onload 事件）
⻚⾯中空的 href 和 src 会阻塞⻚⾯其他资源的加载
⽹⻚ gzip ， CDN 托管， data 缓存，图⽚服务器

webpack优化点

代码压缩插件 UglifyJsPlugin
服务器启⽤gzip压缩
按需加载资源⽂件 require.ensure
优化 devtool 中的 source-map
剥离 css ⽂件，单独打包
去除不必要插件，通常就是开发环境与⽣产环境⽤同⼀套配置⽂件导致
开发环境不做⽆意义的⼯作如提取 css 计算⽂件hash等
配置 devtool
优化构建时的搜索路径指明需要构建⽬录及不需要构建⽬录

其他优化点

为什么利⽤多个域名来存储⽹站资源会更有效？

CDN 缓存更⽅便
突破浏览器并发限制
节约 cookie 带宽
节约主域名的连接数，优化⻚⾯响应速度
防⽌不必要的安全问题

Other 篇

从⽤户刷新⽹⻚开始，⼀次js请求⼀般情况下有哪些地⽅会有缓存处理？

dns 缓存
cdn缓存
浏览器缓存
服务器缓存

常⻅web安全及防护原理

sql 注⼊原理：就是通过把 SQL 命令插⼊到 Web 表单递交或输⼊域名或⻚⾯请求的查询字符串，最终达到欺骗服务器执⾏恶意的SQL命令
- 永远不要信任⽤户的输⼊，要对⽤户的输⼊进⾏校验，可以通过正则表达式，或限制⻓度，对单引号和双 "-" 进⾏转换等
- 永远不要使⽤动态拼装SQL，可以使⽤参数化的 SQL 或者直接使⽤存储过程进⾏数据查询存取
- 永远不要使⽤管理员权限的数据库连接，为每个应⽤使⽤单独的权限有限的数据库连接
- 不要把机密信息明⽂存放，请加密或者 hash 掉密码和敏感的信息
XSS防范⽅法：Xss(cross-site scripting) 攻击指的是攻击者往 Web ⻚⾯⾥插⼊恶意 html 标签或者 javascript 代码。⽐如：攻击者在论坛中放⼀个看似安全的链接，骗取⽤户点击后，窃取 cookie 中的⽤户私密信息；或者攻击者在论坛中加⼀个恶意表单，当⽤户提交表单的时候，却把信息传送到攻击者的服务器中，⽽不是⽤户原本以为的信任站点
- ⾸先代码⾥对⽤户输⼊的地⽅和变量都需要仔细检查⻓度和对 ”<”,”>”,”;”,”’” 等字符做过滤；其次任何内容写到⻚⾯之前都必须加以encode，避免不⼩⼼把 html tag 弄出来。这⼀个层⾯做好，⾄少可以堵住超过⼀半的XSS 攻击
XSS与CSRF有什么区别：XSS 是获取信息，不需要提前知道其他⽤户⻚⾯的代码和数据包。 CSRF 是代替⽤户完成指定的动作，需要知道其他⽤户⻚⾯的代码和数据包。要完成⼀次 CSRF 攻击，受害者必须依次完成两个步骤，1.登录受信任⽹站 A ，并在本地⽣成 Cookie 。2.在不登出 A 的情况下，访问危险⽹站 B
- 服务端的 CSRF ⽅式⽅法很多样，但总的思想都是⼀致的，就是在客户端⻚⾯增加伪随机数
- 通过验证码的⽅法

用过哪些设计模式

单例模式
策略模式
代理模式
迭代器模式
发布—订阅模式

更多设计模式15种：https://www.cnblogs.com/imwtr/p/9451129.html

Node的应⽤场景

特点
- 它是一个javascript运行环境
- 依赖于chrome V8 引擎进行代码解释
- 事件驱动
- 非阻塞 I/o
- 单进程，单线程
优点
- 对于文件的读写处理效率极高
- 高并发（node最重要的优点）
缺点
- 只⽀持单核 CPU ，不能充分利⽤ CPU
- 可靠性低，⼀旦代码某个环节崩溃，整个系统都崩溃

那些操作会造成内存泄漏？

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在
setTimeout 的第⼀个参数使⽤字符串⽽⾮函数的话，会引发内存泄漏
闭包使⽤不当

谈谈你对webpack的看法

WebPack 是⼀个模块打包⼯具，你可以使⽤ WebPack 管理你的模块依赖，并编绎输出模块们所需的静态⽂件。它能够很好地管理、打包 Web 开发中所⽤到的 HTML 、 Javascript 、 CSS以及各种静态⽂件（图⽚、字体等），让开发过程更加⾼效。对于不同类型的资源， webpack 有对应的模块加载器。 webpack 模块打包器会分析模块间的依赖关系，最后⽣成了优化且合并后的静态资源。

谈谈你对gulp的看法

gulp 是前端开发过程中⼀种基于流的代码构建⼯具，是⾃动化项⽬的构建利器；它不仅能对⽹站资源进⾏优化，⽽且在开发过程中很多重复的任务能够使⽤正确的⼯具⾃动完成
gulp的核⼼概念：流
流，简单来说就是建⽴在⾯向对象基础上的⼀种抽象的处理数据的⼯具。在流中，定义了⼀些处理数据的基本操作，如读取数据，写⼊数据等，程序员是对流进⾏所有操作的，⽽不⽤关⼼流的另⼀头数据的真正流向
gulp正是通过流和代码优于配置的策略来尽量简化任务编写的⼯作
Gulp的特点：
- 易于使⽤：通过代码优于配置的策略，gulp 让简单的任务简单，复杂的任务可管理
- 构建快速利⽤ Node.js 流的威⼒，你可以快速构建项⽬并减少频繁的 IO 操作
- 易于学习通过最少的 API ，掌握 gulp 毫不费⼒，构建⼯作尽在掌握：如同⼀系列流管道

渐进增强和优雅降级

渐进增强：针对低版本浏览器进⾏构建⻚⾯，保证最基本的功能，然后再针对⾼级浏览器进⾏效果、交互等改进和追加功能达到更好的⽤户体验。
优雅降级：⼀开始就构建完整的功能，然后再针对低版本浏览器进⾏兼容

谈⼀谈你理解的函数式编程

简单说，"函数式编程"是⼀种"编程范式"（programming paradigm），也就是如何编写程序的⽅法论
它具有以下特性：闭包和⾼阶函数、惰性计算、递归、函数是"第⼀等公⺠"、只⽤"表达式"

想了解更多，移步这里：https://zhuanlan.zhihu.com/p/57708956

Vue的双向绑定数据的原理

vue.js 则是采⽤数据劫持结合发布者-订阅者模式的⽅式，通过Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布消息给订阅者，触发相应的监听回调

写个简单Loader

// 定义
module.exports = function(src) {
 //src是原⽂件内容（abcde），下⾯对内容进⾏处理，这⾥是反转
 var result = src.split('').reverse().join('');
 //返回JavaScript源码，必须是String或者Buffer
 return `module.exports = '${result}'`;
}
//使⽤
{
test: /\.txt$/,
use: [{
'./path/reverse-txt-loader'
}]
},

其他问题

⾃我介绍
⾯试完你还有什么问题要问的吗
你有什么爱好?
你最⼤的优点和缺点是什么?
你为什么会选择这个⾏业，职位?
你觉得你适合从事这个岗位吗?
你有什么职业规划?
你对⼯资有什么要求?
如何看待前端开发？
未来三到五年的规划是怎样的？
你的项⽬中技术难点是什么？遇到了什么问题？你是怎么解决的？
你们部⻔的开发流程是怎样的
你认为哪个项⽬做得最好？
说下⼯作中你做过的⼀些性能优化处理
最近在看哪些前端⽅⾯的书？
平时是如何学习前端开发的？
你最有成就感的⼀件事
你为什么要离开前⼀家公司？
你对加班的看法
你希望通过这份⼯作获得什么？