1. 程式人生 > >【前端面試題】2018最新版前端面試題,只為找到更好的工作~~~

【前端面試題】2018最新版前端面試題,只為找到更好的工作~~~

1.一些開放性題目

1.自我介紹:除了基本個人資訊以外,面試官更想聽的是你與眾不同的地方和你的優勢。

2.專案介紹

3.如何看待前端開發?

4.平時是如何學習前端開發的?

5.未來三到五年的規劃是怎樣的?

position的值, relative和absolute分別是相對於誰進行定位的?

  • absolute :生成絕對定位的元素, 相對於最近一級的 定位不是 static 的父元素來進行定位。

  • fixed (老IE不支援)生成絕對定位的元素,通常相對於瀏覽器視窗或 frame 進行定位。

  • relative 生成相對定位的元素,相對於其在普通流中的位置進行定位。

  • static 預設值。沒有定位,元素出現在正常的流中

  • sticky 生成粘性定位的元素,容器的位置根據正常文件流計算得出

如何解決跨域問題

JSONP:

原理是:動態插入script標籤,通過script標籤引入一個js檔案,這個js檔案載入成功後會執行我們在url引數中指定的函式,並且會把我們需要的json資料作為引數傳入。

由於同源策略的限制,XmlHttpRequest只允許請求當前源(域名、協議、埠)的資源,為了實現跨域請求,可以通過script標籤實現跨域請求,然後在服務端輸出JSON資料並執行回撥函式,從而解決了跨域的資料請求。

優點是相容性好,簡單易用,支援瀏覽器與伺服器雙向通訊。缺點是隻支援GET請求。

JSONPjson+padding(內填充),顧名思義,就是把JSON填充到一個盒子裡

<script>
    function createJs(sUrl){

        var oScript = document.createElement('script');
        oScript.type = 'text/javascript';
        oScript.src = sUrl;
        document.getElementsByTagName('head')[0].appendChild(oScript);
    }

    createJs('jsonp.js');

    box({
       'name': 'test'
    });

    function box(json){
        alert(json.name);
    }
</script>

CORS

伺服器端對於CORS的支援,主要就是通過設定Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設定,就可以允許Ajax進行跨域的訪問。

通過修改document.domain來跨子域

將子域和主域的document.domain設為同一個主域.前提條件:這兩個域名必須屬於同一個基礎域名!而且所用的協議,埠都要一致,否則無法利用document.domain進行跨域

主域相同的使用document.domain

使用window.name來進行跨域

window物件有個name屬性,該屬性有個特徵:即在一個視窗(window)的生命週期內,視窗載入的所有的頁面都是共享一個window.name的,每個頁面對window.name都有讀寫的許可權,window.name是持久存在一個視窗載入過的所有頁面中的

使用HTML5中新引進的window.postMessage方法來跨域傳送資料

還有flash、在伺服器上設定代理頁面等跨域方式。個人認為window.name的方法既不復雜,也能相容到幾乎所有瀏覽器,這真是極好的一種跨域方法。

XMLJSON的區別?

(1).資料體積方面。

JSON相對於XML來講,資料的體積小,傳遞的速度更快些。

(2).資料互動方面。

JSON與JavaScript的互動更加方便,更容易解析處理,更好的資料互動。

(3).資料描述方面。

JSON對資料的描述性比XML較差。

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

談談你對webpack的看法

WebPack 是一個模組打包工具,你可以使用WebPack管理你的模組依賴,並編繹輸出模組們所需的靜態檔案。它能夠很好地管理、打包Web開發中所用到的以及各種靜態檔案(圖片、字型等),讓開發過程更加高效。對於不同型別的資源,webpack有對應的模組載入器。webpack模組打包器會分析模組間的依賴關係,最後 生成了優化且合併後的靜態資源。

webpack的兩大特色:

1.code splitting(可以自動完成)

2.loader 可以處理各種型別的靜態檔案,並且支援串聯操作

