面試題總結（一）

時間 2019-11-11

原文原文鏈接

出來面試了許多家公司，遇到的面試題來看，也是徹底不一樣，對於一個初學者來講，作多少項目都是虛的，畢竟沒有紮實的功底，javascript

你說項目是你作的，人家一問就漏底不是，因此在這裏總結一些本身遇到過的基礎的面試題，從題目來看，php

主要分爲概念題，css和js的題目，在這裏就先從概念題開始吧。固然只是本人總結，僅供你們參考，若是有錯誤和不足，但願你們指出。css

Typeof的返回值類型html

返回值類型有：Number/Boolean/undefined/function/string/object

Display的屬性block 、inline、block-inline的區別前端

　block元素的特色是：
　　老是在新行上開始；
　　高度，行高以及頂和底邊距均可控制；
　　寬度缺省是它的容器的100%，除非設定一個寬度
　　<div>, <p>, <h1>, <form>, <ul> 和 <li>是塊元素的例子。vue

　　display:inline就是將元素顯示爲行內元素.html5

　　inline元素的特色是：
　　和其餘元素都在一行上；
　　高，行高及頂和底邊距不可改變；
　　寬度就是它的文字或圖片的寬度，不可改變。
　　<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。java

　　inline和block能夠控制一個元素的行寬高等特性，須要切換的狀況以下：node

　　讓一個inline元素重新行開始；
　　讓塊元素和其餘元素保持在一行上；
　　控制inline元素的寬度（對導航條特別有用）；
　　控制inline元素的高度；
　　無須設定寬度便可爲一個塊元素設定與文字同寬的背景色。react

　　display:inline-block將對象呈遞爲內聯對象，可是對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。

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）

可繼承的樣式： font-size font-family color, text-indent;
不可繼承的樣式：border padding margin width height ;
優先級就近原則，同權重狀況下樣式定義最近者爲準;
載入樣式以最後載入的定位爲準;

優先級爲:

!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

position包含幾種屬性？absolute和relative的區別？（基礎中的基礎，必須吃透徹的前端基礎）

static：默認狀態、沒有定位、正常流

inherit：從父元素集成position屬性的值

fixed：生成絕對定位的元素（相對於瀏覽器窗口進行定位）

absolute：生成絕對定位的元素（相位與static定位之外的第一個父元素定位）

relative：生成相對定位的元素（相對於其正常位置定位）

absolute和relative區別：父元素的padding對relative的子元素佈局有影響，absolute的子元素不受影響

前端性能優化

減小HTTP請求、使用內容發佈網絡、壓縮組件、使用Expire頭、JS放底部、CSS放頂部、避免CSS表達式等。

盒子模型

盒子模型包括四部分：內容（content）、填充（padding）、邊框（border）、邊界（margin）

盒子模型能夠分爲兩種：IE盒子模型和W3C標準盒子模型

區別：二者對於width的計算方式不一樣，前者width=border+padding+內容寬度，後者width=內容寬度。

一個頁面從URL到加載顯示完成，都發生了什麼？

①經過DNS將該地址解析成IP地址；

②發起網絡鏈接，進行http協議會話：客戶端發送報頭（請求報頭），服務端回饋報頭（響應報頭）

③返回一個頁面（根據頁面上的外鏈的URL從新發送請求獲取）

④接收文件完畢，對加載到的資源進行語法解析，以及相應的內部數據結構（網頁渲染）

ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

1. 經過異步模式，提高了用戶體驗

  2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

  3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

  2. Ajax的最大的特色是什麼。

  Ajax能夠實現動態不刷新（局部刷新）

  readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=啓動 2=發送，3=接收，4=完成

ajax的缺點

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

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

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

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

  五、不容易調試。

跨域： jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

ajax過程

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

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

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

(4)發送HTTP請求.

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

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

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

（1）建立新節點

      createDocumentFragment()    //建立一個DOM片斷

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

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

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

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

      getElementsByTagName()    //經過標籤名稱

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

      getElementById()    //經過元素Id，惟一性

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

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

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聲明\新增的結構元素\功能元素

