笔试题

可能是内推的缘故，在面试之前前台工作人员给了一套前端的笔试题，然后就分配了一个小房间开始做题，虽然没有指明不可以手机搜索，但是为了保证最起码的诚信，我全程都没有看手机，完全凭自己的水平答题，虽然最后面试官把原题拿走了，但是我还是能靠记忆回想起一些题目，总结如下：

1. 替换元素和非替换元素有哪些，它们的差异是什么？

替换元素

替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。 比如：<input type="text"/>，这是一个文本输入框，换一个其他 type 的时候，浏览器显示就不一样，HTML 中的 <img>、<input>、<textarea>、<select>、<object> 都是替换元素，这些元素都没有实际的内容。

非替换元素

HTML 的大多数元素是不可替换元素，他们将内容直接告诉浏览器，将其显示出来。 比如 <p>merrier.wang</p>、<label>Merrier</label> 浏览器将把这段内容直接显示出来。

2. offsetWidth、clientWidth、scrollWidth 如何计算？

offsetWidth

• 无 padding 无滚动无 border
  • offsetWidth = clientWidth = 盒子的宽度
• 有 padding 无滚动有 border
  • offsetWidth = 盒子的宽度 + 盒子 padding 2 + 盒子边框 2 = clientWidth + 边框宽度*2
• 有 padding 有滚动，且滚动是显示的，有 border
  • offsetWidth = 盒子宽度 + 盒子 padding 2 + 盒子边框 2 = clientWidth + 滚动轴宽度 + 边框宽度 * 2

clientWidth

• 无 padding 无滚动 ：clientWidth = 盒子的 width
• 有 padding 无滚动 ：clientWidth = 盒子的 width + 盒子的 padding * 2
• 有 padding 有滚动 ：clientWidth = 盒子和 width + 盒子的 padding * 2 - 滚动轴宽度

scrollWidth

无滚动轴时：

• scrollWidth = clientWidth = 盒子宽度 + 盒子 padding * 2

有滚动轴时：

• scrollWidth = 实际内容的宽度 + padding * 2
• scrollHeight = 实际内容的高度 + padding * 2

更多关于 JS 中的宽高可以狠狠的点击这里：JS 宽高的理解和应用

3. JS 中的标准事件模型是什么？是所有的事件都会冒泡吗？不是的话请举例

DOM2 标准事件模型：每一个 DOM 元素所触发的事件都要经历三个阶段：

1. 捕获阶段
2. 目标对象本身的事件处理程序调用阶段
3. 冒泡阶段

在 IE8 以上的版本以及其他的浏览器中通过 e.stopPropagation() 方式阻止事件的冒泡；在 IE8 以下的浏览器中通过 e.cancleBubble = true 阻止事件冒泡；jQ 中的 mouseenter 和 mouseleave 也是默认不冒泡

4. CSS 选择器的优先级是什么？

!important > 内联 > id > class > 标签(p、a、div) > 通配符(*) > 浏览器自定义

更多关于 CSS 选择器的的内容：前端面试系列（4）——CSS选择器

5. IFC 是什么？它的作用是什么？

What’s FC？

FC 的全称是：Formatting Contexts，是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

IFC

IFC(Inline Formatting Contexts) 直译为”内联格式化上下文”，IFC 的 line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的 padding / margin 影响)，IFC 中的 line box 一般左右都贴紧整个 IFC，但是会因为 float 元素而扰乱。float 元素会位于 IFC 与 line box 之间，使得 line box 宽度缩短。 同个 IFC 下的多个 line box 高度会不同。IFC 中是不可能有块级元素的，当插入块级元素时（如 p 中插入 div），会产生两个匿名块与 div 分隔开，即产生两个 IFC，每个 IFC 对外表现为块级元素，与 div 垂直排列。

那么IFC一般有什么用呢？

• 水平居中：当一个块要在环境中水平居中时，设置其为 inline-block 则会在外层产生 IFC，通过 text-align 则可以使其水平居中。
• 垂直居中：创建一个 IFC，用其中一个元素撑开父元素的高度，然后设置其 vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

BFC

BFC(Block Formatting Contexts) 直译为”块级格式化上下文”。Block Formatting Contexts 就是页面上的一个隔离的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

如何产生 BFC？

1. float 的值不为 none。
2. overflow 的值不为 visible。
3. position 的值不为 relative 和 static。
4. display 的值为 table-cell, table-caption, inline-block 中的任何一个。

那BFC 一般有什么用呢？

比如常见的多栏布局，结合块级别元素浮动，里面的元素则是在一个相对隔离的环境里运行。 CSS2.1 中只有 BFC 和 IFC，CSS3 中才有 GFC 和 FFC，更多关于这些 FC 的内容可以查看：小科普：到底什么是BFC、IFC、GFC和FFC，次奥？

6. 如何实现一个自适应正方形

这个问题在我前不久的一篇文章里有总结过，可以点击这里查看

7. http://mp.toutiao.com 向 http://toutiao.com 发送请求的话，跨域了吗，能收到请求吗，是什么样的请求？

判断跨域的指标：域名、协议、端口，只要有其中一项不一致就会发生跨域

8. 请介绍一下 XSS 和 CSRF 的区别，如何防御？

XSS

XSS 全称“跨站脚本”（Cross-site scripting），是注入攻击的一种。其特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径，例如发布评论，提交含有 JavaScript 的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本。

CSRF

