前端面試題

時間 2019-11-12

標籤端面試題简体版

原文原文鏈接

一、列舉3個HTML5標籤，3個CSS3新特性，3個ECMAScript 5新API。
<canvas> <video> <audio>
div圓角，陰影效果，媒體查詢
Array.isArray
Array.IndexOf
Array.lastIndexOfjavascript

二、2種方式，實現某DIV元素以50px每秒的速度左移100px。php

三、怎樣實現javascript代碼的異步加載
html5提供了一個async的屬性
javascript有一個defer屬性
區別：前者不能保證加載的js文件能按照順序執行，因此兩個js文件不能相互依賴css

八、用JS實現一個數組合並的方法（要求去重）。
Array.prototype.hebing=function(arr2){
var arr=this.concat(arr2);
for(var i=0;i<arr.length;i++){
for(var j=i+1;j<arr.length;j++){
if(arr[i]==arr[j]){
arr.splice[j,1];
j--;
}
}
}

}html

九、使用正則表達式給全部string對象添加trim方法。
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,'')
}
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g,'');
}前端

十二、列舉你常常訪問的前端技術網站，並簡單描述一下本身的職業規劃。html5

開源中國
java

<b>和<strong>區別：HTML 標籤 <b> 的意思是「bold」（粗體），它是一個單純的樣式標籤，指定文本要用粗體。<strong> 是
一個帶有着重意味的標籤，瀏覽器一般也把它顯示爲粗體。node

3）font-family:Tahoma;font-size:14px;line-height:22px;font-weight:bold;寫出CSS的縮寫
font:bold 14px/22px Tahoma;mysql

5）說說CSS Sprite的優缺點
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，
「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。
優勢：
1.利用CSS Sprites能很好地減小網頁的http請求；
2.CSS Sprites能減小圖片的字節；
3.解決了FE在圖片命名上的困擾；
4.更換風格方便。
缺點：
1.在圖片合併的形成多餘的工做量；
2.開發過程當中定位的麻煩；
3.修改麻煩，維護複雜
6）說說em和strong標籤的語義
em 表示強調，strong 表示更強烈的強調
em 是句意強調，加與不加會引發語義變化。
strong 是重要性強調，和局部仍是全局無關jquery

附：（一些零散的面試題，大概記滴(*^__^*) ）
11）頁面上有些圖片須要放到最後加載，請基於jquery寫一段大體的實現方法
13）用css實現鼠標懸浮在a元素上1秒後文字顏色變紅
14）如何實現僅加載可視區域內的圖片

15）用json表示一個數組，每一個數組元素是一個對象，每一個對象有兩個屬性
16）用json表示一個樹結構（遞歸）
17）http請求狀態碼錶示的意義
18）form標籤裏還有哪些屬性
19）表單中有一些checkbox該如何提交值，name同樣嗎
一組複選框（checkbox）：通常將name設置爲name[]，若是被選中，則在數組name中添加一個元素，在處理頁面將以下獲取值:
if(!empty($_POST['name'])){
for($i=0; $i< count($_POST['name']); $i++){
echo $array[$i].'<br />';
}
}

三大類：HTML,CSS,Javascript(jquery)

HTML:
1. 什麼是語義化的HTML?有何意義？爲何要作到語義化？（高頻率考題）

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤（代碼語義化），
可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。

有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁的權重。
在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。
便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協調能力。
支持多終端設備的瀏覽器渲染。

2. 行內元素和塊元素分別有哪些？（高頻率）
行內元素：a span strong textarea
塊元素：div p ul ol li

3. 嚴格模式與混雜模式的區分？如何觸發這兩種模式？（高頻率）
在標準模式中，瀏覽器根據規範呈現頁面；在混雜模式中，頁面以一種比較寬鬆的向後兼容的方式顯示。
瀏覽器根據DOCTYPE是否存在以及使用的哪一種DTD來選擇要使用的呈現方法。若是XHTML文檔包含形式完整的DOCTYPE，
那麼它通常以標準模式呈現,對於HTML 4.01文檔，包含嚴格DTD的DOCTYPE經常致使頁面以標準模式呈現。
包含過渡DTD和URI的DOCTYPE也致使頁面以標準模式呈現，可是有過渡DTD而沒有URI會致使頁面以混雜模式呈現。
DOCTYPE不存在或形式不正確會致使HTML和XHTML文檔以混雜模式呈現。

