摘要：標(biāo)簽寫在后與前有什么區(qū)別什么是預(yù)處理器后處理器預(yù)處理器例如，用來預(yù)編譯或，增強(qiáng)了代碼的復(fù)用性，還有層級(jí)變量循環(huán)函數(shù)等，具有很方便的組件模塊化開發(fā)能力，極大的提高工作效率。

因?yàn)槊嬖嚨脑?，最近又開始關(guān)注前端面試題，瀏覽過網(wǎng)上很多面試題集合，有很多小伙伴整理的很全面，但是我發(fā)現(xiàn)其中有很多技術(shù)點(diǎn)在當(dāng)下已不再流行，而面試題一般都是映射開發(fā)中常遇到的一些技能和問題，再結(jié)合最近面試中遇到的一些面試題，在這里匯總整理一下，內(nèi)容有轉(zhuǎn)載過來的，也有自己整理的，后續(xù)會(huì)定期更新。

另外我也寫了一篇文章總結(jié)前端面試中遇到的套路，點(diǎn)擊瀏覽。

參考鏈接：https://github.com/markyun/My...

HTML&CSS：
    對(duì)Web標(biāo)準(zhǔn)的理解（結(jié)構(gòu)、表現(xiàn)、行為）、瀏覽器內(nèi)核、渲染原理、依賴管理、兼容性、CSS語法、層次關(guān)系，常用屬性、布局、選擇器、權(quán)重、盒模型、Hack、CSS預(yù)處理器、CSS3、Flexbox、CSS Modules、Document flow、BFC、HTML5（離線 & 存儲(chǔ)、Histoy,多媒體、WebGLSVGCanvas）；
    
JavaScript：
    數(shù)據(jù)類型、運(yùn)算、對(duì)象、Function、繼承、閉包、作用域、事件、Prototype、RegExp、JSON、Ajax、DOM、BOM、
    內(nèi)存泄漏、跨域、異步請(qǐng)求、模板引擎、模塊化、Flux、同構(gòu)、算法、ECMAScript6、Nodejs、HTTP、

其他：
    主流MVVM框架(ReactVueAngular)、Hybrid AppReact NativeWeex、TypeScript、RESTFul、WEB安全、前端工程化、依賴管理、性能優(yōu)化、
    重構(gòu)、團(tuán)隊(duì)協(xié)作、可維護(hù)、易用性、SEO、前端技術(shù)選型、快速學(xué)習(xí)能力等；

覺得不夠全面？我花一下午時(shí)間總結(jié)了月份前端面試圖譜：

作為一名前端工程師，無論工作年頭長(zhǎng)短都應(yīng)該掌握的知識(shí)點(diǎn)：

    1、DOM結(jié)構(gòu) —— 兩個(gè)節(jié)點(diǎn)之間可能存在哪些關(guān)系以及如何在節(jié)點(diǎn)之間任意移動(dòng)。

    2、DOM操作 —— 如何添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)等。

    3、事件 —— 如何使用事件，以及IE和標(biāo)準(zhǔn)DOM事件模型之間存在的差別。

    4、XMLHttpRequest —— 這是什么、怎樣完整地執(zhí)行一次GET請(qǐng)求、怎樣檢測(cè)錯(cuò)誤。

    5、嚴(yán)格模式與混雜模式 —— 如何觸發(fā)這兩種模式，區(qū)分它們有何意義。

    6、盒模型 —— 外邊距、內(nèi)邊距和邊框之間的關(guān)系，及IE8以下版本的瀏覽器中的盒模型

    7、塊級(jí)元素與行內(nèi)元素 —— 怎么用CSS控制它們、以及如何合理的使用它們

    8、浮動(dòng)元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題。

    9、HTML與XHTML —— 二者有什么區(qū)別，你覺得應(yīng)該使用哪一個(gè)并說出理由。

    10、JSON —— 作用、用途、設(shè)計(jì)結(jié)構(gòu)。

    1. 聲明位于HTML文檔中的第一行，處于  標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔。DOCTYPE不存在或格式不正確會(huì)導(dǎo)致文檔以兼容模式呈現(xiàn)。

    2. 標(biāo)準(zhǔn)模式的排版 和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。

     HTML5 不基于 SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）；

     而HTML4.01基于SGML,所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型。

    首先：CSS規(guī)范規(guī)定，每個(gè)元素都有display屬性，確定該元素的類型，每個(gè)元素都有默認(rèn)的display值，如div的display默認(rèn)值為“block”，則為“塊級(jí)”元素；span默認(rèn)display屬性值為“inline”，是“行內(nèi)”元素。

    （1）行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
    （2）塊級(jí)元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

    （3）常見的空元素：
        
 
 


包含了一個(gè)媒體類型和至少一個(gè)使用 寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達(dá)式。
CSS3加入的媒體查詢使得無需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍。

使用 CSS 預(yù)處理器嗎？喜歡那個(gè)？

SASS (SASS、LESS沒有本質(zhì)區(qū)別，只因?yàn)閳F(tuán)隊(duì)前端都是用的SASS)

CSS優(yōu)化、提高性能的方法有哪些？