CSRF 的全称是“跨站请求伪造”（Cross-site request forgery），而 XSS 的全称是“跨站脚本”。看起来有点相似，它们都是属于跨站攻击——不攻击服务器端而攻击正常访问网站的用户，但前面说了，它们的攻击类型是不同维度上的分类。CSRF 顾名思义，是伪造请求，冒充用户在站内的正常操作。我们知道，绝大多数网站是通过 cookie 等方式辨识用户身份（包括使用服务器端 Session 的网站，因为 Session ID 也是大多保存在 cookie 里面的），再予以授权的。所以要伪造用户的正常操作，最好的方法是通过 XSS 或链接欺骗等途径，让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求。 严格意义上来说，CSRF 不能分类为注入攻击，因为 CSRF 的实现途径远远不止 XSS 注入这一条。通过 XSS 来实现 CSRF 易如反掌，但对于设计不佳的网站，一条正常的链接都能造成 CSRF。

防御 XSS 攻击可以通过以下两方面操作：

1. 对用户表单输入的数据进行过滤，对 javascript 代码进行转义，然后再存入数据库；
2. 在信息的展示页面，也要进行转义，防止 javascript 在页面上执行。

CSRF 攻击的防御可以通过以下两方面操作：

1. 所有需要用户登录之后才能执行的操作属于重要操作，这些操作传递参数应该使用 post 方式，更加安全；
2. 为防止跨站请求伪造，我们在某次请求的时候都要带上一个 csrf_token 参数，用于标识请求来源是否合法，csrf_token 参数由系统生成，存储在 SESSION 中。

更多关于 XSS 和 CSRF 的解释：

• 浅析XSS和CSRF攻击及防御
• 如何用简洁生动的语言理清XSS和CSRF的区别？

9. JSBridge 是什么，它的作用是什么？

在开发中我们经常需要 web 和 native 进行交互，也就是要用到经常听到的 “JSBridge”。由于我对这个东西也是停留在概念层面，所以推荐其他人的一篇文章吧：理解JSBridge

10. TCP 和 UDP 的区别，以及如何进行拥塞控制？

1. TCP 面向连接（如打电话要先拨号建立连接）；UDP 是无连接的，即发送数据之前不需要建立连接
2. TCP 提供可靠的服务。也就是说，通过 TCP 连接传送的数据，无差错，不丢失，不重复，且按序到达；UDP 尽最大努力交付，即不保证可靠交付
3. TCP 面向字节流，实际上是 TCP 把数据看成一连串无结构的字节流；UDP 是面向报文的，UDP 没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如 IP 电话，实时视频会议等）
4. 每一条 TCP 连接只能是点到点的；UDP 支持一对一，一对多，多对一和多对多的交互通信
5. TCP 首部开销 20 字节；UDP 的首部开销小，只有 8 个字节
6. TCP 的逻辑通信信道是全双工的可靠信道，UDP 则是不可靠信道

更多关于 TCP 和 UDP 的区别：TCP和UDP的最完整的区别

拥塞控制

防止过多的数据注入到网络中，这样可以使网络中的路由器或链路不致过载。拥塞控制所要做的都有一个前提：网络能够承受现有的网络负荷。拥塞控制是一个全局性的过程，涉及到所有的主机、路由器，以及与降低网络传输性能有关的所有因素。
几种拥塞控制方法：慢开始( slow-start )、拥塞避免( congestion avoidance )、快重传( fast retransmit )和快恢复( fast recovery )。 更多关于拥塞控制：TCP/IP详解–拥塞控制 & 慢启动 快恢复 拥塞避免

11. 有一无序数组，数组个数为 m，如何从这 m 个数里面找到 N 个数，使这 N 个数的和为 M；并阐述时间复杂度和空间复杂度

这个属于比较经典的 01背包问题，网上有很多关于这种问题的求解方式，基本上包括递归、动态规划、无脑循环等方法，推荐以下比较靠谱的解法：动态规划（JS）、无脑循环

一面

一面的时间很长，大概有将近一个小时的感觉，所以问的问题涉及的领域和方面也比较多，所以我就想到什么写下什么了，另外也不赋答案了，实在有点多。。

1. __proto__ 是什么意思
2. JS 实现继承的方式
3. object.defineproprety() 方法的参数和含义
4. setTimeout(func,0) 中设置延时为 “0” 的目的
5. jQuery 中对 Promise() 的 when() 方法的实现原理
6. HTTP 和 TCP 的关系
7. TCP 三次握手
8. HTTP 如何达到在下一次连接时不用再 TCP 三次握手的
9. 如何实现一个自适应正方形
10. 浏览器渲染的过程
11. 重排和重绘的触发时机和区别
12. 层叠上下文起作用的前提
13. 前端路由和后端路由的区别
14. 首屏加载完毕之后 <script></script> 代码的加载顺序
15. vue.js 的设计思想
16. 如果用 jQuery 实现双向数据绑定，应该如何实现
17. 当 content-length 过长时，应该如何传输数据
18. JS 文件中的代码执行顺序
19. 详细讲解一下 JS 中宏任务和微任务的判断机制
20. 如果有别的库中也用到了 “$”，如何解决和 jQuery 的冲突

二面

二面相对于一面来说，就简单随意了很多，问了一些项目的事情，还问了技术选型方面的问题，最后出了一道算法题让我做，我思考了大概 15 分钟，感觉真心写不出代码，就和面试官简单的讲了一下思路，面试官思考了一段时间之后就告诉我二面结束了，可以 hr 面了；至此，技术面就全部结束了。