摘要：一般情況下是全局對(duì)象。是可以被偵測(cè)到的行為。顧名思義，這種模式使得在更嚴(yán)格的條件下運(yùn)行。安全問題暴露了與服務(wù)器交互的細(xì)節(jié)。破壞了程序的異常機(jī)制。避免使用表達(dá)式又稱動(dòng)態(tài)屬性。用于表示請(qǐng)求成功。

注明：上一篇獻(xiàn)給前端求職路上的你們（上),主要側(cè)重說的是前端面試中的html和css這兩塊常見問題，這是基礎(chǔ)，其實(shí)在真正面試中，面試官往往采用的是由難到易的套路，那js和jQuery就是重中之重了，以及針對(duì)項(xiàng)目和所用技術(shù)方面的一些問題也就是你的必備儲(chǔ)糧啦！

javascript

閉包簡(jiǎn)單的說就是一個(gè)函數(shù)能訪問外部函數(shù)的變量，這就是閉包，不理解就看代碼，例如：

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

aa函數(shù)中的bb函數(shù)就是閉包了，bb函數(shù)可以使用aa函數(shù)的局部變量，參數(shù)，最典型的閉包應(yīng)該是下面這樣，將定義在函數(shù)中的函數(shù)作為返回值

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

閉包的另一種作用是隔離作用域，請(qǐng)看下面這段代碼

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

上面這段代碼的執(zhí)行結(jié)果是2,2而不是0,1，因?yàn)榈萬or循環(huán)出來后，執(zhí)行setTimeout中的函數(shù)時(shí)，i的值已經(jīng)變成了2.

this是js的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化。

但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。

this一般情況下：是全局對(duì)象Global。 作為方法調(diào)用，那么this就是指這個(gè)對(duì)象

我們?cè)诰W(wǎng)頁中的某個(gè)操作（有的操作對(duì)應(yīng)多個(gè)事件）。例如：當(dāng)我們點(diǎn)擊一個(gè)按鈕就會(huì)產(chǎn)生一個(gè)事件。是可以被 JavaScript 偵測(cè)到的行為。

事件處理機(jī)制：IE是事件冒泡、火狐是 事件捕獲；

ev.stopPropagation();

JavaScript的作用域指的是變量的作用范圍，內(nèi)部作用域由函數(shù)的形參，實(shí)參，局部變量，函數(shù)構(gòu)成，內(nèi)部作用域和外部的作用域一層層的鏈接起來形成作用域鏈，當(dāng)在在函數(shù)內(nèi)部要訪問一個(gè)變量的時(shí)候，首先查找自己的內(nèi)部作用域有沒有這個(gè)變量，如果沒有就到這個(gè)對(duì)象的原型對(duì)象中去查找，還是沒有的話，就到該作用域所在的作用域中找，直到到window所在的作用域，每個(gè)函數(shù)在聲明的時(shí)候就默認(rèn)有一個(gè)外部作用域的存在了，代碼如下：

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

bb找t變量的過程就是，先到自己的內(nèi)部作用域中找，發(fā)現(xiàn)沒有找到，然后到bb所在的最近的外部變量中找，也就是aa的內(nèi)部作用域，還是沒有找到，再到window的作用域中找，結(jié)果找到了

ECMAscript 5添加了第二種運(yùn)行模式："嚴(yán)格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴(yán)格的條件下運(yùn)行。
設(shè)立"嚴(yán)格模式"的目的，主要有以下幾個(gè)：

消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;

消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；

提高編譯器效率，增加運(yùn)行速度；

為未來新版本的Javascript做好鋪墊。

注：經(jīng)過測(cè)試 IE6,7,8,9 均不支持嚴(yán)格模式。

現(xiàn)在網(wǎng)站的 JS 都會(huì)進(jìn)行壓縮，一些文件用了嚴(yán)格模式，而另一些沒有。這時(shí)這些本來是嚴(yán)格模式的文件，被 merge 后，這個(gè)就合并到了文件的中間，不僅沒有指示嚴(yán)格模式，反而在壓縮后浪費(fèi)了字節(jié)。

1、創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型。
2、屬性和方法被加入到 this 引用的對(duì)象中。
3、新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this 。

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

hasOwnProperty()

JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式。
它是基于JavaScript的一個(gè)子集。數(shù)據(jù)格式簡(jiǎn)單, 易于讀寫, 占用帶寬小 {"age":"12", "name":"back"}