JSONP是什麼？它是如何實現跨域的？爲何它能夠實現跨域？

JSONP(JSON with Padding)是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問。

因爲同源策略的限制，XmlHttpRequest只容許請求當前源（域名、協議、端口）的資源，爲了實現跨域請求，能夠經過script標籤實現跨域請求
（由於同源策略不阻止動態腳本插入，而且將腳本看做是從提供 Web 頁面的域上加載的），而後在服務端輸出JSON數據並執行回調函數，從而解決了跨域的數據請求。

Javascript中callee和caller的做用？

caller是返回一個對函數的引用，該函數調用了當前函數；

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

瀏覽器兼容問題

css兼容性問題：

①不一樣瀏覽器的標籤默認的外補丁和內補丁不一樣，解決方案：用通配符*來設置各個標籤的內外補丁是0（即設置margin和padding爲0）；

②div的垂直居中問題 vertical-align：middle；文字居中：將行距增長到和整個div同樣，高line-height=行高；

③margin加倍問題：設置爲float的div在ie下的margin會加倍。解決方案：爲這個div設置樣式：display:inline;

js兼容性問題：

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

JS和JAVA的做用域有什麼區別

java是塊級做用域，js是函數做用域，沒有塊級做用域。

var name="global";

if(true){

var name="local";

console.log(name)

}

console.log(name);

這段都輸出是「local",若是有塊級做用域，明顯if語句將建立局部變量name,並不會修改全局name,但是沒有這樣，因此Js沒有塊級做用域。

閉包問題

閉包：函數能被外部調用到，則該做用連上的全部變量都會被保存下來。

做用：

一、能夠讀取函數內部的變量二、至關於劃出了一塊私有做用域，避免數據污染；三、讓變量始終保存在內存中

閉包有三個特性：

1.函數嵌套函數

2.函數內部能夠引用外部的參數和變量

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

使用全局變量被認爲是很差的習慣，並且容易形成錯誤而且維護成本較高，因此js能夠採用閉包的方式讀取函數的內部變量。

可是若是大量使用閉包就會形成過多的變量始終保存在內存中，會形成內存泄漏。

一個簡單的閉包例子：

function f1(){

var n=999;

function f2(){

alert(n);

}

return f2;

}

var result=f1();

result(); // 999

js中this的工做原理

② 全局範圍內：指向全局對象: this;

②函數調用：指向全局對象: foo();

③ 方法調用：this指向test對象: test.foo();

④ 調用構造函數：this指向新建立的對象: new foo();

⑤顯示的設置this：使用call或者apply方法時，this指向第一個參數

function foo(a, b, c) {}

var bar = {};

foo.apply(bar, [1, 2, 3]); // 數組將會被擴展，以下所示

foo.call(bar, 1, 2, 3); // 傳遞到foo的參數是：a = 1, b = 2, c = 3

簡述一下src與href的區別

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

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

模塊化編程

①AMD（異步模塊定義） requirejs

defined(id,deps,factory)

require([dependency],function(){})

異步加載，瀏覽器不會失去響應

它指定的回調函數，只有前面的模塊都加載完成後，纔會運行，解決了依賴性問題

②CMD（通用模塊定義） seajs

模塊定義方式和模塊加載時機處理不一樣

defined(id,deps,factory)

function(require,exports,module)

module.exports = ______;

③區別：AMD依賴前置，在定義模塊的時候就要聲明其依賴的模塊；CMD就近依賴，只有在用到哪一個模塊的時候再去require；

JS繼承與原型問題

Js全部的函數都有一個prototype屬性，這個屬性引用了一個對象，即原型對象，也簡稱原型。每個對象都有原型，在瀏覽器中它體如今一個隱藏的 proto 屬性上。

