一次失败的笔试以及背后的思考

时间： 2020/9/19 （前端笔试）

我前去参加某公司笔试，满心以为能通过到面试，没想到几道选择题之后就折戟沉沙了（后悔没准备选择题，倒是准备了面试的题）。。。

没有对答案，只想尽力回想做过的几道那时没想明白的题目

1、选择题：

display: none; 会引起重绘还是重排？

visibility: hidden; 会引起重绘还是重排？

答案：display：none；会引起重排，visibility：hidden会引起重绘

基本知识：

1、重绘与重排都是浏览器在页面元素改变时会进行的操作。一般来说，浏览器渲染器进程会进行如下操作：

  1. 生成DOM树 、CSS树（Parse HTML）

  2. DOM树与CSS树关联生成渲染树（RenderObject Tree），渲染树生成RenderLayer Tree

  3. 由渲染树计算布局（RenderLayout）

  4. 转化为屏幕对应的像素，生成绘制记录表（Paint）

  5. 对某些RenderLayout进行处理，生成合成层（Composite）

    生成合成层的标准：

    • 3D 或透视变换(perspective transform) CSS 属性
    • 使用加速视频解码的 元素 拥有 3D
    • (WebGL) 上下文或加速的 2D 上下文的 元素
    • 混合插件(如 Flash)
    • 对自己的 opacity 做 CSS动画或使用一个动画变换的元素
    • 拥有加速 CSS 过滤器的元素
    • 元素有一个包含复合层的后代节点(换句话说，就是一个元素拥有一个子元素，该子元素在自己的层里)
    • 元素有一个z-index较低且包含一个复合层的兄弟元素(换句话说就是该元素在复合层上面渲染)

    注意：使用will-change CSS属性可以使chrome浏览器提前进行优化，如will-change：transform

2、 回流/重排（reflow）、重绘（repaint）

1、当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，这个回退的过程叫 reflow。

2、改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

3、重排的步骤就包括了重绘。

3、visibility：hidden; display: none;

1、visibility：hidden；元素被隐藏，当其布局的影响仍然存在（在RenderObject Tree上表现为一个空框）

2、display：none；元素被隐藏，当其布局的影响不存在（不存在在RenderObject Tree上）

感谢（阿汤哥的鼎、Google developer）

2、选择题：

链接：https://www.nowcoder.com/questionTerminal/b09580a48ec044ef919264643b0b2486?source=relative
来源：牛客网

关于HTML语义化，以下哪个说法是正确的？ 答案：D

  • 语义化的HTML有利于机器的阅读，如PDA手持设备、搜索引擎爬虫；但不利于人的阅读

  • Table 属于过时的标签，遇到数据列表时，需尽量使用 div 来模拟表格

  • 语义化是HTML5带来的新概念，此前版本的HTML无法做到语义化

  • header、article、address都属于语义化明确的标签

首先，我们可以排除A和B😄，

接着HTML5是强调语义化，并不代表语义化是HTML5开创的（例如:<address>就是HTML4.0的提案）（不做这道题我还真不知道😓）

header、article是人尽皆知的语义化标签了，<address>是表示地址信息，默认表现与<i></i><em></em>一致

3、选择题：

以下哪些选项可以将集合A转化为数组？

  • Array.from(A)

  • [].slice.apply(A)

  • […A]

  • [].map.call(A, o => o)

正确答案（牛客）：A C

首先，我先讨论一下题目中的集合A是什么鬼？？？这是这个题目的败笔，要知道诸如Java，Python这些语言都将集合（collection）解释为容器类，它的子类有Set、Map、List这些数据结构。回到题目，这个集合A指的到底是什么数据结构呢？很抱歉，JavaScript也不存在对"集合"这个名词的解释, MDN上有indexed Collections（Array）、keyed Collections（Map、Set）。

在牛客上有人说是，像‘123456’这样的数字字符串（不可能），有人说是Set（有点合理）

实在不明白这个‘集合A’为何物，一个接近的解释是‘可迭代对象（iterable）’

如果将集合A看成可迭代对象的话，来看选项：(告别这个沙雕问题吧/(ㄒoㄒ)/~~)

A、Array.from() 可以传入字符串、伪数组、可迭代对象，创建一个新的，浅拷贝的数组实例。

B、[].slice.apply(A) 可以传入字符串、数组，创建一个新的，浅拷贝的数组实例。

C、[...A] 可以传入字符串、伪数组、可迭代对象，创建一个新的，浅拷贝的数组实例。这里是数组的解构用法

D、[].map.call(A, o => o)可以传入字符串、数组，创建一个新的，浅拷贝的数组实例。

更正：后来觉得应该是出题人将Set翻译成了"集合"了，感觉解释的通，关键名字就算翻译了也该标注一下吧。

万恶的中文翻译，以后见一个怼一个。

4、算法题

算法题一直都是弱项，更不应该急躁才对

这个算法题考的是 数组末尾加一（其实就是简单的处理逻辑而已），注意进位以及如[9,9,9,9]这类数组可能会多出一位的可能。

let arr = [9,9,9,9];

function addOne(arr) {
  let res = [];

  let jinWei = 0;

  // 末位自动加一
  if (arr[arr.length - 1] < 9) {
    res.push(arr[arr.length - 1] + 1);
  } else{
    jinWei = 1;
    res.push(0)
  }
  // 其余位数处理
  for (let i = arr.length - 2; i >= 0; i--) {
    if (arr[i] + jinWei <= 9) {
      res.push(arr[i] + jinWei);
      jinWei = 0;
    } else{
      jinWei = 1;
      res.push(0)
    }
  }
  // 多出一位
  if(jinWei) {
    res.push(1)
  }
  return res.reverse()
}

console.log(addOne(arr))
posted @ 2020-09-20 20:35  Skylooker  阅读(123)  评论(0)  编辑  收藏  举报