前端小白麪試之旅：

時間 2019-12-01

標籤前端白麪之旅简体版

原文原文鏈接

公司描述：某外包公司，目前正在作的是一個後臺管理系統html

筆試部分

問題一：一個數組 let arr = [1,[2,[3]],4,5],編寫一段代碼實現 arr = [1,2,3,4,5];

回答：直接用Es7的拓展運算符實現，arr = [1,...[2,...[3]],4,5];前端

問題二：寫出meta標籤裏有哪些屬性及做用

回答：meta標籤裏面主要有兩個屬性分別是http-equiv和namehtml5

name是用來描述網頁，例如：網頁的關鍵字和描述
- A:keywords 關鍵字
- B:description 描述
- C:viewport 移動端的窗口
http-equiv 至關於http的意思
- A:contente-Type 設定網頁字節
- B: X-UA-Compatible(瀏覽器採起何種版本渲染當前頁面)
- C:cache-control(指定請求和響應遵循的緩存機制)

詳情請點擊這裏查看：https://www.cnblogs.com/wangyang108/p/5995379.htmlios

問題三：你對閉包的理解？編寫代碼實現一個節流或者防抖函數

回答：借鑑以前掘金的一位小夥伴的答案，閉包是指有權訪問另外一個函數做用域中變量的函數，建立閉包的最多見方式就是在函數內建立另外一個函數，經過另外一個函數訪問這個函數的局部變量，利用閉包能夠突破做用域鏈。axios

// 函數節流例子
var can = true;
window.onscroll = function(){
  if(!can){
   //判斷上次邏輯是否執行完畢，若是在執行中，則直接return
   return;
  }
  can = false;
  setTimeout(function(){
    //執行邏輯
    can = true;
  }, 100);
};

複製代碼

// 函數防抖
var timer = null;
window.onscroll = function(){
    if (timer) {
      // 清除未執行的邏輯，從新執行下一次邏輯，不論上一次是否執行完畢
      clearTimeout(timer);
    }
    timer = setTimeout(function(){
        //執行邏輯
    }, 300);
};
複製代碼

問題四：原生實現一個apply或者call

//call方法
function func() {
    console.log(this.value)
}
var obj = {
    value: 233
}
func.call(obj);
此處this指向的就是obj,所以this.valuee = obj.value = 233;


Function.prototype.mycall = function(obj){
    var args = [];
    for(var i=1,len=arguments.length;i<len;i++){
        args.push('arguments["+i+"]');
    }
    obj = obj || window;
    obj.fn = this;
    var result = eval('obj.fn("+args+")');
    delete obj.fn;
    return result;
    
}





複製代碼

//apply
Funciton.prototype.myapply = function(obj,arr){
    obj = obj || window;
    obj.func = this;
    var result;
    if(!arr){
   result = obj.func();
    }else{
        var args = [];
        for(i=0;len = arr.length;i<len;i++){
            args.push('arr['+i+']');
        }
        return result = eval('obj.func('+args+')')
    }
    delete.obj.func;
    return result;
}

複製代碼

詳情參考：https://blog.csdn.net/smallsun_229/article/details/80721758後端

問題五：前端路由hash和history的區別

history模式利用了HTML5 History Interface中新增的pushState()和replaceState()方法，這兩個方法應用於瀏覽器的歷史記錄棧，在當前已有的back、forward、go的基礎上，他們提供了對當前瀏覽器進行修改的功能，只是當它們被修改時，雖然瀏覽器的URL發生了變化，可是不會當即向後端服務器發送請求，可是若是點擊刷新，就會從新向後端服務器發送請求。

*history模式下，前端的URL必須和向發送請求後端URL保持一致，不然會報404錯誤

hash模式 hash模式的原理是依據window對象的onhashchange事件進行監聽，它的特色是：雖然hash路徑出如今URL中，可是不會出如今HTTP請求中，對後端徹底沒有影響，所以改變hash值不會從新加載頁面。

*hash模式下，只有#符號以前的內容纔會包含在請求中被髮送到後端，也就是說雖而後端沒有對路由全覆蓋，可是不會返回404錯誤

問題六：描述下哪些改變會致使迴流，哪些改變會致使重繪？

迴流：所謂的迴流簡單來講就是頁面的尺寸，佈局發生變化

重繪：所謂的重繪就是頁面的樣式和外觀發生變化

添加或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變都會致使重繪或是迴流

問題七：說說你對原型和原型鏈的理解，最好圖示

![](https://user-gold-cdn.xitu.io/2019/3/6/16953550b0b64a07?w=899&h=440&f=png&s=123268)數組

問題八：瀏覽器拿到一個頁面是如何渲染的，請寫出渲染步驟

在頁面加載時，瀏覽器把獲取到的HTML代碼解析成1個DOM樹，DOM樹裏包含了全部HTML標籤，包括display:none隱藏，還有用JS動態添加的元素等。瀏覽器把全部樣式(用戶定義的CSS和用戶代理)解析成樣式結構體 DOM Tree 和樣式結構體組合後構建render tree, render tree相似於DOM tree，但區別很大，由於render tree能識別樣式，render tree中每一個NODE都有本身的style，並且render tree不包含隱藏的節點(好比display:none的節點，還有head節點)，由於這些節點不會用於呈現，並且不會影響呈現的，因此就不會包含到 render tree中。我本身簡單的理解就是DOM Tree和咱們寫的CSS結合在一塊兒以後，渲染出了render tree。瀏覽器

連接： https://www.jianshu.com/p/e081f9aa03fb緩存

問題九：編寫代碼使用class實現繼承

class Student {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}

class PrimaryStudent extends Student {
    constructor(name, grade) {
        super(name); // 記得用super調用父類的構造方法!
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
}
複製代碼

詳情參考 https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001458267339633fd3a83c597d04b5fb59f7d1f6792efb3000bash