前端面试偏僻考题 | 掘金技术征文

__大大怪将军__
2,944 阅读19分钟

前言

下列题目是我看几十篇面经，挑出来的我不会的考题。因为我也参加春招这么久了，热门考题差不多都看过了，市面上也有许多的，我就分享一些我乍一眼不会的或者可能说不清的题目吧！答案是自己的百度然后总结的，可能会有些偏差，欢迎指正。

正文

JavaScript

  1. 弱类型语言的优缺点
  1. 和强类型语言相比，它允许隐式类型转换，这是一把双刃剑，要是你能一眼看出来发生了啥隐式转换，这就没啥
  2. 编码时很方便，在开发时不需要过分关注数据类型的问题，可以提升逻辑开发效率。比如强类型语言在数据数据请求时就要命了，需要定义数据类型或者接口，数据结构处理起来真的很难顶
  3. 内存利用率不如强类型语言，会因为要考虑通用而多分配些内存空间，而强类型则是规定好了的
  1. addEventListener的第三、四个参数的意义

俩个参数都可以指定时间回调的时机，true -> 时间捕获时执行，默认为false -> 事件冒泡时执行，谁写在前面谁生效(一个是Object，一个Boolean类型，位置随意，写在前面的生效)。 其他详见，MDN

3. window.onload和document.ready区别

  1. onload 是所有资源包括图片都加载完才执行
  2. document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行
  1. web安全，csrf token能存储在cookie里吗？

csrf token是用来应对csrf攻击的一种方法。csrf攻击简单来说就是黑客拿到你cookie,伪造登录状态，所以叫做跨站请求伪造。这么想的话，应该是不可以才对，但是答案是可以，可以去看看这篇文章,放在cookie里的前提就是cookie是http-only，也就是只能在http下传输,js脚本将无法读取到cookie信息。

  1. 从底层谈谈map数据结构的设计。如果容量不够了怎么办，扩容过程中可能会耗费比较多的时间，如果在扩容时要访问怎么办

底层如何实现达到O(1)的增删查

  1. 数组加链表来存储数据的
  2. 通过一个hash函数把键值转换成hashCode
  3. 把hashCode转换成数组索引,即和数组长度做与运算hashCode & (length - 1)(求模也行，但是效率不如与运算高)。
  4. 冲突了咋整，冲突了就加链表

扩容

map的默认大小是16，loadFactor的默认值为0.75，即默认情况下map中的数组使用率达到16 * 0.75就进行扩容操作。数组扩容的时间复杂度是O(n)的，然后还要重新计算hashCode与数组索引的对应关系，效率太低了，所以如果事先知道大小可以赋初始值new Map(1000)

为啥默认长度是2的幂次方

因为hashCode & (length - 1)做映射时，当length是2的幂次方,length-1的二进制全为1，能很好的减少冲突，所以扩容一般也是翻倍扩容

  1. 错误捕获
  1. 同步错误捕获 同步错误捕获用try...catch()就行了
  2. 异步错误捕获 异步错误捕获比如说回调函数发生了错误，在外界是捕获不到这个错的，只能在回调函数内部捕获错误;如果是promise的话，promise提供了一个catch来捕获错误，可以捕获reject或语法错误。async await的错误捕获和同步错误一样使用try...catch捕获就行了
  3. 错误事件和react中的错误捕获 当然不要忘记了还有onerror事件和react-16新增的错误边界，即增加了一个componentDidCatch(error, info)这个新的生命周期方法
  1. mvc和mvvm的区别，react是什么架构？

来个阮一峰老师的图，一切都明白了!

