前端小白麵試之旅：

liying-abc發表於2019-03-06
前端

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

筆試部分

問題一：一個陣列 let arr = [1,[2,[3]],4,5],編寫一段程式碼實現 arr = [1,2,3,4,5];

回答：直接用Es7的擴充運算子實現，arr = [1,...[2,...[3]],4,5];

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

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

  • 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.html

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

回答：借鑑之前掘金的一位小夥伴的答案，閉包是指有權訪問另一個函式作用域中變數的函式，建立閉包的最常見方式就是在函式內建立另一個函式，通過另一個函式訪問這個函式的區域性變數，利用閉包可以突破作用域鏈。

// 函式節流例子
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/001458267339633fd3a83c597d04b5fb59f7d1f6792efb3000

問題十一：h5新特性有哪些？移除了哪些元素？

h5現已經不是SGML的子集，主要是關於影象，位置，儲存，多工等功能的增加

  • 繪畫cavas
  • 用於媒介回放的video和audio元素
  • 本地離線快取localStorage長期儲存資料，瀏覽器關閉後資料不丟失
  • seesionStorage的資料，在瀏覽器關閉後會自動刪除
  • 語義化更好的內容元素：article,footer，header,nav，section
  • 表單控制元件，calender,data，time，email,url，search

移除的元素

  • 純表現元素：basefont,big，center,fonts,strike

問題十二：html5的離線快取怎麼適應，工作原理？

上機題

給你請求介面實現新增和刪除功能 新增利用axios.post,刪除利用axios.delete,

問題十：清除浮動的幾種方式

  • 使用空標籤清除浮動（clear：both）[缺點：增加無意義標籤]
  • 使用overflow:auto(IE是zoom:1)[缺點是內容寬高超過父級時會出現滾動條]
  • 使用after偽元素清除浮動

希望大家多多補充，非常感謝！

相關文章