前端工程師面試問題概括（1、問答類html/css/js基礎）

1、參考資源

一、前端面試題及答案整理（一）

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

三、2018最新Web前端經典面試試題及答案

四、【javascript常見面試題】常見前端面試題及答案

五、Web前端常見面試題及答案

六、常見前端面試題及答案（上）

七、web前端面試題及答案

八、web前端經典面試題

九、javascript之面試題精講

2、面試題彙總

網上搜到一大堆面試題，重複的很多，所有概括一下，也加上本身的理解

（一）、問答類(html/css/js基礎)

一、 JavaScript基礎數據類型

JavaScript數據類型包括原始類型和引用類型，原始類型有五個:  Number（數值） String（字符串） Boolean（布爾） Null（空） Undefined（未定義）

引用類型有一個：Object（對象）

經過typeof(x)能夠返回一個變量x的數據類型「number」、「string」、「boolean」、「undefined」、"object"，這裏要注意一點：typeof運算符對於null類型返回的是object。

2 、談一談JavaScript做用域鏈

做用域鏈的做用是保證執行環境裏有權訪問的變量和函數是有序的，做用域鏈的變量只能向上訪問，變量訪問到window對象即被終止，做用域鏈向下訪問變量是不被容許的。

當執行一段JavaScript代碼（全局代碼或函數）時，JavaScript引擎會爲其建立一個做用域又稱爲執行上下文（Execution Context），在頁面加載後會首先建立一個全局的做用域，而後每執行一個函數，會創建一個對應的做用域，從而造成了一條做用域鏈。每一個做用域都有一條對應的做用域鏈，鏈頭是全局做用域，鏈尾是當前函數做用域。

做用域鏈的做用是用於解析標識符，當函數被建立時（不是執行），會將this、arguments、命名參數和該函數中的全部局部變量添加到該當前做用域中，當JavaScript須要查找變量X的時候（這個過程稱爲變量解析），它首先會從做用域鏈中的鏈尾也就是當前做用域進行查找是否有X屬性，若是沒有找到就順着做用域鏈繼續查找，直到查找到鏈頭，也就是全局做用域鏈，仍未找到該變量的話，就認爲這段代碼的做用域鏈上不存在x變量，並拋出一個引用錯誤（ReferenceError）的異常。

3 、如何理解JavaScript原型鏈

JavaScript中的每一個對象都有一個prototype屬性，咱們稱之爲原型，而原型的值也是一個對象，所以它也有本身的原型，這樣就串聯起來了一條原型鏈，原型鏈的鏈頭是object,它的prototype比較特殊，值爲null。

原型鏈的做用是用於對象繼承，函數A的原型屬性(prototype property)是一個對象，當這個函數被用做構造函數來建立實例時，該函數的原型屬性將被做爲原型賦值給全部對象實例，好比咱們新建一個數組，數組的方法便從數組的原型上繼承而來。

當訪問對象的一個屬性時, 首先查找對象自己, 找到則返回; 若未找到, 則繼續查找其原型對象的屬性(若是還找不到實際上還會沿着原型鏈向上查找, 直至到根). 只要沒有被覆蓋的話, 對象原型的屬性就能在全部的實例中找到，若整個原型鏈未找到則返回undefined；

四、 JavaScript變量聲明提早

《JavaScript權威指南》中是這樣解釋的：JavaScript變量在聲明以前已經可用，JavaScript的這個特性被非正式的稱爲聲明提早（hoisting），即JavaScript函數中聲明的全部變量（但不涉及賦值）都被「提早」至函數的頂部。

5 、如何理解和應用JavaScript閉包

定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。

二、表現形式：使函數外部可以調用函數內部定義的變量。

個人理解是，閉包就是可以讀取其餘函數內部變量的函數。

因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成"定義在一個函數內部的函數"。

因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。

它的最大用處有兩個，一個是能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。

function f1(){
　　　　var n=999;
　　　　nAdd=function(){n+=1} 
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999
　　nAdd();
　　result(); // 1000
//nAdd前面沒有使用var關鍵字，所以nAdd是一個全局變量
//nAdd的值是一個匿名函數，而這個匿名函數自己也是一個閉包，因此nAdd至關因而一個setter，能夠在函數外部對函數內部的局部變量進行操做。

深刻理解閉包：學習Javascript閉包

使用閉包的注意點

1）濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。

2）會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

6 、new構建對象的本質

經過new操做符，實際上在構造函數User中完成了以下操做：

• 建立一個新的對象，這個對象的類型是object；
• 設置這個新的對象的內部、可訪問性和prototype屬性爲構造函數（指prototype.construtor所指向的構造函數）中設置的；
• 執行構造函數；
• 返回新建立的對象。

function User(){
        //this = {};  
        //this.constructor = User；
        this.name = "Vicfeel";
        this.age = 23;
        //return this;
    }    
    var user = new User();

若是構造函數默認返回的新建立的this對象，若是手動return 一個變量的話，若是該變量是原始類型則無效，若是是對象，則返回該對象。

1、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
 
2、屬性和方法被加入到 this 引用的對象中。
 
3、新建立的對象由 this 所引用，而且最後隱式的返回 this 。 
 
var obj  = {};
 
obj.__proto__ = Base.prototype;
 
Base.call(obj);

7 、JavaScript事件代理

事件代理（Event Delegation），又稱之爲事件委託。是 JavaScript 中經常使用綁定事件的經常使用技巧。顧名思義，「事件代理」便是把本來須要綁定的事件委託給父元素，讓父元素擔當事件監聽的職務。事件代理的原理是DOM元素的事件冒泡。使用事件代理的好處是能夠提升性能。

當咱們須要對不少元素添加事件的時候，能夠經過將事件添加到它們的父節點而將事件委託給父節點來觸發處理函數。

好比咱們須要向一個ul中動態添加不少個li，須要遍歷li逐個添加點擊事件

衆所周知，DOM操做是十分消耗性能的。因此重複的事件綁定簡直是性能殺手。而事件代理的核心思想，就是經過儘可能少的綁定，去監聽儘可能多的事件。如何作呢？答案是利用事件冒泡機制,對其父節點ul進行事件綁定（Event Bubble),而後經過event.target來判斷是哪一個節點觸發的事件，從而減小不少EventHandler的綁定。

 var count = 100;
    var ulList = document.getElementById("list");
    //動態構建節點
    for(var i = count;i--;){
        var liDom = document.createElement('li');
        ulList.appendChild(liDom);
    }
    //綁定點擊事件
    var liNode = ulList.getElementByTagName("li");
    liNode.onClick = function(e){
        if(e.target && e.target.nodeName.toUpperCase == "LI") {
            // li點擊事件
        }
    }