那来分析分析react它是啥架构：个人认为，react强调单向数据流State --> View --> New State --> New View，非要说的我觉得是m-v架构，状态驱动视图。

  1. ES5 对象的扩展、密封和冻结
  1. Object.preventExtensions阻止对象扩展，让一个对象变的不可扩展，也就是永远不能再添加新的属性
  2. 密闭的对象seal():不可扩展，而且已有成员[ [Configurable] ]特性将被设置为false,不能删除属性和方法，不能使用Object.defineProperty()把数据属性修改为访问器属性。
  3. 冻结的对象freeze():既不可扩展又是密封的。而且对象数据属性[ [Writable] ]特性会被设置为false。如果定义[ [Set] ]函数，访问器属性仍然是可写的。
  1. ==、===的区别

除了特殊情况外，== 的比较会让让俩边发生类型转换达到相识，再进行比较。而 === 则是直接比较，不进行类型转换，值不等返回false,类型不同返回false，引用类型值比较地址

== 的转换规则

  1. 如果有一个是布尔型，将他们转换成数字，0 || 1
  2. 如果一个字符串，一个数字，则将字符串转换成数字
  3. 如果俩个是对象，则比较地址
  4. 如果一个是引用类型变量，一个不是，则调用引用类型变量的valueof()方法，或者toString()方法

其他规则

  1. null 和undefined 是相等的
  2. 要比较相等性之前，不能将null 和 undefined 转换成其他任何值
  3. 如果有一个操作数是NaN，则相等操作符返回 false ，而不相等操作符返回 true。重要提示：即使两个操作数都是NaN，相等操作符也返回 false了；因为按照规则， NaN 不等于 NaN
  4. 如果两个操作数都是对象，则比较它们是不是同一个对象，如果两个操作数都指向同一个对象，则相等操作符返回 true；否则， 返回false
  1. Array.sort()内部算法

sort使用的是插入排序和快速排序结合的排序算法。数组长度不超过10时，使用插入排序。长度超过10使用快速排序。在数组较短时插入排序更有效率。回答了这个就要做好，被问到时间复杂度的计算，快排的原理的准备

  1. ES5的继承和ES6的继承的区别
  1. ES5的继承是通过prototype来基础方法，然后创建子类实例，将父类属性添加到this上Parent.apply(this)
  2. ES6的继承机制实质上是先创建父类的实例对象this(所以必须先调用父类的super()方法)，然后再用子类的构造函数修改this。具体为ES6通过class关键字定义类，里面有构造方法，类之间通过extends关键字实现继承。子类必须在constructor方法中调用super方法，否则新建实例报错。因为子类没有自己的this对象，而是继承了父类的this对象，然后对其调用。如果不调用super方法，子类得不到this对象。
  1. 为啥script标签的src请求不会跨域，但是ajax发的异步请求会跨域

同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。 同源策略控制不同源之间的交互，例如在使用XMLHttpRequest 或 标签时则会受到同源策略的约束。这些交互通常分为三类：

  1. 跨域写操作（Cross-origin writes）一般是被允许的。例如链接（links），重定向以及表单提交。特定少数的HTTP请求需要添加 preflight。
  2. 跨域资源嵌入（Cross-origin embedding）一般是被允许比如img的src、style的href、script的src。
  3. 跨域读操作（Cross-origin reads）一般是不被允许的，但常可以通过内嵌资源来巧妙的进行读取访问。例如，你可以读取嵌入图片的高度和宽度，调用内嵌脚本的方法，或availability of an embedded resource.
  1. http长短连接，以及长连接怎么知道数据是否传完了

长短连接

  • 短连接就是每次的建立数据连接->数据传输->关闭连接
  • 长连接就是建立连接->传输数据->保持连接->数据传输->关闭连接
  • 优点：避免了建立/释放连接的开销
  • http1.1默认设置Connection:keep-alive，表示支持持节连接

如何知道数据已经传输完了