4. Doctype 是什麼？有啥做用
DOCTYPE標籤是一種標準通用標記語言的文檔類型聲明，它的目的是要告訴標準通用標記語言解析器，
它應該使用什麼樣的文檔類型定義（DTD）來解析文檔。

5. HTML與XHTML的區別
本質上無太大區別，XHTML 元素必須被正確地嵌套。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
空標籤也必須被關閉
XHTML 文檔必須擁有根元素：全部的 XHTML 元素必須被嵌套於 <html> 根元素中。

8. Img的alt和title有啥區別？各自做用？
alt屬性是在你的圖片由於某種緣由不能加載時在頁面顯示的提示信息，它會直接輸出在本來加載圖片的地方，
而title屬性是在你鼠標懸停在該圖片上時顯示一個小提示，鼠標離開就沒有了

9. HTML5的離線儲存
jakii.manifest
{
CACHE MANIFEST
CACHE 1.html //須要緩存的文件
NETWORK 2.html //不須要緩存的文件

}

10. iframe有那些缺點？、
SEO不友好
用戶不友好（框架結構有時會讓人感到迷惑）
連接導航問題（必須正確設置連接，否則讓用戶很麻煩）

CSS:
2. CSS的導入方式：import與link方式的區別？優缺點？（高頻率）
link屬於XHTML標籤，而@import徹底是CSS提供的一種方式
加載順序的差異。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候），
link引用的CSS會同時被加載，而@import引用的CSS會等到頁面所有被下載完再被加載
兼容性的差異，link兼容性更好
@import不是dom能夠控制的

3. CSS的優先級？內聯和important哪一個優先級高？（高頻率）
important優先級高

5. 浮動元素清除浮動方法（高頻率）
①使用無心義標籤，好比：<p></p>,給p設置css樣式：clear:both;
②使用overflow標籤，在須要清除浮動的元素的父元素裏面添加css樣式：overflow：auto;

8. 談談CSS3 Media Queries
@media screen and (max-width: 600px) {
.class {
background: #ccc;
}
}
也能夠在引入外部css時候在link標籤裏面添加media屬性

10.談談CSS hack
CSS hack因爲不一樣廠商的瀏覽器，好比Internet Explorer,Safari,Mozilla Firefox,Chrome等，
或者是同一廠商的瀏覽器的不一樣版本，如IE6和IE7，對CSS的解析認識不徹底同樣，所以會致使生成的頁面效果不同，
得不到咱們所須要的頁面效果。這個時候咱們就須要針對不一樣的瀏覽器去寫不一樣的CSS，讓它可以同時兼容不一樣的瀏覽器，
能在不一樣的瀏覽器中也能獲得咱們想要的頁面效果。
簡單的說，CSS hack的目的就是使你的CSS代碼兼容不一樣的瀏覽器。固然，
咱們也能夠反過來利用CSS hack爲不一樣版本的瀏覽器定製編寫不一樣的CSS效果。
11.CSS中em和px的關係和區別
px像素（Pixel）。相對長度單位。像素px是相對於顯示器屏幕分辨率而言的。
em是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸

Javascript：

7. 編寫一個JavaScript函數 parseQueryString，它的用途是把URL參數解析爲一個對象
varobj = parseQueryString(url);
alert(obj.key0) // 輸出0

function parseQueryString(url){
var obj={};
var start=url.indexOf('?')+1;
var str=url.substr(start);
var arr=str.split('&');
for(var i=0;i<arr.length;i++){
var arr2=arr[i].split('=');
obj[arr2[0]]=arr2[1];
}

return obj;

}

function getObj(url){
var obj={};
var start=url.indexOf('?')+1;
var str1=url.substr(start);
var arr1=str1.split('&');
for(var i=0;i<arr1.length;i++){
tmp=arr1[i].split('=');
obj[tmp[0]]=tmp[1];
}
return obj;
}

10.Var a = ‘abc def ghi’,把每三個字中的首字母轉爲大寫。
var a = "abc def ghi";
var arr1=a.split(' ');
for(var i=0;i<arr1.length;i++){
var tmp=arr1[i].split('');
tmp.unshift(tmp.shift().toUpperCase());
arr1[i]=tmp.join('');
}

var b=arr1[0].concat(' ',arr1[1],' ',arr1[2] );
alert(b);

