【面試經歷】問題總結

時間 2019-11-16

原文原文鏈接

4.es6的幾個新特性前端

糖語法

首先，語法糖是一種語法，使得語言更容易理解和更具備可讀性，它使語言相對咱們來講變得更"甜"。這也意味着ES6的一些"新"的特色並非真的新，只是試圖簡化語法而已，讓咱們編程更容易。這樣就無需使用老式的取巧的方法編寫你的代碼，而是能夠一種更簡單的方式來編寫代碼，那就是使用糖語法。

javascript並不像其餘面嚮對象語言同樣支持類這個概念，相反js使用function和prototype模擬類的概念。

下面是建立類的新語法，若是你有來自Java或其餘OO語言的背景你會很熟悉：

class Project {
  constructor(name) {
    this.name = name;
  }
 
  start() {
    return "Project " + this.name + " starting";
  }
}
 
var project = new Project("Journal");
project.start(); // "Project Journal starting"
你在這個類中定義的全部方法都被加入這個類的原型prototype中。

既然JS不支持類，那麼它支持繼承嗎？

是的，JS中繼承是經過prototype實現。下面是WebProject子類繼承Project類的代碼：

class WebProject extends Project {
  constructor(name, technologies) {
    super(name);
    this.technologies = technologies;
  }
 
  info() {
    return this.name + " uses " + arrayToString(this.technology);
  }
}
 
function arrayToString(param) {
  // ... some implementation
}
 
var webJournal = new WebProject("FrontEnd Journal", "javascript");
webJournal.start(); // "FrontEnd Journal starting"
webJournal.info(); // "FrontEnd Journal uses javascript"
注意到在WebProject 構造器中，調用了Project的構造器，這樣可使用它的屬性和方法。

 

模塊Module

若是你想將全部js放在一個文件中，或者你要在應用的不一樣地方使用相同的功能，你就要使用模塊，記住魔術的關鍵詞是export，在你的函數以前使用export。

假設Project 和 WebProject 都儲存在application.js文件中，以下源碼結構：

myproject (folder)
 |
 -- modules (folder)
 |   |
 |   -- helpers.js
 |
 -- application.js
若是咱們從application.js中分離arrayToString()，而後放入modules/helpers.js，這樣咱們在其餘地方能夠重用它：

// modules/helper.js
export function arrayToString(param) {
  // some implementation
}
這樣咱們只須要導入咱們的模塊便可：

// application.js
import { arrayToString } from 'modules/helpers';
 
class WebProject extends Project {
  constructor(name, technologies) {
    super(name);
    this.technologies = technology;
  }
 
  info() {
    return this.name + " uses " + arrayToString(this.technology);
  }
}
 
// ...
let和const

ES6中有兩個新特性：let和 const，爲了理解let，咱們須要記住var是建立函數生存期內的變量：

function printName() {
  if(true) {
    var name = "Rafael";
  }
  console.log(name); // Rafael
}
不像Java或其餘語言，任何變量在JS中是在一個函數內建立，它會升級到哦函數以外部，無論你在哪裏定義變量，都和你在函數頂部定義同樣，這個行爲稱爲hoisting。

上面代碼用下面方式容易理解些：

function printName() {
  var name; // variable declaration is hoisted to the top
  if(true) {
    name = "Rafael";
  }
  console.log(name); // Rafael
}
那麼let是如何工做呢，和hoisting有什麼關係，咱們導入let的代碼以下：

function printName() {
  if(true) {
    let name = "Rafael";
  }
  console.log(name); // ReferenceError: name is not defined
}
let是在一個代碼塊內，變量名只能在代碼塊中可見。

function printName() {
  var name = "Hey";
  if(true) {
    let name = "Rafael";
    console.log(name); // Rafael
  }
  console.log(name); // Hey
}
總結：var是function-scoped，而let是 block-scoped.

const是建立常量使用，一旦建立就一直不會被概念，以下：