八、position的值， relative和absolute分別是相對於誰進行定位的？

• absolute :生成絕對定位的元素， 相對於最近一級的 定位不是 static 的父元素來進行定位。

• fixed （老IE不支持）生成絕對定位的元素，一般相對於瀏覽器窗口或 frame 進行定位。

• relative 生成相對定位的元素，相對於其在普通流中的位置進行定位。

• static 默認值。沒有定位，元素出如今正常的流中

• sticky 生成粘性定位的元素，容器的位置根據正常文檔流計算得出

九、如何解決跨域問題

因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。

(1)、porxy代理

定義和用法：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。

實現方法：經過nginx代理；

注意點：一、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。

(2)、CORS 【Cross-Origin Resource Sharing】

定義和用法：是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。

使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。以下：

res.writeHead(200, {
    "Content-Type": "text/html; charset=UTF-8",
    "Access-Control-Allow-Origin":'http://localhost',
    'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
    'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});

(3)、jsonp

定義和用法：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。

特色：經過狀況下，經過動態建立script來讀取他域的動態資源，獲取的數據通常爲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>

<script>
    function testjsonp(data) {
       console.log(data.name); // 獲取返回的結果
    }
</script>
<script>
    var _script = document.createElement('script');
    _script.type = "text/javascript";
    _script.src = "http://localhost:8888/jsonp?callback=testjsonp";
    document.head.appendChild(_script);
</script>

缺點：

　　一、這種方式沒法發送post請求（這裏）

　　二、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。

跨域的4種方式：
①經過動態添加script標籤，而後指定callback函數，能夠獲取到傳過來的json數據，這時候要本身寫一個callback函數來處理數據；
②使用jquery封裝好的getJson方法，傳入不一樣域的url?callback=?,好處是不須要手動的插入script標籤以及定義回掉函數。jquery會自動生成一個全局函數來替換callback=?中的問號，以後獲取到數據後又會自動銷燬，實際上就是起一個臨時代理函數的做用。$.getJSON方法會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用jsonp的回調函數。
③經過設置window.domain來處理跨域，可是隻適用於不一樣子域的框架間的交互。因此使用的時候能夠用一個隱藏的iframe來作一個代理，讓這個iframe載入一個與你想要經過ajax獲取數據的目標頁面處在相同的域的頁面。
④window.name是能夠跨域的。window.name的值只能是字符串的形式，這個字符串的大小最大能容許2M左右甚至更大的一個容量，具體取決於不一樣的瀏覽器，但通常是夠用了。因此能夠轉化成字符串的數據均可以使用window.name來傳遞，好比json數據。

做者：畢安
連接：https://www.jianshu.com/p/0e9a0d460f64
來源：簡書
簡書著做權歸做者全部，任何形式的轉載都請聯繫做者得到受權並註明出處。

 

十、建立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){
 
        }
 
    }

十一、漸進加強和優雅降級

漸進加強 progressive enhancement ：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級graceful degradation ：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

區別：

a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給

b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

12.解釋下JavaScript中this是如何工做的。

this永遠指向函數運行時所在的對象，而不是函數被建立時所在的對象。匿名函數或不處於任何對象中的函數指向window 。

• 1.若是是call，apply,with，指定的this是誰，就是誰。

• 2.普通的函數調用，函數被誰調用，this就是誰。

1三、HTTP和HTTPS

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

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

爲何HTTPS安全

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

1四、對前端模塊化的認識

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

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

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

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

1五、談談垃圾回收機制方式及內存管理

一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。

二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。

三、實例以下：

function fn1() {
    var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
    var obj = {name:'hanzichi', age: 10};
   return obj;
}
var a = fn1();
var b = fn2();

fn1中定義的obj爲局部變量，而當調用結束後，出了fn1的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。

 四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。

標記清除：

　　定義和用法：當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量（閉包），剩下的就是被視爲準備回收的變量。

　　到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。

引用計數：

　　定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。

　　基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。

 

　　在低版本IE中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。

　　在IE中雖然JavaScript對象經過標記清除的方式進行垃圾回收，但BOM與DOM對象倒是經過引用計數回收垃圾的， 
　　也就是說只要涉及BOM及DOM就會出現循環引用問題。

內存管理

一、何時觸發垃圾回收？

垃圾回收器週期性運行，若是分配的內存很是多，那麼回收工做也會很艱鉅，肯定垃圾回收時間間隔就變成了一個值得思考的問題。

IE6的垃圾回收是根據內存分配量運行的，當環境中的變量，對象，字符串達到必定數量時觸發垃圾回收。垃圾回收器一直處於工做狀態，嚴重影響瀏覽器性能。

IE7中，垃圾回收器會根據內存分配量與程序佔用內存的比例進行動態調整，開始回收工做。

二、合理的GC方案：(1)、遍歷全部可訪問的對象; (2)、回收已不可訪問的對象。

三、GC缺陷：(1)、中止響應其餘操做；

四、GC優化策略：(1)、分代回收（Generation GC）;(2)、增量GC

1六、你以爲前端工程的價值體如今哪