webpack 是以commonJS的形式來書寫指令碼滴,但對 AMD/CMD 的支援也很全面,方便舊專案進行程式碼遷移。

webpack具有requireJsbrowserify的功能,但仍有很多自己的新特性:

1. 對 CommonJS 、 AMD 、ES6的語法做了相容

2. 對js、css、圖片等資原始檔都支援打包

3. 串聯式模組載入器以及外掛機制,讓其具有更好的靈活性和擴充套件性,例如提供對CoffeeScript、ES6的支援

4. 有獨立的配置檔案webpack.config.js

5. 可以將程式碼切割成不同的chunk,實現按需載入,降低了初始化時間

6. 支援 SourceUrls 和 SourceMaps,易於除錯

7. 具有強大的Plugin介面,大多是內部外掛,使用起來比較靈活

8.webpack 使用非同步 IO 並具有多級快取。這使得 webpack 很快且在增量編譯上更加快

說說TCP傳輸的三次握手四次揮手策略

為了準確無誤地把資料送達目標處,TCP協議採用了三次握手策略。用TCP協議把資料包送出去後,TCP不會對傳送 後的情況置之不理,它一定會向對方確認是否成功送達。握手過程中使用了TCP的標誌:SYNACK

傳送端首先發送一個帶SYN標誌的資料包給對方。接收端收到後,回傳一個帶有SYN/ACK標誌的資料包以示傳達確認資訊。 
最後,傳送端再回傳一個帶ACK標誌的資料包,代表“握手”結束。 
若在握手過程中某個階段莫名中斷,TCP協議會再次以相同的順序傳送相同的資料包。

斷開一個TCP連線則需要“四次握手”:

  • 第一次揮手:主動關閉方傳送一個FIN,用來關閉主動方到被動關閉方的資料傳送,也就是主動關閉方告訴被動關閉方:我已經不 會再給你發資料了(當然,在fin包之前傳送出去的資料,如果沒有收到對應的ack確認報文,主動關閉方依然會重發這些資料),但是,此時主動關閉方還可 以接受資料。

  • 第二次揮手:被動關閉方收到FIN包後,傳送一個ACK給對方,確認序號為收到序號+1(與SYN相同,一個FIN佔用一個序號)。

  • 第三次揮手:被動關閉方傳送一個FIN,用來關閉被動關閉方到主動關閉方的資料傳送,也就是告訴主動關閉方,我的資料也傳送完了,不會再給你發資料了。

  • 第四次揮手:主動關閉方收到FIN後,傳送一個ACK給被動關閉方,確認序號為收到序號+1,至此,完成四次揮手。

TCP和UDP的區別

TCP(Transmission Control Protocol,傳輸控制協議)是基於連線的協議,也就是說,在正式收發資料前,必須和對方建立可靠的連線。一個TCP連線必須要經過三次“對話”才能建立起來

UDP(User Data Protocol,使用者資料報協議)是與TCP相對應的協議。它是面向非連線的協議,它不與對方建立連線,而是直接就把資料包傳送過去! 
UDP適用於一次只傳送少量資料、對可靠性要求不高的應用環境。

說說你對作用域鏈的理解

作用域鏈的作用是保證執行環境裡有權訪問的變數和函式是有序的,作用域鏈的變數只能向上訪問,變數訪問到window物件即被終止,作用域鏈向下訪問變數是不被允許的。

建立ajax過程

(1)建立XMLHttpRequest物件,也就是建立一個非同步呼叫物件.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證資訊.

(3)設定響應HTTP請求狀態變化的函式.

(4)傳送HTTP請求.

(5)獲取非同步呼叫返回的資料.

(6)使用JavaScript和DOM實現區域性重新整理.

漸進增強和優雅降級

漸進增強 :針對低版本瀏覽器進行構建頁面,保證最基本的功能,然後再針對高階瀏覽器進行效果、互動等改進和追加功能達到更好的使用者體驗。

優雅降級 :一開始就構建完整的功能,然後再針對低版本瀏覽器進行相容。

常見web安全及防護原理

sql注入原理