關(guān)鍵選擇器（key selector）。選擇器的最后面的部分為關(guān)鍵選擇器（即用來匹配目標(biāo)元素的部分）；
如果規(guī)則擁有 ID 選擇器作為其關(guān)鍵選擇器，則不要為規(guī)則增加標(biāo)簽。過濾掉無關(guān)的規(guī)則（這樣樣式系統(tǒng)就不會(huì)浪費(fèi)時(shí)間去匹配它們了）；
提取項(xiàng)目的通用公有樣式，增強(qiáng)可復(fù)用性，按模塊編寫組件；增強(qiáng)項(xiàng)目的協(xié)同開發(fā)性、可維護(hù)性和可擴(kuò)展性;
使用預(yù)處理工具或構(gòu)建工具（gulp對(duì)css進(jìn)行語法檢查、自動(dòng)補(bǔ)前綴、打包壓縮、自動(dòng)優(yōu)雅降級(jí)）；

瀏覽器是怎樣解析CSS選擇器的？

樣式系統(tǒng)從關(guān)鍵選擇器開始匹配，然后左移查找規(guī)則選擇器的祖先元素。
只要選擇器的子樹一直在工作，樣式系統(tǒng)就會(huì)持續(xù)左移，直到和規(guī)則匹配，或者是因?yàn)椴黄ヅ涠艞壴撘?guī)則。

在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？

margin和padding分別適合什么場(chǎng)景使用？

margin是用來隔開元素與元素的間距；padding是用來隔開元素與內(nèi)容的間隔。
margin用于布局分開元素使元素與元素互不相干；
padding用于元素與內(nèi)容之間的間隔，讓內(nèi)容（文字）與（包裹）元素之間有一段

抽離樣式模塊怎么寫，說出思路，有無實(shí)踐經(jīng)驗(yàn)？[阿里航旅的面試題]

元素豎向的百分比設(shè)定是相對(duì)于容器的高度嗎？

全屏滾動(dòng)的原理是什么？用到了CSS的那些屬性？

什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容低版本的IE？

視差滾動(dòng)效果，如何給每頁做不同的動(dòng)畫？（回到頂部，向下滑動(dòng)要再次出現(xiàn)，和只出現(xiàn)一次分別怎么做？）

::before 和 :after中雙冒號(hào)和單冒號(hào) 有什么區(qū)別？解釋一下這2個(gè)偽元素的作用。

單冒號(hào)(:)用于CSS3偽類，雙冒號(hào)(::)用于CSS3偽元素。（偽元素由雙冒號(hào)和偽元素名稱組成）
雙冒號(hào)是在當(dāng)前規(guī)范中引入的，用于區(qū)分偽類和偽元素。不過瀏覽器需要同時(shí)支持舊的已經(jīng)存在的偽元素寫法，
比如:first-line、:first-letter、:before、:after等，
而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號(hào)的寫法。

想讓插入的內(nèi)容出現(xiàn)在其它內(nèi)容前，使用::before，否者，使用::after；
在代碼順序上，::after生成的內(nèi)容也比::before生成的內(nèi)容靠后。
如果按堆棧視角，::after生成的內(nèi)容會(huì)在::before生成的內(nèi)容之上

如何修改chrome記住密碼后自動(dòng)填充表單的黃色背景 ？

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
background-color: rgb(250, 255, 189); / #FAFFBD; /
background-image: none;
color: rgb(0, 0, 0);
}

你對(duì)line-height是如何理解的？

設(shè)置元素浮動(dòng)后，該元素的display值是多少？

自動(dòng)變成了 display:block

怎么讓Chrome支持小于12px 的文字？

1、用圖片：如果是內(nèi)容固定不變情況下，使用將小于12px文字內(nèi)容切出做圖片，這樣不影響兼容也不影響美觀。
2、使用12px及12px以上字體大?。簽榱思嫒莞鞔笾髁鳛g覽器，建議設(shè)計(jì)美工圖時(shí)候設(shè)置大于或等于12px的字體大小，如果是接單的這個(gè)時(shí)候就需要給客戶講解小于12px瀏覽器不兼容等事宜。
3、繼續(xù)使用小于12px字體大小樣式設(shè)置：如果不考慮chrome可以不用考慮兼容，同時(shí)在設(shè)置小于12px對(duì)象設(shè)置-webkit-text-size-adjust:none，做到最大兼容考慮。
4、使用12px以上字體：為了兼容、為了代碼更簡(jiǎn)單 從新考慮權(quán)重下兼容性。

讓頁面里的字體變清晰，變細(xì)用CSS怎么做？

-webkit-font-smoothing: antialiased;

font-style屬性可以讓它賦值為“oblique” oblique是什么意思？

傾斜的字體樣式

position:fixed;在android下無效怎么處理？

fixed的元素是相對(duì)整個(gè)頁面固定位置的，你在屏幕上滑動(dòng)只是在移動(dòng)這個(gè)所謂的viewport，
原來的網(wǎng)頁還好好的在那，fixed的內(nèi)容也沒有變過位置，
所以說并不是iOS不支持fixed，只是fixed的元素不是相對(duì)手機(jī)屏幕固定的。

如果需要手動(dòng)寫動(dòng)畫，你認(rèn)為最小時(shí)間間隔是多久，為什么？（阿里）

