logo头像

叩首问路,码梦为生

今日头条前端散招内推面试经验总结

笔试题

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

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.comhttp://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 的解释:

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 面了;至此,技术面就全部结束了。

支付宝打赏 微信打赏

听说赞过就能年薪百万