const SERVER_URL = "http://www.jdon.com"

ES6還有其餘新功能：Map, WeakMap, generators 和Proxies

那麼何時可使用ES6這些特性呢？可見下面這個網址：

http://kangax.github.com/es5-compat-table/es6/

Node.JS的ES6特性可見：ES6 for Node

1. Function參數默認值
曾幾什麼時候，你編寫了不少次以下代碼：


function beginTeleportation (who, options) {
  options = options || {}
}

如今檢查函數參數是否存在再也沒有必要了， Default function parameters 默認函數參數可以讓定義函數的默認參數。



function sayCosmicGreeting (greeting = 'Greetings', name = 'Earthling') {
  console.log(`${greeting}, ${name}`)
}

sayCosmicGreeting() // Greetings, Earthling
sayCosmicGreeting('Salutations', 'Martian') // Salutations, Martian

這裏函數參數greeting和name都有本身默認值，因此，若是你沒有賦值空參數調用，就會輸出默認值Greetings和 Earthling。


2.Rest參數
傳遞許多參數到函數中須要使用arguments 關鍵詞：


function sayCosmicGreetingTo (greeting) {
  const beings = arguments.slice(1)
  beings.forEach(being => {
    console.log(`${greeting}, ${being}`)
  })
}

sayCosmicGreetingTo('Hello', 'Earthling', 'Martian', 'Neptunian')

上述代碼問題會報錯：TypeError: arguments.slice is not a function，由於arguments 不是實際數組，只是相似，爲了能正常工做，你須要使用數組原型的call函數：
Array.prototype.slice.call(arguments, 1)

可是這些處理手法對於初學者很費解，而Rest parameters解決這個問題，給你一個真正實際的Array數組實例：



function sayCosmicGreetingTo (greeting, ...beings) {
  beings.forEach(being => {
    console.log(`${greeting}, ${being}`)
  })
}

sayCosmicGreetingTo('Hello', 'Earthling', 'Martian', 'Neptunian')

注意到函數參數beings以前有「...」前綴，這個前綴表示這是一個數組，從0到數組最大長度之間的元素值是由實際傳入參數決定的。
3.解構
在Javascript中廣泛模式是將一個對象做爲配置可選項，之前，這些選項得手工從對象中分解出來而後分配給相應變量。


function beginDepartureSequence (options) {
  const captain = options.captain
  const ship = options.ship
  const destination = options.destination
  console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}

beginDepartureSequence({
  captain: 'Rey',
  ship: 'Millennium Falcon',
  destination: 'Jakku'
})

如今使用 destructure 能夠直接將對象解構到變量，不管順序：


function beginDepartureSequence (options) {
  const { destination, captain, ship } = options
  console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}

beginDepartureSequence({
  captain: 'Rey',
  ship: 'Millennium Falcon',
  destination: 'Jakku'
})

上面options對象被直接解構分配給了變量destination, captain, ship三個，咱們能夠作得更好，能夠直接在函數參數中聲明這些變量名：


function beginDepartureSequence ({ destination, ship, captain }) {
  console.log(`Blast off sequence initiated for Captain ${captain} on ship ${ship} flying to ${destination}`)
}

beginDepartureSequence({
  captain: 'Rey',
  ship: 'Millennium Falcon',
  destination: 'Jakku'
})

以上只是簡單幾個新特色，更多支持Javascript6 或Javascript7的特性能夠參考：http://node.green/

View Code

　　5.mvc思想java

模型(model)(數據層)－視圖(view)（界面顯示）－控制器(controller)（邏輯層）node

mvc模式的核心思想是分離責任，使得數據、視圖和邏輯部分分開，模型層關心的只是應用的狀態以及業務邏輯而不用考慮數據如何展示給用戶；視圖層關心的是的只是如何根據模型的變化爲用戶提供用戶界面；控制層則負責接收用戶的輸入而後將其交給對應的模型，它並不關心用戶如何輸入以及這些輸入數據是如何做用於模型的。jquery