多數(shù)顯示器默認(rèn)頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms

display:inline-block 什么時(shí)候會(huì)顯示間隙？(攜程)

移除空格、使用margin負(fù)值、使用font-size:0、letter-spacing、word-spacing

overflow: scroll時(shí)不能平滑滾動(dòng)的問題怎么處理？

有一個(gè)高度自適應(yīng)的div，里面有兩個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度。

png、jpg、gif 這些圖片格式解釋一下，分別什么時(shí)候用。有沒有了解過webp？

什么是Cookie 隔離？（或者說：請(qǐng)求資源的時(shí)候不要讓它帶cookie怎么做）

如果靜態(tài)文件都放在主域名下，那靜態(tài)文件請(qǐng)求的時(shí)候都帶有的cookie的數(shù)據(jù)提交給server的，非常浪費(fèi)流量，
所以不如隔離開。

因?yàn)閏ookie有域的限制，因此不能跨域提交請(qǐng)求，故使用非主要域名的時(shí)候，請(qǐng)求頭中就不會(huì)帶有cookie數(shù)據(jù)，
這樣可以降低請(qǐng)求頭的大小，降低請(qǐng)求時(shí)間，從而達(dá)到降低整體請(qǐng)求延時(shí)的目的。

同時(shí)這種方式不會(huì)將cookie傳入Web Server，也減少了Web Server對(duì)cookie的處理分析環(huán)節(jié)，
提高了webserver的http請(qǐng)求的解析速度。

style標(biāo)簽寫在body后與body前有什么區(qū)別？

什么是CSS 預(yù)處理器 / 后處理器？

預(yù)處理器例如：LESS、Sass、Stylus，用來預(yù)編譯Sass或less，增強(qiáng)了css代碼的復(fù)用性，
還有層級(jí)、mixin、變量、循環(huán)、函數(shù)等，具有很方便的UI組件模塊化開發(fā)能力，極大的提高工作效率。

后處理器例如：PostCSS，通常被視為在完成的樣式表中根據(jù)CSS規(guī)范處理CSS，讓其更有效；目前最常做的
是給CSS屬性添加瀏覽器私有前綴，實(shí)現(xiàn)跨瀏覽器兼容性的問題。

rem布局的優(yōu)缺點(diǎn)

介紹js的基本數(shù)據(jù)類型。

Undefined、Null、Boolean、Number、String、
ECMAScript 2015 新增:Symbol(創(chuàng)建后獨(dú)一無二且不可變的數(shù)據(jù)類型 )

介紹js有哪些內(nèi)置對(duì)象？

Object 是 JavaScript 中所有對(duì)象的父對(duì)象

數(shù)據(jù)封裝類對(duì)象：Object、Array、Boolean、Number 和 String
其他對(duì)象：Function、Arguments、Math、Date、RegExp、Error

參考：http://www.ibm.com/developerw...

說幾條寫JavaScript的基本規(guī)范？

1.不要在同一行聲明多個(gè)變量。
2.請(qǐng)使用 ===/!==來比較true/false或者數(shù)值
3.使用對(duì)象字面量替代new Array這種形式
4.不要使用全局函數(shù)。
5.Switch語句必須帶有default分支
6.函數(shù)不應(yīng)該有時(shí)候有返回值，有時(shí)候沒有返回值。
7.For循環(huán)必須使用大括號(hào)
8.If語句必須使用大括號(hào)
9.for-in循環(huán)中的變量 應(yīng)該使用var關(guān)鍵字明確限定作用域，從而避免作用域污染。

JavaScript原型，原型鏈 ? 有什么特點(diǎn)？

每個(gè)對(duì)象都會(huì)在其內(nèi)部初始化一個(gè)屬性，就是prototype(原型)，當(dāng)我們?cè)L問一個(gè)對(duì)象的屬性時(shí)，
如果這個(gè)對(duì)象內(nèi)部不存在這個(gè)屬性，那么他就會(huì)去prototype里找這個(gè)屬性，這個(gè)prototype又會(huì)有自己的prototype，
于是就這樣一直找下去，也就是我們平時(shí)所說的原型鏈的概念。
關(guān)系：instance.constructor.prototype = instance.__proto__

特點(diǎn)：
JavaScript對(duì)象是通過引用來傳遞的，我們創(chuàng)建的每個(gè)新對(duì)象實(shí)體中并沒有一份屬于自己的原型副本。當(dāng)我們修改原型時(shí)，與之相關(guān)的對(duì)象也會(huì)繼承這一改變。

     當(dāng)我們需要一個(gè)屬性的時(shí)，Javascript引擎會(huì)先看當(dāng)前對(duì)象中是否有這個(gè)屬性， 如果沒有的話，
     就會(huì)查找他的Prototype對(duì)象是否有這個(gè)屬性，如此遞推下去，一直檢索到 Object 內(nèi)建對(duì)象。
        function Func(){}
        Func.prototype.name = "Sean";
        Func.prototype.getInfo = function() {
          return this.name;
        }
        var person = new Func();//現(xiàn)在可以參考var person = Object.create(oldObject);
        console.log(person.getInfo());//它擁有了Func的屬性和方法
        //"Sean"
        console.log(Func.prototype);
        // Func { name="Sean", getInfo=function()}