defer和async、動(dòng)態(tài)創(chuàng)建DOM方式（用得最多）、按需異步載入js

通過異步模式，提升了用戶體驗(yàn)

優(yōu)化了瀏覽器和服務(wù)器之間的傳輸，減少不必要的數(shù)據(jù)往返，減少了帶寬占用

Ajax在客戶端運(yùn)行，承擔(dān)了一部分本來由服務(wù)器承擔(dān)的工作，減少了大用戶量下的服務(wù)器負(fù)載。

Ajax的最大的特點(diǎn)：
Ajax可以實(shí)現(xiàn)動(dòng)態(tài)不刷新（局部刷新）

1、ajax不支持瀏覽器back按鈕。
2、安全問題 AJAX暴露了與服務(wù)器交互的細(xì)節(jié)。
3、對(duì)搜索引擎的支持比較弱。
4、破壞了程序的異常機(jī)制。
5、不容易調(diào)試。

jsonp（利用script標(biāo)簽的跨域能力）跨域、websocket（html5的新特性，是一種新協(xié)議）跨域、設(shè)置代理服務(wù)器（由服務(wù)器替我們向不同源的服務(wù)器請(qǐng)求數(shù)據(jù)）、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,（默認(rèn)是true）;
(3) 創(chuàng)建script，插入到DOM中，加載完畢后callBack

document.write只能重繪整個(gè)頁面

innerHTML可以重繪頁面的一部分

例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以運(yùn)行結(jié)果為：alert(4);
注意：js 中的函數(shù)其實(shí)是對(duì)象，函數(shù)名是對(duì) Function 對(duì)象的引用。

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

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

add.call(sub,3,1);

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

*jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件。

提供了一些常用的界面元素，諸如對(duì)話框、拖動(dòng)行為、改變大小行為等等

jquery 中如何將數(shù)組轉(zhuǎn)化為json字符串，然后再轉(zhuǎn)化回來？

jQuery中沒有提供這個(gè)功能，所以你需要先編寫兩個(gè)jQuery的擴(kuò)展：

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

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

然后調(diào)用：
$("").stringifyArray(array)

基于Class的選擇性的性能相對(duì)于Id選擇器開銷很大，因?yàn)樾璞闅v所有DOM元素。

頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈?zhǔn)秸{(diào)用更好。
比如：var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {}
for 循環(huán)每一次循環(huán)都查找了數(shù)組 (arr) 的.length 屬性，在開始循環(huán)的時(shí)候設(shè)置一個(gè)變量來存儲(chǔ)這個(gè)數(shù)字，可以讓循環(huán)跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}

在函數(shù)用var聲明的變量會(huì)在函數(shù)中函數(shù)體執(zhí)行之前預(yù)先加載（變量回預(yù)先聲明但是不會(huì)賦值）
請(qǐng)看代碼,就會(huì)秒懂

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

為什么在aa函數(shù)中會(huì)出現(xiàn)上述結(jié)果呢，這就是JavaScript的變量提升了，雖然變量num的定義在后面，不過瀏覽器在解析的時(shí)候，會(huì)把變量的定義放到最前面，上面的aa函數(shù)相當(dāng)于

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

(簡(jiǎn)單的內(nèi)存圖)

內(nèi)存泄漏指任何對(duì)象在您不再擁有或需要它之后仍然存在。

垃圾回收器定期掃描對(duì)象，并計(jì)算引用了每個(gè)對(duì)象的其他對(duì)象的數(shù)量。如果一個(gè)對(duì)象的引用數(shù)量為 0（沒有其他對(duì)象引用過該對(duì)象），或?qū)υ搶?duì)象的惟一引用是循環(huán)的，那么該對(duì)象的內(nèi)存即可回收。

setTimeout 的第一個(gè)參數(shù)使用字符串而非函數(shù)的話，會(huì)引發(fā)內(nèi)存泄漏。

閉包、控制臺(tái)日志、循環(huán)（在兩個(gè)對(duì)象彼此引用且彼此保留時(shí)，就會(huì)產(chǎn)生一個(gè)循環(huán)）

如何判斷當(dāng)前腳本運(yùn)行在瀏覽器還是node環(huán)境中？（阿里）

通過判斷Global對(duì)象是否為window，如果不為window，當(dāng)前腳本沒有運(yùn)行在瀏覽器中

當(dāng)然，在面試中，除了要知道這些基礎(chǔ)的知識(shí)外，很多時(shí)候需要的是你的工作經(jīng)驗(yàn)，你有沒有？接下來就是在工作中，項(xiàng)目中，遇到的問題，解決方案，以及思考的一些套路啦