6.前端cookie與session的區別webpack

7.解釋一下前端數據與表現分離git

什麼是表現與數據分離
我一來就看了一篇文章，點進去一看結果說的是表現與結構分離，其大意是：

表現應該由CSS來控制，結構應該由html來控制，好比咱們偉大的禪意花園。

因而我以爲，我簡歷是否是應該改爲，表現與結構分離呢。。。。

可是我感受表現與數據分離仍是有點道理呢，因此咱們仍是回到咱們的表現與數據分離吧。

----------華麗的分割線----------

半個小時過去了，我去查詢了資料也去請教了前輩，最後得出了兩個東西：

MVC

MVVM

很顯然，他們說的這個也許是我找尋的答案，可是我內心面視乎並不買帳，因而我找尋了之後截了一個圖：



這是一個搞後端的大哥寫的博客，咱們看到採用MVC開發的主要目的就是表現與數據分離。

看來真的就是MVC啦。。。

好了，這個地方暫時打住，咱們來看看當時的原話

模擬面試
面試官問我，說簡歷上寫的對錶現與數據分離有必定理解，能夠描述一下麼

我很淡定的說了句讓我思考下，而後開始搜索着個人大腦硬盤，好像壓根就沒有這個詞呢，因而胡亂蒙了個是否是html與css應該分離？

答案固然是否認的，而後面試哥把他在項目中遇到的一個問題拋了出來：

他有一個國家列表，如今要將國家列表放到A中，而後B能夠由A選擇，也能夠有總列表選擇
可是B中添加後，如果A中沒有要動態爲A增長這項。
爲了方便各位理解，我上個圖



不知道各位聽到這個題做何感覺，我當時其實就有一種方式能夠實現（最簡單，最土的），壓根就沒有想到這個題會和「表現與數據分離」有關係。

可是既然問到了，應該仍是有聯繫吧，不知道各位怎麼看待呢？

因而咱們回到問題自己吧

再論行爲與數據分離
咱們工做中可能會碰到這種狀況，美工每次拿過來的東西感受都有點不同，你不能說出有好大的不同，反正就是有地方不同。

而後一拿來後整個傢伙所有完蛋，js報錯啦，爲何報錯大家懂的，這裏我來現身說法，整一個真實的例子吧

當年我年少輕狂還在索貝時，咱們有設計，可是設計同事的CSS不好，給咱們的html+css常常有未閉合的標籤，常常會出現莫名其妙的雙引號。

可是當時我CSS也很差，其它同事徹底就是搞後端的，因此在這個狀況下咱們艱難的作出了咱們的初版產品，與設計圖一致（仍是在設計的代碼上修改的）。

完了領導看了提出了一點修改意見，因而設計同事又改了下圖，相信我他只是簡單的改了一點東西，而後造成了html交給了咱們。。。。

此次拿來後我看到了此次的html結構和上次徹底是兩碼事，而咱們的產品又是單頁應用，不少地方徹底是JavaScript生成的，或者html標籤與data造成了模板，如今要改。。。改毛線啊。。。

爲了具體描述咱們所遇到的困境我這裏詳細描述下：

① 咱們根據設計初版圖作好了頁面

② 頁面上有不少應用，是採用相似於js模板化的東西（小的封裝的，很戳）

③ 頁面根據數據庫設計，前端使用js控制頁面加載，最後渲染出咱們的頁面

好了整個代碼還有點小複雜，完了如今設計哥來了一個徹底不一樣的結構了，當時內部沒有CSS高手，甚至說沒有CSS熟手。

我負責改這個工做，我依稀記得我改出了翔。。。。最後終於改完了！

而後根據領導指示，設計同事給出了咱們第三套HTML代碼，這個和原來的差距相對大一點，可是主要模塊還在，因而我看空中處處都是翔了。。。。

