前端跳槽面试必备技巧-笔记

面试准备
分析职位要求等

一面/二面
面试技巧
 准备要充分（基础知识）
 知识要系统（前端知识碎）
 沟通要简洁（理论知识 一语中的）
 内心要诚实（不会可以请教面试官）
 态度要谦虚（不要嘚瑟）
 回答要灵活（不要把话说满 掌握多少就说多少）

面试模拟

页面布局

解决方案:

1. 浮动
2. 绝对定位
3. Flexbox
4. 表格布局
5. 网格布局

延伸：

1. 这五种方案各自有什么优点和缺点？
2. 假设高度未知，以上五种方案哪个还适用？哪个已经不适用了？
3. 这五种方案的兼容性如何？应用到业务中，最优你会选择哪一个？

问题1：这五种方案各自有什么优点和缺点？
浮动：
缺点：
脱离文档流，需要清除浮动。如果处理不好，会带来很多问题。
优点：
兼容性比较好。如果清除浮动处理地好，浮动与周边元素的关系处理地好，兼容性比较好。

绝对定位：
优点：
快捷，配合js使用非常快，不容易出问题。
缺点：
脱离文档流，导致子元素也脱离文档流，实使用性比较差。
Flexbox:
解决了上述两个布局的不足，比较完美。移动端一般用flexbox布局。

表格布局：
缺点：
历史上：麻烦，操作繁琐，对SEO不够友好。
比如中间单元格高度超出时，两边的单元格也会调整到同样的高度。（有些情况不需要）
优点：
三栏布局用表格布局轻易解决，兼容性好，pc上IE8不支持flex，此时可以用表格布局

网格布局：
新出的技术
对新技术有追求，主动学习的意识

问题2：假设高度未知，以上五种方案哪个还适用？哪个已经不适用了？
浮动：不作处理不能用了

提问：为啥下面中间的内容超出来了
答：浮动的基本原理，中间内容向左浮动的时候被左侧的红块挡住了
内容超出以后，在下面排的时候，左侧没有了遮挡物（没有float的元素），就在左侧渲染了
提问：怎么让黄色继续向下延伸，不影响红色和蓝色？
答：创建BFC（CSS盒模型中解说）

绝对定位：超出，超出部分背景还是黄色

表格布局和flexbox布局一样，中间被撑高，两边也被撑到相同的高度

网格布局：超出，超出部分无背景

综上所述：浮动、绝对定位、网格都不能用
表格布局、flexbox可以继续使用

问题3：这五种方案的兼容性如何？应用到业务中，最优你会选择哪一个？

页面布局小结：
 语义化掌握到位（不要通篇div）
 页面布局理解深刻（每个原理，代码理解清楚）
 CSS基础知识扎实
 思维灵活且积极上进（方案多）
 代码书写规范（缩进，命名）

页面布局的变通
三栏布局
 左右高度固定，中间自适应(五种)
 上下高度固定，中间自适应(4种方法,除了浮动不行)
两栏布局
 左宽度固定，右自适应(五种)
 右宽度固定，左自适应(五种)
 上高度固定，下自适应(4种,除了浮动不行)
 下高度固定，上自适应(4种,除了浮动不行)

---

CSS盒模型
题目：谈谈你对CSS盒模型的认识
基本概念：标准模型+IE模型
标准模型包括：content padding border margin
标准模型和IE模型的区别：计算宽度和高度的不同（怎么不同 怎么计算）
CSS默认的模型是哪一种，如何设置成类外一种
JS如何设置获取盒模型对应的宽和高（几种方法）

问题1：基本概念：标准模型+IE模型

问题2：标准魔性和IE模型区别
 标准模型和IE模型计算宽高是不同的
 标准模型的宽高就是content的宽高
 IE模型的宽高是content+padding+border

问题3：CSS如何设置这两种模型

问题4：JS如何获取盒模型对应的宽和高
CSS三种写法：内联CSS、页级CSS、外联CSS
内联CSS

页级CSS

外联CSS

---

dom.style.width/height
只能取出内联样式的宽和高，外联和页级的样式取不出来
dom.currentStyle.width/style
计算的是浏览器渲染出来的样式，所以以上三种CSS写法都能取出
缺点：只支持IE浏览器
window.getComputedStyle(dom).width/height
跟上面一样，但是能兼容火狐和谷歌浏览器
dom.getBoundingClientRect().width/height
也是能拿到及时渲染的样式，以viewport（视窗）左顶点为基准，能得到width、height、top、left
知道以上四种的区别，以及哪个通用性更强

问题5：实例题（根据盒模型解释边距重叠）