12.JSON與XML的區別？優缺點？
14.寫一個點擊input可以彈出當前input索引的函數。
var inputs=document.getElementsByTagName('input');
for(var i=0;i<inputs.length;i++){
(function(){
var that=i;
inputs[that].onclick=function(){
alert(that);}
})(i);
}

15.==與===的區別
對於string,number等基礎類型，==和===是有區別的
不一樣類型間比較，==之比較「轉化成同一類型後的值」看「值」是否相等，===若是類型不一樣，其結果就是不等
同類型比較，直接進行「值」比較，二者結果同樣

16.Null與undefined的區別
null表示"沒有對象"，即該處不該該有值
undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義

18.Eval是啥？談談對它的理解
eval是把字符串當成javascript代碼解析

其餘：

2. 網站性能優化的方法（高頻率）
後臺：用memcached緩存
頁面靜態化
mysql優化
前臺：將CSS放在頁面頂端，JS文件放在頁面底端
使用gzip壓縮網頁內容
儘可能減小外部腳本的使用，減小javascript腳本的使用
sprite
3. 響應式佈局（高頻率）：就是一個網站可以兼容多個終端
4. 前端由哪些部分組成（高頻率）
UI設計部分
html/css頁面靜態化
javascript客戶端動態化
多媒體化

5. W3C標準是啥：結構（Structure）、表現（Presentation）和行爲（Behavior）的一系列標準合集

7. 爲何利用多個域名來提供網站資源會更有效？
節約主域名的鏈接數，避免了大圖片之類的並不必定重要的內容阻塞住主域名上其餘後續資源的鏈接（好比ajax請求）。

1五、前端頁面有哪三層構成，分別是什麼?做用是什麼?
結構層 Html 表示層 CSS 行爲層 js
1六、你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?
Ie(Ie內核) 火狐（Gecko）谷歌（webkit） opear(Presto) safria

1.javascript的typeof返回哪些數據類型
Object number String function boolean underfind

2.例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt,parseFloat,number）
隱式（== – ===）

三、ajax請求時，如何解釋json數據？
使用JSON.parse();
四、事件委託是什麼？
讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

18.javascript的本地對象，內置對象和宿主對象
本地對象爲array obj regexp等能夠new實例化
內置對象爲gload Math 等不能夠實例化的
宿主爲瀏覽器自帶的document,window 等

19.document load 和document ready的區別
Document.onload 是在結構和樣式加載完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

20，indexOf:查找某個字符在字符串裏面位置
charAt:查找某個位置的字符串
21.fixed relative absolute static 定位區別

static：沒有定位
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它本來所佔的空間仍保留。相對於原先的位置的移動
absolute
元素框從文檔流徹底刪除，並相對於其包含塊定位。包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉，就好像元素原來不存在同樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
fixed
元素框的表現相似於將 position 設置爲 absolute，不過其包含塊是視窗自己。

2二、css屬性overflow屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。正確

2三、 flash和js經過什麼類如何交互?
ExternalInterface

24，關於跨域的理解：經過修改document.domain來跨子域
使用window.name來進行跨域
域名、端口相同，協議不一樣，屬於相同的域（錯誤）

25，寫出結果：
<SCRIPT LANGUAGE=""JavaScript>
var a="undefined";
var b="false";
var c="";
function assert(aVar){
if(aVar)
alert(true);
else
alert(false);
}
assert(a);
assert(b);
assert(c);
</SCRIPT>
true true false

26.domContentLoaded事件早於onload事件
HTTP狀態碼302表示暫時性轉移
IE6/7/8不支持事件捕獲

27，HTML5的離線儲存？
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；sessionStorage 數據在瀏覽器關閉後自動刪除。

2八、語義化的理解？
用正確的標籤作正確的事情！html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

2九、怎樣讓一個浮動的div水平居中：外邊套一個div便可
怎樣讓一個div垂直居中？
div{
position:absolute;
width:100px;
height:100px;
top:50%;
margin-top:-50px;
}

30,Node.js的適用場景？
高併發、聊天、實時消息推送

3一、IE與火狐的事件機制有什麼區別？如何阻止冒泡？
事件處理機制：IE是事件冒泡、火狐是事件捕獲； ev.stopPropagation();