我不知道我前面的描述各位遇到過沒有，可是當時我沒能很好的解決這個問題，就只能縫縫補補的改着，每次出新東西后又是一場悲劇。

回到現實

其實我遇到的這個問題我感受能夠很好的說明表現數據分離的重要性了，可是什麼是表現數據分離，咱們仍是須要將它說清楚啦。

PS：其實我遇到的問題比較複雜吧，我感受都不徹底是表現與數據分離了......

我說不清楚什麼是表現與數據分離，那咱們舉點反例吧：

① 服務器端（PHP/.net/Java），將html標籤與數據一塊兒打印出來

Response.Write("<div>......</div>");
這段代碼各位必定見過，能夠想象，一個系統一年後要改版，這個地方的代碼修改可能有點痛苦吧（特別是原來的開發人員不在了）

這個是服務器端的，那麼咱們的客戶端呢（咳咳，讓我想一想啦，想不到啦。。。）

② 我想到一個例子，不知道合適不，拿出來講說吧

前段時間，咱們前端有個地區控件的東西，他大概是這個樣子的：

var area = '<table>......</table>';
他在字符串中將全部的地區所有寫了出來（包括地區編號（隱藏）），這樣作會有問題的：

假設我哪天想改變一下結構適應新的佈局（響應式佈局神馬的隨便啦），那麼咱們會發現無從下手

③ 仍是回到我遇到那個問題（重點來了哦）

我遇到那個問題其實主要是我在js中使用的id，或者class或者標籤子選擇器都不在了，新的代碼上來後確定出錯啦。

這個問題很尖銳的，原來我使用了一套html+css頁面，咱們根據這個寫了一大套javascript的東西，耗時3個月。
而後咱們換了一套頁面，可是其中功能仍是咱們那套js
而後咱們再換了一套頁面，其中的js仍是咱們那套js
最後最變態的要求出來了（由於產品會給不一樣的電視臺使用），咱們的產品在不一樣的人看起來頁面是不同的，可是其中的功能是同樣的！！！
屌絲們，接招吧，各位哥哥，大家會怎麼解決這個問題呢？

正是由於有上面那種莫名其妙的需求，因此纔會出現咱們前端MVC這種莫名其妙的東西。。。

由於按道理來講前端是不該該出現MVC的，咱們的html就是model，咱們的css就是view，咱們的js就是controller。

結果如今單是javascript就搞出來了一套MVC，這不坑爹麼？

至此，不知道各位對錶現與數據分離有新的瞭解沒有？？？

MVC——表現與數據分離
話很少說，先上一段代碼（原來的代碼，抄過來的）：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             var end = $('#end');
 8             $('#pili').change(function () {
 9                 var name = '';
10                 var p = $(this).val();
11                 if (p == '葉小釵') {
12                     name = '刀狂劍癡';
13                 }
14                 if (p == '一頁書') {
15                     name == '百世經綸';
16                 }
17                 if (p == '素還真') {
18                     name = '清香白蓮';
19                 }
20 
21                 end.html(name + p);
22             });
23         });
24     </script>
25 </head>
26 <body>
27     <select id="pili">
28         <option value="葉小釵">葉小釵</option>
29         <option value="一頁書">一頁書</option>
30         <option value="素還真">素還真</option>
31     </select>
32     <div id="end"></div>
33 </body>
34 </html>
咱們從新看看上面的代碼，很簡單的邏輯，select改變後變化end的值，好了如今需求發生改變：

① select變成使用input模擬select

② 在手機上仍是使用select算了

③ 總會有莫名其妙的需求，這個就是

好吧，如今的代碼你該怎麼寫呢？是否是會寫幾個代碼，或者你壓根不知道怎麼寫呢？？？因而看看咱們的MVC的實現吧

