2017年前端面試題整理彙總100題

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請求。

JSONP：json+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的方法既不復雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。

XML和JSON的區別？

(1).數據體積方面。

JSON相對於XML來講，數據的體積小，傳遞的速度更快些。

(2).數據交互方面。

JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互。

(3).數據描述方面。

JSON對數據的描述性比XML較差。

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

談談你對webpack的看法

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

webpack的兩大特色：

1.code splitting（可以自動完成）

2.loader 可以處理各種類型的靜態文件，並且支持串聯操作

webpack 是以commonJS的形式來書寫腳本滴，但對 AMD/CMD 的支持也很全面，方便舊項目進行代碼遷移。

webpack具有requireJs和browserify的功能，但仍有很多自己的新特性：

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的標誌：SYN和ACK。

發送端首先發送一個帶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的執行。

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

HTTP和HTTPS

HTTP協議通常承載於TCP協議之上，在HTTP和TCP之間添加一個安全協議層（SSL或TSL），這個時候，就成了我們常說的HTTPS。

默認HTTP的端口號爲80，HTTPS的端口號爲443。

爲什麼HTTPS安全

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

對前端模塊化的認識

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

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

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

AMD推薦的風格通過返回一個對象做爲模塊對象，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

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？

當發送一個服務器請求時，瀏覽器首先會進行緩存過期判斷。瀏覽器根據緩存過期時間判斷緩存文件是否過期。

情景一：若沒有過期，則不向服務器發送請求，直接使用緩存中的結果，此時我們在瀏覽器控制檯中可以看到 200 OK(from cache) ，此時的情況就是完全使用緩存，瀏覽器和服務器沒有任何交互的。

情景二：若已過期，則向服務器發送請求，此時請求中會帶上①中設置的文件修改時間，和Etag

然後，進行資源更新判斷。服務器根據瀏覽器傳過來的文件修改時間，判斷自瀏覽器上一次請求之後，文件是不是沒有被修改過；根據Etag，判斷文件內容自上一次請求之後，有沒有發生變化

情形一：若兩種判斷的結論都是文件沒有被修改過，則服務器就不給瀏覽器發index.html的內容了，直接告訴它，文件沒有被修改過，你用你那邊的緩存吧—— 304 Not Modified，此時瀏覽器就會從本地緩存中獲取index.html的內容。此時的情況叫協議緩存，瀏覽器和服務器之間有一次請求交互。

情形二：若修改時間和文件內容判斷有任意一個沒有通過，則服務器會受理此次請求，之後的操作同①

 

① 只有get請求會被緩存，post請求不會

Expires和Cache-Control

Expires要求客戶端和服務端的時鐘嚴格同步。HTTP1.1引入Cache-Control來克服Expires頭的限制。如果max-age和Expires同時出現，則max-age有更高的優先級。

    Cache-Control: no-cache, private, max-age=0

    ETag: abcde

    Expires: Thu, 15 Apr 2014 20:00:00 GMT

    Pragma: private

    Last-Modified: $now // RFC1123 format

ETag應用:

Etag由服務器端生成，客戶端通過If-Match或者說If-None-Match這個條件判斷請求來驗證資源是否修改。常見的是使用If-None-Match。請求一個文件的流程可能如下：

====第一次請求===

1.客戶端發起 HTTP GET 請求一個文件；

2.服務器處理請求，返回文件內容和一堆Header，當然包括Etag(例如"2e681a-6-5d044840")(假設服務器支持Etag生成和已經開啓了Etag).狀態碼200

====第二次請求===

客戶端發起 HTTP GET 請求一個文件，注意這個時候客戶端同時發送一個If-None-Match頭，這個頭的內容就是第一次請求時服務器返回的Etag：2e681a-6-5d0448402.服務器判斷髮送過來的Etag和計算出來的Etag匹配，因此If-None-Match爲False，不返回200，返回304，客戶端繼續使用本地緩存；流程很簡單，問題是，如果服務器又設置了Cache-Control:max-age和Expires呢，怎麼辦

答案是同時使用，也就是說在完全匹配If-Modified-Since和If-None-Match即檢查完修改時間和Etag之後，

服務器才能返回304.(不要陷入到底使用誰的問題怪圈)

爲什麼使用Etag請求頭?

Etag 主要爲了解決 Last-Modified 無法解決的一些問題。

棧和隊列的區別?

棧的插入和刪除操作都是在一端進行的，而隊列的操作卻是在兩端進行的。

隊列先進先出，棧先進後出。

棧只允許在表尾一端進行插入和刪除，而隊列只允許在表尾一端進行插入，在表頭一端進行刪除

棧和堆的區別？

棧區（stack）—   由編譯器自動分配釋放   ，存放函數的參數值，局部變量的值等。

堆區（heap）   —   一般由程序員分配釋放，   若程序員不釋放，程序結束時可能由OS回收。

堆（數據結構）：堆可以被看成是一棵樹，如：堆排序；

棧（數據結構）：一種先進後出的數據結構。

快速 排序的思想並實現一個快排？

“快速排序”的思想很簡單，整個排序過程只需要三步：

　　（1）在數據集之中，找一個基準點

　　（2）建立兩個數組，分別存儲左邊和右邊的數組

　　（3）利用遞歸進行下次比較

    <script type="text/javascript">

        function quickSort(arr){
            if(arr.length<=1){
                return arr;//如果數組只有一個數，就直接返回；
            }

            var num = Math.floor(arr.length/2);//找到中間數的索引值，如果是浮點數，則向下取整

            var numValue = arr.splice(num,1);//找到中間數的值
            var left = [];
            var right = [];

            for(var i=0;i<arr.length;i++){
                if(arr[i]<numValue){
                    left.push(arr[i]);//基準點的左邊的數傳到左邊數組
                }
                else{
                   right.push(arr[i]);//基準點的右邊的數傳到右邊數組
                }
            }

            return quickSort(left).concat([numValue],quickSort(right));//遞歸不斷重複比較
        }

        alert(quickSort([32,45,37,16,2,87]));//彈出“2,16,32,37,45,87”

    </script>

你覺得jQuery或zepto源碼有哪些寫的好的地方

(答案僅供參考)

jQuery源碼封裝在一個匿名函數的自執行環境中，有助於防止變量的全局污染，然後通過傳入window對象參數，可以使window對象作爲局部變量使用，好處是當jquery中訪問window對象的時候，就不用將作用域鏈退回到頂層作用域了，從而可以更快的訪問window對象。同樣，傳入undefined參數，可以縮短查找undefined時的作用域鏈。

    (function( window, undefined ) {

         //用一個函數域包起來，就是所謂的沙箱

         //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局

         //把當前沙箱需要的外部變量通過函數參數引入進來

         //只要保證參數對內提供的接口的一致性，你還可以隨意替換傳進來的這個參數

        window.jQuery = window.$ = jQuery;

    })( window );

jquery將一些原型屬性和方法封裝在了jquery.prototype中，爲了縮短名稱，又賦值給了jquery.fn，這是很形象的寫法。

有一些數組或對象的方法經常能使用到，jQuery將其保存爲局部變量以提高訪問速度。

jquery實現的鏈式調用可以節約代碼，所返回的都是同一個對象，可以提高代碼效率。

ES6的瞭解

新增模板字符串（爲JavaScript提供了簡單的字符串插值功能）、箭頭函數（操作符左邊爲輸入的參數，而右邊則是進行的操作以及返回的值Inputs=>outputs。）、for-of（用來遍歷數據—例如數組中的值。）arguments對象可被不定參數和默認參數完美代替。ES6將promise對象納入規範，提供了原生的Promise對象。增加了let和const命令，用來聲明變量。增加了塊級作用域。let命令實際上就增加了塊級作用域。ES6規定，var命令和function命令聲明的全局變量，屬於全局對象的屬性；let命令、const命令、class命令聲明的全局變量，不屬於全局對象的屬性。。還有就是引入module模塊的概念

js繼承方式及其優缺點

原型鏈繼承的缺點

一是字面量重寫原型會中斷關係，使用引用類型的原型，並且子類型還無法給超類型傳遞參數。

借用構造函數（類式繼承）

借用構造函數雖然解決了剛纔兩種問題，但沒有原型，則複用無從談起。所以我們需要原型鏈+借用構造函數的模式，這種模式稱爲組合繼承

組合式繼承

組合式繼承是比較常用的一種繼承方法，其背後的思路是 使用原型鏈實現對原型屬性和方法的繼承，而通過借用構造函數來實現對實例屬性的繼承。這樣，既通過在原型上定義方法實現了函數複用，又保證每個實例都有它自己的屬性。

關於Http 2.0 你知道多少？

HTTP/2引入了“服務端推（server push）”的概念，它允許服務端在客戶端需要數據之前就主動地將數據發送到客戶端緩存中，從而提高性能。

HTTP/2提供更多的加密支持

HTTP/2使用多路技術，允許多個消息在一個連接上同時交差。

它增加了頭壓縮（header compression），因此即使非常小的請求，其請求和響應的header都只會佔用很小比例的帶寬。

 defer和async

defer並行加載js文件，會按照頁面上script標籤的順序執行 
async並行加載js文件，下載完成立即執行，不會按照頁面上script標籤的順序執行

談談浮動和清除浮動

浮動的框可以向左或向右移動，直到他的外邊緣碰到包含框或另一個浮動框的邊框爲止。由於浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現得就像浮動框不存在一樣。浮動的塊框會漂浮在文檔普通流的塊框上。

如何評價AngularJS和BackboneJS

backbone具有依賴性，依賴underscore.js。Backbone + Underscore + jQuery(or Zepto) 就比一個AngularJS 多出了2 次HTTP請求.

 

Backbone的Model沒有與UI視圖數據綁定，而是需要在View中自行操作DOM來更新或讀取UI數據。AngularJS與此相反，Model直接與UI視圖綁定，Model與UI視圖的關係，通過directive封裝，AngularJS內置的通用directive，就能實現大部分操作了，也就是說，基本不必關心Model與UI視圖的關係，直接操作Model就行了，UI視圖自動更新。

 

