獻給前端求職路上的大家(下)

註明:上一篇獻給前端求職路上的大家(上),主要側重說的是前端面試中的html和css這兩塊常見問題,這是基礎,其實在真正面試中,面試官每每採用的是由難到易的套路,那js和jQuery就是重中之重了,以及針對項目和所用技術方面的一些問題也就是你的必備儲糧啦!javascript


javascriptcss

什麼是閉包(closure),爲何要用它?

閉包簡單的說就是一個函數能訪問外部函數的變量,這就是閉包,不理解就看代碼,例如:html

function aa(x){
       var num=1;
      function bb(y){
          console.log(x+y+(++num));
     }
}

aa函數中的bb函數就是閉包了,bb函數可使用aa函數的局部變量,參數,最典型的閉包應該是下面這樣,將定義在函數中的函數做爲返回值前端

function aa(x){
       var num=1;
      function bb(y){
          console.log(x+y+(++num));
     }
return bb;
}

閉包的另外一種做用是隔離做用域,請看下面這段代碼vue

for(var i=0;i<2;i++){
      setTimeout(function(){
              console.log(i);
        },0);
}

上面這段代碼的執行結果是2,2而不是0,1,由於等for循環出來後,執行setTimeout中的函數時,i的值已經變成了2.html5

談談This對象的理解

  • this是js的一個關鍵字,隨着函數使用場合不一樣,this的值會發生變化。java

  • 可是有一個總原則,那就是this指的是調用函數的那個對象。node

  • this通常狀況下:是全局對象Global。 做爲方法調用,那麼this就是指這個對象react

事件是?IE與火狐的事件機制有什麼區別? 如何阻止冒泡?

  1. 咱們在網頁中的某個操做(有的操做對應多個事件)。例如:當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。jquery

  2. 事件處理機制:IE是事件冒泡、火狐是 事件捕獲;

  3. ev.stopPropagation();

JavaScript的做用域和做用域鏈?

JavaScript的做用域指的是變量的做用範圍,內部做用域由函數的形參,實參,局部變量,函數構成,內部做用域和外部的做用域一層層的連接起來造成做用域鏈,當在在函數內部要訪問一個變量的時候,首先查找本身的內部做用域有沒有這個變量,若是沒有就到這個對象的原型對象中去查找,仍是沒有的話,就到該做用域所在的做用域中找,直到到window所在的做用域,每一個函數在聲明的時候就默認有一個外部做用域的存在了,代碼以下:

var t=4;
function aa(){
       var num1=12;
       funciton bb(){
       var num2=34;
       console.log(t+" "+num1+" "+num2);
      }
}

bb找t變量的過程就是,先到本身的內部做用域中找,發現沒有找到,而後到bb所在的最近的外部變量中找,也就是aa的內部做用域,仍是沒有找到,再到window的做用域中找,結果找到了

「use strict」;是什麼意思 ? 使用它的好處和壞處分別是什麼?

ECMAscript 5添加了第二種運行模式:"嚴格模式"(strict mode)。顧名思義,這種模式使得Javascript在更嚴格的條件下運行。
設立"嚴格模式"的目的,主要有如下幾個:

優勢:

  1. 消除Javascript語法的一些不合理、不嚴謹之處,減小一些怪異行爲;

  2. 消除代碼運行的一些不安全之處,保證代碼運行的安全;

  3. 提升編譯器效率,增長運行速度;

  4. 爲將來新版本的Javascript作好鋪墊。

    注:通過測試 IE6,7,8,9 均不支持嚴格模式。

缺點:

如今網站的 JS 都會進行壓縮,一些文件用了嚴格模式,而另外一些沒有。這時這些原本是嚴格模式的文件,被 merge 後,這個就合併到了文件的中間,不只沒有指示嚴格模式,反而在壓縮後浪費了字節。

new操做符具體幹了什麼呢?

一、建立一個空對象,而且 this 變量引用該對象,同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。
三、新建立的對象由 this 所引用,而且最後隱式的返回 this 。

var obj  = {};
obj.__proto__ = Base.prototype;
Base.call(obj);

Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?