PS：代碼是我可恥的抄的。。。。但我但是自豪的一個字一個字的敲的哦，竊知識不算偷......

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="../jquery-1.7.1.js" type="text/javascript"></script>
 5     <script type="text/javascript">
 6         $(document).ready(function () {
 7             //定義一個controller
 8             var piliController = {
 9                 //選擇視圖
10                 start: function () {
11                     this.view.start();
12                 },
13                 //將用戶操做映射到模型更新上
14                 set: function (name) {
15                     this.model.setPerson(name);
16                 }
17             };
18             piliController.model = {
19                 piliKV: {
20                     '葉小釵': '刀狂劍癡',
21                     '一頁書': '百世經綸',
22                     '素還真': '清香白蓮'
23                 },
24                 curPerson: null,
25                 //數據模型負責業務邏輯和數據存儲
26                 setPerson: function (name) {
27                     this.curPerson = this.piliKV[name] ? name : null;
28                     this.onchange();
29                 },
30                 //通知數據同步更新
31                 onchange: function () {
32                     piliController.view.update();
33                 },
34                 //相應視圖對當前狀態的查詢
35                 getPiliAction: function () {
36                     return this.curPerson ? this.piliKV[this.curPerson] + this.curPerson : '???';
37                 }
38             };
39             piliController.view = {
40                 //用戶觸發change事件
41                 start: function () {
42                     $('#pili').change(this.onchange);
43                 },
44                 onchange: function () {
45                     piliController.set($('#pili').val());
46                 },
47                 update: function () {
48                     $('#end').html(piliController.model.getPiliAction());
49                 }
50             };
51             piliController.start();
52         });
53     </script>
54 </head>
55 <body>
56     <select id="pili">
57      <option value="葉小釵">葉小釵</option>
58         <option value="一頁書">一頁書</option>
59         <option value="素還真">素還真</option>
60     </select>
61     <div id="end"></div>
62 </body>
63 </html>
咱們來看看這個神同樣的代碼。。。。咱們一開始會認爲他有這些問題：

① 代碼維護困難，至少我認爲很困難

② 徒增複雜性，性能會有問題

③ 我並不能說服本身說本身懂了。。。。

因而咱們就放棄了MVC啦，可是咱們回過頭來好好審視下他，咱們會發現不同的東西：

① 咱們好像就在view中使用了選擇器獲取dom，其它地方壓根不認識dom這個丫的。

② 咱們的數據彷佛在model中，咱們能夠隨意改變，可是並不會影響到咱們dom

③ view和model是徹底獨立的，咱們的controller剛好把他們串聯起來了

看着這神奇的魔法，我似懂非懂的點了點頭，你妹的MVC還真他媽夠勁！！！

View Code

8.js事件的三個階段：es6

js事件的三個階段分別爲：捕獲、目標、冒泡

1.捕獲：事件由頁面元素接收，逐級向下，到具體的元素

2.目標：具體的元素自己

3.冒泡：跟捕獲相反，具體元素自己，逐級向上，到頁面元素

事件捕獲：當使用事件捕獲時，父級元素先觸發，子元素後觸發

事件冒泡：當使用事件冒泡時，子級元素先觸發，父元素後觸發

W3C ：任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達事件源，再從事件源向上進行事件捕獲

*IE和W3C不一樣綁定事件解綁事件的方法有什麼區別，參數分別是什麼，以及事件對象e有什麼區別

標準瀏覽器：addEventListener("click","doSomething","true")方法,若第三參數爲true則採用事件捕獲，若爲false，則採用事件冒泡

IE瀏覽器只支持事件冒泡，不支持事件捕獲，因此它不支持addEventListener("click","doSomething","true")方法,因此ie瀏覽器使用ele.attachEvent("onclick",doSomething)

事件對象e的區別：

在觸發DOM上的某個事件時，會產生一個事件對象event

在ie中事件對象定義爲window.event

事件傳播的阻止方法：

再W3C中，使用stopPropagation()方法

在IE下使用cancelBubble = true方法

阻止默認行爲：

再W3c中，使用preventDefault（）方法

再IE下return false

9.【事件的代理/委託】的原理以及優缺點。