其他問題（舉一些我碰見過的及匯總下來的問題，謹(jǐn)供大家參考）

你遇到過比較難的技術(shù)問題是？你是如何解決的？

常使用的庫有哪些？常用的前端開發(fā)工具？開發(fā)過什么應(yīng)用或組件？

頁面重構(gòu)怎么操作？

列舉IE 與其他瀏覽器不一樣的特性？

99%的網(wǎng)站都需要被重構(gòu)是那本書上寫的？

什么叫優(yōu)雅降級(jí)和漸進(jìn)增強(qiáng)？

WEB應(yīng)用從服務(wù)器主動(dòng)推送Data到客戶端有那些方式？

你在現(xiàn)在的團(tuán)隊(duì)處于什么樣的角色，起到了什么明顯的作用？

除了前端以外還了解什么其它技術(shù)么？你最最厲害的技能是什么？

如何設(shè)計(jì)突發(fā)大規(guī)模并發(fā)架構(gòu)？

你認(rèn)為怎樣才是全端工程師（Full Stack developer）？

介紹一個(gè)你最得意的作品吧？

你的優(yōu)點(diǎn)是什么？缺點(diǎn)是什么？

如何管理前端團(tuán)隊(duì)?

最近在學(xué)什么？能談?wù)勀阄磥?，5年給自己的規(guī)劃嗎？

因?yàn)镹ode是基于事件驅(qū)動(dòng)和無阻塞的，所以非常適合處理并發(fā)請(qǐng)求， 因此構(gòu)建在Node上的代理服務(wù)器相比其他技術(shù)實(shí)現(xiàn)（如Ruby）的服務(wù)器表現(xiàn)要好得多。 此外，與Node代理服務(wù)器交互的客戶端代碼是由javascript語言編寫的， 因此客戶端和服務(wù)器端都用同一種語言編寫，這是非常美妙的事情。

Node是一個(gè)相對(duì)新的開源項(xiàng)目，所以不太穩(wěn)定，它總是一直在變， 而且缺少足夠多的第三方庫支持?？雌饋?，就像是Ruby/Rails當(dāng)年的樣子。

（1） 減少http請(qǐng)求次數(shù)：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網(wǎng)頁Gzip，CDN托管，data緩存 ，圖片服務(wù)器。
（2） 前端模板 JS+數(shù)據(jù)，減少由于HTML標(biāo)簽導(dǎo)致的帶寬浪費(fèi)，前端用變量保存AJAX請(qǐng)求結(jié)果，每次操作本地變量，不用請(qǐng)求，減少請(qǐng)求次數(shù)
（3） 用innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化javascript性能。
（4） 當(dāng)需要設(shè)置的樣式很多時(shí)設(shè)置className而不是直接操作style。
（5） 少用全局變量、緩存DOM節(jié)點(diǎn)查找的結(jié)果。減少IO讀取操作。
（6） 避免使用CSS Expression（css表達(dá)式)又稱Dynamic properties(動(dòng)態(tài)屬性)。
（7） 圖片預(yù)加載，將樣式表放在頂部，將腳本放在底部 加上時(shí)間戳。
（8） 避免在頁面的主體布局中使用table，table要等其中的內(nèi)容完全下載之后才會(huì)顯示出來，顯示比div+css布局慢。

100-199 用于指定客戶端應(yīng)相應(yīng)的某些動(dòng)作。 
200-299 用于表示請(qǐng)求成功。 
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息。 
400-499 用于指出客戶端的錯(cuò)誤。
400    1、語義有誤，當(dāng)前請(qǐng)求無法被服務(wù)器理解。
401   當(dāng)前請(qǐng)求需要用戶驗(yàn)證 
403  服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它。
500-599 用于支持服務(wù)器錯(cuò)誤。 503 – 服務(wù)不可用

查找瀏覽器緩存

DNS解析、查找該域名對(duì)應(yīng)的IP地址、重定向（301）、發(fā)出第二個(gè)GET請(qǐng)求

進(jìn)行HTTP協(xié)議會(huì)話

客戶端發(fā)送報(bào)頭(請(qǐng)求報(bào)頭)

服務(wù)器回饋報(bào)頭(響應(yīng)報(bào)頭)

html文檔開始下載

文檔樹建立，根據(jù)標(biāo)記請(qǐng)求所需指定MIME類型的文件

文件顯示