hasOwnProperty()

你對JSON 的瞭解?

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小 {'age':'12', 'name':'back'}

js延遲加載的方式有哪些?

defer和async、動態建立DOM方式(用得最多)、按需異步載入js

ajax 是什麼?優缺點有哪些?

優勢:

  1. 經過異步模式,提高了用戶體驗

  2. 優化了瀏覽器和服務器之間的傳輸,減小沒必要要的數據往返,減小了帶寬佔用

  3. Ajax在客戶端運行,承擔了一部分原本由服務器承擔的工做,減小了大用戶量下的服務器負載。

Ajax的最大的特色:
Ajax能夠實現動態不刷新(局部刷新)

缺點:

一、ajax不支持瀏覽器back按鈕。
二、安全問題 AJAX暴露了與服務器交互的細節。
三、對搜索引擎的支持比較弱。
四、破壞了程序的異常機制。
五、不容易調試。

如何解決跨域問題?

jsonp(利用script標籤的跨域能力)跨域、websocket(html5的新特性,是一種新協議)跨域、設置代理服務器(由服務器替咱們向不一樣源的服務器請求數據)、CORS(跨源資源共享,cross origin resource sharing)、iframe跨域、postMessage(包含iframe的頁面向iframe傳遞消息)

模塊化怎麼作?當即執行函數,不暴露私有成員

var module1 = (function(){
    var _count = 0;
    var m1 = function(){
      //...
    };
    var m2 = function(){
      //...
    };
    return {
      m1 : m1,
      m2 : m2
    };
  })();

異步加載的方式有哪些?

(1) defer,只支持IE
(2) async: false,(默認是true);
(3) 建立script,插入到DOM中,加載完畢後callBack

documen.write和 innerHTML的區別

  • document.write只能重繪整個頁面

  • innerHTML能夠重繪頁面的一部分

.call() 和 .apply() 的區別?

例子中用 add 來替換 sub,add.call(sub,3,1) == add(3,1) ,因此運行結果爲:alert(4);
注意:js 中的函數實際上是對象,函數名是對 Function 對象的引用。

function add(a,b)
{
    alert(a+b);
}

function sub(a,b)
{
    alert(a-b);
}

add.call(sub,3,1);

Jquery與jQuery UI 有啥區別?

  • *jQuery是一個js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。

  • *jQuery UI則是在jQuery的基礎上,利用jQuery的擴展性,設計的插件。

  • 提供了一些經常使用的界面元素,諸如對話框、拖動行爲、改變大小行爲等等

jquery 中如何將數組轉化爲json字符串,而後再轉化回來?

jQuery中沒有提供這個功能,因此你須要先編寫兩個jQuery的擴展:

$.fn.stringifyArray = function(array) {
 return JSON.stringify(array)
}

$.fn.parseArray = function(array) {
 return JSON.parse(array)
} 

而後調用:
$("").stringifyArray(array)

針對 jQuery 的優化方法?

  • 基於Class的選擇性的性能相對於Id選擇器開銷很大,由於需遍歷全部DOM元素。

  • 頻繁操做的DOM,先緩存起來再操做。用Jquery的鏈式調用更好。
    好比:var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {}
    for 循環每一次循環都查找了數組 (arr) 的.length 屬性,在開始循環的時候設置一個變量來存儲這個數字,可讓循環跑得更快:
    for (var i = size, length = arr.length; i < length; i++) {}

JavaScript中的變量聲明提高?

在函數用var聲明的變量會在函數中函數體執行以前預先加載(變量回預先聲明可是不會賦值)
請看代碼,就會秒懂

var num=1;
function aa(){
  console.log(num);     //undeifned
  var num=2; 
  console.log(num);  //2
}
aa();

爲何在aa函數中會出現上述結果呢,這就是JavaScript的變量提高了,雖然變量num的定義在後面,不過瀏覽器在解析的時候,會把變量的定義放到最前面,上面的aa函數至關於

function aa(){
  var num;
  console.log(num);   //undefined
  num=2; 
  console.log(num);   //2
}

(簡單的內存圖)