爲簡化用戶使用提供技術支持（交互部分） 
爲多個瀏覽器兼容性提供支持 
爲提升用戶瀏覽速度（瀏覽器性能）提供支持 
爲跨平臺或者其餘基於webkit或其餘渲染引擎的應用提供支持 
爲展現數據提供支持（數據接口）

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
 
    1、實現界面交互
 
    2、提高用戶體驗
 
    3、有了Node.js，前端能夠實現服務端的一些事情
參與項目，快速高質量完成實現效果圖，精確到1px；
 
 與團隊成員，UI設計，產品經理的溝通；
 
 作好的頁面結構，頁面重構和用戶體驗；
 
 處理hack，兼容、寫出優美的代碼格式；
 
 針對服務器的優化、擁抱最新前端技術。

1七、談談性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。

緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減小DNS查找等

請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。

請求帶寬：壓縮文件，開啓GZIP，

內容方面：

1.減小 HTTP 請求 (Make Fewer HTTP Requests)

2.減小 DOM 元素數量 (Reduce the Number of DOM Elements)

3.使得 Ajax 可緩存 (Make Ajax Cacheable)

針對CSS：

1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)

2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4.避免 CSS 表達式 (Avoid CSS Expressions)

針對JavaScript ：

1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)

2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)

3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)

4. 移除重複腳本 (Remove Duplicate Scripts)

面向圖片(Image)：

1.優化圖片

2 不要在 HTML 中使用縮放圖片

3 使用恰當的圖片格式

4 使用 CSS Sprites 技巧對圖片優化

移動端性能優化

• 儘可能使用css3動畫，開啓硬件加速。
• 適當使用touch事件代替click事件。
• 避免使用css3漸變陰影效果。
• 能夠用transform: translateZ(0)來開啓硬件加速。
• 不濫用Float。Float在渲染時計算量比較大，儘可能減小使用
• 不濫用Web字體。Web字體須要下載，解析，重繪當前頁面，儘可能減小使用。
• 合理使用requestAnimationFrame動畫代替setTimeout
• CSS中的屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）會觸發GPU渲染，請合理使用。過渡使用會引起手機過耗電增長

相關閱讀：如何作到一秒渲染一個移動頁面

1.合併js、css文件，減小http請求
2. 減小 DNS 查找 
3. 避免重定向 
4. 使用 Ajax 緩存 
5. 延遲載入組件 
6. 預先載入組件 
7. 

• 減小dom操做，儘量用變量替代沒必要要的dom操做

8. 切分組件到多個域
9. 最小化 iframe 的數量 
10. 不要出現http 404 錯誤
11.壓縮css、js文件，外部js、css文件放在最底下

1八、什麼是Etag？講講304緩存的原理

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

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

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

1九、棧和隊列、堆的區別?

棧的插入和刪除操做都是在一端進行的，而隊列的操做倒是在兩端進行的。
 
隊列先進先出，棧先進後出。
 
棧只容許在表尾一端進行插入和刪除，而隊列只容許在表尾一端進行插入，在表頭一端進行刪除

棧區（stack）—   由編譯器自動分配釋放   ，存放函數的參數值，局部變量的值等。
 
堆區（heap）   —   通常由程序員分配釋放，   若程序員不釋放，程序結束時可能由OS回收。
 
堆（數據結構）：堆能夠被當作是一棵樹，如：堆排序；
 
棧（數據結構）：一種先進後出的數據結構

20、你以爲jQuery源碼有哪些寫的好的地方

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

(function( window, undefined ) {
 
         //用一個函數域包起來，就是所謂的沙箱
 
         //在這裏邊var定義的變量，屬於這個函數域內的局部變量，避免污染全局
 
         //把當前沙箱須要的外部變量經過函數參數引入進來
 
         //只要保證參數對內提供的接口的一致性，你還能夠隨意替換傳進來的這個參數
 
        window.jQuery = window.$ = jQuery;
 
    })( window );

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

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

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

2一、ES6的瞭解

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

2二、」attribute」和」property」的區別是什麼？

1.定義

Property：屬性，全部的HTML元素都由HTMLElement類型表示，HTMLElement類型直接繼承自Element並添加了一些屬性，添加的這些屬性分別對應於每一個HTML元素都有下面的這5個標準特性: id,title,lang,dir,className。DOM節點是一個對象，所以，他能夠和其餘的JavaScript對象同樣添加自定義的屬性以及方法。property的值能夠是任何的數據類型，對大小寫敏感，自定義的property不會出如今html代碼中，只存在js中。

Attribute：特性，區別於property，attribute只能是字符串，大小寫不敏感，出如今innerHTML中，經過類數組attributes能夠羅列全部的attribute。

2.相同之處

標準的 DOM properties 與 attributes 是同步的。公認的（非自定義的）特性會被以屬性的形式添加到DOM對象中。如，id，align，style等，這時候操做property或者使用操做特性的DOM方法如getAttribute()均可以操做屬性。不過傳遞給getAttribute()的特性名與實際的特性名相同。所以對於class的特性值獲取的時候要傳入「class」。

3.不一樣之處

1).對於有些標準的特性的操做，getAttribute與點號(.)獲取的值存在差別性。如href，src，value，style，onclick等事件處理程序。 
2).href：getAttribute獲取的是href的實際值，而點號獲取的是完整的url，存在瀏覽器差別。

2三、行內元素有哪些？塊級元素有哪些？CSS盒模型

塊級元素：div,p,ol,ul,form,h1-h6,textarea,html,body,table,button,hr,dl,address,pre
行內塊元素：img,input,td
行內元素：span,a,b,a,strong,em,title,lable,br

2四、link和@import的區別

就結論而言，強烈建議使用link標籤，慎用@import方式。
這樣能夠避免考慮@import的語法規則和注意事項，避免產生資源文件下載順序混亂和http請求過多的煩惱。

區別

1.從屬關係區別
@import是 CSS 提供的語法規則，只有導入樣式表的做用；link是HTML提供的標籤，不只能夠加載 CSS 文件，還能夠定義 RSS、rel 鏈接屬性等。