3二、"use strict";是什麼意思 ? 使用它的好處和壞處分別是什麼？
好處：消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;- 消除代碼運行的一些不安全之處，
保證代碼運行的安全；- 爲將來新版本的Javascript作好鋪墊。
壞處：如今網站的JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被 merge 後，
這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節

3三、DOM結構——兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。
當前對象爲node
返回父節點：node.parentNode
返回全部子節點：node.childNodes（包含文本節點及標籤節點）
返回第一個子節點：node.firstChild
返回最後一個子節點： node.lastChild
返回同屬上一個子節點：node.nextSibling
返回同屬下一個子節點：node.previousSibling

3四、new操做符具體幹了什麼呢?
一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
二、屬性和方法被加入到 this 引用的對象中。

3五、模塊化怎麼作？
當即執行函數,不暴露私有成員

3六、jquery是怎麼實現json轉爲字符串再轉換回去的
jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：
$.fn.stringifyArray = function(array)
{
return JSON.stringify(array)

}
$.fn.parseArray = function(array)
{
return JSON.parse(array)
}

3七、
什麼是漸進加強（progressive enhancement）、優雅降級（graceful degradation）呢？

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

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

　　區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。

3八、對Node的優勢和缺點提出了本身的見解？
*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

3九、優化網站性能方法：
（1）減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存，圖片服務器。
（3）使用外部js+css，能夠被緩存。
（4）當須要設置的樣式不少時設置className而不是直接操做style。
（5）少用全局變量、緩存DOM節點查找的結果。
（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。
（7）圖片預加載，將樣式表放在頂部，將腳本放在底部
（8）避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。
40、var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
alert('1.' + this.name);
return function(){
return this.name;
};
}
};
var func = object.getNameFunc();//1+my object
alert('2.' + func()); //2+the window
alert('3.' + func.call(object));//3+my object
alert('4.' + func.apply(object));//4+my object

4一、用js實現一個電話號碼提取的方法。
例如：" 1852145998 020-888-999845 測試 021 - 85421987, 19865754"
獲得的結果應該是[1852145998, 020-888-999845 , 021 - 85421987, 19865754]

var str='1852145998 020-888-999845 測試 021 - 85421987, 19865754';
var reg=/(1\d+)|(0\d{2}(\s*-\s*\d+)+)/g;
alert(str.match(re));

4二、從輸入網址，到用戶看到頁面，發生了什麼？？
①瀏覽器分析連接指向頁面url
②瀏覽器向DNS請求解析對於網址的ip地址
③域名系統的DNS解析出對應服務器的ip地址
④瀏覽器與對應服務器創建TCP鏈接
⑤瀏覽器發出取文件命令
⑥服務器給出響應，把文件發給瀏覽器
⑦釋放TCP鏈接，瀏覽器顯示網頁

4三、javascript變量聲明提高：當前做用域內的聲明都會提高到做用域的最前面，包括變量和函數的聲明
（即詞法分析原則）

4五、ajax跨域方法及其原理詳解：
①jsonp方法：用一個<script>標籤，引用其它域的js文件來
②經過修改document.domain來跨子域：iframe不一樣頁面之間是不一樣域的，咱們能夠在兩個頁面都顯式寫上
document.domain='相同的域名'，該相同的域名必須是自身或者父域名
當要獲取其它域名的東西時候，能夠設置一個隱藏的iframe
③使用window.name來進行跨域：window對象有個name屬性，該屬性有個特徵：即在一個窗口(window)的生命週期內,
窗口載入的全部的頁面都是共享一個window.name的，每一個頁面對window.name都有讀寫的權限，window.name是持久
存在一個窗口載入過的全部頁面中的，並不會因新頁面的載入而進行重置。
④使用代理服務器文件：好比php等

4六、jquery自定義組件：
$.extend : 擴展工具方法下的插件形式 $.xxx() $.yyy()
$.fn.extend : 擴展到JQ對象下的插件形式 $().xxx() $().yyy()

①//擴展一個去左空格和去右空格的插件
$.extend({
leftTrim : function(str){
return str.replace(/^\s+/,'');
},
rightTrim : function(){},
aaa : function(){
alert(1);
},
bbb : function(){}
});
//使用：$.leftTrim(str);
②//編寫拖拽插件：此處this指的是$('#div1'),其他地方與jquery一致
$.fn.extend({

drag : function(){
//this : $('#div1')
var disX = 0;
var disY = 0;

var This = this;

this.mousedown(function(ev){

disX = ev.pageX - $(this).offset().left;
disY = ev.pageY - $(this).offset().top;

$(document).mousemove(function(ev){

This.css('left' , ev.pageX - disX);
This.css('top' , ev.pageY - disY);

});

$(document).mouseup(function(){
$(this).off();
});

return false;
});
}
});