父元素套了一个子元素，子元素高度为100px，子元素与父元素上边距的距离是10px

问题6：BFC（边距重叠解决方案）
BFC的基本概念（类似的IFC）
Block Formatting Context，BFC 块级格式化上下文
BFC的原理（BFC的渲染规则）

1. 在BFC这个元素垂直的方向上边距不会发生重叠
2. BFC区域不会与浮动元素的box重叠（清除浮动）
3. BFC在页面中是一个独立的容器（外面的元素不会影响里面的，里面的也不会影响外面的）
4. 计算BFC高度的时候，浮动元素也会参与计算

如何创建BFC

1. Float值不为none(设置浮动)
2. Position的值不是static也不是relative（比如设置成fixed/absolute）
3. Table-cell也能创建
4. Overflow:hidden/auto

BFC的使用场景（见代码）

1. 清除浮动（子元素是浮动元素，也会参与高度计算）
2. 自适应两栏布局（BFC区域不会与浮动元素的box重叠）
3. 防止垂直margin合并(在BFC这个元素垂直的方向上边距不会发生重叠
   a) )

---

DOM事件

 基本概念：DOM事件的级别（不会直接问，会问，请用DOM2中的事件……）
 DOM事件模型（捕获和冒泡）
 DOM事件流
 描述DOM事件捕获的具体流程
 Event对象的常见应用
 自定义事件

事件级别：

 False指定了冒泡还是捕获，false是冒泡阶段触发
 DOM2中IE是attachEvent
 DOM3增加了一些事件类型，键盘、鼠标

事件模型：

事件流
比如：用户点击了鼠标左键，怎么传到页面上，怎么响应。

目标阶段：比如按钮

描述DOM事件捕获的具体流程

取body标签可以用document.body
取html标签（document.html取不到），用document.documentElement取
提问：冒泡的具体流程

Event对象的常见应用

第一个：阻止默认事件（a标签不跳转）
第二个：阻止冒泡
第三个：比如一个按钮注册了两个事件ab，现在想要在点击时，执行a，不执行b，在a的响应函数中加入此句就可以了
第四个：当前绑定的事件，比如代理中的父级元素
第五个：事件委托（代理），当前点击的是哪个标签

自定义事件（模拟事件）

Event和CustomEvent都可以用来自定义事件
唯一的区别：Event只能定义一个名字
CustomEvent可以在后面再加一个object，定义其他参数（自学）

---

HTTP协议


简单快速：每个资源固定，访问只要输入统一资源符（uii）
灵活：可以完成不同数据类型的传输
无连接：连接一次就断掉，不会保持连接
无状态：客户端请求服务端后，下次再过来无法区分，没有保存状态（无法确定联机者身份）


请求行：http方法、页面地址、http协议以及版本
请求头：key ：value值，告诉服务端我要哪些内容，要注意什么类型
空行：分割请求头和请求体
请求体：


第一行：状态行
其他：响应头
空行和响应体：没体现

记住3-4个
记住1,3,5,6,9

206：比如：视频、音频文件很大
301：永久重定向
302：临时重定向

http1.1才支持持久连接

第二个是管线化

特点（第1点）和原理
第1,2,3要记住

---

原型链

1. 创建对象有几种方法
2. 原型、构造函数、实例、原型链
3. Instanceof的原理
4. New运算符

创建对象有几种方法
第1种方式：字面量
第2种方式：通过构造函数
第3种方式：Object.create方法

这里有一个疑问：为什么o4跟其他三个不一样，没有name属性？
答：因为o4是通过原型链创建的，p是o4原型对象，o4.proto===p的结果是true.
name属性是在o4的原型对象p中，所以也能被o4继承。o4.name=p

原型、构造函数、实例、原型链

Instanceof的原理

原理:判断实例对象__proto__属性与构造函数的prototype属性是不是同一个引用
Instanceof沿着原型链往下走，往下判断

New运算符

1. 用Object.create创建一个新对象，这个对象继承自func.prototype
2. 构造函数func被执行，this指向新创建的对象o，
3. 如果构造函数返回的结果k，是一个对象，那么就返回k；如果构造函数没有返回对象，则返回o
   

---

面向对象
提问方式1：直接提问面向对象的相关内容？（下面列的）

提问方式2：一个对象继承自某个类，问它的原型链

继承的本质是原型链
JS的继承有几种方式，这几种方式各有什么优缺点？
面向对象—》继承—》继承方式—》不同点（原型链的掌握）

继承方式：
（1） 借助构造函数实现继承

