荔枝FM前端面试题

时间 2019-11-09

标签荔枝端面试题繁體版

原文原文链接

最近接到了荔枝FM的面试通知,遗憾的是没有拿到offer,可是此次面试呢,仍是收获很大的,下面就来给你们说说我遇到的面试题css

一面

一面是直接发了一套面试题到邮箱,开启了防做弊的,限时20分钟作完,下面是我一面是的题目html

1. 变量提高和函数提高

function outter () {
    return inner;
    function inner () {}
    var inner;
    inner = 9;
}
//问题是下面代码执行输出值是什么：
typeof outter();

这题涉及到的知识点是变量提高,在js中是存在变量提高和函数提高的,可是若是变量名重复的状况下函数提高>变量提高vue

答案:functionwebpack

2. 用html和css实现一个宽度为屏幕45%的正方形,可使用最近标准

这题只要考察的是自适应的问题css3

第一种方法:利用宽度百分比git

<div style="width:50%;padding-bottom:50%;height:0px;>
             
</div>

第二种方法:利用css的新单位vwgithub

<div style="width: 50vw; height: 50vw;>
             
</div>

第三题:写出6个div元素的堆叠顺序，最上面的在第一个位置，例如: .one .two .three .four .five .six（z-index）

html:web

<div class="one">
    <div class="two"></div>
    <div class="three"></div>
</div>
<div class="four">
    <div class="five"></div>
    <div class="six"></div>
</div>

css:面试

.one {
    position: relative;
    z-index: 2;
    .two {
        z-index: 6;
    }
    .three {
        position: absolute;
        z-index: 5;
    }
}
.four {
    position: absolute;
    z-index: 1;
    .five {}
    .six {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
    }
}

这题考察的是css部分的层叠上下文的知识点说这个以前呢,咱们得了解下面几个知识点正则表达式

解析:从w3c的文档能够知道，z-index属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。若是为正数，则离用户更近，为负数则表示离用户更远

没有定位的元素z-index是不会生效的
定位元素拥有更高堆叠顺序的元素老是处于堆叠顺序较低的定位元素的前面
子元素必然在父元素的前面,不论是否是定位元素
同级定位元素的z-index相同时遵循"后来居上",后面的定位元素堆叠顺序更前
z-index小于0的定位元素位于全部元素的后面,可是比其父元素的堆叠顺序要前

　经过上面的结论分析,得出的答案以下

　答案:.three>.two>.one>.five>.six>.four

二面的时候,面试官会根据这题扩展问题一下这个问题：

z-index的触发条件是:

根层叠上下文(html)
position
css3属性
- flex
- transform
- opacity
- filter
- will-change
- -webkit-overlow-scrolling

4.写一个正则表达式,知足一下特色:

有8-12位
只包含数字和字母

这题呢考察的是正则的使用,答案确定是不止一种的

[A-Za-z0-9]{8,12}$

/(\d|[A-z]{8,12})/

解析:正则呢,咱们须要了解如下几个元字符,基本写出来就不难了:

\d : 匹配一个数字字符,等价于:[0-9]
{n}: n是非负整数,匹配肯定的n次
{n,} : n是非负整数,至少匹配n次
{n,m} :n,m均为非负整数,其中n<m,表示最少匹配n次作多匹配m次
$ : 行尾,匹配输入的字符串结束位置
[] : (这个是非元字符)表示的是一个范围
\ : 将下一个字符标记为一个特殊字符、或一个原义字符、或一个向后引用、或一个八进制转义符

5. IE不支持Function.prototype.bind,自定义函数使IE支持该方法

6. 写一个sleep函数,sleep(3)等待3秒

该题目的意思就是写一个sleep函数,设置个时间,等到设置的时间以后再执行

function sleep(ms) {
            return new Promise(resolve => setTimeout(resolve, ms));
        }

        async function demo() {
          
                await sleep(3000); //间隔多少毫秒
                console.log(new Date()); //修改为要执行的代码
            
        }
        demo();

二面:

二面是技术面,直接会有个技术人员来面试你,主要是问一些原理性和基础性的东西

1.怎么实现变量私有化

在ES6以前是没有块级做用域之说的,可是能够本身实现,下面给你们写几个实现的方法,固然包括ES6的

ES6的变量申明 let
自执行函数

(function Random(){

// 块级做用域

})()

闭包里面定义的局部变量

function add() {
    var num = 10;

    return function jian() {
        console.log(num)
    }
}
add()(); // 10
console.log(num); //  Uncaught ReferenceError: num is not defined

ES6的Symbol

　　Symbol是ES6新引入的数据类型,表示独一无二的值,能够保证不会与其余属性名产生冲突

Symbol('2')==Symbol("2"); // false
var x = y = Symbol('a');
x === y //打印  true   说明该数据类型以引用的方式传值

下面就用Symbol实现变量私有化

var Person = (function(){
    const a = Symbol('a');
    const m = Symbol('m');
    class  Person {
        constructor(){
            this[a] = 'a这是私有变量';
            this.b = '变量B-外部可访问';
            this[m] = function(){
                console.log('私有方法');
            }
        }
        getA(){
            console.log(this[a]);
        }
        getM(){
            console.log(this[m]);
        }
    }
    return Person
}())
 
let pc = new Person() 
console.log(pc)

2. 实现 add(1)(2)(3)=6

