• 前端面试中小型公司都考些什么

    什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？

    以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度；

    而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。

    对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始图片是 500300 像素，那么在 3 倍屏上就要放一个 1500900 像素的图片才能保证 1 个物理像素至少对应一个图片像素，才能不失真。 当然，也可以针对所有屏幕，都只提供最高清图片。虽然低密度屏幕用不到那么多图片像素，而且会因为下载多余的像素造成带宽浪费和下载延迟，但从结果上说能保证图片在所有屏幕上都不会失真。

    还可以使用 CSS 媒体查询来判断不同的像素密度，从而选择不同的图片:

    my-image {
    background: (low.png); }
@media only screen and (min-device-pixel-ratio: 1.5) {
   
  #my-image {
    background: (high.png); }
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    说一说keep-alive实现原理

    keep-alive组件接受三个属性参数：include、exclude、max

    • include 指定需要缓存的组件name集合，参数格式支持String, RegExp, Array。当为字符串的时候，多个组件名称以逗号隔开。
    • exclude 指定不需要缓存的组件name集合，参数格式和include一样。
    • max 指定最多可缓存组件的数量,超过数量删除第一个。参数格式支持String、Number。

    原理

    keep-alive实例会缓存对应组件的VNode,如果命中缓存，直接从缓存对象返回对应VNode

    LRU（Least recently used） 算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。(墨菲定律：越担心的事情越会发生)

    什么是 JavaScript 中的包装类型？

    在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如：

    const a = "abc";
a.length; // 3
a.toUpperCase(); // "ABC"


    • 1
    • 2
    • 3
    • 4

    在访问'abc'.length时，JavaScript 将'abc'在后台转换成String('abc')，然后再访问其length属性。

    JavaScript也可以使用Object函数显式地将基本类型转换为包装类型：

    var a = 'abc'
Object(a) // String {"abc"}


    • 1
    • 2
    • 3

    也可以使用valueOf方法将包装类型倒转成基本类型：

    var a = 'abc'
var b = Object(a)
var c = b.valueOf() // 'abc'


    • 1
    • 2
    • 3
    • 4

    看看如下代码会打印出什么：

    var a = new Boolean( false );
if (!a) {
   
    console.log( "Oops" ); // never runs
}


    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    答案是什么都不会打印，因为虽然包裹的基本类型是false，但是false被包裹成包装类型后就成了对象，所以其非值为false，所以循环体中的内容不会运行。

    Sass、Less 是什么？为什么要使用他们？

    他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。 例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算， 函数，LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。

    为什么要使用它们？

    • 结构清晰，便于扩展。 可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
    • 可以轻松实现多重继承。 完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

    参考：前端进阶面试题详细解答

    head 标签有什么作用，其中什么标签必不可少？

    标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

    文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

    下面这些标签可用在 head 部分：, , ,