将父级Parent1构造函数的this，指向子函数Child1
缺点：Parent1原型链中的属性和方法没有被Child1继承
（2） 借助原型链实现继承

弥补了“借助构造函数实现继承”的不足，可以继承父类原型对象中的方法
将Child2的原型对象指向Parent2的实例
缺点：如果有两个实例，改变一个实例的属性，另一个也会改变（原因：两个实例共用原型对象）
缺点2：无法判断c2是由Child2直接实例化而来的，还是Parent2直接实例化来的。

（3）组合继承（以上两种组合）

Parent3.call(this);//继承了父类构造体内的属性和方法
Child3.prototype = new Parent3();//继承了父类原型对象的属性和方法
可以解决以上两种方式的问题，既可以继承父类原型中的方法，两个实例也不会互相影响
缺点：在创建一个Child3实例时，Parent3这个构造函数被执行了两次
（4）组合继承的优化

Parent4.call(this);已经实现了继承构造体内的属性和方法
Child4.prototype = Parent4.prototype;只需要能够继承父类原型对象中的属性和方法就可以了，可以实现。
缺点：

第一行代码的执行结果都是true，因此无法判断s3是由Child4直接实例化而来的，还是Parent4直接实例化来的。
第二行代码：执行结果是Parent4。
因为
Parent4.prototype中的constructor属性指向Parent4
而Child4.prototype 等于Parent4.prototype;
所以Child4.prototype的constructor属性也指向Parent4

（5）组合继承的优化2


通过Object.create创建一个中间对象，将父类和子类的原型对象分割开来
并且中间对象的原型对象是父类的原型对象Parent5.prototype

O4的原型对象就是p

加上这句，指定Child5原型对象的constructor对象指向Child5
提问：为什么不能在Child4.prototype = Parent4.prototype;后面加上上面这一句？
答：因为Child4.prototype和Parent4.prototype指向同一个对象，如果改变Child4.prototype的constructor属性，父类的constructor属性也会改变，就影响父类了。

第一行都是true
第二行是Child5

面试的时候几种都写下来，可以主动提出说说缺点

---

通信

什么是同源策略及限制（3种）
前后端如何通信（ajax及其他）
如何创建Ajax（不用第三方库，原生代码写）
跨域通信的几种方式

什么是同源策略及限制

源：协议、域名、端口（默认80）
三个中有一个不一样就不同源

前后端如何通信

Ajax：只能在同源情况下通信
WebSocket：不受同源策略的限制
CORS：支持跨域通信，也支持同源通信

如何创建Ajax

兼容性处理：高级浏览器才支持，老版IE不支持（XMLHttpRequest只有高级浏览器中支持，低版本中要用xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);）
事件的触发条件：
事件的触发顺序：

跨域通信的几种方式

Hash是url中#后面的东西
Hash改变，页面不会刷新
Search改变是会刷新页面的，所以search不能做快捷通信

postMessage是html5中实现跨域通信的方式
CORS:可以理解为支持跨域通信的ajax
五种都要说，不能遗漏

JSONP
原理：利用Script标签的异步加载来实现的
www.imooc.com的script标签的地址域名不是www.imooc.com，就是利用这个原理

各种跨域通信方式：https://www.cnblogs.com/qianguyihao/p/8523576.html
面试会问：JSONP的原理是什么？怎么实现的？
在CORS和postMessage以前，我们一直都是通过JSONP来做跨域通信的
JSONP的原理：
通过

给服务端传递一个回调的名：callbackName
Window[callbackName]定义一个全局的函数
createScript创建一个script标签
script.onload监听脚本的响应事件，加载完成onload

---

Hash

postMessage

webSocket

不会让写代码，知道就行
CORS:

---

安全




 用户是网站A的一个注册用户（有用户名密码），
 用户登录网站A，网站A核查用户名密码是否正确，如果正确，下发cookie，保存在用户浏览器中，
 用户之后又访问了网站B，B中有一个指向网站A（存在漏洞的接口）的引诱点击（链接），
 用户点击这个链接，就会访问网站A，浏览器觉得是网站A，就会自动上传cookie
 网站A核实是合法用户，就执行了该接口的动作
比如：新浪微博出现CSRF攻击，多了很多粉丝
能被攻击的两大因素：
 用户必须在网站A登录过，如果没登录过，A会提醒登录
 网站A中的某一个接口存在漏洞

Token验证
上面在用户点击“引诱点击”时只是自动上传了cookie，没有手动上传一个token
Token是访问或者注册网站A时，服务器向本地发送的，用户在访问网站A各个接口的时候，如果没有带Token，不会通过验证
如果像上面那样点击“引诱点击”，只会传cookie，不会传token，所以就避免了攻击