JavaScript有幾種類型的值？，你能畫一下他們的內(nèi)存圖嗎？

  棧：原始數(shù)據(jù)類型（Undefined，Null，Boolean，Number、String）
  堆：引用數(shù)據(jù)類型（對(duì)象、數(shù)組和函數(shù)）

  兩種類型的區(qū)別是：存儲(chǔ)位置不同；
  原始數(shù)據(jù)類型直接存儲(chǔ)在棧(stack)中的簡(jiǎn)單數(shù)據(jù)段，占據(jù)空間小、大小固定，屬于被頻繁使用數(shù)據(jù)，所以放入棧中存儲(chǔ)；
  引用數(shù)據(jù)類型存儲(chǔ)在堆(heap)中的對(duì)象,占據(jù)空間大、大小不固定。如果存儲(chǔ)在棧中，將會(huì)影響程序運(yùn)行的性能；引用數(shù)據(jù)類型在棧中存儲(chǔ)了指針，該指針指向堆中該實(shí)體的起始地址。當(dāng)解釋器尋找引用值時(shí)，會(huì)首先檢索其在棧中的地址，取得地址后從堆中獲得實(shí)體

如何將字符串轉(zhuǎn)化為數(shù)字，例如"12.3b"?

  * parseFloat("12.3b");
  * 正則表達(dá)式，"12.3b".match(/(d)+(.)?(d)+/g)[0] * 1, 但是這個(gè)不太靠譜，提供一種思路而已。

如何將浮點(diǎn)數(shù)點(diǎn)左邊的數(shù)每三位添加一個(gè)逗號(hào)，如12000000.11轉(zhuǎn)化為『12,000,000.11』?

  function commafy(num){
      return num && num
          .toString()
          .replace(/(d)(?=(d{3})+.)/g, function($1, $2){
              return $2 + ",";
          });
  }

如何實(shí)現(xiàn)數(shù)組的隨機(jī)排序？

  
  方法一：
      var arr = [1,2,3,4,5,6,7,8,9,10];
      function randSort1(arr){
          for(var i = 0,len = arr.length;i < len; i++ ){
              var rand = parseInt(Math.random()*len);
              var temp = arr[rand];
              arr[rand] = arr[i];
              arr[i] = temp;
          }
          return arr;
      }
      console.log(randSort1(arr));
      
  方法二：
      var arr = [1,2,3,4,5,6,7,8,9,10];
      function randSort2(arr){
          var mixedArray = [];
          while(arr.length > 0){
              var randomIndex = parseInt(Math.random()*arr.length);
              mixedArray.push(arr[randomIndex]);
              arr.splice(randomIndex, 1);
          }
          return mixedArray;
      }
      console.log(randSort2(arr));

  方法三：
      var arr = [1,2,3,4,5,6,7,8,9,10];
      arr.sort(function(){
          return Math.random() - 0.5;
      })
      console.log(arr);

Javascript如何實(shí)現(xiàn)繼承？

  1、構(gòu)造繼承
  2、原型繼承
  3、實(shí)例繼承
  4、拷貝繼承

  原型prototype機(jī)制或apply和call方法去實(shí)現(xiàn)較簡(jiǎn)單，建議使用構(gòu)造函數(shù)與原型混合方式。
  
      function Parent(){
          this.name = "wang";
      }

      function Child(){
          this.age = 28;
      }
      Child.prototype = new Parent();//繼承了Parent，通過原型

      var demo = new Child();
      alert(demo.age);
      alert(demo.name);//得到被繼承的屬性

JavaScript繼承的幾種實(shí)現(xiàn)方式？

參考：構(gòu)造函數(shù)的繼承，非構(gòu)造函數(shù)的繼承；

javascript創(chuàng)建對(duì)象的幾種方式？

  javascript創(chuàng)建對(duì)象簡(jiǎn)單的說,無非就是使用內(nèi)置對(duì)象或各種自定義對(duì)象，當(dāng)然還可以用JSON；但寫法有很多種，也能混合使用。

    1、對(duì)象字面量的方式

        person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"};

    2、用function來模擬無參的構(gòu)造函數(shù)

        function Person(){}
        var person=new Person();//定義一個(gè)function，如果使用new"實(shí)例化",該function可以看作是一個(gè)Class
        person.name="Mark";
        person.age="25";
        person.work=function(){
        alert(person.name+" hello...");
        }
        person.work();

    3、用function來模擬參構(gòu)造函數(shù)來實(shí)現(xiàn)（用this關(guān)鍵字定義構(gòu)造的上下文屬性）

        function Pet(name,age,hobby){
           this.name=name;//this作用域：當(dāng)前對(duì)象
           this.age=age;
           this.hobby=hobby;
           this.eat=function(){
              alert("我叫"+this.name+",我喜歡"+this.hobby+",是個(gè)程序員");
           }
        }
        var maidou =new Pet("麥兜",25,"coding");//實(shí)例化、創(chuàng)建對(duì)象
        maidou.eat();//調(diào)用eat方法


    4、用工廠方式來創(chuàng)建（內(nèi)置對(duì)象）

         var wcDog =new Object();
         wcDog.name="旺財(cái)";
         wcDog.age=3;
         wcDog.work=function(){
           alert("我是"+wcDog.name+",汪汪汪......");
         }
         wcDog.work();


    5、用原型方式來創(chuàng)建

        function Dog(){

         }
         Dog.prototype.name="旺財(cái)";
         Dog.prototype.eat=function(){
         alert(this.name+"是個(gè)吃貨");
         }
         var wangcai =new Dog();
         wangcai.eat();


    5、用混合方式來創(chuàng)建

        function Car(name,price){
          this.name=name;
          this.price=price;
        }
         Car.prototype.sell=function(){
           alert("我是"+this.name+"，我現(xiàn)在賣"+this.price+"萬元");
          }
        var camry =new Car("凱美瑞",27);
        camry.sell();