4七、迴流與重繪：
瀏覽器呈現頁面過程：html造成dom樹，css造成樣式結構體，而後二者合成remder tree（渲染樹），既包括內容，又包括樣式，但
不包括隱藏的元素，由於不影響佈局

1. 當render tree中的一部分(或所有)由於元素的規模尺寸，佈局，隱藏等改變而須要從新構建。這就稱爲迴流(reflow)。
每一個頁面至少須要一次迴流，就是在頁面第一次加載的時候。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，
並從新構造這部分渲染樹，完成迴流後，瀏覽器會從新繪製受影響的部分到屏幕中，該過程成爲重繪。

2. 當render tree中的一些元素須要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，
好比background-color。則就叫稱爲重繪。

注意：迴流必將引發重繪，而重繪不必定會引發迴流。
迴流的花銷也不小，若是每句JS操做都去迴流重繪的話，瀏覽器可能就會受不了
注意：瀏覽器作了一些優化，如果本身操做屬性，會提早flush渲染隊列。所以須要手動優化，
方法以下：①直接改變className
②讓要操做的元素進行」離線處理」，處理完後一塊兒更新
a）使用DocumentFragment進行緩存操做,引起一次迴流和重繪
b) 使用display:none技術，只引起兩次迴流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術，引起一次迴流和重繪；
③不要常常訪問會引發瀏覽器flush隊列的屬性，若是你確實要訪問，利用緩存（用一個變量緩存須要操做的屬性）
④讓元素脫離動畫流，減小回流的Render Tree的規模

4八、異步加載js文件方法：①jquery的getscript()方法
②用ajax方法

4九、http狀態碼：1xx:須要客戶端進行下一步動做才能響應
2xx:服務器響應成功
3xx：重定向
4xx：客戶端出錯
5xx:服務器端錯誤