就是通過把SQL命令插入到Web表單遞交或輸入域名或頁面請求的查詢字串,最終達到欺騙伺服器執行惡意的SQL命令。

總的來說有以下幾點

1.永遠不要信任使用者的輸入,要對使用者的輸入進行校驗,可以通過正則表示式,或限制長度,對單引號和雙"-"進行轉換等。

2.永遠不要使用動態拼裝SQL,可以使用引數化的SQL或者直接使用儲存過程進行資料查詢存取。

3.永遠不要使用管理員許可權的資料庫連線,為每個應用使用單獨的許可權有限的資料庫連線。

4.不要把機密資訊明文存放,請加密或者hash掉密碼和敏感的資訊。

XSS原理及防範

Xss(cross-site scripting)攻擊指的是攻擊者往Web頁面裡插入惡意 html標籤或者javascript程式碼。比如:攻擊者在論壇中放一個

看似安全的連結,騙取使用者點選後,竊取cookie中的使用者私密資訊;或者攻擊者在論壇中加一個惡意表單,

當用戶提交表單的時候,卻把資訊傳送到攻擊者的伺服器中,而不是使用者原本以為的信任站點。

XSS防範方法

首先程式碼裡對使用者輸入的地方和變數都需要仔細檢查長度和對”<”,”>”,”;”,”’”等字元做過濾;其次任何內容寫到頁面之前都必須加以encode,避免不小心把html tag 弄出來。這一個層面做好,至少可以堵住超過一半的XSS 攻擊。

首先,避免直接在cookie 中洩露使用者隱私,例如email、密碼等等。

其次,通過使cookie 和系統ip 繫結來降低cookie 洩露後的危險。這樣攻擊者得到的cookie 沒有實際價值,不可能拿來重放。

如果網站不需要再瀏覽器端對cookie 進行操作,可以在Set-Cookie 末尾加上HttpOnly 來防止javascript 程式碼直接獲取cookie 。

儘量採用POST 而非GET 提交表單

XSS與CSRF有什麼區別嗎?

XSS是獲取資訊,不需要提前知道其他使用者頁面的程式碼和資料包。CSRF是代替使用者完成指定的動作,需要知道其他使用者頁面的程式碼和資料包。

要完成一次CSRF攻擊,受害者必須依次完成兩個步驟:

登入受信任網站A,並在本地生成Cookie。

在不登出A的情況下,訪問危險網站B。

CSRF的防禦

  • 服務端的CSRF方式方法很多樣,但總的思想都是一致的,就是在客戶端頁面增加偽隨機數。

  • 通過驗證碼的方法

Web Worker 和webSocket

worker主執行緒:

1.通過 worker = new Worker( url ) 載入一個JS檔案來建立一個worker,同時返回一個worker例項。

2.通過worker.postMessage( data ) 方法來向worker傳送資料。

3.繫結worker.onmessage方法來接收worker傳送過來的資料。

4.可以使用 worker.terminate() 來終止一個worker的執行。

WebSocketWeb應用程式的傳輸協議,它提供了雙向的,按序到達的資料流。他是一個Html5協議,WebSocket的連線是持久的,他通過在客戶端和伺服器之間保持雙工連線,伺服器的更新可以被及時推送給客戶端,而不需要客戶端以一定時間間隔去輪詢。

HTTP和HTTPS

HTTP協議通常承載於TCP協議之上,在HTTPTCP之間新增一個安全協議層(SSLTSL),這個時候,就成了我們常說的HTTPS。

預設HTTP的埠號為80,HTTPS的埠號為443。

為什麼HTTPS安全

因為網路請求需要中間有很多的伺服器路由器的轉發。中間的節點都可能篡改資訊,而如果使用HTTPS,金鑰在你和終點站才有。https之所以比http安全,是因為他利用ssl/tls協議傳輸。它包含證書,解除安裝,流量轉發,負載均衡,頁面適配,瀏覽器適配,refer傳遞等。保障了傳輸過程的安全性

對前端模組化的認識