短连接在发送完所请求的数据后就关闭了连接，这样客户端会读取到EOF(-1)表示数据传输完了

  1. content-length
  • 顾名思义，它的值的含义就是实体长度和传输长度，当二者相等时表示数据传输完毕了;只适合用于> 服务端清楚知道返回内容的大小，比如客户端请求一个静态页面啊、一张图片啊之类的
  1. Transfer-Encoding
  • 如果是动态页面，服务器预先不知道内容大小，就使用Transfer-Encoding：chunk模式来传输数据。即一边产生数据，一遍发送给客户端
  • chunk模式就是把数据分成一块一块的发送，数据由一个个的chunk串联而成，用一个表明长度为'o'的chunk来表示结束
  1. 不含消息体的消息(1xx、304等响应消息),以空行结束
  2. 服务器关闭连接，确定消息长度

常见HTTP消息头

  1. Connection:
  • close（告诉WEB服务器或者代理服务器，在完成本次请求的响应后，断开连接，不要等待本次连接的后续请求了）。
  • keepalive（告诉WEB服务器或者代理服务器，在完成本次请求的响应后，保持连接，等待本次连接的后续请求）。
  1. Keep-Alive：如果浏览器请求保持连接，则该头部表明希望 WEB 服务器保持连接多长时间（秒）。例如：Keep-Alive：300
  2. expire、etag、cacheControl、last-modified、if-no-match、if-modified-since HTTP缓存那一套
  3. content-type: 服务端以何种方式解析客户端传来的数据
  • Content-Type: application/json 对于axios，post的时候axios.post(url,{a:1,b:2})，第二个参数是对象的时候，默认是这个类型
  • Content-Type: application/x-www-form-urlencoded 对于axios，post的时候let data = {a:1,b:2}; axios.post(url,qs.stringify({ data }))，第二个参数是字符串的时候，默认是这个类型
  • Content-Type: multipart/form-data 对于axios，post的时候let data = new FormData(); data.append('a',1'); data.append('b',2); axios.post(url,data)，参数是formData类型的时候，默认是这个类型，如果用form自带的action提交，默认是这个类型
  1. Content-Length： WEB 服务器告诉浏览器自己响应的对象的长度
  2. Transfer-Encoding: WEB 服务器表明自己对本响应消息体（不是消息体里面的对象）作了怎样的编码，比如是否分块（chunked）。例如：Transfer-Encoding: chunked
  1. 怎么收集requestAnimationFrame的执行事件，假如掉帧了你怎么办？

先记录一下开始事件，调用100次后在记录一次事件，相减 / 100求出平均时间，这样减少了干扰，但是没有考虑掉帧的情况 应该收集出100段有效时间，什么是有效时间呢，就是requestIdleCallBack执行了说明这一帧是有效的可以收集，这样收集100帧，即可求出requestAnimationFrame。

  1. target和currentTarget你知道区别嘛？

这其实是事件委托那一套，target是事件触发的目标元素，而eventTarget则是绑定了事件的元素，即目标元素的父节点或者祖先节点

  1. react合成事件是注册在哪里，你还知道些什么？事件代理？

和原生事件绑定的区别

  • react的事件并没有绑到具体的节点，而是绑到了document下，而原生事件则是绑到了具体的节点
  • 原生事件（阻止冒泡）会阻止合成事件的执行，合成事件（阻止冒泡）不会阻止原生事件的执行
  • 节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先合成事件执行，然后再往父节点冒泡

为啥要有自己的一套事件机制

  1. 减少内存消耗，提升性能，不需要注册那么多的事件了，一种事件类型只在 document 上注册一次
  2. 统一规范，解决 ie 事件兼容问题，简化事件逻辑
  3. 对开发者友好

合成事件帮你干了些啥事

  1. 对原生事件的封装 reat会根据不同的事件类型使用不同的合成事件对象，原生事件对象放在了evet.nativeEvent中
  2. 对某些原生事件的升级和改造 react并不只是处理你声明的事件类型，还会额外的增加一些新的事件，比如你再react中监听onChange事件，它会同时帮你注册blur、change、click、focus等等事件，你可以实时获得其中的内容，如果你只注册了一个原生的onChange事件的话，只有在失去焦点时这个事件才能触发。
  1. 不同浏览器事件兼容的处理

ie浏览器没有addeventListener，所以在事件注册的时候家里一个判断，没有addEventListern就是使用attachEvent

  1. 为啥0.1 + 0.2 ！== 0.3，原理你知道不？

这个推荐去看这篇文章，我就看了才会的，然后就被问到了。

  1. react hooks的capture value特性，怎么解决
  1. react页面卸载周边问题

路由跳转、页面刷新或者关闭会导致页面卸载

如何在页面卸载时弹出提示框？

用户跳转页面时弹出提示框

使用路由守卫，但是此时的页面跳转只能使用link标签了

import {Prompt} from 'react-router-dom';
const Editor=()=>{
    return (
        <div>
          <Prompt
            when={true}
            message={location => '文章要保存吼，确定离开吗？'}
          />
        </div>
    )
}

用户关闭页面时弹出提示框

监听beforeUnload事件，先阻止默认事件发生，然后弹出提示框

useEffect(() => {
    const listener = ev => {
        ev.preventDefault();
        ev.returnValue='文章要保存吼，确定离开吗？';
    };
    window.addEventListener('beforeunload', listener);
    return () => {
        window.removeEventListener('beforeunload', listener)
    }
}, []);

CSS

  1. CSS计数器

用于写一个目录结构：

  1. 定义一个计数器counter-reset:section(可定义初始值)
  2. 在需要累加的地方定义一下 counter-increment: section(可定义增量)
  3. 展示 counter(section, '.')(counter可不定义分隔符，counter必须定义)
  4. counter和counters的区别就是显示时是否显示嵌套
<style type="text/css">
  #demo1 ol {
    counter-reset: section;
    list-style-type: none;
  }
  #demo1 ol li {
    counter-increment: section 1;
  }
  #demo1 ol li:before {
    /* content: counters(section, '.'); */
    content: counter(section, upper-roman)' . ';
    /* content: counter(section, cjk-ideographic) "、"; */
    /* content: counter(section, upper-roman) ". "; */
  }
