荔枝FM前端面試題

最近接到了荔枝FM的面試通知,遺憾的是沒有拿到offer,但是這次面試呢,還是收獲很大的,下面就來給大家說說我遇到的面試題

一面

一面是直接發了一套面試題到郵箱,開啟了防作弊的,限時20分鍾做完,下面是我一面是的題目

1. 變量提升和函數提升

function outter () {
    return inner;
    function inner () {}
    var inner;
    inner = 9;
}
//問題是下面代碼執行輸出值是什么：
typeof outter();

這題涉及到的知識點是變量提升,在js中是存在變量提升和函數提升的,但是如果變量名重復的情況下函數提升>變量提升

答案:function

2. 用html和css實現一個寬度為屏幕45%的正方形,可以使用最近標准

這題只要考察的是自適應的問題

第一種方法:利用寬度百分比

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

 

第二種方法:利用css的新單位vw

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

第三題:寫出6個div元素的堆疊順序，最上面的在第一個位置，例如: .one .two .three .four .five .six（z-index）

html:

<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.寫一個正則表達式,滿足一下特點:

1. 有8-12位

2. 只包含數字和字母

這題呢考察的是正則的使用,答案肯定是不止一種的

[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，具體看我另外一篇筆記有詳細講解（https://www.cnblogs.com/cythia/p/10894598.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渲染是由子元素開始父元素上渲染的,如果嵌套多層的,就會一直往上找父元素,這是非常消耗性能的