當一個對象須要調用某個方法時，它回去最近的原型上查找該方法，若是沒有找到，它會再次往下繼續查找。這樣逐級查找，一直找到了要找的方法。 這些查找的原型構成了該對象的原型鏈條。原型最後指向的是null。咱們說的原型繼承，就是將父對像的方法給子類的原型。子類的構造函數中不擁有這些方法和屬性。

少用float？

①使用float可能會形成兼容性問題，好比在ie6如下，float元素margin加倍問題；②使用float以後會影響左右元素，有可能形成錯位問題（float以後都要clear）

解決：可用display、position轉化

無序連接（ul、li），設定li標籤屬性：display:inline

②div左右結構，好比在右側要放一個more（更多）來顯示更多信息的時候用到了float:right，能夠用定位來作。給包裹more的div設定position：relative，而後more這個標籤right：0便可。結構更爲清晰一點。

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

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

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

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

2.使用overflow。

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

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

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

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

浮動元素引發的問題：

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

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

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

解決方法：使用 CSS 中的 clear:both ;屬性來清除元素的浮動可解決二、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

px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

隊列、堆、棧的區別？

隊列是先進先出：就像一條路，有一個入口和一個出口，先進去的就能夠先出去。而棧就像一個箱子，後放的在上邊，因此後進先出。堆是在程序運行時，而不是在程序編譯時，申請某個大小的內存空間。即動態分配內存，對其訪問和對通常內存的訪問沒有區別。

棧(Stack)是操做系統在創建某個進程時或者線程爲這個線程創建的存儲區域。在編程中，例如C/C++中，全部的局部變量都是從棧中分配內存空間，實際上也不是什麼分配，只是從棧頂向上用就行，在退出函數的時候，只是修改棧指針就能夠把棧中的內容銷燬，因此速度最快。

堆（Heap)是應用程序在運行的時候請求操做系統分配給本身內存，通常是申請/給予的過程。因爲從操做系統管理的內存分配因此在分配和銷燬時都要佔用時間，因此用堆的效率低的多！可是堆的好處是能夠作的很大，C/C++對分配的Heap是不初始化的。

在Java中除了簡單類型（int,char等）都是在堆中分配內存，這也是程序慢的一個主要緣由。可是跟C/C++不一樣，Java中分配Heap內存是自動初始化的。在Java中全部的對象（包括int的wrapper Integer）都是在堆中分配的，可是這個對象的引用倒是在Stack中分配。也就是說在創建一個對象時從兩個地方都分配內存，在Heap中分配的內存實際創建這個對象，而在Stack中分配的內存只是一個指向這個堆對象的指針（引用）而已。

什麼是線程？進程和線程的關係是什麼？

線程可定義爲進程內的一個執行單位，或者定義爲進程內的一個可調度實體。 在具備多線程機制的操做系統中，處理機調度的基本單位不是進程而是線程。一個進程能夠有多個線程，並且至少有一個可執行線程。

打個比喻:進程比如工廠(計算機)裏的車間，一個工廠裏有多個車間(進程)在運轉,每一個車間裏有一個或多個工人（線程）在協同工做，這些工人就能夠理解爲線程。

線程和進程的關係:

1.線程是進程的一個組成部分.

2.進程的多個線程都在進程地址空間活動.

3.系統資源是分配給進程的，線程須要資源時，系統從進程的資源裏分配給線程.

4.處理機調度的基本單位是線程.

CSS3中的transform屬性和transition屬性？

transform：

功能：使元素變形的屬性，其配合rotate（旋轉角度）、scale（縮放倍數）、skew（扭曲元素）等參數一塊兒使用

語法：

transform:rotate(旋轉角度)；//正數爲順時針、負數爲逆時針；

transform:scale(縮放倍數)；

transition：skew（扭曲）;

功能：設置元素由樣式一變爲樣式二所須要的一些變化效果

語法：transition: property duration timing-function delay ;

值	描述
transition-property	規定設置過渡效果的 CSS 屬性的名稱。
transition-duration	規定完成過渡效果須要多少秒或毫秒。
transition-timing-function	規定速度效果的速度曲線。
transition-delay	定義過渡效果什麼時候開始。