2.加載順序區別
加載頁面時，link標籤引入的 CSS 被同時加載；@import引入的 CSS 將在頁面加載完畢後被加載。
@import雖然後被加載，卻會在加載完畢後置於樣式表頂部，最終渲染時天然會被下面的同名樣式層疊。

3.兼容性區別 @import是 CSS2.1 纔有的語法，故只可在 IE5+ 才能識別；link標籤做爲 HTML 元素，不存在兼容性問題。 

4.DOM可控性區別 能夠經過 JS 操做 DOM ，插入link標籤來改變樣式；因爲 DOM 方法是基於文檔的，沒法使用@import的方式插入樣式。

由link和@import的區別引起的CSS渲染雜談

2五、CSS選擇器有哪些？優先級怎麼樣？

    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

2六、主流瀏覽器及其內核？

常見的瀏覽器內核（或者說渲染引擎）有不少個，如Trident、Gecko、WebKit等等，不一樣的內核對網頁編寫語法的解釋也有不一樣，進而致使同一個頁面在不一樣內核的瀏覽器下顯示出來的效果也會有所出入，這也是前端工程師須要讓做品兼容各類瀏覽器的緣由。

 IE：Trident；Safari：WebKit；谷歌Chrome/Chromium：WebKit/Blink；Opera：Presto；Firefox：Gecko

1、IE瀏覽器內核：Trident內核，也被稱爲IE內核； 
2、Chrome瀏覽器內核：Chromium內核 → Webkit內核 → Blink內核； 
3、Firefox瀏覽器內核：Gecko內核，也被稱Firefox內核； 
4、Safari瀏覽器內核：Webkit內核； 
5、Opera瀏覽器內核：最初是自主研發的Presto內核，後跟隨谷歌，從Webkit到Blink內核； 
6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核； 
7、搜狗、遨遊、QQ瀏覽器內核：Trident（兼容模式）+Webkit（高速模式）； 
8、百度瀏覽器、世界之窗內核：IE內核；

各主流瀏覽器內核介紹

2七、常見兼容性問題？

（1）圖片間隙

描述：在div中插入圖片時，圖片會將div下方撐大三像素。

解決方法：添加聲明：display:block;
（2）雙倍浮向（雙倍邊距）

描述：當Ie6及更低版本瀏覽器在解析浮動元素時，會錯誤地把浮向邊邊界加倍顯示。 
hack:給浮動元素添加聲明：display:inline

（3）默認高度（IE6）

描述：在IE6及如下版本中，部分塊元素擁有默認高度（低於18px高度） 
hack1:給元素添加聲明：font-size:0; 
hack2：給元素添加聲明：overflow:hidden;

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和IE七、IE6分離開來，這樣IE8已經獨立識別。
 
  css
 
      .bb{
 
       background-color:#f1ee18;/*全部識別*/
 
      .background-color:#00deff\9; /*IE六、七、8識別*/
 
      +background-color:#a200ff;/*IE六、7識別*/
 
      _background-color:#1e0bd1;/*IE6識別*/
 
      } 
 
怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發
怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今
能夠使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>

2八、解釋下浮動和它的工做原理？清除浮動的技巧

關於浮動咱們須要瞭解，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。要想使元素浮動，必須爲元素設置一個寬度（width）。雖然浮動元素不是文檔流之中，可是它浮動後所處的位置依然是在浮動以前的水平方向上。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣，下面的元素填補原來的位置。有些元素會在浮動元素的下方，可是這些元素的內容並不必定會被浮動的元素所遮蓋，對內聯元素進行定位時，這些元素會考慮浮動元素的邊界，會圍繞着浮動元素放置。也能夠把浮動元素想象成是被塊元素忽略的元素，而內聯元素會關注浮動元素的。

1.使用空標籤清除浮動。 
   這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
 
2.使用overflow。 
   給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
 
3.使用after僞對象清除浮動。
 
   該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

CSS技巧（一）：清除浮動 

2九、JS中IE的幾種兼容性寫法？CSS中兼容性寫法？IE與其餘瀏覽器有哪些不一樣？

Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target

//CSS兼容性寫法
-webkit- ，針對safari，chrome瀏覽器的內核CSS寫法
-moz-，針對firefox瀏覽器的內核CSS寫法
-ms-，針對ie內核的CSS寫法
-o-，針對Opera內核的CSS寫法

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如下不支持圓角

js兼容性問題：①在標準的事件綁定中綁定事件的方法函數爲addEventListener，而IE使用的是attachEvent；②事件處理中event屬性的獲取不一樣。標準瀏覽器是做爲參數帶入，而後經過e.target獲取目標元素；而IE是經過window.event方式得到，經過e.srcElement獲取目標元素；

30、說一下zoom:1的原理

參考：說一下zoom:1的原理，萬一被問到呢？

3一、get和post的區別？什麼時候使用POST？ 

    GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
 
    POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。 
 
    GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，
 
    也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。 
 
然而，在如下狀況中，請使用 POST 請求：
 
沒法使用緩存文件（更新服務器上的文件或數據庫）
 
向服務器發送大量數據（POST 沒有數據量限制）
 
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

3二、ajax如何解釋json數據？

3三、js繼承方式及其優缺點

原型鏈繼承的缺點：一是字面量重寫原型會中斷關係，使用引用類型的原型，而且子類型還沒法給超類型傳遞參數。
借用構造函數（類式繼承）

javascript繼承的6種方法

面向對象的基本特徵有：封閉、繼承、多態。

1，原型鏈繼承
 
2，借用構造函數繼承
 
3，組合繼承(原型+借用構造)
 
4，原型式繼承
 
5，寄生式繼承
 
6，寄生組合式繼承

34.什麼是哈希表？

散列表（也叫哈希表），是根據關鍵碼值直接進行訪問的數據結構。也就是說，它經過把關鍵碼值映射到表中一個位置來訪問記錄，以加快查找的速度。這個映射函數叫作散列函數，存放記錄的數組叫作散列表。