{瀏覽器這邊做的工作大致分為以下幾步：
加載：根據(jù)請(qǐng)求的URL進(jìn)行域名解析，向服務(wù)器發(fā)起請(qǐng)求，接收文件（HTML、JS、CSS、圖象等）。
解析：對(duì)加載到的資源（HTML、JS、CSS等）進(jìn)行語法解析，建議相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（比如HTML的DOM樹，JS的（對(duì)象）屬性表，CSS的樣式規(guī)則等等）}

可以從你接觸前端到逐步深入學(xué)習(xí)使用的過程中，你用過什么編輯器以及轉(zhuǎn)化的過程和原因方面回答

前端是最貼近用戶的程序員，比后端、數(shù)據(jù)庫、產(chǎn)品經(jīng)理、運(yùn)營(yíng)、安全都近。

實(shí)現(xiàn)界面交互

提升用戶體驗(yàn)

有了Node.js，前端可以實(shí)現(xiàn)服務(wù)端的一些事情

前端是最貼近用戶的程序員，前端的能力就是能讓產(chǎn)品從 90分進(jìn)化到 100 分，甚至更好，

參與項(xiàng)目，快速高質(zhì)量完成實(shí)現(xiàn)效果圖，精確到1px；

與團(tuán)隊(duì)成員，UI設(shè)計(jì)，產(chǎn)品經(jīng)理的溝通；

做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗(yàn)；

處理hack，兼容、寫出優(yōu)美的代碼格式；

針對(duì)服務(wù)器的優(yōu)化、擁抱最新前端技術(shù)。

先期團(tuán)隊(duì)必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；

編寫習(xí)慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；

標(biāo)注樣式編寫人，各模塊都及時(shí)標(biāo)注（標(biāo)注關(guān)鍵樣式調(diào)用的地方）；

頁面進(jìn)行標(biāo)注（例如 頁面 模塊 開始和結(jié)束）；

CSS跟HTML 分文件夾并行存放，命名都得統(tǒng)一（例如style.css）；

JS 分文件夾存放 命名以該JS功能為準(zhǔn)的英文翻譯。

圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理

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

移動(dòng)端（Android IOS）怎么做好用戶體驗(yàn)?

清晰的視覺縱線、信息的分組、極致的減法、

利用選擇代替輸入、標(biāo)簽及文字的排布方式、

依靠明文確認(rèn)密碼、合理的鍵盤利用、

在面試中，其實(shí)是一個(gè)互動(dòng)的環(huán)節(jié)，不僅要回答問題，也要抓住機(jī)會(huì)，獲得主動(dòng)權(quán)，想問公司的一些問題？

目前關(guān)注哪些最新的Web前端技術(shù)（未來的發(fā)展方向）？

前端團(tuán)隊(duì)如何工作的（實(shí)現(xiàn)一個(gè)產(chǎn)品的流程）？

公司的薪資結(jié)構(gòu)是什么樣子的？（摸清自己具體在什么層次）

公司的晉升機(jī)制具體是怎么樣的？（看出你的上進(jìn)心的穩(wěn)定性）

最后贈(zèng)言

企業(yè)面試主要是看你能不能干的了。企業(yè)很難招到一個(gè)適合的人，不會(huì)輕易把你淘汰掉。

如果對(duì)方挑你毛病，證明對(duì)方有招聘你的意圖，否則的話，對(duì)方不會(huì)浪費(fèi)時(shí)間挑你毛病，挑你毛病的主要原因是，想壓榨你工資，所以你要自信一點(diǎn)，無論對(duì)方怎么挑你毛病都不要害怕。企業(yè)中沒有專門的面試官。

不是說我面試了這一家，他就一定要錄取我，還有很多公司等著你去挑，目光放長(zhǎng)遠(yuǎn)一點(diǎn)，一定要拿到自己滿意的薪資才做。

面試就是一個(gè)解開雙方謊言的過程，你能瞞過對(duì)方，證明你贏了。

換個(gè)心態(tài)去面試，不是企業(yè)在挑你，而是你在挑企業(yè)。昂起你自信的頭顱，勇敢的去迎接挑戰(zhàn)吧！你的未來屬于你!

轉(zhuǎn)載自：http://www.jianshu.com/p/87fa...

~END~

好了，下面是廣告時(shí)間。前端學(xué)習(xí)群，入群即送學(xué)習(xí)資料。現(xiàn)在還不滿，從速哦！入群加笑笑微信：iamaixiaoxiao。