注：使用這兩個屬性時應考慮到瀏覽器的兼容性，因此要針對不一樣的瀏覽器都添加一次樣式，以下：

-webkit-transform:rotate(0deg) scale(1.20);

-moz-transform:rotate(0deg) scale(1.20);

transform:rotate(0deg) scale(1.20);

什麼是MVVM框架？

MVVM是Model-View-ViewModel的簡寫。

MVVM 是 Web 前端一種很是流行的開發模式，利用 MVVM 能夠使咱們的代碼更專一於處理業務邏輯而不是去關心 DOM 操做。目前著名的 MVVM 框架有 vue, avalon, angular 等，這些框架各有千秋，可是實現的思想大體上是相同的：數據綁定 + 視圖刷新。跟MVC同樣，主要目的是分離視圖（View）和模型（Model）。View能夠獨立於Model變化和修改，一個ViewModel能夠綁定到不一樣的"View"上，當View變化的時候Model能夠不變，當Model變化的時候View也能夠不變。

在MVVM中，數據是核心，因爲VIewModel與View之間的雙向綁定，操做了ViewModel中的數據（固然只能是監控屬性），就會同步到DOM，咱們透過DOM事件監控用戶對DOM的改動，也會同步到ViewModel。

<ul>

</li>

</ul>

</div>

var element = document.querySelector('#mobile-list');

var vm = new MVVM(element, {

'title' : 'Mobile List',

'showRank': true,

'brands' : [

{'name': 'Apple', 'rank': 1},

{'name': 'Galaxy', 'rank': 2},

{'name': 'OPPO', 'rank': 3}

]

});

vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>

以上這段如此簡潔的代碼，就是MVVM框架的一個簡單的實現效果。在HTML代碼裏面，可能會嵌入不少自定義的屬性（標記），以此來實現數據的綁定，並且還能夠進行一些簡單的邏輯處理，好比if和循環等。

react應該也算是MVVM框架，可是與傳統的MVVN框架不一樣的是，react默認數據綁定方式是單向綁定，而vue及angular都是雙向綁定；react使用虛擬DOM配合JSX，而vue及angular直接將數據經過屬性綁定在真實DOM上的。

MVVM框架的優勢：

一、方便測試

在MVC下，Controller基本是沒法測試的，裏面混雜了個各類邏輯，並且分散在不一樣的地方。有了MVVM咱們就能夠測試裏面的viewModel，來驗證咱們的處理結果對不對。

二、便於代碼的移植

能夠把一些視圖邏輯放在一個ViewModel裏面，讓不少view重用這段視圖邏輯。好比iOS裏面有iPhone版本和iPad版本，除了交互展現不同外，業務邏輯的model是一致的。這樣，咱們就能夠以很小的代價去開發另外一個app。

三、獨立開發

開發人員能夠專一於業務邏輯和數據的開發（ViewModel），設計人員能夠專一於頁面設計，使用Expression Blend能夠很容易設計界面並生成xml代碼。

利用@media screen實現網頁佈局的自適應。

判斷媒體類型，執行不一樣的css樣式屬性

重要屬性：min-width：設置最小分辨率大小；max-width：設置最大分辨率大小。

①方式一：經過css

///1280分辨率以上（大於1200px）

@media screen and (min-width:1200px){

#content{ width: 1100px; }

#mian,.div1{width: 730px;}

#secondary{width:310px;}

}

//1100分辨率（大於960px，小於1199px）

@media screen and (min-width: 960px) and (max-width: 1199px) {

#content{ width: 960px; }

#main,.div1{width: 650px;}

#secondary{width:250px}

}

②方式二：經過link引入不一樣的css文件

//意思是當屏幕的寬度大於600小於800時，應用styleB.css

優勢:無需插件和手機主題,對移動設備友好,可以適應各類窗口大小。只需在CSS中添加@media screen屬性,根據瀏覽器寬度判斷並輸出不一樣的長寬值。

異步加載和延遲加載

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