Javascript作用鏈域?

全局函數(shù)無法查看局部函數(shù)的內(nèi)部細(xì)節(jié)，但局部函數(shù)可以查看其上層的函數(shù)細(xì)節(jié)，直至全局細(xì)節(jié)。
當(dāng)需要從局部函數(shù)查找某一屬性或方法時(shí)，如果當(dāng)前作用域沒有找到，就會(huì)上溯到上層作用域查找，
直至全局函數(shù)，這種組織形式就是作用域鏈。

談?wù)凾his對(duì)象的理解。

  this總是指向函數(shù)的直接調(diào)用者（而非間接調(diào)用者）；
如果有new關(guān)鍵字，this指向new出來的那個(gè)對(duì)象；
在事件中，this指向觸發(fā)這個(gè)事件的對(duì)象，特殊的是，IE中的attachEvent中的this總是指向全局對(duì)象Window；

eval是做什么的？

它的功能是把對(duì)應(yīng)的字符串解析成JS代碼并運(yùn)行；
應(yīng)該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執(zhí)行）。
由JSON字符串轉(zhuǎn)換為JSON對(duì)象的時(shí)候可以用eval，var obj =eval("("+ str +")");

什么是window對(duì)象? 什么是document對(duì)象?

window對(duì)象是指瀏覽器打開的窗口。
document對(duì)象是Documentd對(duì)象（HTML 文檔對(duì)象）的一個(gè)只讀引用，window對(duì)象的一個(gè)屬性。

null，undefined 的區(qū)別？

null         表示一個(gè)對(duì)象是“沒有值”的值，也就是值為“空”；
undefined     表示一個(gè)變量聲明了沒有初始化(賦值)；

undefined不是一個(gè)有效的JSON，而null是；
undefined的類型(typeof)是undefined；
null的類型(typeof)是object；

    Javascript將未賦值的變量默認(rèn)值設(shè)為undefined；
    Javascript從來不會(huì)將變量設(shè)為null。它是用來讓程序員表明某個(gè)用var聲明的變量時(shí)沒有值的。

    typeof undefined
        //"undefined"
        undefined :是一個(gè)表示"無"的原始值或者說表示"缺少值"，就是此處應(yīng)該有一個(gè)值，但是還沒有定義。當(dāng)嘗試讀取時(shí)會(huì)返回 undefined；
        例如變量被聲明了，但沒有賦值時(shí)，就等于undefined

    typeof null
        //"object"
        null : 是一個(gè)對(duì)象(空對(duì)象, 沒有任何屬性和方法)；
        例如作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對(duì)象；

    注意：
        在驗(yàn)證null時(shí)，一定要使用　=== ，因?yàn)?== 無法分別 null 和　undefined
         null == undefined // true
          null === undefined // false

    再來一個(gè)例子：

        null
        Q：有張三這個(gè)人么？
        A：有！
        Q：張三有房子么？
        A：沒有！

        undefined
        Q：有張三這個(gè)人么？
        A：有！
        Q: 張三有多少歲？
        A: 不知道（沒有被告訴）

參考閱讀：[undefined與null的區(qū)別](http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html)

寫一個(gè)通用的事件偵聽器函數(shù)。