3五、什麼是事件冒泡和默認事件？如何阻止？

 1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。
 
 2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；

//阻止事件冒泡
 
 `ev.stopPropagation()`;注意舊ie的方法 `ev.cancelBubble = true`;

3六、javascript的本地對象/原生對象、內置對象和宿主對象？

原生對象

ECMA-262 把本地對象（native object）定義爲「獨立於宿主環境的 ECMAScript 實現提供的對象」。

「本地對象」包含哪些內容：Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError。

由此能夠看出，簡單來講，本地對象就是 ECMA-262 定義的類（引用類型）。

內置對象

ECMA-262 把內置對象（built-in object）定義爲「由 ECMAScript 實現提供的、獨立於宿主環境的全部對象，在 ECMAScript 程序開始執行時出現」。這意味着開發者沒必要明確實例化內置對象，它已被實例化了。

一樣是「獨立於宿主環境」。根據定義咱們彷佛很難分清「內置對象」與「本地對象」的區別。而ECMA-262 只定義了兩個內置對象，即 Global 和 Math （它們也是本地對象，根據定義，每一個內置對象都是本地對象）。如此就能夠理解了。內置對象是本地對象的一種。

宿主對象

何爲「宿主對象」？主要在這個「宿主」的概念上，ECMAScript中的「宿主」固然就是咱們網頁的運行環境，即「操做系統」和「瀏覽器」。

全部非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。全部的BOM和DOM都是宿主對象。由於其對於不一樣的「宿主」環境所展現的內容不一樣。其實說白了就是，ECMAScript官方未定義的對象都屬於宿主對象，由於其未定義的對象大多數是本身經過ECMAScript程序建立的對象。

3七、Document.onload與ready的區別？

共同點：這兩種事件都表明的是頁面文檔加載時觸發。

異同點：

ready 事件的觸發，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）。

onload 事件的觸發，表示頁面包含圖片等文件在內的全部元素都加載完成。

3八、javascript的同源策略 

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

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

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

爲何要有同源限制？

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

缺點：

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

3九、請你談談Cookie的優勢和弊端，以及替換方法

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

第一：每一個特定的域名下生成cookie的數量有限

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

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

第二：安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

40、display:none和visibility:hidden的區別？

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

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

• display:none;的缺陷搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略屏幕閱讀器（是爲視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。

• visibility:hidden;的缺陷這個你們應該比較熟悉就是隱藏的內容會佔據他所應該佔據物理空間3.overflow:hidden;一個比較合理的方法.texthidden{display:block;/統一轉化爲塊級元素/overflow:hidden;width:0;height:0;}就像上面的一段CSS所展現的方法，將寬度和高度設定爲0，而後超過部分隱藏，就會彌補上述1、二方法中的缺陷，也達到了隱藏內容的目的。

40、position:absolute和float屬性的異同

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

• 不一樣點：float屬於浮動流模型，仍會佔據位置，absolute屬於層模型，會覆蓋文檔流中的其餘元素。

4一、介紹一下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規範對盒模型解析，一旦修改了元素的邊框或內距，就會影響元素的盒子尺寸，就不得不從新計算元素的盒子尺寸，從而影響整個頁面的佈局。

4二、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

4三、對BFC規範的理解？

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

 

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

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

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

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

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

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

此標籤可告知瀏覽器文檔使用哪一種HTML或XHTML規範。該標籤可聲明三種DTD類型，分別表示嚴格版本、過渡版本以及基於框架的HTML文檔。

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

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

Standards（標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而Quirks（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

瀏覽器標準模式和怪異模式之間的區別

W3C標準推出之後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來之前，不少頁面都是根據舊的渲染方法編寫的，若是用的標準來渲染，將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性，使之前的頁面可以正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。IE盒子模型和標準W3C盒子模型：ie的width包括：padding\border。標準的width不包括：padding\border

在js中如何判斷當前瀏覽器正在以何種方式解析？ 
document對象有個屬性compatMode,它有兩個值：BackCompat對應quirks mode，CSS1Compat對應strict mode。

4五、HTML與XHTML——兩者有什麼區別

1.全部的標記都必需要有一個相應的結束標記
 
2.全部標籤的元素和屬性的名字都必須使用小寫
 
3.全部的XML標記都必須合理嵌套
 
4.全部的屬性必須用引號""括起來
 
5.把全部<和&特殊符號用編碼表示
 
6.給全部屬性賦一個值
 
7.不要在註釋內容中使「--」
 
8.圖片必須有說明文字

4六、DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

      createDocumentFragment()    //建立一個DOM片斷 
      createElement()   //建立一個具體的元素 
      createTextNode()   //建立一個文本節點
//添加、移除、替換、插入
     appendChild() 
      removeChild() 
      replaceChild() 
      insertBefore() //並無insertAfter()
//查找
     getElementsByTagName()    //經過標籤名稱 
      getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的) 
      getElementById()    //經過元素Id，惟一性    

4七、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]-->

4八、描述如下變量的區別：null，undefined或undeclared？

JavaScript的最第一版本是這樣區分的：null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。

可是，上面這樣的區分，在實踐中很快就被證實不可行。目前，null和undefined基本是同義的，只有一些細微的差異。

null表示」沒有對象」，即該處不該該有值。null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。典型用法是：

用來初始化一個變量，這個變量可能被賦值爲一個對象。

用來和一個已經初始化的變量比較，這個變量能夠是也能夠不是一個對象。

當函數的參數指望是對象時，被用做參數傳入。

當函數的返回值指望是對象時，被用做返回值傳出。

做爲對象原型鏈的終點。 

undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義。典型用法是：

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

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

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

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

==運算符將二者看做相等。若是要區分二者，要使用===或typeof運算符。

4九、異步加載和延遲加載

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

1.異步加載的方案： 動態插入script標籤
 
2.經過ajax去獲取js代碼，而後經過eval執行
 