2.經過ajax去獲取js代碼，而後經過eval執行

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

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

5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

前端安全方面有沒有了解？XSS和CSRF如何攻防？

XSS(Cross Site Scripting)是跨站腳本攻擊，爲了區分CSS，因此縮寫爲XSS。惡意攻擊者往Web頁面裏插入惡意Script代碼，當用戶瀏覽該頁之時，嵌入其中Web裏面的Script代碼會被執行，從而達到惡意攻擊用戶的目的。

在網頁的一些公共區域（例如，建議提交表單或消息公共板的輸入表單）輸入一些文本，這些文本被其它用戶看到，但這些文本不只僅是他們要輸入的文本，同時還包括一些能夠在客戶端執行的腳本。如：

"/> <script>alert(document.cookie);</script><!--

在文本框中輸入以上代碼，而後點擊提交，就會把用戶的cookie彈出來。

XSS漏洞修復

1.將重要的cookies標記爲HTTP ONLY。

2.只容許用戶輸入咱們指望的數據。如年齡框只能輸入數字。

3.對數據進行HTTP Encode處理。

4.過濾或者移除特殊的HTML標籤。

5.過濾JS事件的標籤。

CSRF（Cross-site request forgery）是跨站請求僞造。XSS利用站點內的信任用戶，而CSRF則經過假裝來自受信任用戶的請求來利用受信任的網站。其實就是攻擊者盜用了你的身份，以你的名義發送惡意請求。

CSRF攻擊的思想

用戶瀏覽並登錄信任網站A；經過驗證，在用戶處產生X的cookie；用戶在沒有登出X的時候，瀏覽危險網站B；B要求訪問第三方網站A，發出一個請求；根據這個請求，瀏覽器使用剛纔產生的cookie直接訪問A。

一個簡單的實例

銀行網站A，它以GET請求來完成銀行轉帳的操做，如：http://www.mybank.com/Transfer.php?toBankId=11&money=1000

危險網站B，它裏面有一段HTML的代碼以下：

<img src=http://www.mybank.com/Transfer.php?toBankId=11&money=1000>

首先，你登陸了銀行網站A，而後訪問危險網站B，噢，這時你會發現你的銀行帳戶少了1000塊......

CSRF的防護

1.在表單裏增長Hash值，以認證這確實是用戶發送的請求，而後在服務器端進行Hash值驗證。

2.驗證碼：每次的用戶提交都須要用戶在表單中填寫一個圖片上的隨機字符串。

XSS原理及防範

Xss(cross-site scripting) 攻擊指的是攻擊者往Web頁面裏插入惡意 html 標籤或者 javascript 代碼。好比：攻擊者在論壇中放一個 看似安全的連接，騙取用戶點擊後，竊取cookie中的用戶私密信息；或者攻擊者在論壇中加一個惡意表單， 當用戶提交表單的時候，卻把信息傳送到攻擊者的服務器中，而不是用戶本來覺得的信任站點。

XSS防範方法

1.代碼裏對用戶輸入的地方和變量都須要仔細檢查長度和對 」<」,」>」,」;」,」’」 等字符作過濾；其次任何內容寫到頁面以前都必須加以 encode ，避免不當心把 html tag 弄出來。這一個層面作好，至少能夠堵住超過一半的 XSS 攻擊。

2.避免直接在 cookie 中泄露用戶隱私，例如 email 、密碼等等。 3.經過使cookie 和系統ip 綁定來下降 cookie 泄露後的危險。這樣攻擊者獲得的cookie 沒有實際價值，不可能拿來重放。

4.儘可能採用POST 而非GET 提交表單

XSS與CSRF有什麼區別嗎？

XSS 是獲取信息，不須要提早知道其餘用戶頁面的代碼和數據包。 CSRF 是代替用戶完成指定的動做，須要知道其餘用戶頁面的代碼和數據包。

要完成一次CSRF攻擊，受害者必須依次完成兩個步驟：

1.登陸受信任網站A，並在本地生成Cookie。 2.在不登出A的狀況下，訪問危險網站B。