原理：

事件就是onclick，onmouseover，onmouseout，等就是事件，委託呢，就是讓別人來作，這個事件原本是加在某些元素上的，然而你卻加到別人身上來作，完成這個事件。

也就是：利用冒泡的原理，把事件加到父級上，觸發執行效果

優勢是

一、能夠大量節省內存佔用，減小事件註冊，好比在table上代理全部td的click事件就很是棒

二、能夠實現當新增子對象時無需再次對其綁定事件，對於動態內容部分尤其合適

缺點：事件代理的應用經常使用應該僅限於上述需求下，若是把全部事件都用代理就可能會出現事件誤判，即本不該用觸發事件的被綁上了事件

10.前端性能優化。

網絡性能優化，加快訪問速度，瀏覽器並行加載數量，怎樣實現原生JS異步載入，CDN加速的原理，如何將不一樣靜態資源發佈到多個域名服務器上，發佈後這些靜態字段的url路徑改怎麼批量改寫，用什麼工具進行項目打包，css打包後的相對路徑怎麼轉換爲絕對路徑，用什麼工具進行項目模塊依賴管理，怎麼進行cookie優化等等

11.閉包原理及其應用

什麼狀況下會發生閉包，爲何須要閉包，什麼場景下須要，閉包閉了誰，怎麼釋放被閉包的變量內存，閉包的優勢是什麼，缺點是什麼。參考網址1 參考網址2

12.跨域

JavaScript跨域總結與解決辦法（http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

跨域-知識（http://www.cnblogs.com/scottckt/archive/2011/11/12/2246531.html）

跨域資源共享的10種方式（http://www.cnblogs.com/cat3/archive/2011/06/15/2081559.html）

13.jsonp原理

能夠把須要跨域的請求改爲用script腳本加載便可，服務器返回執行字符串，可是這個字符串是在window全局做用域下執行的，你須要把他返回到你的代碼的做用域內，這裏就須要臨時建立一個全局的回調函數，並把到傳到後臺，最後再整合實際要請求的數組，返回給前端，讓瀏覽器直接調用，用回調的形式回到你的原代碼流程中。

參考網址1

將url的查詢參數解析成字典對象

這個題目不約而同的出如今了多家公司的面試題中，固然也是由於太過於典型，解決方案無非就是拆字符或者用正則匹配來解決，我我的強烈建議用正則匹配，由於url容許用戶隨意輸入，若是用拆字符的方式，有任何一處沒有考慮到容錯，就會致使整個js都報錯。而正則就沒有這個問題，他只匹配出正確的配對，非法的所有過濾掉，簡單，方便。

實現代碼：

function getQueryObject(url) {

url = url == null ? window.location.href : url;

var search = url.substring(url.lastIndexOf("?") + 1);

var obj = {};

var reg = /([^?&=]+)=([^?&=]*)/g;

search.replace(reg, function (rs, $1, $2) {

var name = decodeURIComponent($1);

var val = decodeURIComponent($2);

val = String(val);

obj[name] = val;

return rs;

});

return obj;

}

函數節流

對於常見的場景，如網頁滾動時，常常會有滾動到哪時作什麼樣的動畫效果，遂要註冊onscroll事件，如何減小觸發次數，到達優化性能，同時又知足效果要求不卡頓，一個是優化事件內代碼，減小代碼量，二就是作函數節流。

大部分節流都採用時間作節流，即時間間隔小於多少的再也不調用，但同時保證一個最小調用間隔。（不然拖拽類的節流都將無效果），也能夠用調用次數作節流，但要考慮最後一次調用須要要執行。