那些操做會形成內存泄漏?

  • 內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。

  • 垃圾回收器按期掃描對象,並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0(沒有其餘對象引用過該對象),或對該對象的唯一引用是循環的,那麼該對象的內存便可回收。

  • setTimeout 的第一個參數使用字符串而非函數的話,會引起內存泄漏。

  • 閉包、控制檯日誌、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)

如何判斷當前腳本運行在瀏覽器仍是node環境中?(阿里)

經過判斷Global對象是否爲window,若是不爲window,當前腳本沒有運行在瀏覽器中

固然,在面試中,除了要知道這些基礎的知識外,不少時候須要的是你的工做經驗,你有沒有?接下來就是在工做中,項目中,遇到的問題,解決方案,以及思考的一些套路啦


其餘問題(舉一些我遇見過的及彙總下來的問題,謹供你們參考)

  • 你遇到過比較難的技術問題是?你是如何解決的?

  • 常使用的庫有哪些?經常使用的前端開發工具?開發過什麼應用或組件?

  • 頁面重構怎麼操做?

  • 列舉IE 與其餘瀏覽器不同的特性?

  • 99%的網站都須要被重構是那本書上寫的?

  • 什麼叫優雅降級和漸進加強?

  • WEB應用從服務器主動推送Data到客戶端有那些方式?

  • 你在如今的團隊處於什麼樣的角色,起到了什麼明顯的做用?

  • 除了前端之外還了解什麼其它技術麼?你最最厲害的技能是什麼?

  • 如何設計突發大規模併發架構?

  • 你認爲怎樣纔是全端工程師(Full Stack developer)?

  • 介紹一個你最得意的做品吧?

  • 你的優勢是什麼?缺點是什麼?

  • 如何管理前端團隊?

  • 最近在學什麼?能談談你將來3,5年給本身的規劃嗎?

對Node的優勢和缺點提出了本身的見解?

優勢

  • 由於Node是基於事件驅動和無阻塞的,因此很是適合處理併發請求, 所以構建在Node上的代理服務器相比其餘技術實現(如Ruby)的服務器表現要好得多。 此外,與Node代理服務器交互的客戶端代碼是由javascript語言編寫的, 所以客戶端和服務器端都用同一種語言編寫,這是很是美妙的事情。

缺點:

  • Node是一個相對新的開源項目,因此不太穩定,它老是一直在變, 並且缺乏足夠多的第三方庫支持。看起來,就像是Ruby/Rails當年的樣子。

你有哪些性能優化的方法?(看雅虎14條性能優化原則)

(1) 減小http請求次數:CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網頁Gzip,CDN託管,data緩存 ,圖片服務器。
(2) 前端模板 JS+數據,減小因爲HTML標籤致使的帶寬浪費,前端用變量保存AJAX請求結果,每次操做本地變量,不用請求,減小請求次數
(3) 用innerHTML代替DOM操做,減小DOM操做次數,優化javascript性能。
(4) 當須要設置的樣式不少時設置className而不是直接操做style。
(5) 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。
(6) 避免使用CSS Expression(css表達式)又稱Dynamic properties(動態屬性)。
(7) 圖片預加載,將樣式表放在頂部,將腳本放在底部 加上時間戳。
(8) 避免在頁面的主體佈局中使用table,table要等其中的內容徹底下載以後纔會顯示出來,顯示比div+css佈局慢。

http狀態碼有那些?分別表明是什麼意思?

100-199 用於指定客戶端應相應的某些動做。 
200-299 用於表示請求成功。 
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 
400-499 用於指出客戶端的錯誤。
400    一、語義有誤,當前請求沒法被服務器理解。
401   當前請求須要用戶驗證 
403  服務器已經理解請求,可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用