請你談談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老是辦好事，例如IE七、IE6中的 userData 其實就是 javascript 本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持 web storage 。

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

cookie 和session 的區別：

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

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

    考慮到安全應當使用session。

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

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

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

 五、因此我的建議：

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

    其餘信息若是須要保留，能夠放在COOKIE中

請描述一下cookies，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僅僅是爲了在本地「存儲」數據而生。

display:none和visibility:hidden的區別？

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

就當他歷來不存在。

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

CSS中 link 和@import 的區別是？

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

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

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

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

position:absolute和float屬性的異同

A：共同點：

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

B：不一樣點：

float仍會佔據位置，position會覆蓋文檔流中的其餘元素。

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

XML和JSON的區別？

(1).數據體積方面。

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

(2).數據交互方面。

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

(3).數據描述方面。

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

(4).傳輸速度方面。

JSON的速度要遠遠快於XML。

對BFC規範的理解？

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

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

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

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了`http2`。

說說你對語義化的理解？

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和IE七、IE6分離開來，這樣IE8已經獨立識別。

css

      .bb{

       /*全部識別*/

      .background-color:#00deff\9; /*IE六、七、8識別*/

      +/*IE六、7識別*/

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

*  IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,

   也能夠使用getAttribute()獲取自定義屬性;

   Firefox下,只能使用getAttribute()獲取自定義屬性.

   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性;

  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示,

  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:

L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問題：漏寫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。

* ie6對png圖片格式支持很差(引用一段腳本處理)

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

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

你如何對網站的文件和資源進行優化？

期待的解決方案包括：

 文件合併

 文件最小化/文件壓縮

 使用 CDN 託管

 緩存的使用（多個域名來提供緩存）

 其餘

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

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

什麼是 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操做符具體幹了什麼呢?

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

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

   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

var obj  = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

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

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

如何解決跨域問題?

    jsonp、 document.domain+iframe、window.name、window.postMessage、服務器上設置代理頁面

jsonp的原理是動態插入script標籤

documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML能夠重繪頁面的一部分

.call() 和 .apply() 的區別和做用？

做用：動態改變某個類的某個方法的運行環境。

哪些操做會形成內存泄漏？

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

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

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

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

如何判斷當前腳本運行在瀏覽器仍是node環境中？

經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中

什麼叫優雅降級和漸進加強？

漸進加強 progressive enhancement：

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

優雅降級 graceful degradation：

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

區別：

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

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

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

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

Javascript數據推送

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

基於WebSocket的推送方案

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

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

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

    一、實現界面交互

    二、提高用戶體驗

    三、有了Node.js，前端能夠實現服務端的一些事情

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

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

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

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

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

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

平時如何管理你的項目？

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

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

        標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

        頁面進行標註（例如 頁面 模塊 開始和結束）；

        CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

        JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

        圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

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

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。

網站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等

javascript對象的幾種建立方式

1，工廠模式

2，構造函數模式

3，原型模式

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

5，動態原型模式

6，寄生構造函數模式

7，穩妥構造函數模式

javascript繼承的6種方法

1，原型鏈繼承

2，借用構造函數繼承

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

4，原型式繼承

5，寄生式繼承

6，寄生組合式繼承

sql注入原理

就是經過把 SQL 命令插入到 Web 表單遞交或輸入域名或頁面請求的查詢字符串，最終達到欺騙服務器執行惡意的SQL命令。

總的來講有如下幾點：

1.永遠不要信任用戶的輸入，要對用戶的輸入進行校驗，能夠經過正則表達式，或限制長度，對單引號和雙"-"進行轉換等。

2.永遠不要使用動態拼裝SQL，能夠使用參數化的SQL或者直接使用存儲過程進行數據查詢存取。

3.永遠不要使用管理員權限的數據庫鏈接，爲每一個應用使用單獨的權限有限的數據庫鏈接。

4.不要把機密信息明文存放，請加密或者hash掉密碼和敏感的信息。

CSRF的防護

1.服務端的CSRF方式方法不少樣，但總的思想都是一致的，就是在客戶端頁面增長僞隨機數。 2.使用驗證碼

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

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

Firefox，chrome也是6個

javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享

用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量

grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。

YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，採用Java開發。

使用方法：

//壓縮JS

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js

//壓縮CSS

java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

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

一、Flash ajax對比

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

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

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

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

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

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。 指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲何要有同源限制？

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

什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5 添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得 Javascript 在更嚴格的條件下運行。

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

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

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

- 提升編譯器效率，增長運行速度；

- 爲將來新版本的Javascript作好鋪墊。

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

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

GET和POST的區別，什麼時候使用POST？

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

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

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

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

然而，在如下狀況中，請使用 POST 請求：

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

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

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

哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js的阻塞特性：全部瀏覽器在下載 JS 的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到 JS 下載、解析、執行完畢後纔開始繼續 並行下載 其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載 JS ，可是 JS 下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

因爲瀏覽器爲了防止出現 JS 修改 DOM 樹，須要從新構建 DOM 樹的狀況，因此就會阻塞其餘的下載和呈現。

嵌入 JS 會阻塞全部內容的呈現，而外部 JS 只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

CSS 怎麼會阻塞加載了？ CSS 原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中， IE6 下 CSS 都是阻塞加載）

當 CSS 後面跟着嵌入的 JS 的時候，該 CSS 就會出現阻塞後面資源下載的狀況。而當把嵌入 JS 放到 CSS 前面，就不會出現阻塞的狀況了。

根本緣由：由於瀏覽器會維持 html 中 css 和 js 的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的 JS 會阻塞後面的資源加載，因此就會出現上面 CSS 阻塞下載的狀況。

嵌入 JS 應該放在什麼位置？

   一、放在底部，雖然放在底部照樣會阻塞全部呈現，但不會阻塞資源下載。

   二、若是嵌入JS放在head中，請把嵌入JS放在CSS頭部。

   三、使用defer（只支持IE）

   四、不要在嵌入的JS中調用運行時間較長的函數，若是必定要用，能夠用`setTimeout`來調用

Javascript無阻塞加載具體方式

將腳本放在底部。 <link> 仍是放在 head 中，用以保證在 js 加載前，能加載出正常顯示的頁面。 <script> 標籤放在 </body> 前。

成組腳本：因爲每一個 <script> 標籤下載時阻塞頁面解析過程，因此限制頁面的 <script> 總數也能夠改善性能。適用於內聯腳本和外部腳本。

非阻塞腳本：等頁面完成加載後，再加載 js 代碼。也就是，在 window.onload 事件發出後開始下載代碼。 （1） defer 屬性：支持IE4和 fierfox3.5 更高版本瀏覽器 （2）動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立 HTML 的幾乎所有文檔內容。代碼以下：

<script>

var script=document.createElement("script");

script.type="text/javascript";

script.src="file.js";

document.getElementsByTagName("head")[0].appendChild(script);

</script>

此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程。即便在head裏（除了用於下載文件的http連接）。

eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；

應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

JavaScript原型，原型鏈 ? 有什麼特色？

*  原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。

*  原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

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

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

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

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

網站重構的理解？

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

對於傳統的網站來講重構一般是：

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

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

對於移動平臺的優化

針對於SEO進行優化

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

減小代碼間的耦合

讓代碼保持彈性

嚴格按規範編寫代碼

設計可擴展的API

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

加強用戶體驗

一般來講對於速度的優化也包含在重構中

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

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

採用CDN來加速資源加載

對於JS DOM的優化

HTTP服務器的文件緩存

如何獲取UA？

<script>

    function whatBrowser() {

        document.Browser.Name.value=navigator.appName;

        document.Browser.Version.value=navigator.appVersion;

        document.Browser.Code.value=navigator.appCodeName;

        document.Browser.Agent.value=navigator.userAgent;

</script>

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 服務器端暫時沒法處理請求（多是過載或維護）。

說說TCP傳輸的三次握手策略

爲了準確無誤地把數據送達目標處，TCP協議採用了三次握手策略。用TCP協議把數據包送出去後，TCP不會對傳送  後的狀況置之不理，它必定會向對方確認是否成功送達。握手過程當中使用了TCP的標誌：SYN和ACK。

發送端首先發送一個帶SYN標誌的數據包給對方。接收端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息。最後，發送端再回傳一個帶ACK標誌的數據包，表明「握手」結束

若在握手過程當中某個階段莫名中斷，TCP協議會再次以相同的順序發送相同的數據包。

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

Javascript垃圾回收方法

標記清除（mark and sweep）

這是 JavaScript 最多見的垃圾回收方式，當變量進入執行環境的時候，好比函數中聲明一個變量，垃圾回收器將其標記爲「進入環境」，當變量離開環境的時候（函數執行結束）將其標記爲「離開環境」。

垃圾回收器會在運行的時候給存儲在內存中的全部變量加上標記，而後去掉環境中的變量以及被環境中變量所引用的變量（閉包），在這些完成以後仍存在標記的就是要刪除的變量了

引用計數(reference counting)

在低版本 IE 中常常會出現內存泄露，不少時候就是由於其採用引用計數方式進行垃圾回收。引用計數的策略是跟蹤記錄每一個值被使用的次數，當聲明瞭一個 變量並將一個引用類型賦值給該變量的時候這個值的引用次數就加1，若是該變量的值變成了另一個，則這個值得引用次數減1，當這個值的引用次數變爲0的時 候，說明沒有變量在使用，這個值無法被訪問了，所以能夠將其佔用的空間回收，這樣垃圾回收器會在運行的時候清理掉引用次數爲0的值佔用的空間。

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

談談性能優化問題

代碼層面：避免使用css表達式，避免使用高級選擇器，通配選擇器。 緩存利用：緩存Ajax，使用CDN，使用外部js和css文件以便緩存，添加Expires頭，服務端配置Etag，減小DNS查找等 請求數量：合併樣式和腳本，使用css圖片精靈，初始首屏以外的圖片資源按需加載，靜態資源延遲加載。 請求帶寬：壓縮文件，開啓GZIP，

移動端性能優化

儘可能使用 css3 動畫，開啓硬件加速。適當使用 touch 事件代替 click 事件。避免使用 css3 漸變陰影效果。 儘量少的使用 box-shadow 與 gradients 。 box-shadow 與 gradients 每每都是頁面的性能殺手

什麼是Etag？

瀏覽器下載組件的時候，會將它們存儲到瀏覽器緩存中。若是須要再次獲取相同的組件，瀏覽器將檢查組件的緩存時間， 假如已通過期，那麼瀏覽器將發送一個條件GET請求到服務器，服務器判斷緩存還有效，則發送一個304響應， 告訴瀏覽器能夠重用緩存組件。

那麼服務器是根據什麼判斷緩存是否還有效呢?答案有兩種方式，一種是前面提到的ETag，另外一種是根據 Last-Modified

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

關於Http 2.0 你知道多少？

HTTP/2 引入了「服務端推（serverpush）」的概念，它容許服務端在客戶端須要數據以前就主動地將數據發送到客戶端緩存中，從而提升性能。  
HTTP/2 提供更多的加密支持  HTTP/2 使用多路技術，容許多個消息在一個鏈接上同時交差。 它增長了頭壓縮（header compression），所以即便很是小的請求，其請求和響應的
 header 都只會佔用很小比例的帶寬。

http與https的區別

https協議須要到ca申請證書，通常免費證書不多，須要交費。

　　http是超文本傳輸協議，信息是明文傳輸，https 則是具備安全性的ssl加密傳輸協議

　　http和https使用的是徹底不一樣的鏈接方式用的端口也不同,前者是80,後者是443。

　　http的鏈接很簡單,是無狀態的

　　HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網絡協議 要比http協議安全

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。