</style>
  1. z-index什么情况下会生效
  1. z-index属性只作用在被定位了的元素上。所以如果你在一个没被定位的元素上使用z-index的话，是不会有效果的.
  2. 同一个父元素下的元素的层叠效果会受父元素的z-index影响,如果父元素的z-index值很小,那么子元素的z-index值很大也不起作用
  3. 建议去实践下，中心思想就是上面这俩条，我实验出的结果是：
  • 父标签 position属性为relative；
  • 问题标签无position属性（不包括static）；
  • 问题标签含有浮动(float)属性,当有position属性（除了static）时float是不生效
  • 问题标签的祖先标签的z-index值比较小
  1. position的属性值之间的区别
属性值 作用
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index声明）。
sticky 滚动一段时间后悬停
  • fixed的位置确定是相对于视窗来的，不管父容器是否是relative
  • relative是生成相对定位， 相对自己正常位置定位，原位置保留，亲测
  1. css实现动画，怎么让它执行完这个去执行另外一个keyFrame，你怎么知道这个动画什么时候结束
  2. 移动端适配

这是一个热门考题了，建议看看这篇文章，要是没有时间的话，可以看我总结的GitHub

  1. 脱离文档流

脱离文档流这个是css基本常识，不知道的一定要看看，我这篇文章总结的很好

  1. css隐藏元素的几种方法
  1. display:none 元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。 不会触发其点击事件
  2. visibility:hidden 和display:none的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。 无法触发其点击事件 适用于那些元素隐藏后不希望页面布局会发生变化的场景
  3. opacity:0 将元素的透明度设置为0后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。 和visibility:hidden的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为0后，元素只是隐身了，它依旧存在页面中。 可以触发点击事件

HTML

  1. innerHTML 和 react中的dangerousSetInnerHTML区别是啥？