AngularJS的directive，你輸入特定數據，他就能輸出相應UI視圖。是一個比較完善的前端MVW框架，包含模板，數據雙向綁定，路由，模塊化，服務，依賴注入等所有功能，模板功能強大豐富，並且是聲明式的，自帶了豐富的 Angular 指令。

用過哪些設計模式？

工廠模式：

主要好處就是可以消除對象間的耦合，通過使用工程方法而不是new關鍵字。將所有實例化的代碼集中在一個位置防止代碼重複。

    工廠模式解決了重複實例化的問題 ，但還有一個問題,那就是識別問題，因爲根本無法 搞清楚他們到底是哪個對象的實例。


function createObject(name,age,profession){//集中實例化的函數var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.profession = profession;
    obj.move = function () {
        return this.name + ' at ' + this.age + ' engaged in ' + this.profession;
    };
    return obj;
}
var test1 = createObject('trigkit4',22,'programmer');//第一個實例var test2 = createObject('mike',25,'engineer');//第二個實例

 

構造函數模式

使用構造函數的方法 ，即解決了重複實例化的問題 ，又解決了對象識別的問題，該模式與工廠模式的不同之處在於：

1.構造函數方法沒有顯示的創建對象 (new Object());

2.直接將屬性和方法賦值給 this 對象;

3.沒有 renturn 語句。

說說你對閉包的理解

使用閉包主要是爲了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數纔會產生作用域的概念

閉包有三個特性：

1.函數嵌套函數

2.函數內部可以引用外部的參數和變量

3.參數和變量不會被垃圾回收機制回收

請你談談Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但還是有很多侷限性的。

第一：每個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie

2.IE7和之後的版本最後可以有50個cookie。

3.Firefox最多50個cookie

4.chrome和Safari沒有做硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約爲4096字節，爲了兼容性，一般不能超過4095字節。

IE 提供了一種存儲可以持久化用戶數據，叫做userdata，從IE5.0就開始支持。每個數據最多128K，每個域名下最多1M。這個持久化數據放在緩存中，如果緩存沒有清理，那麼會一直存在。

優點：極高的擴展性和可用性

1.通過良好的編程，控制保存在cookie中的session對象的大小。

2.通過加密和安全傳輸技術（SSL），減少cookie被破解的可能性。

3.只在cookie中存放不敏感數據，即使被盜也不會有重大損失。

4.控制cookie的生命期，使之不會永遠有效。偷盜者很可能拿到一個過期的cookie。

缺點：

1.`Cookie`數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉.


2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因爲攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那麼它起不到任何作用。

瀏覽器本地存儲

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。

web storage和cookie的區別

Web Storage的概念和cookie相似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。

除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。

但是cookie也是不可以或缺的：cookie的作用是與服務器進行交互，作爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地“存儲”數據而生

瀏覽器的支持除了IE７及以下不支持外，其他標準瀏覽器都完全支持(ie及FF需在web服務器裏運行)，值得一提的是IE總是辦好事，例如IE7、IE6中的userData其實就是javascript本地存儲的解決方案。通過簡單的代碼封裝可以統一到所有的瀏覽器都支持web storage。

localStorage和sessionStorage都具有相同的操作方法，例如setItem、getItem和removeItem等

cookie 和session 的區別：

 1、cookie數據存放在客戶的瀏覽器上，session數據放在服務器上。

 2、cookie不是很安全，別人可以分析存放在本地的COOKIE並進行COOKIE欺騙

    考慮到安全應當使用session。

 3、session會在一定時間內保存在服務器上。當訪問增多，會比較佔用你服務器的性能

     考慮到減輕服務器性能方面，應當使用COOKIE。

 4、單個cookie保存的數據不能超過4K，很多瀏覽器都限制一個站點最多保存20個cookie。

 5、所以個人建議：

    將登陸信息等重要信息存放爲SESSION

    其他信息如果需要保留，可以放在COOKIE中

display:none和visibility:hidden的區別？

display:none  隱藏對應的元素，在文檔佈局中不再給它分配空間，它各邊的元素會合攏，就當他從來不存在。

visibility:hidden  隱藏對應的元素，但是在文檔佈局中仍保留原來的空間。

CSS中link 和@import的區別是？

(1) link屬於HTML標籤，而@import是CSS提供的;

(2) 頁面被加載的時，link會同時被加載，而@import被引用的CSS會等到引用它的CSS文件被加載完再加載;

(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題;

(4) link方式的樣式的權重 高於@import的權重.

position:absolute和float屬性的異同

• 共同點：對內聯元素設置float和absolute屬性，可以讓元素脫離文檔流，並且可以設置其寬高。

• 不同點：float仍會佔據位置，absolute會覆蓋文檔流中的其他元素。

介紹一下box-sizing屬性？

box-sizing屬性主要用來控制元素的盒模型的解析模式。默認值是content-box。

• content-box：讓元素維持W3C的標準盒模型。元素的寬度/高度由border + padding + content的寬度/高度決定，設置width/height屬性指的是content部分的寬/高

• border-box：讓元素維持IE傳統盒模型（IE6以下版本和IE6~7的怪異模式）。設置width/height屬性指的是border + padding + content

標準瀏覽器下，按照W3C規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不重新計算元素的盒子尺寸，從而影響整個頁面的佈局。

CSS 選擇符有哪些？哪些屬性可以繼承？優先級算法如何計算？ CSS3新增僞類有那些？

    1.id選擇器（ # myid）

    2.類選擇器（.myclassname）

    3.標籤選擇器（div, h1, p）

    4.相鄰選擇器（h1 + p）

    5.子選擇器（ul > li）

    6.後代選擇器（li a）

    7.通配符選擇器（ * ）

    8.屬性選擇器（a[rel = "external"]）

    9.僞類選擇器（a: hover, li:nth-child）

優先級爲:

!important > id > class > tag

important 比 內聯優先級高,但內聯比 id 要高

CSS3新增僞類舉例：

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。

    p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。

    p:only-of-type  選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。

    p:only-child    選擇屬於其父元素的唯一子元素的每個 <p> 元素。

    p:nth-child(2)  選擇屬於其父元素的第二個子元素的每個 <p> 元素。

    :enabled  :disabled 控制表單控件的禁用狀態。

    :checked        單選框或複選框被選中。

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），

對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

增加了更多的CSS選擇器  多背景 rgba

在CSS3中唯一引入的僞元素是::selection.

媒體查詢，多欄佈局

border-image

CSS3中新增了一種盒模型計算方式：box-sizing。盒模型默認的值是content-box, 新增的值是padding-box和border-box，幾種盒模型計算元素寬高的區別如下：

content-box（默認）

佈局所佔寬度Width：

Width = width + padding-left + padding-right + border-left + border-right

佈局所佔高度Height:

Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right) + border-top + border-bottom

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

佈局所佔寬度Width：

Width = width(包含padding-left + padding-right + border-left + border-right)

佈局所佔高度Height:

Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

對BFC規範的理解？

      BFC，塊級格式化上下文，一個創建了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。

    （W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其他元素的關係和相互作用。

說說你對語義化的理解？

1，去掉或者丟失樣式的時候能夠讓頁面呈現出清晰的結構

2，有利於SEO：和搜索引擎建立良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來確定上下文和各個關鍵字的權重；

3，方便其他設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；

4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，可以減少差異化。

Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?

1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤之前。告知瀏覽器以何種模式來渲染文檔。

2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。

3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點無法工作。

4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。

你知道多少種Doctype文檔類型？

 該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。

 HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。

 XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks

 （包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

HTML與XHTML——二者有什麼區別

區別：

1.所有的標記都必須要有一個相應的結束標記

2.所有標籤的元素和屬性的名字都必須使用小寫

3.所有的XML標記都必須合理嵌套

4.所有的屬性必須用引號""括起來

5.把所有<和&特殊符號用編碼表示

6.給所有屬性賦一個值

7.不要在註釋內容中使“--”

8.圖片必須有說明文字

常見兼容性問題？

png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.

瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設置的大。

浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，如果對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）

#box{ float:left; width:10px; margin:0 0 0 100px;}

這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入
_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

漸進識別的方式，從總體中逐漸排除局部。


  首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。

  接着，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。

  css

      .bb{

       background-color:#f1ee18;/*所有識別*/

      .background-color:#00deff\9; /*IE6、7、8識別*/

      +background-color:#a200ff;/*IE6、7識別*/

      _background-color:#1e0bd1;/*IE6識別*/

      }


怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發
怪異模式。爲避免怪異模式給我們帶來不必要的麻煩，最好養成書寫DTD聲明的好習慣。現在
可以使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

上下margin重合問題

ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，但是margin-top和margin-bottom卻會發生重合。

解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。

解釋下浮動和它的工作原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。


1.使用空標籤清除浮動。

   這種方法是在所有浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增加了無意義標籤。

2.使用overflow。

   給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。

3.使用after僞對象清除浮動。

   該方法只適用於非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。一、該方法中必須爲需要清除浮動元素的僞對象中設置 height:0，否則該元素會比實際高出若干像素；

浮動元素引起的問題和解決辦法？

浮動元素引起的問題：

（1）父元素的高度無法被撐開，影響與父元素同級的元素

（2）與浮動元素同級的非浮動元素（內聯元素）會跟隨其後

（3）若非第一個元素浮動，則該元素之前的元素也需要浮動，否則會影響頁面顯示的結構

解決方法：

使用CSS中的clear:both;屬性來清除元素的浮動可解決2、3問題，對於問題1，添加如下樣式，給父元素添加clearfix樣式：

    .clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}

    .clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

    1，額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增加額外的標籤使HTML結構看起來不夠簡潔。）

    2，使用after僞類

    #parent:after{

        content:".";

        height:0;

        visibility:hidden;

        display:block;

        clear:both;

        }


    3,浮動外部元素

    4,設置overflow爲hidden或者auto

