前端基礎面試題指南

時間  2019-11-30
標籤 前端 基礎 面試 指南 欄目 快樂工作 简体版
原文   原文鏈接

        嘿,很久不見,這裏是相隔了一年又出來活躍的大溼兄,最近看到不少人都在刷面試題包括,四月份也看到github上的 "前端面試每日 3+1" 的這個項目,包括最近在整理一些基礎題目之類的,因此纔會有契機寫這樣一篇文章.宗旨在於基礎題目吧,挺雜的仍是望各位大大批評指正,在這謝謝了,好了廢話很少說開始內容.javascript

html基礎面試題

        衆所周知,雖然說面試官問到的問題大多都是javascript相關和算法相關的題目,不過這裏仍是稍微說一下面試官會常常問道的html題目,更加全面一些,對於面試來講也是好事.css

1. HTML5的文件離線儲存有哪些,談談他們的優點和弊端,再談談他們的區別?

        cookie, sessionStorage,localStorage.html

        cookie的優點在於極高的擴展性和可用性,反而,經過良好的編程，控制保存在cookie中的session對象的大小,只在cookie中存放不敏感數據，即便被盜也不會有重大損失.可是除了這些缺點依舊明顯,例如`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉,另外cookie在每次請求的時候被帶在請求頭,很容易遭到攔截,由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了.前端

        sessionStorage和localStorag它們的優勢很明顯能夠長期儲存數據；須要手動刪除數據,可是缺點是不一樣窗口下數據；不能獨立，相互干擾。例如：刪除或添加一個數據，其它的窗口也會同步刪除或者添加該 數據不能被爬蟲讀取在瀏覽器的隱私模式下不能讀取vue

        那麼談談它們的區別sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲,而localStorag是一種持久化的本地存儲,只要不刪除就一直存在,而cookie是小規模存儲而且每次請求cookie都會被髮送出去,無形中浪費了帶寬.html5

  1. html5有哪些新特性、移除了那些元素?

        HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。 java

  • 拖拽釋放(Drag and drop) API 語義化更好的內容標籤（header,nav,footer,aside,article,section） 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失； sessionStorage 的數據在瀏覽器關閉後自動刪除git

    表單控件，calendar、date、time、email、url、search
    新的技術webworker, websocket, Geolocationes6

  • 移除的元素github

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

  1. 請說出三種減小頁面加載時間的方法?

         (1). 優化圖片
(2). 圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
(3). 優化CSS（壓縮合並css，如margin-top,margin-left...)
(4). 網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。）
(5). 標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）
(6). 減小http請求（合併文件，合併圖片）。

  1. 請解釋一下什麼是「語義化的 HTML」?

        分離結構和表現的另外一個重要方式是使用語義化的標記來構造文檔內容。一個XHTML元素的存在乎味着被標記內容有相應的結構化意義，例如

是用來標記段落h1標記標題ul,li標記列表，不能過度使用div

  語義化的標籤每每與默認樣式有所聯繫，像是Hx系列 表示標題，會被賦予默認的塊級加粗居中樣式；strong,em用來區別於其餘文字，起到了強調的做用。用來明確告訴你它們的用途。

  語義化標籤讓你們更直觀認識標籤和屬性的用途。語義化的網頁，對搜索引擎友好，更容易被搜索引擎抓取，有利於推廣。

  

css基礎面試題

        包括css有時也是面試官會常常問到的問題,這裏例舉幾個常見的

  1. CSS中 link 和@import 的區別是?

(1). link屬於HTML標籤，而@import是CSS提供的;
(2). 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;
(3). import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;
(4). link方式的樣式的權重 高於@import的權重.

  1. 介紹一下CSS的盒子模型？

(1). 有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;
(2). 盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

  1. CSS 選擇符有哪些？哪些屬性能夠繼承？優先級是什麼樣的?

選擇符:
(1). id選擇器（ # myid）
(2). 類選擇器（.myclassname）
(3). 標籤選擇器（div, h1, p）
(4). 相鄰選擇器（h1 + p）
(5). 子選擇器（ul > li）
(6). 後代選擇器（li a）
(7). 通配符選擇器（ * ）
(8). 屬性選擇器（a[rel = "external"]）
(9). 僞類選擇器（a: hover, li:nth-child）
可繼承的樣式：
font-size font-family color, text-indent;
優先級爲:
!important > id > class > tag

important 比 內聯優先級高,但內聯比 id 要高

  1. CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器 多背景 rgba
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

javascript基礎面試題

        前面忘了說前面有不少都是參考其餘文章的,畢竟對於javascript基礎面試題通常面試官會問的比較多,不過不要擔憂,下面的面試題攜帶了大量曾今我被面試的時候面試官詢問過的javascript基礎知識,最多見的我都會列在上面,而後包括其餘文章網站總結的javascript基礎面試題我也會列出來供你們參考學習.

  1. 請講講javascript基礎數據類型及typeof返回數值類型

        這裏簡單回答一下就好


        javascript的六種基本數據類型:string、number、boolean、object、undefined、null

        typeof返回數值類型: undefined,string,boolean,number,object-------對象或者null返回的是object,function

  1. ==和===的區別

== equality 等同，=== identity 恆等。
==， 兩邊值類型不一樣的時候，要先進行類型轉換，再比較。
===，不作類型轉換，類型不一樣的必定不等。

  1. javascript強制類型轉換

(1). Boolean(value):把值轉換成Boolean類型；
(2). Nnumber(value):把值轉換成數字（整型或浮點數）；
(3). String(value):把值轉換成字符串。

  1. 請說一說一些常見的http狀態碼及含義?

200請求已成功
301被請求的資源已永久移動到新位置
304若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許
403服務器已經理解請求，可是拒絕執行它
404客戶端在瀏覽網頁時，服務器沒法正常提供信息，或是服務器沒法迴應，且不知道緣由所返回的頁面
500服務器遇到了一個不曾預料的情況
501服務器不支持當前請求所須要的某個功能
503因爲臨時的服務器維護或者過載
504做爲網關或者代理工做的服務器嘗試執行請求時

  1. 清說一說瀏覽器與服務器之間的三次握手?

第一次
第一次握手：創建鏈接時，客戶端發送syn包（syn=j）到服務器，並進入SYN_SENT狀態，等待服務器確認；SYN：同步序列編號（Synchronize Sequence Numbers）
第二次
第二次握手：服務器收到syn包，必須確認客戶的SYN（ack=j+1），同時本身也發送一個SYN包（syn=k），即SYN+ACK包，此時服務器進入SYN_RECV狀態；
第三次
第三次握手：客戶端收到服務器的SYN+ACK包，向服務器發送確認包ACK(ack=k+1），此包發送完畢，客戶端和服務器進入ESTABLISHED（TCP鏈接成功）狀態，完成三次握手。 完成三次握手，客戶端與服務器開始傳送數據，這裏只是簡述一下三次握手.

  1. 請簡述一下call()和apply()的共同之處和區別?

它們各自的定義：

apply：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.apply(A, arguments);即A對象應用B對象的方法。

call：調用一個對象的一個方法，用另外一個對象替換當前對象。例如：B.call(A, args1,args2);即A對象調用B對象的方法。

它們的共同之處：

都「能夠用來代替另外一個對象調用一個方法，將一個函數的對象上下文從初始的上下文改變爲由thisObj指定的新對象」。

它們的不一樣之處：

apply：最多隻能有兩個參數——新this對象和一個數組argArray。若是給該方法傳遞多個參數，則把參數都寫進這個數組裏面，固然，即便只有一個參數，也要寫進數組裏。若是argArray不是一個有效的數組或arguments對象，那麼將致使一個TypeError。若是沒有提供argArray和thisObj任何一個參數，那麼Global對象將被用做thisObj，而且沒法被傳遞任何參數。

call：它能夠接受多個參數，第一個參數與apply同樣，後面則是一串參數列表。這個方法主要用在js對象各方法相互調用的時候，使當前this實例指針保持一致，或者在特殊狀況下須要改變this指針。若是沒有提供thisObj參數，那麼 Global 對象被用做thisObj。

實際上，apply和call的功能是同樣的，只是傳入的參數列表形式不一樣。

7. 什麼是閉包?

        當某個函數調用時會建立一個執行環境以及做用域鏈，而後根據arguments和其它命名參數初始化造成活動對象。在外部函數調用結束後，其執行環境與做用域鏈被銷燬，可是其活動對象保存在了閉包之中，最後在閉包函數調用結束後才銷燬。簡單的說，閉包就是可以讀取其餘函數內部變量的函數。

        因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成「定義在一個函數內部的函數」。

        詳細瞭解能夠參考(JavaScript中什麼是閉包): www.cnblogs.com/yangWanShen…

  1. 什麼是繼承?

        簡單說下經過原型鏈實現繼承:

        基本思想：利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法，子類型能夠訪問超類型的全部屬性和方法。原型鏈的構建是將一個類型的實例賦值給另外一個構造函數的原型實現的。實現的本質是重寫原型對象，代之以一個新類型的實例。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  alert("Hello, " + this.name);
}
var person = new Person("Alice");
person.sayHello(); // Hello, Alice
function Student() {
}
Student.prototype = new Person("Bruce");
Student.prototype.id = 16;
Student.prototype.showId = function() {
  alert(this.id);
}
var student = new Student();
student.sayHello(); // Hello, Bruce
student.showId(); // 16
複製代碼

        注意：不能用對象字面量建立原型方法，這樣會重寫原型鏈，致使繼承無效。

function Person(name) {
  this.name = name;
}
Person.prototype.sayHello = function() {
  alert("Hello, " + this.name);
}
var person = new Person("Alice");
person.sayHello(); // Hello, Alice
function Student() {
}
Student.prototype = new Person("Bruce");
Student.prototype.id = 16;
Student.prototype = {
  showId: function() {
    alert(this.id);
  }
};
var student = new Student();
student.sayHello(); // 報錯：student.sayHello is not a function
student.showId(); // 16
複製代碼

        同時能夠參考這篇文章講的比較全面, 完全搞懂JavaScript中的繼承:

        www.cnblogs.com/libinfs/arc…

  1. 談談原型和原型鏈?

        原型: 咱們建立的每個函數都有一個prototype（原型）屬性，這個屬性是一個指針，指向了一個對象，而這個對象的用途就是包含能夠由特定類型的全部實例共享的屬性和方法。

        原型鏈: 由於每一個對象和原型都有原型，對象的原型指向原型對象， 而父的原型又指向父的父，這種原型層層鏈接起來的就構成了原型鏈。

        這裏若是細說能夠用一個大篇幅詳細說明,可是考慮到這是基礎面試指南因此就不細說了,貼一個連接地址能夠去細細品味, 最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（一）:

www.jianshu.com/p/dee9f8b14…

  1. 箭頭函數和普通函數的區別?

        1.提升開發效率，減小體力勞動

        2.在函數內部不須要本身的 this 指針的時候，很是方便，由於箭頭函數做用域內沒有 this

        3.還有一點是 箭頭函數沒有 arguments 變量，在某些時候也能夠帶來方便，和上面差很少。

  1. 請描述一下 GET 和 POST 的區別?

        get是從服務器上獲取數據，post是向服務器傳送數據。

         get是把參數數據隊列加到提交表單的ACTION屬性所指的URL中，值和表單內各個字段一一對應，在URL中能夠看到。post是經過HTTP post機制，將表單內各個字段與其內容放置在HTML HEADER內一塊兒傳送到ACTION屬性所指的URL地址。用戶看不到這個過程

        get形式的url對搜索引擎更加友好，能夠提升搜索引擎排名。Post使用的url有時候會阻止爬蟲和搜索引擎的訪問。其餘網站和用戶能夠連接到get形式的url，不管用戶的訪問，仍是搜索引擎的收錄而相應提升了頁面排名，可以直接或間接提升網站瀏覽。同時，get形式的url這種表示法是能夠緩存的，顯著提高了客戶端和服務端的性能。

        而不安全操做，如肯定訂購、下訂單、達成協議和刪除頁面等，應該經過post執行，避免沒有顯式用戶請求和同一的狀況下發生意外的操做。例如搜索引擎刪除整個頁面，只由於抓取了一個連接。不少不但願用戶瀏覽器遵循頁面連接的各類完整，這些狀況下，應該要求用戶登陸而且足夠的權限才能執行某些危險操做。

        若符合下列任一狀況，則用POST方法：

        請求的結果有持續性的反作用，例如，數據庫內添加新的數據行。

        若使用GET方法，則表單上收集的數據可能讓URL過長。

        要傳送的數據不是採用7位的ASCII編碼。

        若符合下列任一狀況，則用GET方法：

        請求是爲了查找資源，HTML表單數據僅用來幫助搜索。

        請求結果無持續性的反作用。

        收集的數據及HTML表單內的輸入字段名稱的總長不超過1024個字符。

        （目測還會問到「同步和異步的區別?」）

        同步：腳本會停留並等待服務器發送回覆而後再繼續。提交請求->等待服務器處理->處理完畢返回，這個期間客戶端瀏覽器不能幹任何事。

        異步：腳本容許頁面繼續其進程並處理可能的回覆。請求經過事件觸發->服務器處理（這是瀏覽器仍然能夠做其餘事情）->處理完畢

        若要在使用ajax請求後處理髮送請求返回的結果，最好使用同步請求。

  1. 請描述下事件冒泡機制

        從目標元素開始，往頂層元素傳播。途中若是有節點綁定了相應的事件處理函數，這些函數都會被一次觸發。若是想阻止事件起泡，可使用e.stopPropagation()（Firefox）或者e.cancelBubble=true（IE）來組織事件的冒泡傳播。

  1. 用遞歸算法實現，數組長度爲5且元素的隨機數在2-32間不重複的值

        這是一道大題目，把考點拆成了4個小項;須要侯選人用遞歸算法實現（限制15行代碼之內實現;限制時間10分鐘內完成）
        a）生成一個長度爲5的空數組arr。
        b）生成一個（2-32）之間的隨機整數rand.c
        c）把隨機數rand插入到數組arr內，若是數組arr內已存在與rand相同的數字，則從新生成隨機數rand並插入到arr內[須要使用遞歸實現，不能使用/ while等循環]
        d）最終輸出一個長度爲5，且內容不重複的數組arr。 

var arr = new Array(5);
    var num = randomNumber();
    var i = 0;
    randomArr(arr,num);
    function randomArr(arr,num) {
        if (arr.indexOf(num)< 0){
            arr[i] = num;
            i++;
        } else {
            num = randomNumber();
        }
        if (i>=arr.length){
            console.log(arr);
            return;
        }else{
            randomArr(arr,num)
        }
    }
    function randomNumber() {
        return Math.floor(Math.random()*31 + 2)
    }
複製代碼

        這題呢參考的是最近在github上很火的一個前端刷題倉庫,這裏安利一下, 前端面試每日 3+1（每日三問）:

github.com/haizlin/fe-…

  1. 數組排序

        這裏列出一個最簡單的數組排序僅供參考.

var arr = [23, 9, 4, 78, 3];
 var compare = function (x, y) {//比較函數
    if (x < y) {
        return -1;
    } else if (x > y) {
        return 1;
    } else {
        return 0;
    }
 }
 console.log(arr.sort(compare));
複製代碼
  1. 一行代碼實現數組去重
[...new Set([1,2,3,1,'a',1,'a'])]
複製代碼
  1. 寫一個方法去掉字符串中的空格
var str = ' abc d e f g ';
        function trim(str) {
            var reg = /\s+/g;
            if (typeof str === 'string') {
                var trimStr = str.replace(reg,'');
            }
            console.log(trimStr)
        }
        trim(str)
複製代碼
  1. 統計某一字符或字符串在另外一個字符串中出現的次數
function strFind（str，target）{ 
var lengths = 0 
    if（！target）{ 
        return lengths 
    } 
    while（str.match（target））{ 
        str = str.replace（target，''）
        length ++ 
    } 
    return lengths 
} 
var str = 「你好薩達所大所多所多所問問二位無你好薩達所
大多你好」 strFind（str，「你好」）
複製代碼

        match方法一樣可用於前端搜索功能使用.

參考網站

前端面試每日 3+1（每日三問）:github.com/haizlin/fe-…

最全前端面試問題及答案總結: www.cnblogs.com/autismtune/…

前端工做面試問題（上）: www.cnblogs.com/canning-gao…

前端工做面試問題（下）: www.cnblogs.com/canning-gao…

apply()與call()的區別: www.cnblogs.com/lengyuehuah…

JavaScript中什麼是閉包: www.cnblogs.com/yangWanShen…

JavaScript面向對象繼承原理與實現方法分析: www.jb51.net/article/145…

完全搞懂JavaScript中的繼承:www.cnblogs.com/libinfs/arc…

最詳盡的 JS 原型與原型鏈終極詳解，沒有「多是」。（一）: www.jianshu.com/p/dee9f8b14…

特別推薦刷題網站

前端面試每日 3+1（每日三問）:github.com/haizlin/fe-…

        重要的事情說三遍這個刷題的代碼倉庫真的很不錯,安利一下.

結語

        真的一年都沒出來活躍了,自從上週開始不忙的時候,就想着從新出來寫文章,準備了大概有一週時間吧,文章看了有很多,大概20到30篇,而後題目也作了很多,最後根據以往的面試經驗總結出了這篇能夠說是臨時抱佛腳的文章,這裏大部分題目能夠說有80%以上的題目都是面試官必問或者說是常問的題目,你們能夠經過這篇文章臨時去了解下,即便快到面試公司也能經過這篇文章找到本身想要了解的信息.

        最後呢仍是感謝你們能看到這裏,估計5000多字也就是一篇小說的章節吧,細細體會可能時間長一些,可是快速預覽可能也就10分鐘左右,不過仍是但願你們能在下面評論區勁量多發些題目,這樣討論的話也方便,另外這篇文章儘量的貼近基礎面試題.

        可能還有人想要看其餘的一些面試題好比es6,7 vue等等,這些都在之後的更新中會有專門的篇幅來說,包括涉及到一些普一般用算法之類的也會有專門的文章去描述,仍是謝謝各位大大能看到這裏若有不足之處還望指正

        2019年7月6日        大溼兄

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程