二者的作用都是往节点里加入html,innerHTML会直接读取字符串的值，把他变成HTML结构，如果字符串中含有script标签，则会执行这段JS脚本，这就是XSS攻击，也叫做跨站脚本攻击 dangerouslySetInnerHTML做的就是不直接转换成你的html代码，来防止XSS攻击。关于web安全大家要去好好看看，我暂时还没总结，回头写一写。

  1. head里的hmtl会显示出来嘛？head里面的有啥东西

会显示出来，html是真的健壮，真的很难让一个html文件无法显示。但是，如果把html放在了header里，跑代码的时候浏览器会自己帮你把这段html移动到body里，同时把它下面的本来在head里的东西也挤下去了，如下图。有啥后果，head里的style、script标签的执行时间变了。

3. defer、async

一图胜千言

  1. 富文本编辑器的安全隐患

富文本编辑框的安全隐患来自于展示这段内容使用的innerHTML,如果文本中存在script标签则会执行这段JS,也就是存储型的XSS攻击。

  1. h标签的嵌套，会有啥问题？

这个还是去实践一下哦，你可以先猜猜看，然后跑一下下面的代码。

<div>
    <h1>我只被h1包裹了，且在前面<h3>我同时被h3和h1包裹了</h3>我只被h1包裹了，且在后面</h1>
</div>
  1. img的alt和title属性

虽然简单，但是我忘记了，大家千万要记得呀。alt属性值是必须要的属性，当图片无法正常加载时，出现在图片的位置，当鼠标移到图片上时会显示title的值

  1. 回流和重绘

浏览器渲染页面

  1. 浏览器无法直接读取html,需要先构建dom树
  2. 把读取到的css,变成浏览器可以理解的cssom
  3. css标准化，比如red -> rgba font-weigth:bold变成数值
  4. 计算dom树的具体样式
  5. 生成布局树，把不显示的去掉、把每个元素的信息计算出来
  6. 生成分层树，页面都是一层一层叠加在一起形成的
  7. 合成线程就会把分层树的图层变成图块
  8. GPU的栅格化把视窗附近的图块变成位图，就是也渲染的最小粒度了，然后保存在GPu的进程中
  9. 栅格化完成之后，浏览器进去去GPU进程里取出页面内容显示在屏幕上，这就完成了渲染阶段

回流

回流就是由具体样式和dom树生成布局树(layoutTree)，这个步骤需要计算出每个元素的大小和位置（忽略display:none的元素）

重绘

我们将布局树和样式转换为屏幕上的实际像素，这个阶段就叫做重绘节点。所以，回流必定导致重绘，重绘却不一定回流，且回流的代价比重绘高。

性能优化

  • 浏览器自身有优化，它会维持一个待更新队列，类似批处理的方式来优化。但是如果触发了同步布局事件，浏览器就会强制flush这个队列。所以我们要避免触发同步布局事件，我们熟悉的有如下： getBoundingClientRect、offsetTop、offsetLeft、offsetWidth、offsetHeight
  • 通过减少重绘重排的发生次数，避免使用如下代码，而应该使用el.style.cssText += 'border-left: 1px; border-right: 2px; padding: 5px;',或者对修改类名
const el = document.getElementById('test');
el.style.padding = '5px';
el.style.borderLeft = '1px';
el.style.borderRight = '2px';
  • 避免频繁操作DOM结构,如果需要可以先把他们display：none(因为这些元素不会出现不会触发回流重绘)，等待dom操作结束后在把他们放出来
  • 具有复杂动画操作的元素使用绝对定位，使其脱离文档流减少父节点和后续节点的频繁回流
  • GPU加速，就是使用一些css开启CUP加速如transform、opacity、filters这些动画不会引起回流重绘

算法

  1. 回溯
  2. 双指针
  3. 动态规划
  4. 二叉排序
  5. 树
  6. 时间复杂度

关于算法的话，面试必考题，笔试必考题。以上是必须掌握的哦。双指针看看这篇文章，很容易懂，学会了超简单，效率很高。

avatar
文章
阅读
粉丝