DOM操作——怎樣添加、移除、移動、複製、創建和查找節點。

1）創建新節點

      createDocumentFragment()    //創建一個DOM片段

      createElement()   //創建一個具體的元素

      createTextNode()   //創建一個文本節點

2）添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //並沒有insertAfter()

3）查找

      getElementsByTagName()    //通過標籤名稱

      getElementsByName()    //通過元素的Name屬性的值(IE容錯能力較強，
      會得到一個數組，其中包括id等於name值的)

      getElementById()    //通過元素Id，唯一性

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

  HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。

  拖拽釋放(Drag and drop) API

  語義化更好的內容標籤（header,nav,footer,aside,article,section）

  音頻、視頻API(audio,video)

  畫布(Canvas) API

  地理(Geolocation) API

  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

  sessionStorage 的數據在瀏覽器關閉後自動刪除


  表單控件，calendar、date、time、email、url、search

  新的技術webworker, websocket, Geolocation

移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

    IE8/IE7/IE6支持通過document.createElement方法產生的標籤，

    可以利用這一特性讓這些瀏覽器支持HTML5新標籤，

    當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

       <!--[if lt IE 9]>

       <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>

       <![endif]-->

    如何區分： DOCTYPE聲明\新增的結構元素\功能元素

如何實現瀏覽器內多個標籤頁之間的通信?

    調用localstorge、cookies等本地存儲方式

什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

     FOUC - Flash Of Unstyled Content 文檔樣式閃爍

     <style type="text/css" media="all">@import "../fouc.css";</style>

    而引用CSS文件的@import就是造成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，然後再去導入外部的CSS文件，因此，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。

     解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就可以了。

null和undefined的區別？

null是一個表示”無”的對象，轉爲數值時爲0；undefined是一個表示”無”的原始值，轉爲數值時爲NaN。

當聲明的變量還未被初始化時，變量的默認值爲undefined。

null用來表示尚未存在的對象，常用來表示函數企圖返回一個不存在的對象。

undefined表示”缺少值”，就是此處應該有一個值，但是還沒有定義。典型用法是：

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


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


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


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

null表示”沒有對象”，即該處不應該有值。典型用法是：

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

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

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

   1、創建一個空對象，並且 this 變量引用該對象，同時還繼承了該函數的原型。

   2、屬性和方法被加入到 this 引用的對象中。

   3、新創建的對象由 this 所引用，並且最後隱式的返回 this 。



var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

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

defer和async、動態創建DOM方式（創建script，插入到DOM中，加載完畢後callBack）、按需異步載入js

call() 和 apply() 的區別和作用？

作用：動態改變某個類的某個方法的運行環境（執行上下文）。

區別參見：[JavaScript學習總結（四）function函數部分][3]

哪些操作會造成內存泄漏？

內存泄漏指任何對象在您不再擁有或需要它之後仍然存在。

垃圾回收器定期掃描對象，並計算引用了每個對象的其他對象的數量。如果一個對象的引用數量爲 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的內存即可回收。



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

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

詳見：[詳解js變量、作用域及內存][4]

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

• IE支持currentStyle，FIrefox使用getComputStyle

• IE 使用innerText，Firefox使用textContent

• 濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num

• 事件方面：IE：attachEvent：火狐是addEventListener

• 鼠標位置：IE是event.clientX；火狐是event.pageX

• IE使用event.srcElement；Firefox使用event.target

• IE中消除list的原點僅需margin:0即可達到最終效果；FIrefox需要設置margin:0;padding:0以及list-style:none

• CSS圓角：ie7以下不支持圓角

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

Javascript數據推送

• Commet：基於HTTP長連接的服務器推送技術

• 基於WebSocket的推送方案

• SSE（Server-Send Event）：服務器推送數據新方式

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

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

    1、實現界面交互

    2、提升用戶體驗

    3、有了Node.js，前端可以實現服務端的一些事情


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



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

 與團隊成員，UI設計，產品經理的溝通；

 做好的頁面結構，頁面重構和用戶體驗；

 處理hack，兼容、寫出優美的代碼格式；

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

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼？

    分爲4個步驟：

    （1），當發送一個URL請求時，不管這個URL是Web頁面的URL還是Web頁面上每個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器獲得請求對應的IP地址。

    （2）， 瀏覽器與遠程`Web`服務器通過`TCP`三次握手協商來建立一個`TCP/IP`連接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試建立起通信，而後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。

    （3），一旦`TCP/IP`連接建立，瀏覽器會通過該連接向遠程服務器發送`HTTP`的`GET`請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。

    （4），此時，`Web`服務器提供資源服務，客戶端開始下載資源。



請求返回後，便進入了我們關注的前端模塊

簡單來說，瀏覽器會解析`HTML`生成`DOM Tree`，其次會根據CSS生成CSS Rule Tree，而`javascript`又可以根據`DOM API`操作`DOM`

詳情：[從輸入 URL 到瀏覽器接收的過程中發生了什麼事情？][8]

javascript對象的幾種創建方式

1，工廠模式

2，構造函數模式

3，原型模式

4，混合構造函數和原型模式

5，動態原型模式

6，寄生構造函數模式

7，穩妥構造函數模式

javascript繼承的6種方法

1，原型鏈繼承

2，借用構造函數繼承

3，組合繼承(原型+借用構造)

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

創建ajax的過程

    (1)創建`XMLHttpRequest`對象,也就是創建一個異步調用對象.

    (2)創建一個新的`HTTP`請求,並指定該`HTTP`請求的方法、`URL`及驗證信息.

    (3)設置響應`HTTP`請求狀態變化的函數.

    (4)發送`HTTP`請求.

    (5)獲取異步調用返回的數據.

    (6)使用JavaScript和DOM實現局部刷新.


    var xmlHttp = new XMLHttpRequest();

    xmlHttp.open('GET','demo.php','true');

    xmlHttp.send()

    xmlHttp.onreadystatechange = function(){

        if(xmlHttp.readyState === 4 & xmlHttp.status === 200){

        }

    }

異步加載和延遲加載

1.異步加載的方案： 動態插入script標籤

2.通過ajax去獲取js代碼，然後通過eval執行

3.script標籤上添加defer或者async屬性

4.創建並插入iframe，讓它異步執行js

5.延遲加載：有些 js 代碼並不是頁面初始化的時候就立刻需要的，而稍後的某些情況才需要的。

ie各版本和chrome可以並行下載多少個資源

IE6 兩個併發，iE7升級之後的6個併發，之後版本也是6個
Firefox，chrome也是6個

Flash、Ajax各自的優缺點，在使用中如何取捨？

• Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。

-Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。

• 共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操作DOM

請解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤其是Javascript）的重要的安全度量標準。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。

指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲什麼要有同源限制？

我們舉例說明：比如一個黑客程序，他利用Iframe把真正的銀行登錄頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登錄時，他的頁面就可以通過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

缺點：

現在網站的JS 都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。這時這些本來是嚴格模式的文件，被 merge 後，這個串就到了文件的中間，不僅沒有指示嚴格模式，反而在壓縮後浪費了字節。

GET和POST的區別，何時使用POST？

    GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符

    POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。


    GET方式需要使用Request.QueryString來取得變量的值，而POST方式通過Request.Form來獲取變量的值，

    也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。



然而，在以下情況中，請使用 POST 請求：

無法使用緩存文件（更新服務器上的文件或數據庫）

向服務器發送大量數據（POST 沒有數據量限制）