50、ajax過程：
(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

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

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

(4)發送HTTP請求.

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

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

5一、web前端安全問題：XSS：跨域，客戶端執行：利用服務器返回客戶端輸入錯誤信息而輸入<script>代碼段，在客戶端執行從而攻擊
CSRF：利用服務器對用戶的信任來攻擊（本地已經有cookie）
sql注入：

5二、ie各版本和chrome能夠並行下載多少個資源
ie6兩個，其他6個

5三、說幾個常見的兼容問題？
阻止瀏覽器默認行爲
阻止冒泡
事件處理
height：100px；（ie6，ie7，火狐都不一樣）
盒子模型等

5四、網頁瀏覽速度慢排查緣由？
①網站服務器慢：ping url -t
②網絡較慢
③是否有錯誤代碼或者較大圖片或者視頻

5五、html檢查工具（HTML Tidy）

5六、（1）第一次握手：創建鏈接時，客戶端A發送SYN包（SYN=j）到服務器B，並進入SYN_SEND狀態，等待服務器B確認。

（2）第二次握手：服務器B收到SYN包，必須確認客戶A的SYN（ACK=j+1），同時本身也發送一個SYN包（SYN=k），即SYN+ACK包，此時服務器B進入SYN_RECV狀態。

（3）第三次握手：客戶端A收到服務器B的SYN＋ACK包，向服務器B發送確認包ACK（ACK=k+1），此包發送完畢，客戶端A和服務器B進入ESTABLISHED狀態，完成三次握手。

完成三次握手，客戶端與服務器開始傳送數據。

5七、（1）客戶端A發送一個FIN，用來關閉客戶A到服務器B的數據傳送。

（2）服務器B收到這個FIN，它發回一個ACK。

（3）服務器B關閉與客戶端A的鏈接，發送一個FIN給客戶端A。

（4）客戶端A發回ACK報文確認。

5八、請用CSS定義p標籤，要求實現如下效果: 字體顏色在IE6下爲黑色(#000000)；IE7下爲紅色(#ff0000)；而其餘瀏覽器下爲綠色(#00ff00)。
p{color:#0f0}
*p{color:#000}//ie6
_p{color:#f00}//ie7

5九、var Obj = function(msg){
this.msg = msg;
this.shout = function(){
alert(this.msg);
}
this.waitAndShout = function(){
//隔五秒鐘後執行上面的shout方法
}
}

60、Sea.js是一個很純粹小巧的模塊加載器，它只解決一個問題：前端代碼的模塊化。經過Sea.js，能夠將大量JavaScript代碼封裝成一個個小模塊，
而後輕鬆實現模塊的加載和依賴管理。

6一、CORS:
CORS定義一種跨域訪問的機制，可讓AJAX實現跨域訪問。CORS 容許一個域上的網絡應用向另外一個域提交跨域 AJAX 請求。
實現此功能很是簡單，只需由服務器發送一個響應標頭便可。
假設咱們頁面或者應用已在 http://www.test1.com 上了，而咱們打算從 http://www.test2.com 請求提取數據。通常狀況下，
若是咱們直接使用 AJAX 來請求將會失敗，瀏覽器也會返回「源不匹配」的錯誤，"跨域"也就以此由來。
　　利用 CORS，http://www.test2.com 只需添加一個標頭，就能夠容許來自 http://www.test1.com 的請求，下圖是我在PHP中的 hander() 設置，
「*」號表示容許任何域向咱們的服務端提交請求：

HTML5標籤兼容各個瀏覽器：
<script>
(function() {
if (!
/*@cc_on!@*/
0) return;
var e = "abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(', ');
var i= e.length;
while (i--){
document.createElement(e[i])
}
})()
</script>

HTML5 本地存儲?
localstorage: 存儲大
sessionStorage
cookie：存儲小

HTTP 狀態碼？
200 成功
304 響應禁止包含消息體
500 服務器錯誤
404 頁面不存在
300 重定向

前端開發優化方法：
一、圖片優化 - 雪碧圖
二、css 優化 - 簡化代碼、壓縮代碼
三、js優化 - 模塊化開發

ajax：
什麼是 AJAX ？
AJAX = 異步 JavaScript 和 XML。
AJAX 是一種用於建立快速動態網頁的技術。
經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。
這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。

ajax 的交互模型？

基於數據緩存策略Ajax的人機交互模型
實現頁面與服務器數據交互，從而使頁面局部刷新。

同步和異步的區別？

同步是阻塞模式，異步是非阻塞模式。
同步：腳本會停留並等待服務器發送回覆而後再繼續
　異步：腳本容許頁面繼續其進程並處理可能的回覆

如何解決跨域問題？
前端對於跨域的解決辦法：
　　 (1) document.domain+iframe
　　 (2) 動態建立script標籤

字符串經常使用的方法？（http://www.jb51.net/article/29547.htm）
一、charCodeAt方法返回一個整數，表明指定位置字符的Unicode編碼。
二、fromCharCode方法從一些Unicode字符串中返回一個字符串。
三、charAt方法返回指定索引位置處的字符。若是超出有效範圍的索引值返回空字符串。
四、slice方法返回字符串的片斷。
五、substring方法返回位於String對象中指定位置的子字符串。
六、substr方法返回一個從指定位置開始的指定長度的子字符串。
七、indexOf方法放回String對象內第一次出現子字符串位置。若是沒有找到子字符串，則返回-1。
八、lastIndexOf方法返回String對象中字符串最後出現的位置。若是沒有匹配到子字符串，則返回-1。
九、search方法返回與正則表達式查找內容匹配的第一個字符串的位置
十、concat方法返回字符串值，該值包含了兩個或多個提供的字符串的鏈接。
十一、將一個字符串分割爲子字符串，而後將結果做爲字符串數組返回。
十二、toLowerCase方法返回一個字符串，該字符串中的字母被轉換成小寫。
1三、toUpperCase方法返回一個字符串，該字符串中的全部字母都被轉換爲大寫字母。

數組經常使用的方法？（http://www.jb51.net/article/40503.htm）

1.shift()t:刪除數組的第一個元素,返回刪除的值。這裏是0

2.unshift(3,4):把參數加載數組的前面，返回數組的長度。如今list:中是3,4,0,1,2

3.pop():刪除數組的最後一個元素，返回刪除的值。這裏是2.

4.push(3):將參數加載到數組的最後，返回數組的長度，如今List中時：0,1,2,3

5.concat(3,4):把兩個數組拼接起來。

js數組與字符串之間的轉換？

1、數組轉字符串須要將數組元素用某個字符鏈接成字符串，示例代碼以下：

1 var a, b;
2 a = new Array(0,1,2,3,4);
3 b = a.join("-");

2、字符串轉數組實現方法爲將字符串按某個字符切割成若干個字符串，並以數組形式返回，示例代碼以下：

1 var s = "abc,abcd,aaa";
2 ss = s.split(",");// 在每一個逗號(,)處進行分解。

animations動畫與transition動畫的區別？

transition屬性是一個簡單的動畫屬性，很是簡單很是容易用。能夠說它是animation的簡化版本，是給普通作簡單網頁特效用的。
若是在transition的動畫當中，屬性值有了新的變化，則會中斷當前的動畫執行，並將中斷時的屬性值提供給新的動畫做爲起始值來計算新的動畫效果。

animations動畫是transition屬性的擴展。可是這個簡單的介紹裏面包含了不簡單的東西：keyframes。
animation則根據這個keyframes提供的屬性變化方式去計算元素動畫當中的屬性。
與 transition 不一樣的是，keyframes提供更多的控制，尤爲是時間軸的控制，
這點讓css animation更增強大，使得flash的部分動畫效果能夠由css直接控制完成，
而這一切，僅僅只須要幾行代碼，也所以誕生了大量（比起flash來講算是大量了）
基於css的animation tools，用來取代flash的動畫部分。
另外在animation屬性裏面還有一個最重要的就是：animation-fill-mode，
這個屬性標示是以(from/0%)指定的樣式仍是以(to/100%)指定的樣式爲動畫完成以後的樣式。
這個很方便咱們控制動畫的結尾樣式，保證動畫的總體連貫。

什麼是響應式佈局？

響應式佈局：簡單點說，就是作一個網站同時能兼容多個終端，由一個網站轉變成多個網站，爲咱們大大節省了資源。
那麼響應式佈局的優勢和缺點又有哪些呢？
優勢：1.面對不一樣分辨率設備靈活性強
2.可以快捷解決多設備顯示適應問題
缺點：不能徹底兼容全部瀏覽器，代碼累贅，加載時間加長。

響應式佈局的開發原理是什麼？
原理：簡單點說響應式佈局它是經過CSS中Media Query（媒介查詢）@media功能，來判斷咱們的終端設備寬度在多少像素內，而後就執行與之對應的CSS樣式。

HTML5經常使用的框架有哪些？

bootstrap【http://www.runoob.com/bootstrap/bootstrap-tutorial.html】
jq mobile【http://www.runoob.com/jquerymobile/jquerymobile-tutorial.html】
easyui【http://www.runoob.com/jeasyui/jqueryeasyui-tutorial.html】

說出下面函數的執行結果

var a=10;
fun()
function fun(){
var a =a+10;
console.log(a);
return(a)
}
console.log(a)
console.log(fun())
}

看看下面alert的結果是什麼？

function b(x,y,a){
arguments[2]=10;(arguments像數組，並非真的數組，是一個Arguments對象能夠表明傳給函數的參數的個數)
alert(a)
}
b(1,2,3)

什麼是閉包？

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

編寫一個方法求一個字符串的字節長度
<script language="javascript" type="text/javascript">
new function(s)
{
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i<s.length;i++)
{
if(s.charCodeAt(i)>255) l+=2;
else l++;
}
alert(l);
}("你");
</script>

arguments 參數的集合
arguments[0]表明第一個參數
arguments.length表明參數的個數
!s s是參數 if(!s)是說參數不存在,執行return null;
charCodeAt() 方法可返回指定位置的字符的 Unicode 編碼。這個返回值是 0 - 65535 之間的整數。

編寫一個方法，去掉一個數組中的重複元素？

var s = [0,2,3,4,4,0,2];
for(var i=0,o={},tmp=[],count=0,l=s.length;i<l;i++){
if(o[s[i]]){
count++;
}else{
o[s[i]]=1;
tmp.push(s[i])
}
}
alert(count);
alert(tmp)

去除字符串先後空格的辦法？

var word = " good ";
word = word.replace(/(^\s*)(\s*$)/g, "");
alert(word);

用js編寫一個方法,每次返回從1到100的任意整數

頁面上有我的在選中圖片而且把它選中的圖片提交給後臺;