Referer验证
Referer页面来源，
服务器判断来的页面是不是自己站点下的页面，如果是的话，执行动作，如果不是，一律拦截
隐藏令牌
与Token有点像，但是是隐藏在比如说http的头中，不会放在链接上，就会比较隐蔽

---

不需要任何的登录认证
核心原理就是向用户的页面注入脚本，

对比两者的差别：
XSS向页面注入js运行，js函数体内放想要做的事情
CSRF是利用网站本身的漏洞，执行网站的接口（依赖于用户登录）

算法

快速排序：
算法步骤：
（1） 在数列中取出一个数作为“基准”
（2） 分区过程：将比“基准”大的数放到基准的右边，小的放到左边
（3） 对左右区间重复第二步，直到各个区间只有一个数

选择排序：
通俗来说就是你们中间谁最小谁就出列，站到队列的最后边，然后继续对着剩余的无序数组说你们中间谁最小谁就出列，站到队列的最后边，一直到最后一个，继续站到最后边，这样数组就有了顺序，从小到大。


希尔排序

---

二面/三面

浏览器、js引擎

渲染机制：浏览器是怎么渲染页面的
JS运行机制：JS引擎和浏览器怎么交互的
页面性能：卡不卡，流畅不流畅
错误监控：监控错误的能力

渲染机制

DTD:告诉浏览器我是什么文档类型，浏览器根据这个选择什么样的引擎来渲染它
DOCTYPE:直接告诉浏览器什么是DTD，告诉浏览器当前的文档是什么文档类型

DOCTYPE有几种，3种
Html5, html4.01 Strict, html4.01 Transitional
不用详细记住，知道区别就行了

 HTML经过HTML Parser转换成DOM Tree
 CSS经过CSS Parser转换成Style Rules (CSSOM)
 DOM Tree和Style Rules经过整合得到Render Tree(要渲染的树的结构出来了)
 Render Tree不知道html内容，位置
 Layout知道要渲染的DOM的位置、宽高等
 Painting画图
 Display能够看到
面试：组织语言，说出来

随便说两条

如何尽量减少repaint？
不要将多个节点添加到浏览器上，（repaint多次）
可以将多个节点放在一个document片段中
一次将document片段放入浏览器中（repaint一次）

---

JS运行机制

单线程 异步 异步队列
同步任务 alert
异步任务 setTimeout
先同步再异步

输出A

还是只输出A
While是同步任务

连续输出4个4
i=0时，将setTimeout交给定时器
i=1时，将setTimeout交给定时器
i=2时，将setTimeout交给定时器
i=3时，将setTimeout交给定时器
for的时间小于1s
此时i=4
定时器1s时间到了，将console.log(i)放入异步队列，轮询机制将该语句放入主线程执行
所以一共输出4个4

页面性能

a标签在高级浏览器中默认打开了DNS预解析，https很多浏览器默认关闭DNS预解析
第一句话：强制打开a标签的DNS预解析
第二句话：放到head里可以实现预解析

动态脚本加载（动态创建节点）：创建script标签，再添加到head中
defer,asyns在创建script标签时，添加这两个属性

强缓存：浏览器问都不问服务器，如果本地缓存有，直接用本地缓存的
协商缓存：本地有，浏览器不确定要不要用；与服务器协商一下，能不能用
Expires:绝对时间，服务器和浏览器时间有偏差
Cache-Control:相对时间，在拿到资源3600s内不会再去请求服务器
如果服务器两个时间都发了，以后者的时间为准

---

Last-Modified If-Modified-Since:同一个值
上次服务器下发的，请求服务器时带的（服务器要对比）
如果时间变了，但是内容没有变，Etag可以解决
Etag (hash值) 服务器下发给浏览器的
如果过了强缓存的时间，浏览器问服务器能不能用，服务器在http中加一个key:value值，If-None-Match是key，value就是Etag

---

提问：跟浏览器缓存相关的http头有哪些？
就是上面几个加粗的关键词

---

错误监控
两种问法：如何监测JS错误？
如何保证你的产品质量（还是错误监控）？



Window.onerror只能捕获即时运行错误，不能捕获资源加载错误
资源加载错误不会冒泡，比如script标签出现错误，不会冒泡到window
Performance.getEntries获取所有已加载资源的加载时长，间接拿到没有加载资源的错误
Error事件捕获：虽然冒泡不行，但是捕获可以
延伸问题：




请求已经发送出去了

---

三面/四面

项目

---

终面

---

课程总结