AMD 是 RequireJS 在推廣過程中對模組定義的規範化產出。

CMD 是 SeaJS 在推廣過程中對模組定義的規範化產出。

AMD 是提前執行,CMD 是延遲執行。

AMD推薦的風格通過返回一個物件做為模組物件,CommonJS的風格通過對module.exportsexports的屬性賦值來達到暴露模組物件的目的。

CMD模組方式

define(function(require, exports, module) {

      // 模組程式碼

    });

Javascript垃圾回收方法

標記清除(mark and sweep)

這是JavaScript最常見的垃圾回收方式,當變數進入執行環境的時候,比如函式中宣告一個變數,垃圾回收器將其標記為“進入環境”,當變數離開環境的時候(函式執行結束)將其標記為“離開環境”。

垃圾回收器會在執行的時候給儲存在記憶體中的所有變數加上標記,然後去掉環境中的變數以及被環境中變數所引用的變數(閉包),在這些完成之後仍存在標記的就是要刪除的變量了

引用計數(reference counting)

在低版本IE中經常會出現記憶體洩露,很多時候就是因為其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每個值被使用的次數,當聲明瞭一個 變數並將一個引用型別賦值給該變數的時候這個值的引用次數就加1,如果該變數的值變成了另外一個,則這個值得引用次數減1,當這個值的引用次數變為0的時 候,說明沒有變數在使用,這個值沒法被訪問了,因此可以將其佔用的空間回收,這樣垃圾回收器會在執行的時候清理掉引用次數為0的值佔用的空間。

在IE中雖然JavaScript物件通過標記清除的方式進行垃圾回收,但BOM與DOM物件卻是通過引用計數回收垃圾的, 
也就是說只要涉及BOM及DOM就會出現迴圈引用問題。

你覺得前端工程的價值體現在哪

為簡化使用者使用提供技術支援(互動部分)

為多個瀏覽器相容性提供支援

為提高使用者瀏覽速度(瀏覽器效能)提供支援

為跨平臺或者其他基於webkit或其他渲染引擎的應用提供支援

為展示資料提供支援(資料介面)

談談效能優化問題

程式碼層面:避免使用css表示式,避免使用高階選擇器,通配選擇器。

快取利用:快取Ajax,使用CDN,使用外部js和css檔案以便快取,新增Expires頭,服務端配置Etag,減少DNS查詢等

請求數量:合併樣式和指令碼,使用css圖片精靈,初始首屏之外的圖片資源按需載入,靜態資源延遲載入。

請求頻寬:壓縮檔案,開啟GZIP,

程式碼層面的優化

  • hash-table來優化查詢

  • 少用全域性變數

  • innerHTML代替DOM操作,減少DOM操作次數,優化javascript效能

  • setTimeout來避免頁面失去響應

  • 快取DOM節點查詢的結果

  • 避免使用CSS Expression

  • 避免全域性查詢

  • 避免使用with(with會建立自己的作用域,會增加作用域鏈長度)

  • 多個變數宣告合併

  • 避免圖片和iFrame等的空Src。空Src會重新載入當前頁面,影響速度和效率

  • 儘量避免寫在HTML標籤中寫Style屬性

移動端效能優化

  • 儘量使用css3動畫,開啟硬體加速。
  • 適當使用touch事件代替click事件。
  • 避免使用css3漸變陰影效果。
  • 可以用transform: translateZ(0)來開啟硬體加速。
  • 不濫用Float。Float在渲染時計算量比較大,儘量減少使用
  • 不濫用Web字型。Web字型需要下載,解析,重繪當前頁面,儘量減少使用。
  • 合理使用requestAnimationFrame動畫代替setTimeout
  • CSS中的屬性(CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video)會觸發GPU渲染,請合理使用。過渡使用會引發手機過耗電增加
  • PC端的在移動端同樣適用

什麼是Etag?

當傳送一個伺服器請求時,瀏覽器首先會進行快取過期判斷。瀏覽器根據快取過期時間判斷快取檔案是否過期。