能夠參考：淺談javascript的函數節流(http://www.alloyteam.com/2012/11/javascript-throttle/)

設計模式

這方面被問到的比較多的有觀察者模式，職責鏈模式，工廠模式

主要是應用於js開發組件中會常常涉及，純粹的頁面業務邏輯可能涉及很少。

好比如何去設計一個前端UI組件，應該公開出哪些方法，應該提供哪些接口，應該提供哪些事件。哪部分邏輯流程應該開放出去讓用戶自行編寫，如何實現組件與組件之間的通訊，如何實現高內聚低耦合，如何實現組件的高複用等等

css垂直居中方法

能夠看到我提到上面大多數都是關於JS的面試題，主要是由於css並非個人強項，但有幾個出現頻率很高，就是經典的垂直居中問題。

這個問題又能夠細分爲，被垂直居中的元素是否認高，是文字仍是塊，文字是單行仍是多行文字等等

這個能夠百度下，有N多種解決方案，主要仍是看應用場景的限制。

自適應佈局

這個問題能夠劃分爲，左固定右自適應寬度，上固定下固定中間自適應高度等等佈局要求。

關於左右自適應的，不低於10種解決方案，還要看dom結構要求是並列仍是嵌套，是否容許有父級元素，是否容許使用CSS3，是否有背景色，是否要兩列等高，等等

而關於自適應高度的解決方案就略少一些，大體也是靠，CSS3的calc屬性，內padding，絕對定位後拉伸，動態js計算等等解決方案，一樣也是要看應用場景能用哪一個

移動端自適應

也被問到了不少移動端開發中的各類坑，好比2倍屏，3倍屏的自適應等

js中this的理解

this的指向在函數定義的時候是肯定不了的，只有函數執行的時候才能肯定this到底指向誰，實際上this的最終指向的是那個調用它的對象

AMD與CommonJS的區別與共同點

共同點：二者都是爲了實現模塊化編程而出現的，對於大型項目，參與人數多，代碼邏輯複雜，是最適合使用模塊化的思想來完成整個項目的。同時採用這種思想也很便於對整個項目進行管控。

區別：CommonJS是適用於服務器端的，著名的Node執行環境就是採用的CommonJS模式。它是同步加載不一樣模塊文件。之因此採用同步，是由於模塊文件都存放在服務器的各個硬盤上，實際的加載時間就是硬盤的文件讀取時間。

AMD，Asynchronous Module Definition，即異步模塊定義。它是適用於瀏覽器端的一種模塊加載方式。從名字可知，AMD採用的是異步加載方式（js中最典型的異步例子就是ajax）。瀏覽器須要使用的js文件（第一次加載，忽略緩存）都存放在服務器端，從服務器端加載文件到瀏覽器是受網速等各類環境因素的影響的，若是採用同步加載方式，一旦js文件加載受阻，後續在排隊等待執行的js語句將執行出錯，會致使頁面的‘假死’，用戶沒法使用一些交互。因此在瀏覽器端是沒法使用CommonJS的模式的。目前，主要有兩個Javascript庫實現了AMD規範：require.js和curl.js

CMD （通用模塊定義） seajs 懶執行，就近依賴

javascript null，undefined，undeclared的區別

1.undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義，轉爲數值時爲NaN。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

2.null表示"沒有對象"，即該處不該該有值，轉爲數值時爲0。典型用法是：

（1）做爲函數的參數，表示該函數的參數不是對象。

（2）做爲對象原型鏈的終點。

3.undeclared：js語法錯誤，沒有申明直接使用，js沒法找到對應的上下文。

我:
http://www.jackpu.com/2016ge-da-hu-lian-wang-gong-si-qian-duan-mian-shi-ti-hui-zong/
我:
https://www.zhihu.com/question/41466747?sort=created
我:
做者：汪汪
連接：https://www.zhihu.com/question/41466747/answer/132562725
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

（10）瀏覽器的垃圾回收機制

垃圾收集器必須跟蹤哪一個變量有用哪一個變量沒用，對於再也不有用的變量打上標記，以備未來收回其佔用的內存，內存泄露和瀏覽器實現的垃圾回收機制息息相關，而瀏覽器實現標識無用變量的策略主要有下兩個方法：
第一，引用計數法
跟蹤記錄每一個值被引用的次數。當聲明一個變量並將引用類型的值賦給該變量時，則這個值的引用次數就是1。若是同一個值又被賦給另外一個變量，則該值的引用次數加1.相反，若是包含對這個值引用的變量又取得另一個值，則這個值的引用次數減1.當這個值的引用次數變成0時，則說明沒有辦法訪問這個值了，所以就能夠將其佔用的內存空間回收回來。

如： var a = {}; //對象{}的引用計數爲1
b = a; //對象{}的引用計數爲 1+1
a = null; //對象{}的引用計數爲2-1
因此這時對象{}不會被回收;
IE 6, 7 對DOM對象進行引用計數回收，這樣簡單的垃圾回收機制，很是容易出現循環引用問題致使內存不能被回收，進行致使內存泄露等問題，通常不用引用計數法。
第二，標記清除法
到2008年爲止，IE,Firefox,Opera,Chrome和Safari的javascript實現使用的都是標記清除式的垃圾收集策略（或相似的策略），只不過垃圾收集的時間間隔互有不一樣。
標記清除的算法分爲兩個階段，標記(mark)和清除(sweep). 第一階段從引用根節點開始標記全部被引用的對象，第二階段遍歷整個堆，把未標記的對象清除。
我:
https://www.zhihu.com/question/41466747?sort=created
我:
http://www.cnblogs.com/bigboyLin/p/5272902.html
我:
瀏覽器兼容問題？如何區分 HTML 和
HTML5？

HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。
繪畫 canvas
用於媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 的數據在瀏覽器關閉後自動刪除
語意化更好的內容元素，好比 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes；
支持HTML5新標籤：
IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，
瀏覽器支持新標籤後，還須要添加標籤默認的樣式：
我:
內聯元素居中方案

水平居中設置：
1.行內元素

設置 text-align:center；
2.Flex佈局

設置display:flex;justify-content:center;(靈活運用,支持Chroime，Firefox，IE9+)
垂直居中設置：
1.父元素高度肯定的單行文本（內聯元素）

設置 height = line-height；
2.父元素高度肯定的多行文本（內聯元素）

a:插入 table （插入方法和水平居中同樣），而後設置 vertical-align:middle；
b:先設置 display:table-cell 再設置 vertical-align:middle；
塊級元素居中方案

水平居中設置：
1.定寬塊狀元素
設置左右 margin 值爲 auto；
2.不定寬塊狀元素

a:在元素外加入 table 標籤（完整的，包括 table、tbody、tr、td），該元素寫在 td 內，而後設置 margin 的值爲 auto；
b:給該元素設置 displa:inine 方法；
c:父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left:50%；
我:
（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佈局慢。對普通的網站有一個統一的思路，就是儘可能向前端優化、減小數據庫操做、減小磁盤IO。向前端優化指的是，在不影響功能和體驗的狀況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減小數據庫操做指減小更新次數、緩存結果減小查詢次數、將數據庫執行的操做盡量的讓你的程序完成（例如join查詢），減小磁盤IO指儘可能不使用文件系統做爲緩存、減小讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是沒法「優化」的。
我:

3.http狀態碼有那些？分別表明是什麼意思？
100-199 用於指定客戶端應相應的某些動做。
200-299 用於表示請求成功。
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。
400-499 用於指出客戶端的錯誤。400 一、語義有誤，當前請求沒法被服務器理解。401 當前請求須要用戶驗證 403 服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用
4.一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

查找瀏覽器緩存
DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
進行HTTP協議會話
客戶端發送報頭(請求報頭)
文檔開始下載
文檔樹創建，根據標記請求所需指定MIME類型的文件
文件顯示
瀏覽器這邊作的工做大體分爲如下幾步：
加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。
解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）
我:
做者：汪汪
連接：https://www.zhihu.com/question/41466747/answer/132562725
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

（10）瀏覽器的垃圾回收機制

原型鏈圖解