一個頁面從輸入 URL 到頁面加載顯示完成,這個過程當中都發生了什麼?(流程說的越詳細越好)

  • 查找瀏覽器緩存

  • DNS解析、查找該域名對應的IP地址、重定向(301)、發出第二個GET請求

  • 進行HTTP協議會話

  • 客戶端發送報頭(請求報頭)

  • 服務器回饋報頭(響應報頭)

  • html文檔開始下載

  • 文檔樹創建,根據標記請求所需指定MIME類型的文件

  • 文件顯示

    {瀏覽器這邊作的工做大體分爲如下幾步:
    加載:根據請求的URL進行域名解析,向服務器發起請求,接收文件(HTML、JS、CSS、圖象等)。
    解析:對加載到的資源(HTML、JS、CSS等)進行語法解析,建議相應的內部數據結構(好比HTML的DOM樹,JS的(對象)屬性表,CSS的樣式規則等等)}

你經常使用的開發工具是什麼,爲何?

能夠從你接觸前端到逐步深刻學習使用的過程當中,你用過什麼編輯器以及轉化的過程和緣由方面回答

對前端界面工程師這個職位是怎麼樣理解的?它的前景會怎麼樣?

  • 前端是最貼近用戶的程序員,比後端、數據庫、產品經理、運營、安全都近。

    • 實現界面交互

    • 提高用戶體驗

    • 有了Node.js,前端能夠實現服務端的一些事情

  • 前端是最貼近用戶的程序員,前端的能力就是能讓產品從 90分進化到 100 分,甚至更好,

  • 參與項目,快速高質量完成實現效果圖,精確到1px;

  • 與團隊成員,UI設計,產品經理的溝通;

  • 作好的頁面結構,頁面重構和用戶體驗;

  • 處理hack,兼容、寫出優美的代碼格式;

  • 針對服務器的優化、擁抱最新前端技術。

平時如何管理你的項目?

  • 先期團隊必須肯定好全局樣式(globe.css),編碼模式(utf-8) 等;

  • 編寫習慣必須一致(例如都是採用繼承式的寫法,單樣式都寫成一行);

  • 標註樣式編寫人,各模塊都及時標註(標註關鍵樣式調用的地方);

  • 頁面進行標註(例如 頁面 模塊 開始和結束);

  • CSS跟HTML 分文件夾並行存放,命名都得統一(例如style.css);

  • JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

  • 圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

說說最近最流行的一些東西吧?常去哪些網站?

Node.js、Mongodb、npm、MVVM、MEAN、three.js 、angular、react、vue
github 、 知乎 、 MDN、 ES6、 Bootstrap 、 git

移動端(Android IOS)怎麼作好用戶體驗?
  • 清晰的視覺縱線、信息的分組、極致的減法、

  • 利用選擇代替輸入、標籤及文字的排布方式、

  • 依靠明文確認密碼、合理的鍵盤利用、

在面試中,實際上是一個互動的環節,不只要回答問題,也要抓住機會,得到主動權,想問公司的一些問題?

問公司問題:

  • 目前關注哪些最新的Web前端技術(將來的發展方向)?

  • 前端團隊如何工做的(實現一個產品的流程)?

  • 公司的薪資結構是什麼樣子的?(摸清本身具體在什麼層次)

  • 公司的晉升機制具體是怎麼樣的?(看出你的上進心的穩定性)

最後贈言

企業面試主要是看你能不能幹的了。企業很難招到一個適合的人,不會輕易把你淘汰掉。

若是對方挑你毛病,證實對方有招聘你的意圖,不然的話,對方不會浪費時間挑你毛病,挑你毛病的主要緣由是,想壓榨你工資,因此你要自信一點,不管對方怎麼挑你毛病都不要懼怕。企業中沒有專門的面試官。

不是說我面試了這一家,他就必定要錄取我,還有不少公司等着你去挑,目光放長遠一點,必定要拿到本身滿意的薪資才作。

面試就是一個解開雙方謊話的過程,你能瞞過對方,證實你贏了。

換個心態去面試,不是企業在挑你,而是你在挑企業。昂起你自信的頭顱,勇敢的去迎接挑戰吧!你的將來屬於你!

轉載自:http://www.jianshu.com/p/87fa...

~END~

好了,下面是廣告時間。前端學習羣,入羣即送學習資料。如今還不滿,從速哦!入羣加笑笑微信:iamaixiaoxiao

相關文章
相關標籤/搜索