3.script標籤上添加defer或者async屬性
 
4.建立並插入iframe，讓它異步執行js
 
5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

50、開發過程當中遇到的內存泄露狀況，如何解決的？

一、定義和用法：

內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言採用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。咱們知道，瀏覽器中也是採用自動垃圾回收方法管理內存，但因爲瀏覽器垃圾回收方法有bug，會產生內存泄露。

二、內存泄露的幾種狀況:

(1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會做出恰當處理，此時要先手工移除事件，否則會存在內存泄露。

實例以下:

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

解決方法以下：

<div id="myDiv">
    <input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
    var btn = document.getElementById("myBtn");
    btn.onclick = function(){
    btn.onclick = null;
        document.getElementById("myDiv").innerHTML = "Processing...";
    }
</script>

(2)、因爲是函數內定義函數，而且內部函數--事件回調的引用外暴了，造成了閉包。閉包能夠維持函數內局部變量，使其得不到釋放。

實例以下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
        //Even if it's a empty function
    }
}

解決方法以下：

function bindEvent(){
    var obj=document.createElement("XXX");
    obj.onclick=function(){
         //Even if it's a empty function
    }
    obj=null;
}

 setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
 
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

5一、一個頁面從輸入 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`

5二、javascript對象的幾種建立方式

1，工廠模式
 
2，構造函數模式
 
3，原型模式
 
4，混合構造函數和原型模式
 
5，動態原型模式
 
6，寄生構造函數模式
 
7，穩妥構造函數模式

5三、ie各版本和chrome能夠並行下載多少個資源

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

5四、call和apply的區別和做用

做用：都是在特定的做用域中調用函數，等於設置函數體內this對象的值，以擴充函數賴以運行的做用域。都會改變this的指向。

• apply()方法 接收兩個參數，一個是函數運行的做用域（this），另外一個是參數數組。
• call()方法 第一個參數和apply()方法的同樣，可是傳遞給函數的參數必須列舉出來。

call方法: 
語法：call(thisObj，Object) 
定義：調用一個對象的一個方法，以另外一個對象替換當前對象。 
說明：call 方法能夠用來代替另外一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變爲由 thisObj 指定的新對象。 若是沒有提供 thisObj 參數，那麼 Global 對象被用做 thisObj。 
apply方法： 
語法：apply(thisObj，[argArray]) 
定義：應用某一對象的一個方法，用另外一個對象替換當前對象。 
說明：若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj， 而且沒法被傳遞任何參數。

對於apply和call二者在做用上是相同的，但二者在參數上有如下區別： 
對於第一個參數意義都同樣，但對第二個參數：apply傳入的是一個參數數組，也就是將多個參數組合成爲一個數組傳入，而call則做爲call的參數傳入（從第二個參數開始）。如 func.call(func1,var1,var2,var3)對應的apply寫法爲：func.apply(func1,[var1,var2,var3])同時使用apply的好處是能夠直接將當前函數的arguments對象做爲apply的第二個參數傳入。

JS中的call()方法和apply()方法用法總結

5五、ajax的缺點和在IE下的問題？

  //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，來實現瀏覽器地址欄的無刷新改變

定義和用法:

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用於建立快速動態網頁的技術。Ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。

傳統的網頁（不使用 Ajax）若是須要更新內容，必須重載整個網頁頁面。

優勢：

1.減輕服務器的負擔,按需取數據,最大程度的減小冗餘請求

2.局部刷新頁面,減小用戶心理和實際的等待時間,帶來更好的用戶體驗

3.基於xml標準化,並被普遍支持,不需安裝插件等,進一步促進頁面和數據的分離

缺點：

1.AJAX大量的使用了javascript和ajax引擎,這些取決於瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.

2.AJAX只是局部刷新,因此頁面的後退按鈕是沒有用的.

3.對流媒體還有移動設備的支持不是太好等

AJAX的工做原理：

1.建立ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）

2.判斷數據傳輸方式(GET/POST)

3.打開連接 open()

4.發送 send()

5.當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行回調函數

5六、談談你對重構的理解

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

對於傳統的網站來講重構一般是：
 
表格(table)佈局改成DIV+CSS
 
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
 
對於移動平臺的優化
 
針對於SEO進行優化
 
深層次的網站重構應該考慮的方面 
 
減小代碼間的耦合
 
讓代碼保持彈性
 
嚴格按規範編寫代碼
 
設計可擴展的API
 
代替舊有的框架、語言(如VB)
 
加強用戶體驗
 
一般來講對於速度的優化也包含在重構中 
 
壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
 
程序的性能優化(如數據讀寫)
 
採用CDN來加速資源加載
 
對於JS DOM的優化
 
HTTP服務器的文件緩存

5七、說說你對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。

5八、說說嚴格模式的限制

變量必須聲明後再使用
 
函數的參數不能有同名屬性，不然報錯
 
不能使用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均不支持嚴格模式。

5九、說說你對AMD和Commonjs的理解

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

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

60、document.write()的用法

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

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

6一、說說你對MVC和MVVM的理解

MVC

6二、attribute和property的區別是什麼？

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

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

因此：

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

可是對於自定義的屬性來講，他們是不一樣步的，

6三、說說網絡分層裏七層模型是哪七層

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

6四、什麼樣的前端代碼是好的？

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

6五、let，const，var 區別？

 var：函數做用域，存在變量提高 
let：塊做用域，不存在變量提高 
const：不能修改的是棧內存在的值和地址。聲明一個基本類型的時候爲常量，不可修改；聲明對象能夠修改

6六、比較typeof與instanceof？

相同點：JavaScript 中 typeof 和 instanceof 經常使用來判斷一個變量是否爲空，或者是什麼類型的。

typeof的定義和用法：返回值是一個字符串，用來講明變量的數據類型。

細節：

(1)、typeof 通常只能返回以下幾個結果：number,boolean,string,function,object,undefined。

(2)、typeof 來獲取一個變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 由於若是 a 不存在（未聲明）則會出錯。

(3)、對於 Array,Null 等特殊對象使用 typeof 一概返回 object，這正是 typeof 的侷限性。

Instanceof定義和用法：instanceof 用於判斷一個變量是否屬於某個對象的實例。

實例演示：

a instanceof b?alert("true"):alert("false"); //a是b的實例？真:假
var a = new Array(); 
alert(a instanceof Array);  // true
alert(a instanceof Object)  // true
//如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是由於 Array 是 object 的子類。
function test(){};
var a = new test();
alert(a instanceof test)   // true

細節：

(1)、以下，獲得的結果爲‘N’,這裏的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型對象。

if (window instanceof Object){ alert('Y')} else {  alert('N');}  // 'N'

6七、簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。

當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

6八、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

6九、px和em的區別

相同點：px和em都是長度單位；

異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。

70、如何規避javascript多人開發函數重名問題

• 命名空間
• 封閉空間
• js模塊化mvc（數據層、表現層、控制層）
• seajs
• 變量轉換成對象的屬性
• 對象化

7一、前端開發中，如何優化圖像？圖像格式的區別？

優化圖像：

一、不用圖片，儘可能用css3代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用CSS達成。

二、 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持SVG了，因此可放心使用！

3.、使用恰當的圖片格式。咱們常見的圖片格式有JPEG、GIF、PNG。

基本上，內容圖片多爲照片之類的，適用於JPEG。

而修飾圖片一般更適合用無損壓縮的PNG。

GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。

四、按照HTTP協議設置合理的緩存。

五、使用字體圖標webfont、CSS Sprites等。

六、用CSS或JavaScript實現預加載。

七、WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，很是適合用於網絡等圖片傳輸。

 圖像格式的區別：

矢量圖：圖標字體，如 font-awesome；svg 

位圖：gif,jpg(jpeg),png

區別：

　　一、gif:是是一種無損，8位圖片格式。具備支持動畫，索引透明，壓縮等特性。適用於作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

　　二、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於容許輕微失真的色彩豐富的照片，不適合作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

　　三、png:PNG能夠細分爲三種格式:PNG8，PNG24，PNG32。後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。

關於透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增長了8位（256階）的alpha通道透明;

優缺點：

　　一、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。

　　二、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。

7二、瀏覽器是如何渲染頁面的？

渲染的流程以下：

1.解析HTML文件，建立DOM樹。

   自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。

2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；

3.將CSS與DOM合併，構建渲染樹（Render Tree）

4.佈局和繪製，重繪（repaint）和重排（reflow）

7三、解釋「JavaScript模塊模式」以及你在什麼時候使用它。你是如何組織本身的代碼？是使用模塊模式，仍是使用經典繼承的方法？

若是有提到無污染的命名空間，能夠考慮加分。

若是你的模塊沒有本身的命名空間會怎麼樣？ 
請看文章-JavaScript之模塊化編程 和JavaScript之命名空間模式 淺析

請看文章-JavaScript之模塊化編程和Javascript之對象的繼承

7四、說說你對語義化的理解？

1.去掉或樣式丟失的時候能讓頁面呈現清晰的結構：html自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起做用，因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優勢，可是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。

2.屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來「讀」你的網頁。

3.PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）。

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

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

7五、爲何利用多個域名來提供網站資源會更有效？

1.CDN緩存更方便

2.突破瀏覽器併發限制（通常每一個域名創建的連接不超過6個）

3.Cookieless，節省帶寬，尤爲是上行帶寬通常比下行要慢

4.對於UGC的內容和主站隔離，防止沒必要要的安全問題(上傳js竊取主站cookie之類的)。正是這個緣由要求用戶內容的域名必須不是本身主站的子域名，而是一個徹底獨立的第三方域名。

5.數據作了劃分，甚至切到了不一樣的物理集羣，經過子域名來分流比較省事。這個可能被用的很少。 
PS:關於Cookie的問題，帶寬是次要的，安全隔離纔是主要的。關於多域名，也不是越多越好，雖然服務器端能夠作泛解釋，瀏覽器作dns解釋也是耗時間的，並且太多域名，若是要走https的話，還有要多買證書和部署的問題。

7六、若是你參與到一個項目中，發現他們使用Tab來縮進代碼，可是你喜歡空格，你會怎麼作？

建議這個項目使用像EditorConfig(http://editorconfig.org/)之類的規範 
爲了保持一致性，接受項目原有的風格 
直接使用VIM的retab命令

7七、你都使用哪些工具來測試代碼的性能？

Profiler,JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）,Dromaeo。

7八、請談一下你對網頁標準和標準制定機構重要性的理解。

w3c存在的意義就是讓瀏覽器兼容性問題儘可能小，首先是他們對瀏覽器開發者的約束，而後是對開發者的約束。

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

FOUC(Flash Of Unstyled Content)–文檔樣式閃爍

而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。解決方法簡單的出奇，只要在之間加入一個或者<script>元素就能夠了。

80、若是網頁內容須要支持多語言，你會怎麼作？

下面這些問題須要考慮：

• 應用字符集的選擇，選擇UTF-8編碼

• 語言書寫習慣&導航結構

• 數據庫驅動型網站

8一、data-屬性的做用是什麼？

data-* 屬性用於存儲頁面或應用程序的私有自定義數據。data-* 屬性賦予咱們在全部 HTML 元素上嵌入自定義 data 屬性的能力。存儲的（自定義）數據可以被頁面的 JavaScript 中利用，以建立更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。

data-* 屬性包括兩部分：

• 屬性名不該該包含任何大寫字母，而且在前綴 「data-」 以後必須有至少一個字符

• 屬性值能夠是任意字符串

8二、若是把HTML5看做作一個開放平臺，那它的構建模塊有哪些？

<nav>,<header>,<section>,<footer>等。

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

sessionStorage和localStorage是HTML5 Web Storage API提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個「瀏覽器窗口」的概念。sessionStorage是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的cookies會發送到服務器端。其他兩個不會。Microsoft指出InternetExplorer8增長cookie限制爲每一個域名50個，但IE7彷佛也容許每一個域名50個cookie。

• Firefox每一個域名cookie限制爲50個。

• Opera每一個域名cookie限制爲30個。

• Firefox和Safari容許cookie多達4097個字節，包括名（name）、值（value）和等號。

• Opera容許cookie多達4096個字節，包括：名（name）、值（value）和等號。

• InternetExplorer容許cookie多達4095個字節，包括：名（name）、值（value）和等號。

84.解釋下CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。

85.你最喜歡的圖片替換方法是什麼，你如何選擇使用。

<h2><span圖片丟這裏></span>Hello World</h2>

把span背景設成文字內容，這樣又能夠保證seo，也有圖片的效果在上面。通常都是：alt，title，onerror。

86.討論CSS hacks，條件引用或者其餘。

各個瀏覽器都認識，這裏給firefox用；

\9全部的ie瀏覽器可識別；

\0是留給ie8的+background-color:pink;+ie7定了；

__專門留給神奇的ie6；:root#test{background-color:purple\9;}:root是給ie9的，

@media all and(min-width:0px){#test{}}這個是總是跟ie搶着認\0的神奇的opera，必須加個\0,否則firefox，chrome，safari也都認識。

@media screen and(-webkit-min-device-pixel-ratio:0){#test{}}最後這個是瀏覽器新貴chrome和safari的。

87.如何爲有功能限制的瀏覽器提供網頁？你會使用哪些技術和處理方法？

88.你用過媒體查詢，或針對移動端的佈局/CSS嗎？

媒體查詢，就是響應式佈局。經過不一樣的媒介類型和條件定義樣式表規則。媒介查詢讓CSS能夠更精確做用於不一樣的媒介類型和同一媒介的不一樣條件。

語法結構及用法：@media 設備名 only （選取條件） not （選取條件） and（設備選取條件），設備二{sRules}。

示例以下：

/* 當瀏覽器的可視區域小於980px */

 @media screen and （max-width： 980px） {

 #wrap {width： 90%; margin:0 auto;}

 #content {width： 60%;padding： 5%;}

 #sidebar {width： 30%;}

 #footer {padding： 8% 5%;margin-bottom： 10px;}

 }

 /* 當瀏覽器的可視區域小於650px */

 @media screen and （max-width： 650px） {

#header {height： auto;}

#searchform {position： absolute;top： 5px;right： 0;}

#content {width： auto; float： none; margin： 20px 0;}

#sidebar {width： 100%; float： none; margin： 0;}

}

89.請羅列出你所知道的display屬性的所有值。

CSS display 屬性

90.如何優化網頁的打印樣式？

<link rel = "stylesheet" type = "text/css" media = "screen" href = "xxx.css"/>

其中media指定的屬性就是設備，顯示器上就是screen，打印機則是print，電視是tv，投影儀是projection。打印樣式示例以下：

<link rel = "stylesheet" type = "text/css" media = "print" href = "yyy.css"/>

但打印樣式表也應注意如下事項：

打印樣式表中最好不要用背景圖片，由於打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。

最好不要使用像素做爲單位，由於打印樣式表要打印出來的會是實物，因此建議使用pt和cm。

隱藏掉沒必要要的內容。（@print div{display:none;}）

打印樣式表中最好少用浮動屬性，由於它們會消失。若是想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預覽就能夠了。

91.在書寫高效CSS時會有哪些問題須要考慮？

• 1.樣式是：從右向左的解析一個選擇器；

• 2.ID最快，Universal最慢有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal ；

• 3.不要tag-qualify（永遠不要這樣作ul#main-navigation{}ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）；

• 4.後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的：html body ul li a{}）；

• 5.想清楚你爲何這樣寫；

• 6.CSS3的效率問題（CSS3選擇器（好比:nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）；

• 7.咱們知道#ID速度是最快的，那麼咱們都用ID，是否是很快。可是咱們不該該爲了效率而犧牲可讀性和可維護性。

92.若是設計中使用了非標準的字體，你該如何去實現？

所謂的標準字體是多數機器上都會有的，或者即便沒有也能夠由默認字體替代的字體。

方法：

• 用圖片代替

• web fonts在線字庫，如Google Webfonts，Typekit等等；http://www.chinaz.com/free/2012/0815/269267.shtml；

• @font-face，Webfonts(字體服務例如：Google Webfonts，Typekit等等。)

93.解釋下瀏覽器是如何判斷元素是否匹配某個CSS選擇器？

從後往前判斷。瀏覽器先產生一個元素集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。舉個例子，有選擇器：

body.ready#wrapper>.lol233

先把全部class中有lol233的元素拿出來組成一個集合，而後上一層，對每個集合中的元素，若是元素的parent id不爲#wrapper則把元素從集合中刪去。再向上，從這個元素的父元素開始向上找，沒有找到一個tagName爲body且class中有ready的元素，就把原來的元素從集合中刪去。至此這個選擇器匹配結束，全部還在集合中的元素知足。大致就是這樣，不過瀏覽器還會有一些奇怪的優化。爲何從後往前匹配由於效率和文檔流的解析方向。效率沒必要說，找元素的父親和以前的兄弟比遍歷所喲兒子快並且方便。關於文檔流的解析方向，是由於如今的CSS，一個元素只要肯定了這個元素在文檔流以前出現過的全部元素，就能肯定他的匹配狀況。應用在即便html沒有載入完成，瀏覽器也能根據已經載入的這一部分信息徹底肯定出現過的元素的屬性。爲何是用集合主要也仍是效率。基於CSS Rule數量遠遠小於元素數量的假設和索引的運用，遍歷每一條CSS Rule經過集合篩選，比遍歷每個元素再遍歷每一條Rule匹配要快得多。

9四、描述一種JavaScript中實現memoization(避免重複運算)的策略