// event(事件)工具集，來源：github.com/markyun
markyun.Event = {
    // 頁面加載完成后
    readyEvent : function(fn) {
        if (fn==null) {
            fn=document;
        }
        var oldonload = window.onload;
        if (typeof window.onload != "function") {
            window.onload = fn;
        } else {
            window.onload = function() {
                oldonload();
                fn();
            };
        }
    },
    // 視能力分別使用dom0||dom2||IE方式 來綁定事件
    // 參數(shù)： 操作的元素,事件名稱 ,事件處理程序
    addEvent : function(element, type, handler) {
        if (element.addEventListener) {
            //事件類型、需要執(zhí)行的函數(shù)、是否捕捉
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, function() {
                handler.call(element);
            });
        } else {
            element["on" + type] = handler;
        }
    },
    // 移除事件
    removeEvent : function(element, type, handler) {
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.datachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    // 阻止事件 (主要是事件冒泡，因?yàn)镮E不支持事件捕獲)
    stopPropagation : function(ev) {
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else {
            ev.cancelBubble = true;
        }
    },
    // 取消事件的默認(rèn)行為
    preventDefault : function(event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    // 獲取事件目標(biāo)
    getTarget : function(event) {
        return event.target || event.srcElement;
    },
    // 獲取event對(duì)象的引用，取到事件的所有信息，確保隨時(shí)能使用event；
    getEvent : function(e) {
        var ev = e || window.event;
        if (!ev) {
            var c = this.getEvent.caller;
            while (c) {
                ev = c.arguments[0];
                if (ev && Event == ev.constructor) {
                    break;
                }
                c = c.caller;
            }
        }
        return ev;
    }
};

["1", "2", "3"].map(parseInt) 答案是多少？

parseInt() 函數(shù)能解析一個(gè)字符串，并返回一個(gè)整數(shù)，需要兩個(gè)參數(shù) (val, radix)，
其中 radix 表示要解析的數(shù)字的基數(shù)?！驹撝到橛?2 ~ 36 之間，并且字符串中的數(shù)字不能大于radix才能正確返回?cái)?shù)字結(jié)果值】;
但此處 map 傳了 3 個(gè) (element, index, array),我們重寫parseInt函數(shù)測(cè)試一下是否符合上面的規(guī)則。

function parseInt(str, radix) {

return str+"-"+radix;

};
var a=["1", "2", "3"];
a.map(parseInt); // ["1-0", "2-1", "3-2"] 不能大于radix

因?yàn)槎M(jìn)制里面，沒有數(shù)字3,導(dǎo)致出現(xiàn)超范圍的radix賦值和不合法的進(jìn)制解析，才會(huì)返回NaN
所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN]

詳細(xì)解析：http://blog.csdn.net/justjava...

事件是？IE與火狐的事件機(jī)制有什么區(qū)別？ 如何阻止冒泡？

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

事件處理機(jī)制：IE是事件冒泡、Firefox同時(shí)支持兩種事件模型，也就是：捕獲型事件和冒泡型事件；

ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）

什么是閉包（closure），為什么要用它？

閉包是指有權(quán)訪問另一個(gè)函數(shù)作用域中變量的函數(shù)，創(chuàng)建閉包的最常見的方式就是在一個(gè)函數(shù)內(nèi)創(chuàng)建另一個(gè)函數(shù)，通過另一個(gè)函數(shù)訪問這個(gè)函數(shù)的局部變量,利用閉包可以突破作用鏈域，將函數(shù)內(nèi)部的變量和方法傳遞到外部。

閉包的特性：

1.函數(shù)內(nèi)再嵌套函數(shù)
2.內(nèi)部函數(shù)可以引用外層的參數(shù)和變量
3.參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收

//li節(jié)點(diǎn)的onclick事件都能正確的彈出當(dāng)前被點(diǎn)擊的li索引

 index = 0
 index = 1
 index = 2
 index = 3

    執(zhí)行say667()后,say667()閉包內(nèi)部變量會(huì)存在,而閉包內(nèi)部函數(shù)的內(nèi)部變量不會(huì)存在
    使得Javascript的垃圾回收機(jī)制GC不會(huì)收回say667()所占用的資源
    因?yàn)閟ay667()的內(nèi)部函數(shù)的執(zhí)行需要依賴say667()中的變量
    這是對(duì)閉包作用的非常直白的描述

      function say667() {
        // Local variable that ends up within closure
        var num = 666;
        var sayAlert = function() {
            alert(num);
        }
        num++;
        return sayAlert;
    }

     var sayAlert = say667();
     sayAlert()//執(zhí)行結(jié)果應(yīng)該彈出的667

javascript 代碼中的"use strict";是什么意思 ? 使用它區(qū)別是什么？

   use strict是一種ECMAscript 5 添加的（嚴(yán)格）運(yùn)行模式,這種模式使得 Javascript 在更嚴(yán)格的條件下運(yùn)行,

   使JS編碼更加規(guī)范化的模式,消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為。
   默認(rèn)支持的糟糕特性都會(huì)被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值;
   全局變量的顯示聲明,函數(shù)必須聲明在頂層，不允許在非函數(shù)代碼塊內(nèi)聲明函數(shù),arguments.callee也不允許使用；
   消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全,限制函數(shù)中的arguments修改，嚴(yán)格模式下的eval函數(shù)的行為和非嚴(yán)格模式的也不相同;

   提高編譯器效率，增加運(yùn)行速度；
   為未來新版本的Javascript標(biāo)準(zhǔn)化做鋪墊。

如何判斷一個(gè)對(duì)象是否屬于某個(gè)類？

      使用instanceof （待完善）
      if(a instanceof Person){
          alert("yes");
      }

new操作符具體干了什么呢?

        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);

用原生JavaScript的實(shí)現(xiàn)過什么功能嗎？

Javascript中，有一個(gè)函數(shù)，執(zhí)行時(shí)對(duì)象查找時(shí)，永遠(yuǎn)不會(huì)去查找原型，這個(gè)函數(shù)是？

   hasOwnProperty

   javaScript中hasOwnProperty函數(shù)方法是返回一個(gè)布爾值，指出一個(gè)對(duì)象是否具有指定名稱的屬性。此方法無法檢查該對(duì)象的原型鏈中是否具有該屬性；該屬性必須是對(duì)象本身的一個(gè)成員。
   使用方法：
   object.hasOwnProperty(proName)
   其中參數(shù)object是必選項(xiàng)。一個(gè)對(duì)象的實(shí)例。
   proName是必選項(xiàng)。一個(gè)屬性名稱的字符串值。

   如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數(shù)方法返回 true，反之則返回 false。

