荔枝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'
        })
      ]