Ladies and gentlemen，今天我们继续更新“前端面试题”系类文章。

废话不多说，直接上干货

---

1、严格模式与混杂模式如何区分

严格模式：又称为标准模式，是指浏览器严格按照W3C的标准来解析代码。

混在模式：又成为怪异模式，是指浏览器按照自己的标准来解析代码，通常用来模拟老旧版本浏览器的行为，以保证站点的正常执行。

---

2、浏览器的渲染机制

渲染机制：浏览器在获取到数据之后，会按照渲染机制将这些数据变成图形。

浏览器在获取到数据之后，会通过渲染引擎中的HTML解析器先将HTML变成一颗DOM TREE，再通过CSS解析器将CSS变成一颗STYLE TREE；这两个解析器在工作的时候都是先将原始字节（Bite）转换成字符串，再将字符串转换成节点（Nodes）,最后将这些节点转换为DOM TREE或者STYLE TREE。

在拿到DOM TREE和STYLE TREE之后，会将两棵树进行整合，得到一个RENDER TREE（渲染树）。这个时候就会进入布局算法阶段，计算每个节点的大小、位置等信息，并触发回流机制，得到一个盒子模型。有了这些盒子模型，就会进入到重绘机制，将这些盒子模型展示在页面上，变成渲染的页面。

---

3、回流机制和重绘机制

回流机制：当页面中元素的大小、位置等信息发生了变化，会引起浏览器布局改变的时候，就会进入到回流机制，对所有DOM节点进行重新计算，这样就会消耗大量的资源。

重绘机制：当页面中元素的样式发生变化，就会引起重绘机制，将元素重新渲染到页面中。回流一定会引起重绘，但是重绘不一定引起回流。例如，当页面中元素的背景色发生变化，这个时候大小、位置并没有变化，不影响页面的布局，只需要重绘页面就行。

---

4、浏览器的缓存机制

浏览器的缓存机制可以分为强缓存和协商缓存：

强缓存：我们第一次访问页面的时候执行的就是强缓存，浏览器在获取到服务器的数据之后，会在数据中添加一个时间戳信息，并将数据强制缓存到浏览器中。被添加的时间戳有两种形式，一种是expries、一种是cache-control，两种都是用来判断数据是否过期，前者是个绝对时间，后者是个相对时间，有后者的时候优先使用后者。

协商缓存：当我们第二次访问页面的时候，浏览器会先到缓存中查询数据资源是否过期。如果没有过期，就执行强缓存中的数据资源；如果过期了，就向服务器发送一个请求来执行协商缓存。这个请求的头部中通常会包含一个ETag字段来表示当前数据的唯一标识，一个last-modified字段来表示数据最后一次更新的时间。服务器在收到这个请求之后，会对数据资源进行判断，看看当前的资源是否真的过期了，如果没有过期就继续执行浏览器强缓存中的数据，如果过期了，就将最新的数据资源进行返回。

---

5、正向代理和反向代理

正向代理：在客户端和目标服务器之间架设一个代理服务器，客户端的请求会被发送到代理服务器上，通过代理服务器再发送到目标服务器。这样目标服务器就分不清到底是谁请求的资源，比如翻墙就是一种正向代理。

反向代理：服务器在返回数据资源的时候，先将数据资源返回到代理服务器上，再由代理服务器将资源返回给客户端。这样就可以避免一些同源机制引起的跨域问题。比如我们开发联调的时候配的反向代理。

---

6、权限控制

权限控制可以从三个层面进行：路由、菜单、按钮。

路由：我们将路由规则分为静态路由和动态路由。静态路由就是不需要权限所有用户都能看到的页面路由，比如：登录页面、404页面等。动态路由是需要权限控制的，通常可以在用户信息接口中返回，我们拿到当前用户的权限信息之后对动态路由进行filter过滤，将有权限的路由与静态路由合并到一起，作为路由规则使用。

菜单：与路由相类似，我们也是在接口中获取，并声明一个菜单数据，在渲染菜单的时候遍历这个数组，来实现菜单的控制。

按钮：我们通常封装一个全局的自定义指令。在指令中传入一个字符串标识，这个标识是与这个按钮有映射关系的。我们可以在自定义指令的inserted钩子函数中增加逻辑，如果这个标识在用户的权限数组中，就展示；如果没有，就销毁或者隐藏按钮元素。

---

7、RBAC权限设计

RBAC权限设计模式又称为基于角色的访问控制，包含三个要素：人员、角色、权限。我们再系统中划分若干个角色，给不同的角色赋予不同的权限，再给不同的用户添加不同的角色。这样就实现了用户与角色的挂钩。这种设计模式有几个重要的安全原则：

最小权限原则：角色所赋予的权限，应该是这个角色能够完成工作的最小权限。

角色相互独立原则：角色与角色之间的权限应该是相互独立、不重复的。

权限分层原则：权限应该要根据系统进行分层，例如系统级权限、模块级权限。

---

8、地址栏敲回车会发生什么

我们再浏览器地址栏输入域名之后，浏览器会先到本机查找有没有与域名对应的ip映射关系。如果没有再向DNS服务器发送请求，获取这个域名对应的IP地址，并向这个IP地址所指向的服务器发送请求。

服务器在收到请求之后，会对请求进行处理，并将处理后的结果进行返回。浏览器在拿到返回数据之后，渲染引擎会通过HTML解析器和CSS解析器将数据解析成DOM TREE和STYLE TREE，再将这两个树合并成RENDER TREE。这个时候就得到了渲染的节点树，通过回流机制与重绘机制将这些节点渲染为页面。

---

9、自定义指令

我们在vue中会将一些逻辑封装为自定义指令，以便更方便的时候。例如：在src下的main.js中通过vue.directive的方式注册一个全局的自定义指令，并在标签中通过v-指令明的方式使用。

自定义函数中有两个入参，一个是el，一个是binding。前者是元素DOM，后者是指令参入的参数。自定义指令通常有4个钩子函数：

bind函数：指令与元素第一次绑定的时候触发，只执行一次

unbind函数：指令与元素解绑的时候触发，只执行一次

inserted函数：元素插入到指定节点的时候触发，只执行一次（按钮权限指令）

update函数：数据放生变化更新的时候触发，会执行多次

---

10、垃圾回收机制

引用计数法：当一个变量被引用的时候，我们就给他的标识+1；当它不被引用的时候，就给它的标识-1。这样的话，所有标识>0的变量就是被引用的变量，不会被回收清除；标记=0的就会被回收清除。但是这样有个问题，比如两个变量相互引用的时候，两个永远不会被清除。

标记清除法：我们将全局变量作为根节点，当其余变量被根节点引用的时候，就给他添加一个标签，这些变量有标签就是被引用的，不会被清除。没有被添加标签的元素，就是没有被引用，可以被回收清除。