JSON 的了解？

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

   JSON字符串轉(zhuǎn)換為JSON對(duì)象:
   var obj =eval("("+ str +")");
   var obj = str.parseJSON();
   var obj = JSON.parse(str);

   JSON對(duì)象轉(zhuǎn)換為JSON字符串：
   var last=obj.toJSONString();
   var last=JSON.stringify(obj);

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？

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

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

Ajax 是什么? 如何創(chuàng)建一個(gè)Ajax？

   ajax的全稱：Asynchronous Javascript And XML。
   異步傳輸+js+xml。
   所謂異步，在這里簡(jiǎn)單地解釋就是：向服務(wù)器發(fā)送請(qǐng)求的時(shí)候，我們不必等待結(jié)果，而是可以同時(shí)做其他的事情，等到有了結(jié)果它自己會(huì)根據(jù)設(shè)定進(jìn)行后續(xù)操作，與此同時(shí)，頁面是不會(huì)發(fā)生整頁刷新的，提高了用戶體驗(yàn)。

   (1)創(chuàng)建XMLHttpRequest對(duì)象,也就是創(chuàng)建一個(gè)異步調(diào)用對(duì)象
   (2)創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及驗(yàn)證信息
   (3)設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)
   (4)發(fā)送HTTP請(qǐng)求
   (5)獲取異步調(diào)用返回的數(shù)據(jù)
   (6)使用JavaScript和DOM實(shí)現(xiàn)局部刷新

Ajax 解決瀏覽器緩存問題？

   1、在ajax發(fā)送請(qǐng)求前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。

   2、在ajax發(fā)送請(qǐng)求前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。

   3、在URL后面加上一個(gè)隨機(jī)數(shù)： "fresh=" + Math.random();。

? ? ? ?4、在URL后面加上時(shí)間戳："nowtime=" + new Date().getTime();。

   5、如果是使用jQuery，直接這樣就可以了 $.ajaxSetup({cache:false})。這樣頁面的所有ajax都會(huì)執(zhí)行這條語句就是不需要保存緩存記錄。

同步和異步的區(qū)別?

同步的概念應(yīng)該是來自于OS中關(guān)于同步的概念:不同進(jìn)程為協(xié)同完成某項(xiàng)工作而在先后次序上調(diào)整(通過阻塞,喚醒等方式).同步強(qiáng)調(diào)的是順序性.誰先誰后.異步則不存在這種順序性.

同步：瀏覽器訪問服務(wù)器請(qǐng)求，用戶看得到頁面刷新，重新發(fā)請(qǐng)求,等請(qǐng)求完，頁面刷新，新內(nèi)容出現(xiàn)，用戶看到新內(nèi)容,進(jìn)行下一步操作。

異步：瀏覽器訪問服務(wù)器請(qǐng)求，用戶正常操作，瀏覽器后端進(jìn)行請(qǐng)求。等請(qǐng)求完，頁面不刷新，新內(nèi)容也會(huì)出現(xiàn)，用戶看到新內(nèi)容。



（待完善）

如何解決跨域問題?

jsonp、 iframe、window.name、window.postMessage、服務(wù)器上設(shè)置代理頁面

頁面編碼和被請(qǐng)求的資源編碼如果不一致如何處理？

服務(wù)器代理轉(zhuǎn)發(fā)時(shí)，該如何處理cookie？

nginx

模塊化開發(fā)怎么做？

立即執(zhí)行函數(shù),不暴露私有成員

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

（待完善）

AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規(guī)范區(qū)別？

AMD 規(guī)范在這里：https://github.com/amdjs/amdj...
CMD 規(guī)范在這里：https://github.com/seajs/seaj...

Asynchronous Module Definition，異步模塊定義，所有的模塊將被異步加載，模塊加載不影響后面語句運(yùn)行。所有依賴某些模塊的語句均放置在回調(diào)函數(shù)中。

 區(qū)別：

    1. 對(duì)于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行。不過 RequireJS 從 2.0 開始，也改成可以延遲執(zhí)行（根據(jù)寫法不同，處理方式不同）。CMD 推崇 as lazy as possible.
    2. CMD 推崇依賴就近，AMD 推崇依賴前置?？创a：

    // CMD
    define(function(require, exports, module) {
        var a = require("./a")
        a.doSomething()
        // 此處略去 100 行
        var b = require("./b") // 依賴可以就近書寫
        b.doSomething()
        // ...
    })

    // AMD 默認(rèn)推薦
    define(["./a", "./b"], function(a, b) { // 依賴必須一開始就寫好
        a.doSomething()
        // 此處略去 100 行
        b.doSomething()
        // ...
    })

requireJS的核心原理是什么？（如何動(dòng)態(tài)加載的？如何避免多次加載的？如何