这题考察的是柯里化,作这题以前呢,咱们得知道柯里化的概念:

柯里化就是把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数

 const curry = (fn, ...args) => 
            args.length < fn.length 
            // 参数长度不足时,从新柯里化函数,等待接受新参数
            ? (...arguments) => curry(fn, ...args, ...arguments)
            // 函数长度知足时,执行函数
             : fn(...args);
        function sumFn(a,b,c){
            return a+b+c;
        }
        var sum=curry(sumFn);
        console.log(sum(1)(2)(3)); //6

柯里化的做用:

参数复用
提早返回 – 返回接受余下的参数且返回结果的新函数
延迟执行 – 返回新函数，等待执行

3. 实现自适应的方案有哪些?怎么实现

媒体查询 :根据不一样屏幕尺寸写出不一样的适配方案
flex布局:设置父元素的display为flex,子元素能够根据须要的占比来设置flex的值,从而实现自适应布局
grid布局:这是CSS3新提出的,实现方式相似flex，具体看我另一篇笔记有详细讲解（http://www.javashuo.com/article/p-eiezjrvv-h.html）
rem:rem是指相对于根元素的字体大小的单位,下面有个公式能够供你们理解

　　元素的rem值=元素的px/根节点字体大小

var htmlWidth = document.documentElement.clientWidth || document.body.clientWidth //获取屏幕宽度
var  htmlDom = document.getElementsByTagName('html')[0] //获取html
htmlDom.style.fontSize = htmlWidth / 10 + 'px'; //设置html字体大小为屏幕的十分之一

//监听窗口大小改变
window.addEventListener('resize', () => {
    var  htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
    var  htmlDom = document.getElementsByTagName('html')[0]
    htmlDom.style.fontSize = htmlWidth / 10 + 'px';
})

固然咱们须要考虑一下兼容性的问题,你们能够看一下这篇https://github.com/imochen/hotcss文章,上面的这个解决方案是算比较完美了的

利用px2rem-loader: 如今咱们不少项目都是使用webpack作构建工具,那么咱们可使用webpack配置px2rem-loader来实现px转rem

安装(前提是你已经配置安装好了css-loader,style-loader或vue-style-loader):

npm install px2rem-loader --save-dev

配置webpack:

{　　
     test: /\.css$/,     
　　  use: ExtractTextPlugin.extract({

　　　fallback: "style-loader",

　　　use: [{
        　　loader: "css-loader",
　　　　　}, {
           loader: 'px2rem-loader?remUnit=37.5&remPrecision=6'
        }],
     })
}

4. vue的怎么实现性能优化

vue-router路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/',
      component: resolve => require(['@/components/Patient'],resolve),
      children: [
        {
          path: '',
          component: resolve => require(['@/components/Hospital'],resolve)
        },
        {
          path: '*',
          redirect: '/Hospital'
        }
      ]
})

为item设置惟一的key值:方便vuex的内部机制在循环时可以快速准确的找到该条列表数据
减小watch的数据 : 由于当watch的数据比较大的时候,会大量消耗性能,因此　咱们可使用事件中央总线或者vuex进行数据的变动操做
使用骨架屏加载 : 骨架屏就是在页面内容未加载完成的时候,先使用一些图形进行占位,待内容加载完成后在把它替换掉
SSR(服务端渲染) : 若是项目比较大的话,首屏不管怎么优化,都仍是会出现闪屏的状况,能够考虑使用SSR
按需加载 : 使用第三方的UI框架的时候,若是咱们只是使用里面部分的UI组件的话,只须要导入须要使用的部分便可

5. webpack怎么实现性能优化

缩小文件的搜索范围 : webpack里面有个resolve字段,能够告诉webpack怎么去搜索文件
压缩图片:

　　安装

npm i image-webpack-loader -D

rules: [{
  test: /\.(gif|png|jpe?g|svg)$/i,
  use: [
    'file-loader',
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true, 
        disable: true, 
      },
    },
  ],
}]

压缩js: 使用webpack内置UglifyJS插件、ParallelUglifyPlugin

　　安装：

npm i -D uglifyjs-webpack-plugin

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')

module.exports = {
  plugins: [
    new UglifyJsPlugin()
  ]
}

压缩css：

　　weboack中4+的版本和之前的版本的压缩方式是不同的，webpack4+版本的方式使用optimize-css-assets-webpack-plugin

　安装

npm install --save-dev optimize-css-assets-webpack-plugin

在webpackconfig中配置：

// 引入模块
const OptimizeCssAssetsPlugin=require('optimize-css-assets-webpack-plugin')



 plugins: [
        new HtmlPlugin({
            title:'webpack test',
            template:path.join(__dirname, './public/index.html')
        }),
        // 压缩css
        new OptimizeCssAssetsPlugin(),
        new MiniCssExtractPlugin({
            filename:'[name].css',
            chunkFilename:'[id].css'
        })
      ]

去掉没必要要的插件：
gzip压缩:

　　（webpack性能优化请等待个人下一篇笔记）

6. less/sass为何嵌套最好不要超过三层

嵌套多层的话,会有如下几种缺点

嵌套多层的话,会下降易读性,不利于后期的维护
嵌套多层的话,权重规则会变得复杂，还要多输入一些字符，于机器于人都不利
性能方面,由于css渲染是由子元素开始父元素上渲染的,若是嵌套多层的,就会一直往上找父元素,这是很是消耗性能的