發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

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

 1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行爲。

 2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；

 3. `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;

ajax的缺點和在IE下的問題？

詳情請見：[JavaScript學習總結（七）Ajax和Http狀態字][14]

ajax的缺點

  1、ajax不支持瀏覽器back按鈕。

  2、安全問題 AJAX暴露了與服務器交互的細節。

  3、對搜索引擎的支持比較弱。

  4、破壞了程序的異常機制。

  5、不容易調試。

IE緩存問題

在IE瀏覽器下，如果請求的方法是GET，並且請求的URL不變，那麼這個請求的結果就會被緩存。解決這個問題的辦法可以通過實時改變請求的URL，只要URL改變，就不會被緩存，可以通過在URL末尾添加上隨機的時間戳參數('t'= + new Date().getTime())

或者：

open('GET','demo.php?rand=+Math.random()',true);//

Ajax請求的頁面歷史記錄狀態問題

可以通過錨點來記錄狀態，location.hash。讓瀏覽器記錄Ajax請求時頁面狀態的變化。

還可以通過HTML5的history.pushState，來實現瀏覽器地址欄的無刷新改變

談談你對重構的理解

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的情況下，對網站進行優化，  在擴展的同時保持一致的UI。

對於傳統的網站來說重構通常是：

表格(table)佈局改爲DIV+CSS

使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)

對於移動平臺的優化

針對於SEO進行優化

深層次的網站重構應該考慮的方面


減少代碼間的耦合

讓代碼保持彈性

嚴格按規範編寫代碼

設計可擴展的API

代替舊有的框架、語言(如VB)

增強用戶體驗

通常來說對於速度的優化也包含在重構中



壓縮JS、CSS、image等前端資源(通常是由服務器來解決)

程序的性能優化(如數據讀寫)

採用CDN來加速資源加載

對於JS DOM的優化

HTTP服務器的文件緩存

HTTP狀態碼

    100  Continue  繼續，一般在發送post請求時，已發送了http header之後服務端將返回此信息，表示確認，之後發送具體參數信息

    200  OK   正常返回信息

    201  Created  請求成功並且服務器創建了新的資源

    202  Accepted  服務器已接受請求，但尚未處理

    301  Moved Permanently  請求的網頁已永久移動到新位置。

    302 Found  臨時性重定向。

    303 See Other  臨時性重定向，且總是使用 GET 請求新的 URI。

    304  Not Modified  自從上次請求後，請求的網頁未修改過。


    400 Bad Request  服務器無法理解請求的格式，客戶端不應當嘗試再次使用相同的內容發起請求。

    401 Unauthorized  請求未授權。

    403 Forbidden  禁止訪問。

    404 Not Found  找不到如何與 URI 相匹配的資源。

    500 Internal Server Error  最常見的服務器端錯誤。

    503 Service Unavailable 服務器端暫時無法處理請求（可能是過載或維護）。

說說你對Promise的理解

依照 Promise/A+ 的定義，Promise 有四種狀態：

pending: 初始狀態, 非 fulfilled 或 rejected.

fulfilled: 成功的操作.

rejected: 失敗的操作.

settled: Promise已被fulfilled或rejected，且不是pending

另外， fulfilled 與 rejected 一起合稱 settled。

Promise 對象用來進行延遲(deferred) 和異步(asynchronous ) 計算。

Promise 的構造函數

構造一個 Promise，最基本的用法如下：

    var promise = new Promise(function(resolve, reject) {

        if (...) {  // succeed

            resolve(result);

        } else {   // fails

            reject(Error(errMessage));

        }
    });

Promise 實例擁有 then 方法（具有 then 方法的對象，通常被稱爲 thenable）。它的使用方法如下：

promise.then(onFulfilled, onRejected)

接收兩個函數作爲參數，一個在 fulfilled 的時候被調用，一個在 rejected 的時候被調用，接收參數就是 future，onFulfilled對應 resolve, onRejected 對應 reject。

說說你對前端架構師的理解

負責前端團隊的管理及與其他團隊的協調工作，提升團隊成員能力和整體效率；  帶領團隊完成研發工具及平臺前端部分的設計、研發和維護；  帶領團隊進行前端領域前沿技術研究及新技術調研，保證團隊的技術領先  負責前端開發規範制定、功能模塊化設計、公共組件搭建等工作，並組織培訓。

實現一個函數clone，可以對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製

    Object.prototype.clone = function(){

            var o = this.constructor === Array ? [] : {};

            for(var e in this){

                    o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];

            }

            return o;
    }

說說嚴格模式的限制

嚴格模式主要有以下限制：

變量必須聲明後再使用

函數的參數不能有同名屬性，否則報錯

不能使用with語句

不能對只讀屬性賦值，否則報錯

不能使用前綴0表示八進制數，否則報錯

不能刪除不可刪除的屬性，否則報錯

不能刪除變量delete prop，會報錯，只能刪除屬性delete global[prop]

eval不會在它的外層作用域引入變量

eval和arguments不能被重新賦值

arguments不會自動反映函數參數的變化

不能使用arguments.callee

不能使用arguments.caller

禁止this指向全局對象

不能使用fn.caller和fn.arguments獲取函數調用的堆棧

增加了保留字（比如protected、static和interface）

設立”嚴格模式”的目的，主要有以下幾個：

• 消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行爲;

• 消除代碼運行的一些不安全之處，保證代碼運行的安全；

• 提高編譯器效率，增加運行速度；

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

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

如何刪除一個cookie

1.將時間設爲當前時間往前一點。

var date = new Date();

date.setDate(date.getDate() - 1);//真正的刪除

setDate()方法用於設置一個月的某一天。

2.expires的設置

    document.cookie = 'user='+ encodeURIComponent('name')  + ';expires = ' + new Date(0)

<strong>，<em>和<b>，<i>標籤

<strong> 標籤和 <em> 標籤一樣，用於強調文本，但它強調的程度更強一些。

em 是 斜體強調標籤，更強烈強調，表示內容的強調點。相當於html元素中的 <i>...</i>;

< b > < i >是視覺要素，分別表示無意義的加粗，無意義的斜體。

em 和 strong 是表達要素(phrase elements)。

說說你對AMD和Commonjs的理解

CommonJS是服務器端模塊的規範，Node.js採用了這個規範。CommonJS規範加載模塊是同步的，也就是說，只有加載完成，才能執行後面的操作。AMD規範則是非同步加載模塊，允許指定回調函數。

AMD推薦的風格通過返回一個對象做爲模塊對象，CommonJS的風格通過對module.exports或exports的屬性賦值來達到暴露模塊對象的目的。

document.write()的用法

document.write()方法可以用在兩個方面：頁面載入過程中用實時腳本創建頁面內容，以及用延時腳本創建本窗口或新窗口的內容。

document.write只能重繪整個頁面。innerHTML可以重繪頁面的一部分

編寫一個方法 求一個字符串的字節長度

假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

 function GetBytes(str){

        var len = str.length;

        var bytes = len;

        for(var i=0; i<len; i++){

            if (str.charCodeAt(i) > 255) bytes++;

        }

        return bytes;

    }

alert(GetBytes("你好,as"));

git fetch和git pull的區別

git pull：相當於是從遠程獲取最新版本並merge到本地

git fetch：相當於是從遠程獲取最新版本到本地，不會自動merge

說說你對MVC和MVVM的理解

MVC

View 傳送指令到 Controller

Controller 完成業務邏輯後，要求 Model 改變狀態

Model 將新的數據發送到 View，用戶得到反饋

所有通信都是單向的。

Angular它採用雙向綁定（data-binding）：View的變動，自動反映在 ViewModel，反之亦然。

組成部分Model、View、ViewModel

View：UI界面

ViewModel：它是View的抽象，負責View與Model之間信息轉換，將View的Command傳送到Model；

Model：數據訪問層

請解釋什麼是事件代理

事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中常用綁定事件的常用技巧。顧名思義，“事件代理”即是把原本需要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是可以提高性能。

attribute和property的區別是什麼？

attribute是dom元素在文檔中作爲html標籤擁有的屬性；

property就是dom元素在js中作爲對象擁有的屬性。

所以：

對於html的標準屬性來說，attribute和property是同步的，是會自動更新的，

但是對於自定義的屬性來說，他們是不同步的，

說說網絡分層裏七層模型是哪七層

• 應用層：應用層、表示層、會話層（從上往下）（HTTP、FTP、SMTP、DNS）

• 傳輸層（TCP和UDP）

• 網絡層（IP）

• 物理和數據鏈路層（以太網）

每一層的作用如下：

物理層：通過媒介傳輸比特,確定機械及電氣規範（比特Bit）
數據鏈路層：將比特組裝成幀和點到點的傳遞（幀Frame）
網絡層：負責數據包從源到宿的傳遞和網際互連（包PackeT）
傳輸層：提供端到端的可靠報文傳遞和錯誤恢復（段Segment）
會話層：建立、管理和終止會話（會話協議數據單元SPDU）
表示層：對數據進行翻譯、加密和壓縮（表示協議數據單元PPDU）
應用層：允許訪問OSI環境的手段（應用協議數據單元APDU）

各種協議

ICMP協議： 因特網控制報文協議。它是TCP/IP協議族的一個子協議，用於在IP主機、路由器之間傳遞控制消息。  TFTP協議： 是TCP/IP協議族中的一個用來在客戶機與服務器之間進行簡單文件傳輸的協議，提供不復雜、開銷不大的文件傳輸服務。  HTTP協議： 超文本傳輸協議，是一個屬於應用層的面向對象的協議，由於其簡捷、快速的方式，適用於分佈式超媒體信息系統。  DHCP協議： 動態主機配置協議，是一種讓系統得以連接到網絡上，並獲取所需要的配置參數手段。

說說mongoDB和MySQL的區別

MySQL是傳統的關係型數據庫，MongoDB則是非關係型數據庫

mongodb以BSON結構（二進制）進行存儲，對海量數據存儲有着很明顯的優勢。

對比傳統關係型數據庫,NoSQL有着非常顯著的性能和擴展性優勢，與關係型數據庫相比，MongoDB的優點有：  ①弱一致性（最終一致），更能保證用戶的訪問速度：  ②文檔結構的存儲方式，能夠更便捷的獲取數據。

講講304緩存的原理

服務器首先產生ETag，服務器可在稍後使用它來判斷頁面是否已經被修改。本質上，客戶端通過將該記號傳回服務器要求服務器驗證其（客戶端）緩存。

304是HTTP狀態碼，服務器用來標識這個文件沒修改，不返回內容，瀏覽器在接收到個狀態碼後，會使用瀏覽器已緩存的文件

客戶端請求一個頁面（A）。 服務器返回頁面A，並在給A加上一個ETag。 客戶端展現該頁面，並將頁面連同ETag一起緩存。 客戶再次請求頁面A，並將上次請求時服務器返回的ETag一起傳遞給服務器。 服務器檢查該ETag，並判斷出該頁面自上次客戶端請求之後還未被修改，直接返回響應304（未修改——Not Modified）和一個空的響應體。

什麼樣的前端代碼是好的

高複用低耦合，這樣文件小，好維護，而且好擴展。

1.有一個長度未知的數組a，如果它的長度爲0就把數字1添加到數組裏面，否則按照先進先出的隊列規則讓第一個元素出隊。

分析：這道題主要是考覈了數組的隊列方法和棧方法。另外，原題還有字數限制的，只有在字數小於30並且結果正確時纔可以滿分。所以，我們可以使用三目運算符（： ？）來減少字數。代碼如下：

a.length === 0 ? a.push(1) : a.shift();

 

我當時忘記了出隊是shift還是unshift，結果竟然誤用了unshift，暈死了！

 

2.下面代碼會輸出什麼：

var test = (function(a) {

    this.a = a;

    return function(b) {

        return this.a + b;

    }

} (function(a, b) {

    return a;

}(1, 2))); 

 

console.log(test(4)); //輸出什麼？？？？

分析：這道題考了與函數有關的的兩個非常重要的概念：自執行函數和閉包。但是不難，答案應該是5。

 

3.請把<ul><li>第1行</li><li>第2行</li>...</ul>（ul之間有10個li元素）插入body裏面，注意：需要考慮到性能問題。

分析：這題主要考察了dom操作。插入節點操作的可以使用insertBefore和appendChild方法，隨便用一個都行。但是，題目要求要考慮性能問題，這纔是關鍵，因爲，JavaScript操作dom的開銷是很大的！提高性能就要減少dom操作。因此，我當時使用了下面的方法，只操作一次dom就夠的了：

 

var lis = "",

ul = document.createElement("ul");

 

//把li以字符串形式生成

for(var i = 1; i <= 10; i++) {

    lis += "<li>第" + i + "行</li>";

}

 

// 最後通過innerHTML插入ul裏面

ul.innerHTML = lis;

 

//這裏才操作dom，把ul插入到body

document.body.appendChild(ul);

 

4.不使用loop循環，創建一個長度爲100的數組，並且每個元素的值等於它的下標。

分析：當時看到題目要求不使用loop循環時，“聰明過頭”的我馬上就想到了使用間歇性定時器setInterval，代碼如下：

 

var a = [],

    i = 0;

var interval = setInterval(function() {

    i < 100 ? a.push(i++) : clearInterval(interval);

}, 0);

 

確實沒有使用loop循環，我當時還對自己的聰明感到欣欣自喜呢！但是後來，跟朋友討論了一下，才知道這道題的目的是在考察我們對數組的熟練程度，而不是考察定時器！況且用這種方法來創建數組性能也不見得有多高！他的做法是先創建一個長度爲100的數組，然後再使用數組的實例方法Array.prototype.map來重新賦值，代碼如下：

var a = new Array(100);

 

a = a.map(function(item, index) {

    return index;

});

 

使用了map方法真是高端大氣上檔期啊！一開始，我也以爲他的答案是正確的了，但是，後來我在控制檯打印了一下，卻發現也是不對的啊，因爲，最終打出來的數組是一個長度爲100的空的數組，如下：

 

好奇怪！這麼好用的方法竟然輸出的結果也不正確，心好累啊！

後來，查了API，才知道， JavaScript數組是稀疏數組，比如，通過new Array(100)創建一個新的數組的，雖然他的長度是100，但是實際上他是一個空數組，也就是說沒有真實存在的元素。所以使用map方法，根本不會去遍歷這個數組100次的。後來，知乎上問了一下，才學到了一個新的可行的方法，如下：

 

var a = Array(100).join(",").split(",").map(function(item, index) {

　　return index;

});

 

這個解法充滿了曲折啊！先是創建一個數組，然後，通過join方法把它轉成字符串，然後，再通過split方法把字符串轉成數組，這時候，它就擁有100個值爲空的元素了，然後，再通過map函數，改變這些元素的值即可。

 

5.實現對數組進行亂序

這道題考察了數組的sort方法，因爲是亂序，所以，還需要用到Math.random()產生隨機數，打亂排序規律！代碼如下：

 

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],

    sign = 1; 

a.sort(function(a, b) {

    //因爲Math.random產生的數在0-1之間

    //所以0.5兩邊的概率是相等的

    //大於0.5時爲升序，小於0.5時爲降序

    sign = (Math.random() > 0.5) ? 1 : -1;

    return (a - b) * sign;

 

});

 

6.有一個長度爲100的數組，請以優雅的方式求出該數組的前10個元素之和

分析：其實，對於數組求和有很多種方法，也很簡單。但是，這題有兩個限制條件：優雅的方式、前10個元素。對於“前10個元素”這個限制條件可以使用Array.prototype.slice()方法來截取，對於"優雅的方式"，我的理解是應該儘可能使用數組自帶的方法，最好可以使用高階函數！所以我覺得應該是Array.prototype.reduce()方法。代碼如下：

 

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],

sum = 0;

 

sum = a.slice(0, 10).reduce(function(pre, current) {

　　return pre + current;

});

 

console.log(sum); //55

 

這樣看起開會比使用for循環優雅了不少哈！

 

後面的都是主觀題，答案不唯一，所以，我也不寫解答過程啦。

 

7.JavaScript實現繼承的常用方法有哪些？你推薦的是哪一種？

提示：可以看看《JavaScript高級程序設計》的第六章。裏面詳細的介紹了各種繼承方法。其中，值得推薦的是組合方式。ES5的Object.create()就是使用了該方式實現繼承的！

 

8.在項目開發完成之後，根據雅虎性能優化規則，需要對html，JS，CSS，圖片需要做出怎樣的處理？是否可以藉助構建工具實現自動化？

提示：從減少http請求、減少帶寬、提高加載速度等方面進行答題即可。對於自動化，可以使用gulp構建工具！

 

9.當項目的某個模塊發生問題了，你是怎麼定位錯誤的？你常用的調試工具是什麼？

提示：這題在考察debug的能力。可以說說自己平時的debug方法，比如斷點調試等。調試工具，有chrome的控制檯，firebug等。

 

10.我們在跟後端進行異步請求時，很容易陷入嵌套太深的陷阱？

提示：這道題，我不會做，後來問了朋友，他說可以使用promise,可以參考一下什麼是promise。

https://segmentfault.com/a/1190000002395343

 

11.請寫個正則表達式匹配所有二級域名是9game.cn和其目錄下的網址，比如：http://abc.9game.cn/sname/view/

如果這個非常重要的話，怎麼保護他呢？

12.requireJs怎麼實現?說一下怎麼應用？

1. 我們在使用requireJS時，都會把所有的js交給requireJS來管理，也就是我們的頁面上只引入一個require.js，把data-main指向我們的main.js。

2. 通過我們在main.js裏面定義的require方法或者define方法，requireJS會把這些依賴和回調方法都用一個數據結構保存起來。

3. 當頁面加載時，requireJS會根據這些依賴預先把需要的js通過document.createElement的方法引入到dom中，這樣，被引入dom中的script便會運行。

4. 由於我們依賴的js也是要按照requireJS的規範來寫的，所以他們也會有define或者require方法，同樣類似第二步這樣循環向上查找依賴，同樣會把他們村起來。

5. 當我們的js裏需要用到依賴所返回的結果時(通常是一個key value類型的object),requireJS便會把之前那個保存回調方法的數據結構裏面的方法拿出來並且運行，然後把結果給需要依賴的方法。


13.define和require區別

define和require在依賴處理和回調執行上都是一樣的，不一樣的地方是define的回調函數需要有return語句返回模塊對象，這樣define定義的模塊才能被其他模塊引用；require的回調函數不需要return語句。

14、CSS垂直居中方式，css3怎麼實現？

單行垂直居中
如果一個容器中只有一行文字，對它實現居中相對比較簡單，我們只需要設置它的實際高度height和所在行的高度line-height相等即可。

代碼如下:
 

div {
height:25px;
line-height:25px;
overflow:hidden;
}

多行未知高度文字的垂直居中

代碼如下:
 

div {
padding:25px;
}

多行文本固定高度的居中 ：兼容性差 ie6以下無效

div#content {
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background-color:#FFCCFF;
width:760px;
}

定高div垂直居中：

position: absolute;

 left: 50%;

 top: 50%;

width:200px;

height:100px;

margin-left:-100px;

margin-top:-50px;

 

flex垂直居中：

.box {

  display: flex;

  justify-content: center;//水平

  align-items: center;//垂直

}

15.除了原型繼承還有沒有其他繼承方式

https://segmentfault.com/a/1190000002440502

16.對菜鳥網絡有了解嗎？

那阿里到底想做什麼呢，我認爲阿里想做的是一個網絡，一個基於阿里大數據的物流網，再具體點是什麼，就是中轉中心，基於阿里大數據的中轉中心。阿里未來想做的事情是根據天貓大賣家的分佈，選擇最好的地方建中轉中心。怎麼做，舉個例子：以後韓都衣舍要發貨從杭州到北京，可直接在阿里平臺上下單，阿里根據在線信息平臺顯示，申通的快遞員就在周圍，則馬上給快遞公司申通發去指令，通知申通去收貨，而後申通將貨收到後必須按照阿里規定的時間送到阿里的中轉中心，此時阿里中轉中心數據顯示，圓通正有幹線車輛要發車到北京，則阿里通知圓通將韓都衣舍貨物裝上車送到北京阿里中轉中心，阿里北京中轉中心顯示順豐正在要去韓都衣舍那買家小區的周圍.......這樣，大家成本降到最低，時間做到最快。阿里即掌握了信息流，又掌握了物資流，還制訂了規則，即馬雲所說，10年之後，24小時必達，如果哪家快遞公司出了問題延誤了時間，則會受到阿里的處罰。

17.前端性能優化

（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佈局慢。

1.　請實現，鼠標點擊頁面中的任意標籤，alert該標籤的名稱．（注意兼容性）

關鍵點：target.tagName 組織冒泡事件：e.stopPropagation 或return false;


2.請指出一下代碼的性能問題，並進行優化.

    var info="騰訊拍拍網（www.paipai.com）是騰訊旗下知名電子商務網站。";    
         info +="拍拍網於2005年9月12日上線發佈，";    
         info +="2006年3月13日宣佈正式運營，";    
         info +="是目前國內第二大電子商務平臺。";    
         info=info.split(",");    
         for(var i=0; i<info.length; i++)    
          {    
             alert(info[i]);    
          }    

個人觀點： 字符串的累加，+=會先創建一個臨時字符串，相加後再賦值給info，每個字符串都會使用一個小的內存片段，過多的內存片段會影響性能。另外，建議將數組的長度緩存到臨時變量裏面


3.請給出異步加載js方案，不少於兩種。

1.defer屬性 只支持IE 2.async屬性  HTML5 3.創建script節點


4.請寫出綁定事件的方法，不少於兩種。

1.$dom.bind("click", function(){}); 2.$dom.click(function(){});


5.請設計一套方案，用於確保頁面中加載完全。

在回調裏繼續加載下一個js直到js加載完

    function loadScript(url, callback){   
      var script = document.createElement_x("script")   
      script.type = "text/javascript";   
      if (script.readyState){ //IE   
        script.onreadystatechange = function(){   
          if (script.readyState == "loaded" || script.readyState == "complete"){   
            script.onreadystatechange = null;   
            callback();   
          }   
        };   
      } else { //Others: Firefox, Safari, Chrome, and Opera   
        script.onload = function(){   
        callback();   
      };   
    }   
    script.src = url;   
    document.body.appendChild(script);   
    }   

6.請優化某網頁的加載速度。

 1) 靜態資源使用cdn加速

 2) 使用CSS精靈技術：所有Tenerife圖片都是一張大圖片，使用CSS控制座標

 3) 合併並且壓縮js/css

 4) 頁面懶加載（類似於音悅臺，淘寶）

 5) 使用giz壓縮文本和圖片

 7) 使用 Progressive JPEGs:在裝入圖像時，開始只顯示一個模糊的圖像，隨着數據的裝入，圖像逐步變得清晰.

 7.對string對象進行擴展，使其具有刪除前後空格的方法。

    String.prototype.trim=function(){  
    　    return this.replace(/(^\s*)|(\s*$)/g, "");  
    　 }  

8.完成一個正則表達式，驗證用戶輸入是否身份證號碼。  

/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
 

9． 請對POSIX風格和兼容Perl風格兩種正則表達式的主要函數進行類比說明

　　ereg preg_match

　　ereg_replace preg_replace

    ereg/preg_match 爲執行正則匹配，ereg裏面是不需要也不能使用分隔符和修飾符的，所以ereg的功能比preg要弱上不少。
    關於”.”：點在正則裏面一般是除了換行符以外的全部字符，但是在ereg裏面的”.”是任意字符，即包括換行符！如果在preg裏面希望”.” 能夠包括換行符，可以在修飾符中加上”s”
    ereg默認使用貪婪模式，並且不能修改，這個給很多替換和匹配帶來麻煩。
    速度：這個或許是很多人關心的問題，會不會preg功能強大是以速度來換取的？不用擔心，preg的速度要遠遠比ereg快3倍。

10． PHP5中魔術方法函數有哪幾個，請舉例說明各自的用法

魔術函數

    __construct()
    實例化對象時被調用，當__construct和以類名爲函數名的函數同時存在時，__construct將被調用，另一個不被調用。
    __destruct()
    當刪除一個對象或對象操作終止時被調用。
    __call()
    對象調用某個方法，若方法存在，則直接調用；若不存在，則會去調用__call函數。

        class Test 
        { 
        public function __call($Key, $Args) 
        { 
        echo “您要調用的 {$Key} 方法不存在。你傳入的參數是：” . print_r($Args, true); 
        } 
        } 
         
        $t = new Test(); 
        $t->getName(aning,go); 

 

    程序將會輸出：

    您要調用的 getName 方法不存在。參數是：Array
    (
    [0] => aning
    [1] => go
    )
    __get()
    讀取一個對象的屬性時，若屬性存在，則直接返回屬性值；若不存在，則會調用__get函數。如果試圖讀取一個對象並不存在的屬性的時候，PHP就會給出錯誤信息。如果在類裏添加__get方法，並且我們可以用這個函數實現類似java中反射的各種操作。

        class Test 
        { 
        public function __get($key) 
        { 
        echo $key . ” 不存在”; 
        } 
        } 
         
        $t = new Test(); 
        echo $t->name; 

 

    就會輸出：
    name 不存在
    __set()
    設置一個對象的屬性時，若屬性存在，則直接賦值；若不存在，則會調用__set函數。                                                                                                                                      

        class Test 
        { 
        public function __set($key,$value) 
        { 
        echo ‘對’.$key . “附值”.$value; 
        } 
        } 
         
        $t = new Test(); 
        $t->name = “aninggo”; 

 

    就會輸出：
    對 name 附值 aninggo
    __toString()
    打印一個對象的時被調用。如echo $obj;或print $obj;
 

        class Test 
        { 
        public function __toString() 
        { 
        return “打印 Test”; 
        } 
        } 
         
        $t = new Test(); 
         
        echo $t; 

 

    運行echo $t;的時候，就會調用$t->__toString();從而輸出
    打印 Test
    __clone()
    克隆對象時被調用。如：$t=new Test();$t1=clone $t;

        class Test 
        { 
         
        public function __clone() 
        { 
        echo “我被複制了！”; 
        } 
        } 
         
        $t = new Test(); 
        $t1 = clone $t; 
 

    程序輸出：
    我被複制了
    __sleep()
    serialize之前被調用。若對象比較大，想刪減一點東東再序列化，可考慮一下此函數。
    __wakeup()
    unserialize時被調用，做些對象的初始化工作。
    __isset()
    檢測一個對象的屬性是否存在時被調用。如：isset($c->name)。
    __unset()
    unset一個對象的屬性時被調用。如：unset($c->name)。
    __set_state()
    調用var_export時，被調用。用__set_state的返回值做爲var_export的返回值。
    __autoload()
    實例化一個對象時，如果對應的類不存在，則該方法被調用。

魔術常量

    __LINE__
    返回文件中的當前行號。
    __FILE__
    返回文件的完整路徑和文件名。如果用在包含文件中，則返回包含文件名。自 PHP 4.0.2 起，__FILE__ 總是包含一個絕對路徑，而在此之前的版本有時會包含一個相對路徑。
    __FUNCTION__
    返回函數名稱（PHP 4.3.0 新加）。自 PHP 5 起本常量返回該函數被定義時的名字（區分大小寫）。在 PHP 4 中該值總是小寫字母的。
    __CLASS__
    返回類的名稱（PHP 4.3.0 新加）。自 PHP 5 起本常量返回該類被定義時的名字（區分大小寫）。在 PHP 4 中該值總是小寫字母的。
    __METHOD__
    返回類的方法名（PHP 5.0.0 新加）。返回該方法被定義時的名字（區分大小寫）。

11． 請寫出讓，並說明如何在命令行下運行PHP腳本（寫出兩種方式）同時向PHP腳本傳遞參數？

這個比較簡單：第一種方法是配置環境變量，windows操作下步驟：我的電腦—屬性–高級系統設置–高級–環境變量—找到名爲path的變量添加(“;您的PHP文件夾路徑”例如我的是:”;D:\xampp\php”)運行命令爲

D:\>php d:/1.php
hello

第二種：爲

D:\xampp\php>php.exe d:/1.php
hello;

12． PHP的垃圾收集機制是怎樣的

PHP作爲腳本語言是頁面結束即釋放變量所佔內存的。 當一個 PHP線程結束時，當前佔用的所有內存空間都會被銷燬，當前程序中所有對象同時被銷燬。GC進程一般都跟着每起一個SESSION而開始運行的.gc目的是爲了在session文件過期以後自動銷燬刪除這些文件. 在PHP中，沒有任何變量指向這個對象時，這個對象就成爲垃圾。PHP會將其在內存中銷燬；這是PHP 的GC垃圾處理機制，防止內存溢出。 執行這些函數也可以起到回收作用 __destruct /unset/mysql_close /fclose. php對session有明確的gc處理時間設定 session.gc_maxlifetime 如果說有垃圾，那就是整體的程序在框架使用中，會多次調用同一文件等等造成的非單件模式等。所以在出來的時候，必要的用_once 引用，在聲明類的時候使用單件模式。還有簡化邏輯等等。而如果妄想讓PHP自己本身管理內存，進行垃圾管理。呵呵。好像PHP還辦不到，對於析構函數，ANDI在他的書裏寫的很明白。可有可無，不可置否。而內存管理的東西一般都是桌面程序更多去考慮的。

13．使對象可以像數組一樣進行foreach循環，要求屬性必須是私有。

　　(Iterator模式的PHP5實現，寫一類實現Iterator接口)
 

    <?php 
    class MyClass implements Iterator{ 
    private $vars = array(); 
    private $var1; 
    private $var2; 
    private $var3; 
    function __set($name , $value){ 
    $this->vars[$name] = $value; 
    } 
    function __get($name){ 
    return $this->vars[$name]; 
    } 
    public function rewind() { 
    reset($this->vars); 
    } 
    public function current() { 
    return current($this->vars); 
    } 
     
    public function key() { 
    return key($this->vars); 
    } 
     
    public function next() { 
    return next($this->vars); 
    } 
    public function valid() { 
    return $this->current() !== false; 
    } 
    } 
     
    $it = new MyClass($values); 
    $it->var1 = 1; 
    $it->var2 = 2; 
    $it->var3 = 3; 
    foreach ($it as $a => $b) { 
    print “$a: $b 
    “; 
    } 
    ?> 

14．請寫一段PHP代碼，確保多個進程同時寫入同一個文件成功
 

    //WRITE  
    $fp = fopen("test.txt", 'ab');              //From the end  
    flock($fp, LOCK_EX);                        //lock the file for waiting...  
    fwrite($fp, 'Just A Test String.......');   //Start writing...  
    flock($fp, LOCK_UN);                        //Release write lock  
    fclose($fp);                                //Close the file讀操作：  
     
    //READ  
    $fp = fopen("test.txt", 'r'); 
    flock($fp, LOCK_SH); 
    //Read from the file.......  
    flock($fp, LOCK_UN); 
    fclose($fp); 

flock -- 輕便的諮詢文件鎖定

其函數原型爲：bool flock ( int handle, int operation [, int &wouldblock] )

PHP 支持以諮詢方式（也就是說所有訪問程序必須使用同一方式鎖定, 否則它不會工作）鎖定全部文件的一種輕便方法，

operation 可以是以下值之一：

要取得共享鎖定（讀取的程序），將 operation 設爲 LOCK_SH（PHP 4.0.1 以前的版本設置爲 1）。

要取得獨佔鎖定（寫入的程序），將 operation 設爲 LOCK_EX（PHP 4.0.1 以前的版本中設置爲 2）。

要釋放鎖定（無論共享或獨佔），將 operation 設爲 LOCK_UN（PHP 4.0.1 以前的版本中設置爲 3）。

如果不希望 flock() 在鎖定時堵塞，則給 operation 加上 LOCK_NB（PHP 4.0.1 以前的版本中設置爲 4）。

flock() 允許執行一個簡單的可以在任何平臺中使用的讀取/寫入模型（包括大部分的 Unix 派生版和甚至是 Windows）。如果鎖定會堵塞的話（EWOULDBLOCK 錯誤碼情況下），可選的第三個參數會被設置爲 TRUE。鎖定操作也可以被 fclose() 釋放（代碼執行完畢時也會自動調用）。如果成功則返回 TRUE，失敗則返回 FALSE。

來看看 PHP manual 上面經典的實例：

    <?php 
     
    $fp = fopen("/tmp/lock.txt", "w+"); 
     
    if (flock($fp, LOCK_EX)) { // 進行排它型鎖定 
        fwrite($fp, "Write something here\n"); 
        flock($fp, LOCK_UN); // 釋放鎖定 
    } else { 
        echo "Couldn't lock the file !"; 
    } 
     
    fclose($fp); 
     
    ?>  

注意：

在 Windows 下 flock() 將會強制執行。flock() 操作的 handle 必須是一個已經打開的文件指針。

由於 flock() 需要一個文件指針， 因此可能不得不用一個特殊的鎖定文件來保護打算通過寫模式打開的文件的訪問（在 fopen() 函數中加入 "w" 或 "w+"）。

flock() 不能用於 NFS 以及其它一些網絡文件系統。flock() 不支持舊的文件系統，如 FAT 以及它的派生系統。因此，此環境下總是返回 FALSE（尤其是對 Windows）詳細資料查看自己操作系統的文檔。

在部分操作系統中 flock() 以進程級實現。當用一個多線程服務器 API（比如 ISAPI）時，可能不可以依靠 flock() 來保護文件，因爲運行於同一服務器實例中其它並行線程的 PHP 腳本可以對該文件進行處理。



15．用PHP實現一個雙向隊列

    class DoubleEndedQueue{ 
    protected $elements; 
    public function __construct(){ 
    $this->elements = array(); 
    } 
    public function push($element){ 
    array_unshift($this->elements , $element); 
    } 
    public function pop(){ 
    return array_shift($this->element); 
    } 
    public function inject($element){ 
    $this->elements[] = $element; 
    } 
    public function eject(){ 
    array_pop($this->elements); 
    } 
    } 
    ?> 

16． 使用正則表達式提取一段標識語言（html或xml）代碼段中指定標籤的指定屬性值（需考慮屬性值對不規則的情況，如大小寫不敏感，屬性名值與等號間有空格等）。此處假設需提取test標籤的attr屬性值，請自行構建包含該標籤的串　　

$str = '‘;
if(preg_match(‘//i’ , $str , $matches)){
echo $matches[1];
}
?>

17．請使用socket相關函數（非curl）實現如下功能：構造一個post請求，發送到指定http server的指定端口的指定請求路徑（如http://www.example.com:8080/test）。請求中包含以下變量：
        用戶名（username）：溫柔一刀
　　密碼（pwd）：&123=321&321=123&

　　個人簡介（intro）：Hello world!

　　且該http server需要以下cookie來進行簡單的用戶動作跟蹤：

　　cur_query：you&me

　　last_tm：…（上次請求的unix時間戳，定爲當前請求時間前10分鐘）

　　cur_tm：…（當前請求的unix時間戳）

　　設置超時爲10秒，發出請求後，將http server的響應內容輸出。

    <?php 
    function encode($data, $sep = '&') 
    {   
        while (list($k,$v) = each($data)) 
        {   
            $encoded .= ($encoded ? "$sep" : "");   
            $encoded .= rawurlencode($k)."=".rawurlencode($v);   
        }   
        Return $encoded;   
    }   
    function post($url, $data, $cookie){   
        $url = parse_url($url);   
        $post = encode($data, '&');   
        $cookie = encode($cookie, ';');   
        $fp = fsockopen($url['host'], $url['port'] ? $url['port'] : 80, $errno, $errstr, 10);   
        if (!$fp) 
            return "Failed to open socket to $url[host]";   
        fputs($fp, sprintf("POST %s%s%s HTTP/1.0n", $url['path'], $url['query'] ? "?" : "", $url['query']));   
        fputs($fp, "Host: $url[host]n");   
        fputs($fp, "Content-type: application/x-www-form-urlencodedn");   
        fputs($fp, "Content-length: " . strlen($post) . "n");   
        fputs($fp, "Cookie: $cookie");   
        fputs($fp, "Connection: closenn");   
        fputs($fp, "$post n");   
        　while (!feof($fp)) {   
        　　 echo fgets($fp, 128);   
        　}   
        fclose($fp);   
    }   
    $url = 'http://www.example.com:8080/test';   
    $post = array(   
            'username'=> '溫柔一刀',   
            'pwd' => '&123=321&321=123&',   
            'intro' => 'Hello world!'   
            );   
    $cookie = array(   
            'cur_query' => 'you&me',   
            'last_tm' => time() – 600,   
            'cur_tm '=> time()   
            );   
    Post($url, $post, $cookie);   
      
    $host = 'www.test.com';   
    $port = 80;   
    $path = '/mytest.php';   
    $timeout = 10;     
    $fp = fsockopen($host , $port , $errno , $errstr , $timeout);   
        if(!$fp){   
        die('scoket open failed');   
    }   
      
    $cookie_header = 'Cookie: cur_query='.urlencode('you&me').'; last_tm='.urlencode(time() - 10 * 60).'; cur_tm='.urlencode(time())."\r\n";   
    $body = "username=".urlencode('溫柔一刀').'&pwd='.urlencode('&123=321&321=123&').'&intro='.urlencode('Hello world!');   
    $header = "POST $path HTTP/1.0\r\n";   
    $header .= "User-Agent: User-Agent: Mozilla/4.0 (+http://labs.chinamobile.com; compatible; MSIE 7.0; Windows NT 5.1; No cache)\r\n";   
    $header .= "Host: $host\r\n";   
    $header .= "Accept: image/gif, image/x-xbitmap, image/jpeg, */*\r\n";   
    $header .= $cookie_header;   
    $header .= "Content-Type: application/x-www-form-urlencoded\r\n";   
    $header .= "Content-Length: ".strlen($body)."\r\n\r\n";   
    $str = $header.$body;   
    fwrite($fp , $str , strlen($str));   
    $result = '';   
    $i = 0;   
    while($currentHeader = fgets($fp)){   
        if($currentHeader == "\r\n"){   
            break;   
        }   
    }   
    $data = '';   
    do{   
        $block = fread($fp , 5000000);   
        if(strlen($block) == 0){   
            break;   
        }   
        $data .= $block;   
    }while(true);   
    fclose($fp);   
    echo $data;   
    ?>  

18．你用什麼方法檢查PHP腳本的執行效率（通常是腳本執行時間）和數據庫SQL的效率（通常是數據庫Query時間），並定位和分析腳本執行和數據庫查詢的瓶頸所在？

腳本執行效率一般用zend profile,用declare來定位分析腳本的執行效率。
SQL一般用Mysql的slow_query_log和explain來定位和分析SQL的效率
1．腳本執行時間，啓用xdebug，使用WinCacheGrind分析。
2．數據庫查詢，mysql使用EXPLAIN分析查詢，啓用slow query log記錄慢查詢。



PHP LAMP Engineer Test Paper
Question 1

　　What does print out?

　　A) 3

　　B) False

　　C) Null

　　D) 1

　　E) 0

Question 2

　　Which of the following snippets prints a representation of 42 with two decimal places?

　　A) printf(“%.2dn”, 42);

　　B) printf(“%1.2fn”, 42);

　　C) printf(“%1.2un”, 42);

web前端開發工程師面試大全，無答案挑戰版

 

一、HTML 常見題目

01、Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?

02、HTML5 爲什麼只需要寫 <!DOCTYPE HTML>？

03、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

04、頁面導入樣式時，使用link和@import有什麼區別？

05、介紹一下你對瀏覽器內核的理解？

06、常見的瀏覽器內核有哪些？

07、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？

08、如何區分 HTML 和 HTML5？

09、簡述一下你對HTML語義化的理解？

10、HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？

11、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？

12、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

13、iframe有那些缺點？

14、Label的作用是什麼？是怎麼用的？（加 for 或 包裹）

15、HTML5的form如何關閉自動完成功能？

16、如何實現瀏覽器內多個標籤頁之間的通信? (阿里)

17、webSocket如何兼容低瀏覽器？(阿里)

18、頁面可見性（Page Visibility）API 可以有哪些用途？

19、如何在頁面上實現一個圓形的可點擊區域？

20、實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。

21、網頁驗證碼是幹嘛的，是爲了解決什麼安全問題？

22、tite與h1的區別、b與strong的區別、i與em的區別？

二、、CSS類的題目

01、介紹一下標準的CSS的盒子模型？與低版本IE的盒子模型有什麼不同的？

02、CSS選擇符有哪些？哪些屬性可以繼承？

03、CSS優先級算法如何計算？

04、CSS3新增僞類有那些？

05、如何居中div？如何居中一個浮動元素？如何讓絕對定位的div居中？

06、display有哪些值？說明他們的作用。

07、position的值relative和absolute定位原點是？

08、CSS3有哪些新特性？

09、請解釋一下CSS3的Flexbox（彈性盒佈局模型）,以及適用場景？

10、用純CSS創建一個三角形的原理是什麼？

11、一個滿屏 品 字佈局 如何設計?

12、常見兼容性問題？

13、li與li之間有看不見的空白間隔是什麼原因引起的？有什麼解決辦法？

14、經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什麼，常用hack的技巧 ？

15、爲什麼要初始化CSS樣式。

16、absolute的containing block計算方式跟正常流有什麼不同？

17、CSS裏的visibility屬性有個collapse屬性值是幹嘛用的？在不同瀏覽器下以後什麼區別？

18、position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

19、對BFC規範(塊級格式化上下文：block formatting context)的理解？

20、CSS權重優先級是如何計算的？

21、請解釋一下爲什麼會出現浮動和什麼時候需要清除浮動？清除浮動的方式

22、移動端的佈局用過媒體查詢嗎？

23、使用 CSS 預處理器嗎？喜歡那個？

24、CSS優化、提高性能的方法有哪些？

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

26、在網頁中的應該使用奇數還是偶數的字體？爲什麼呢？

27、margin和padding分別適合什麼場景使用？

28、抽離樣式模塊怎麼寫，說出思路，有無實踐經驗？[阿里航旅的面試題]

29、元素豎向的百分比設定是相對於容器的高度嗎？

30、全屏滾動的原理是什麼？用到了CSS的那些屬性？

31、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容低版本的IE？

32、視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎麼做？）

33、::before 和 :after中雙冒號和單冒號 有什麼區別？解釋一下這2個僞元素的作用。

34、如何修改chrome記住密碼後自動填充表單的黃色背景 ？

35、你對line-height是如何理解的？

36、設置元素浮動後，該元素的display值是多少？（自動變成display:block）

37、怎麼讓Chrome支持小於12px 的文字？

38、讓頁面裏的字體變清晰，變細用CSS怎麼做？（-webkit-font-smoothing: antialiased;）

39、font-style屬性可以讓它賦值爲“oblique” oblique是什麼意思？

40、position:fixed;在android下無效怎麼處理？

41、如果需要手動寫動畫，你認爲最小時間間隔是多久，爲什麼？（阿里）

42、display:inline-block 什麼時候會顯示間隙？(攜程)

43、overflow: scroll時不能平滑滾動的問題怎麼處理？

44、有一個高度自適應的div，裏面有兩個div，一個高度100px，希望另一個填滿剩下的高度。

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

46、什麼是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎麼做）

47、style標籤寫在body後與body前有什麼區別？

二、JavaScript類的題目

01、介紹JavaScript的基本數據類型。

02、說說寫JavaScript的基本規範？

03、JavaScript原型，原型鏈 ? 有什麼特點？

04、JavaScript有幾種類型的值？（堆：原始數據類型和 棧：引用數據類型），你能畫一下他們的內存圖嗎？

05、Javascript如何實現繼承？

06、Javascript創建對象的幾種方式？

07、Javascript作用鏈域?

08、談談This對象的理解。

09、eval是做什麼的？

10、什麼是window對象? 什麼是document對象?

11、null，undefined的區別？

12、寫一個通用的事件偵聽器函數(機試題)。

13、[“1”, “2”, “3”].map(parseInt) 答案是多少？

14、關於事件，IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

15、什麼是閉包（closure），爲什麼要用它？

16、javascript 代碼中的”use strict”;是什麼意思 ? 使用它區別是什麼？

17、如何判斷一個對象是否屬於某個類？

18、new操作符具體幹了什麼呢?

19、用原生JavaScript的實現過什麼功能嗎？

20、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

21、對JSON的瞭解？

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

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

24、Ajax 是什麼? 如何創建一個Ajax？

25、同步和異步的區別?

26、如何解決跨域問題?

27、頁面編碼和被請求的資源編碼如果不一致如何處理？

28、模塊化開發怎麼做？

29、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

30、requireJS的核心原理是什麼？（如何動態加載的？如何避免多次加載的？如何 緩存的？）

31、讓你自己設計實現一個requireJS，你會怎麼做？

32、談一談你對ECMAScript6的瞭解？

33、ECMAScript6 怎麼寫class麼，爲什麼會出現class這種東西?

34、異步加載的方式有哪些？

35、documen.write和 innerHTML的區別?

36、DOM操作——怎樣添加、移除、移動、複製、創建和查找節點?

37、.call() 和 .apply() 的含義和區別？

38、數組和對象有哪些原生方法，列舉一下？

39、JS 怎麼實現一個類。怎麼實例化這個類

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

41、如何編寫高性能的Javascript？

42、那些操作會造成內存泄漏？

43、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？

44、jQuery.fn的init方法返回的this指的是什麼對象？爲什麼要返回this？

45、jquery中如何將數組轉化爲json字符串，然後再轉化回來？

46、jQuery 的屬性拷貝(extend)的實現原理是什麼，如何實現深拷貝？

47、jquery.extend 與 jquery.fn.extend的區別？

48、jQuery 的隊列是如何實現的？隊列可以用在哪些地方？

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

50、JQuery一個對象可以同時綁定多個事件，這是如何實現的？

51、是否知道自定義事件。jQuery裏的fire函數是什麼意思，什麼時候用？

52、jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）

53、針對 jQuery性能的優化方法？

54、Jquery與jQuery UI有啥區別？

55、JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

56、jquery 中如何將數組轉化爲json字符串，然後再轉化回來？

57、jQuery和Zepto的區別？各自的使用場景？

58、針對 jQuery 的優化方法？

59、Zepto的點透問題如何解決？

60、jQueryUI如何自定義組件?

61、需求：實現一個頁面操作不會整頁刷新的網站，並且能在瀏覽器前進、後退時正確響應。給出你的技術實現方案？

62、如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）

63、移動端最小觸控區域是多大？

64、jQuery 的 slideUp動畫 ，如果目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯後的反覆執行，該如何處理呢?

65、把 Script 標籤 放在頁面的最底部的body封閉之前 和封閉之後有什麼區別？瀏覽器會如何解析它們？

66、移動端的點擊事件的有延遲，時間是多久，爲什麼會有？ 怎麼解決這個延時？（click 有 300ms 延遲,爲了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）

67、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)麼? 能講出他們各自的優點和缺點麼?

68、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？

69、解釋JavaScript中的作用域與變量聲明提升？

70、那些操作會造成內存泄漏？

71、JQuery一個對象可以同時綁定多個事件，這是如何實現的？

72、Node.js的適用場景？(如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering麼?

73、解釋一下 Backbone 的 MVC 實現方式？

74、什麼是“前端路由”?什麼時候適合使用“前端路由”? “前端路由”有哪些優點和缺點?

75、知道什麼是webkit麼? 知道怎麼用瀏覽器的各種工具來調試和debug代碼麼?

76、如何測試前端代碼麼? 知道BDD, TDD, Unit Test麼? 知道怎麼測試你的前端工程麼(mocha, sinon, jasmin, qUnit..)?

77、前端templating(Mustache, underscore, handlebars)是幹嘛的, 怎麼用?

78、簡述一下 Handlebars 的基本用法？

79、簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？

80、用js實現千位分隔符?(來源：前端農民工，提示：正則+replace)

81、檢測瀏覽器版本版本有哪些方式？

82、我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然後會先執行冒泡還是捕獲。

四、面試官愛問的問題

01、原來公司工作流程是怎麼樣的，如何與其他人協作的？如何誇部門合作的？

02、你遇到過比較難的技術問題是？你是如何解決的？

03、設計模式 知道什麼是singleton, factory, strategy, decrator麼?

04、常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或組件？

05、頁面重構怎麼操作？

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

07、99%的網站都需要被重構是那本書上寫的？

08、什麼叫優雅降級和漸進增強？

09、是否瞭解公鑰加密和私鑰加密。

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

11、對Node的優點和缺點提出了自己的看法？

12、你有用過哪些前端性能優化的方法？

13、http狀態碼有那些？分別代表是什麼意思？

14、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什麼？（流程說的越詳細越好）

15、部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法？

16、從打開app到刷新出內容，整個過程中都發生了什麼，如果感覺慢，怎麼定位問題，怎麼解決?

17、除了前端以外還了解什麼其它技術麼？你最最厲害的技能是什麼？

18、你用的得心應手用的熟練地編輯器&開發環境是什麼樣子？

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

20、你怎麼看待Web App 、hybrid App、Native App？

21、你移動端前端開發的理解？（和 Web 前端開發的主要區別是什麼？）

22、你對加班的看法？

23、平時如何管理你的項目？

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

25、如何設計突發大規模併發架構？

26、是否瞭解開源的工具 bower、npm、yeoman、grunt、gulp，一個 npm 的包裏的 package.json 具備的必要的字段都有哪些？（名稱、版本號，依賴）

每個模塊的代碼結構都應該比較簡單，且每個模塊之間的關係也應該非常清晰，隨着功能和迭代次數越來越多，你會如何去保持這個狀態的？

27、Git知道branch, diff, merge麼?如何設計突發大規模併發架構？

28、當團隊人手不足，把功能代碼寫完已經需要加班的情況下，你會做前端代碼的測試嗎？

29、知道什麼是SEO並且怎麼優化麼? 知道各種meta data的含義麼?

30、移動端（Android IOS）怎麼做好用戶體驗?

31、簡單描述一下你做過的移動APP項目研發流程？

32、你在現在的團隊處於什麼樣的角色，起到了什麼明顯的作用？

33、你認爲怎樣纔是全端工程師（Full Stack developer）？

34、介紹一個你最得意的作品吧？

35、你有自己的技術博客嗎，用了哪些技術？

36、對前端安全有什麼看法？

37、是否瞭解Web注入攻擊，說下原理，最常見的兩種攻擊（XSS 和 CSRF）瞭解到什麼程度？

38、項目中遇到國哪些印象深刻的技術難題，具體是什麼問題，怎麼解決？。

39、最近在學什麼東西？

40、你的優點是什麼？缺點是什麼？

41、如何管理前端團隊?

42、最近在學什麼？能談談你未來3，5年給自己的規劃嗎？

區塊鏈面試題，附答案

1、什麼是區塊鏈？能詳述一下嗎？

答: 維護一個全球統一的交易記錄，這就要用到區塊鏈技術。 區塊鏈相當於一本分佈式的賬本。全網中的每個節點共同參與維護這個賬本。每10分鐘產生一個新區塊，並同步更新到全網中的所以節點。全網確認後，就無法更改。

2、區塊鏈和比特幣有什麼關係？ 

答：比特幣的底層技術是區塊鏈。比特幣本質上類似黃金，總的數量有限，每年新增的數量很少？

3、區塊鏈未來會應用到哪些領域？ 

轉載地址：http://www.bslxx.com/a/mianshiti/tiku/2018/0227/1778.html