緩存的？）

    參考：http://annn.me/how-to-realize-cmd-loader/

JS模塊加載器的輪子怎么造，也就是如何實(shí)現(xiàn)一個(gè)模塊加載器？

談一談你對(duì)ECMAScript6的了解？

ECMAScript6 怎么寫class么，為什么會(huì)出現(xiàn)class這種東西?

異步加載JS的方式有哪些？

(1) defer，只支持IE

(2) async：

(3) 創(chuàng)建script，插入到DOM中，加載完畢后callBack

documen.write和 innerHTML的區(qū)別

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

innerHTML可以重繪頁面的一部分

DOM操作——怎樣添加、移除、移動(dòng)、復(fù)制、創(chuàng)建和查找節(jié)點(diǎn)?

（1）創(chuàng)建新節(jié)點(diǎn)
createDocumentFragment() //創(chuàng)建一個(gè)DOM片段
createElement() //創(chuàng)建一個(gè)具體的元素
createTextNode() //創(chuàng)建一個(gè)文本節(jié)點(diǎn)
（2）添加、移除、替換、插入
appendChild()
removeChild()
replaceChild()
insertBefore() //在已有的子節(jié)點(diǎn)前插入一個(gè)新的子節(jié)點(diǎn)
（3）查找
getElementsByTagName() //通過標(biāo)簽名稱
getElementsByName() //通過元素的Name屬性的值(IE容錯(cuò)能力較強(qiáng)，會(huì)得到一個(gè)數(shù)組，其中包括id等于name值的)
getElementById() //通過元素Id，唯一性

.call() 和 .apply() 的區(qū)別？

      例子中用 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);

數(shù)組和對(duì)象有哪些原生方法，列舉一下？

JS 怎么實(shí)現(xiàn)一個(gè)類。怎么實(shí)例化這個(gè)類

JavaScript中的作用域與變量聲明提升？

如何編寫高性能的Javascript？

那些操作會(huì)造成內(nèi)存泄漏？

JQuery的源碼看過嗎？能不能簡(jiǎn)單概況一下它的實(shí)現(xiàn)原理？

jQuery.fn的init方法返回的this指的是什么對(duì)象？為什么要返回this？

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

jQuery 的屬性拷貝(extend)的實(shí)現(xiàn)原理是什么，如何實(shí)現(xiàn)深拷貝？

jquery.extend 與 jquery.fn.extend的區(qū)別？

jquery.extend 為jquery類添加類方法，可以理解為添加靜態(tài)方法

jquery.fn.extend:
源碼中jquery.fn = jquery.prototype，所以對(duì)jquery.fn的擴(kuò)展，就是為jquery類添加成員函數(shù)

    使用：
    jquery.extend擴(kuò)展，需要通過jquery類來調(diào)用，而jquery.fn.extend擴(kuò)展，所有jquery實(shí)例都可以直接調(diào)用。

jQuery 的隊(duì)列是如何實(shí)現(xiàn)的？隊(duì)列可以用在哪些地方？

談一下Jquery中的bind(),live(),delegate(),on()的區(qū)別？

JQuery一個(gè)對(duì)象可以同時(shí)綁定多個(gè)事件，這是如何實(shí)現(xiàn)的？

是否知道自定義事件。jQuery里的fire函數(shù)是什么意思，什么時(shí)候用？

jQuery 是通過哪個(gè)方法和 Sizzle 選擇器結(jié)合的？（jQuery.fn.find()進(jìn)入Sizzle）

針對(duì) jQuery性能的優(yōu)化方法？

Jquery與jQuery UI 有啥區(qū)別？

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

    *jQuery UI則是在jQuery的基礎(chǔ)上，利用jQuery的擴(kuò)展性，設(shè)計(jì)的插件。
     提供了一些常用的界面元素，諸如對(duì)話框、拖動(dòng)行為、改變大小行為等等

JQuery的源碼看過嗎？能不能簡(jiǎn)單說一下它的實(shí)現(xiàn)原理？

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)

jQuery和Zepto的區(qū)別？各自的使用場(chǎng)景？

針對(duì) jQuery 的優(yōu)化方法？

*基于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++) {}

Zepto的點(diǎn)透問題如何解決？

jQueryUI如何自定義組件?

需求：實(shí)現(xiàn)一個(gè)頁面操作不會(huì)整頁刷新的網(wǎng)站，并且能在瀏覽器前進(jìn)、后退時(shí)正確響應(yīng)。給出你的技術(shù)實(shí)現(xiàn)方案？

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

this === window ? "browser" : "node";

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

移動(dòng)端最小觸控區(qū)域是多大？

jQuery 的 slideUp動(dòng)畫 ，如果目標(biāo)元素是被外部事件驅(qū)動(dòng), 當(dāng)鼠標(biāo)快速地連續(xù)觸發(fā)外部元素事件, 動(dòng)畫會(huì)滯后的反復(fù)執(zhí)行，該如何處理呢?

jquery stop(): 如：$("#div").stop().animate({width:"100px"},100);

把 Script 標(biāo)簽 放在頁面的最底部的body封閉之前 和封閉之后有什么區(qū)別？瀏覽器會(huì)如何解析它們？

移動(dòng)端