1、列舉幾種后端通訊的方法，分別使用的場景。
跨域請求存在的原因：由於瀏覽器的同源策略，即屬於不同域的頁面之間不能相互訪問各自的頁面內容。
跨域的場景：
1.域名不同 www.yangwei.com 和www.wuyu.com 即為不同的域名）
2.二級域名相同，子域名不同（www.wuhan.yangwei.com www.shenzheng.yangwei.com 為子域不同）
3.端口不同，協議不同 （ http://www.yangwei.com 和https://www.yangwei.com屬於跨域www.yangwei.con:8888和www.yangwei.con:8080)
跨域的方式：（內容較多，需掌握CORS和jsonp，其他內容也要了解）
1.前端的方式: possMessage，window.name,document.domain,image.src(得不到數據返回)，jsonP(script.src后台不配合得不到數據返回)，style.href（得不到數據返回)
一.imge.src,script.src,style.href 不受同源策略的影響可以加載其他域的資源，可以用這個特性，向服務器發送數據。最常用的就是使用image.src 向服務器發送前端的錯誤信息。image.src 和style.href 是無法獲取服務器的數據返回的，script.src 服務器端配合可以得到數據返回。
二possMessage,window.name,document.domain 是兩個窗口直接相互傳遞數據。
（1）possMessage 是HTML5中新增的，使用限制是 必須獲得窗口的window 引用。IE8+支持，firefox，chrome,safair,opera支持
（2）window.name ，在一個頁面中打開另一個頁面時，window.name 是共享的，所以可以通過window.name 來傳遞數據，window.name的限制大小是2M，這個所有瀏覽器都支持,且沒有什么限制。
3） document.domain 將兩個頁面的document.domain 設置成相同，document.domain 只能設置成父級域名，既可以訪問，使用限制：這頂級域名必須相同
2.純后端方式: CORS，服務器代理
CORS 是w3c標准的方式，通過在web服務器端設置：響應頭Access-Cntrol-Alow-Origin 來指定哪些域可以訪問本域的數據，ie8&9(XDomainRequest),10+,chrom4 ，firefox3.5,safair4，opera12支持這種方式。
服務器代理，同源策略只存在瀏覽器端，通過服務器轉發請求可以達到跨域請求的目的，劣勢：增加服務器的負擔，且訪問速度慢。
3.前后端結合:JsonP
script.src 不受同源策略的限制，所以可以動態的創建script標簽，將要請求數據的域寫在src 中參數中附帶回調的方法，服務器端返回回調函數的字符串，並帶參數。
如 script.src="http://www.yangwei.com/?id=001&callback=getInfoCallback,服務器端返回 getInfoCallBack("name:yangwei;age:18") 這段代碼會直接執行，在前面定義好getInfoCallBack函數，既可以獲得數據並解析。 這種是最長見的方式。
4.webSocke（了解性拓展）
應用場景
都可以進行服務端推送,並且都是使用長連接來進行.但兩者的實現又有一點不同,sse仍使用http協議,並且使用相同的鏈接發送正常的http協議報文.而websocket是使用http協議進行握手,然后再使用同一個鏈接進行websocket協議的通信.
websocket可以進行雙向的通信,即服務端可以往客戶端發信息,客戶端也可以向服務端發信息.而sse是單向的,只能由服務端往客戶端發.
websocket自帶連接的保持,即通過ping/pong協議保證連接可以始終維持,sse沒有這個保證,不過可以參考ping/pong協議,自己周期性地發送信息來同樣地進行處理.比如,5秒往客戶端發一個特別的信息(通過type/name進行區分).其次,因為是基於瀏覽器的使用,sse有一個特性,就是瀏覽器發現一個連接斷掉了,就會自動地進行重聯,即重新發送請求.這樣,服務端也不用擔心連接被斷開,不過需要處理新的請求必須和上一次請求的內容相連續,以及新的推送注冊.
因為都是使用http協議進行起始處理,因此在簽權上都可以使用到http協議本身的一些東西,比如header/cookie簽權.在相應的握手階段,通過讀取cookie(session)來保證相應的請求必須是經過授權的,也可以用於定位使用人.甚至可以通過這些信息保證單個用戶只能有一個請求,避免重復請求
由於都是基於瀏覽器使用,因此建議的數據傳輸都是文本型.雖然websocket支持二進制frame傳輸,不過一些都不建議使用.sse只能傳輸文本
不管是websocket還是sse,在用於通信時,都建議只用於進行數據的推送,而不是進行完整的應用處理.這里可以理解為,常規的業務處理仍然交給后端的服務來處理.這樣,即可以使用之前的業務開發的優勢,又可以使用推送的優勢.而不是走向另一個級端,即所有的信息都想通過推送來傳遞.
開發方式
websocket開發首選netty,因為netty對協議的封裝已經做到了完全的支持.通過 HttpServerCodec作為握手協議,WebSocketServerProtocolHandler作為協議處理,然后再加一個自己的handler,就完成了相應的業務處理.同時在性能上,netty在一個ws的請求建立起來之后,會自動地去除httpServerCodec相關的handler,這樣保證后續的處理都是按照ws的協議來進行.
sse開發首選jersey,jersey-media-sse提供了相應的sse支持,並且通過與rest相集成,開發一個sse就跟普通的業務開發相同.
ws和sse在文本支持上都只支持utf-8編碼,因此在處理上需要注冊編碼方式.同時在使用sse時,如果后端第一次進行響應時,相應的編碼不對.chrome會直接報錯,包括utf8都會報錯(這是之前后端開發的一個問題),可以修正或者增加相應的攔截器,保證后端content-type響應中的charset=UTF-8.
ws和sse都可以通過nginx進行代理轉發.ws的處理只需要設置http版本,以及重新轉發前端的Upgrade和Connection頭即可.而sse,也可以通過禁用buffer來處理.參考 http://stackoverflow.com/questions/27898622/server-sent-events-stopped-work-after-enabling-ssl-on-proxy
特定實現
為保證在開發時推送類的和業務類的系統不會耦合在一起,或者同一個應用內有兩種處理模式的功能存在.建議直接在系統層就開發2個不同的系統,一個專門用於推送,另一個用於相應的業務處理.然后業務處理后的數據,需要再交由推送處理,則可以在后端進行通過消息系統進行中轉,如kafka(持久保證)或redis(內存訂閱)等
因為二者在ie上的支持都很有限,因此不建議在ie上進行嘗試
使用sse還是websocket,取決於是否需要前台交互,還取決於對后端的支持技術的了解程序.比如,了解jersey多一點,還是netty多一點.由於最近netty進行微服務化底層通信支持越來越流行,個人更傾向於使用websocket.但如果僅僅是一個簡單的推送功能,又不希望修改代碼,那也可以使用jersey(畢竟之前的系統就是在上面進行開發的)
需要后端有的時候需要進行定向發送或者是群發,這種需求ws和sse的實現中都有相應的處理.如ChannelGroup和SseBroadcaster,這樣在后端獲取到一個消息,需要進行路由時就可以從這里面拿相應的channel信息.不過,前提是對各個channel上進行了特定的消息綁定,這樣就好區分具體的路由信息.具體路由策略可以在建立時綁定session,后續通過session來路由.
2、 設計一個幻燈應用，需要列舉選擇的基礎框架、項目的基礎框
架和代碼管理、幻燈數據的存儲和讀取，部分特效的實現，可以只寫思路，后續面聊。
本題並沒有找到好的答案解析，自己也沒有好的思路，有比較好想法的同學可以分享一下。
3、 請寫出至少20個HTML5標簽
<article> <aside> <audio> <canvas> <datalist> <command> <details> <embed>
<figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <nav>
<section> <time> <video> <summary>
4、 列舉5種IE hastlayout的屬性及其值
haslayout 是Windows Internet Explorer渲染引擎的一個內部組成部分。在Internet Explorer中，一個元素要么自己對自身的內容進行計算大小和組織，要么依賴於父元素來計算尺寸和組織內容。為了調節這兩個不同的概念，渲染引擎采用 了 hasLayout 的屬性，屬性值可以為true或false。當一個元素的 hasLayout 屬性值為true時，我們說這個元素有一個布局（layout）
部分的 IE 顯示的錯誤，都可以通過激發元素的 haslayout 屬性來修正。可以通過設置 css 尺寸屬性(width/height)等來激發元素的 haslayout，使其“擁有布局”。如下所示，通過設置以下 css 屬性即可。
* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)
Internet Explorer 7 還有一些額外的屬性(不完全列表):
* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed
5、 簡述jpg。Gif。png-8.png-24的區別，分別使用場景
gif、jpg、png格式的圖片在網站制作中的區別
Gif格式特點:
1.透明性,Gif是一種布爾透明類型，既它可以是全透明，也可以是全不透明，但是它並沒有半透明（alpha透明）。
2.動畫,Gif這種格式支持動畫。
3.無損耗性,Gif是一種無損耗的圖像格式，這也意味着你可以對gif圖片做任何操作也不會使得圖像質量產生損耗。
4.水平掃描,Gif是使用了一種叫作LZW的算法進行壓縮的，當壓縮gif的過程中，像素是由上到下水平壓縮的，這也意味着同等條件下，橫向的gif圖片比豎向的gif圖片更加小。例如500*10的圖片比10*500的圖片更加小
5.間隔漸進顯示,Gif支持可選擇性的間隔漸進顯示
由以上特點看出只有256種顏色的gif圖片不適合照片，但它適合對顏色要求不高的圖形（比如說圖標，圖表等），它並不是最優的選擇，我們會在后面中看到png是最優的選擇。
Jpeg格式特點:
1.透明性,它並不支持透明。
2.動畫,它也不支持動畫。
3.損耗性,除了一些比如說旋轉（僅僅是90、180、270度旋轉），裁切，從標准類型到先進類型，編輯圖片的原數據之外，所有其它操作對jpeg圖像的處理都會使得它的質量損失。所以我們在編輯過程一般用png作為過渡格式。
4.隔行漸進顯示,它支持隔行漸進顯示（但是ie瀏覽器並不支持這個屬性，但是ie會在整個圖像信息完全到達的時候顯示）。
由上可以看出Jpeg是最適web上面的攝影圖片和數字照相機中。
Png格式特點:
1.類型,Png這種圖片格式包括了許多子類，但是在實踐中大致可以分為256色的png和全色的png，你完成可以用256色的png代替gif，用全色的png代替jpeg
2.透明性,Png是完全支持alpha透明的（透明，半透明，不透明），盡管有兩個怪異的現象在ie6（下面詳細討論）
3.動畫,它不支持動畫
PNG圖片格式現在包含三種類型：
1.PNG8256色PNG的別名
2.PNG24全色PNG的別名
3.PNG32全色PNG的別名
基本上PNG32就是PNG24，但是附帶了全alpha通道。就是說每個像素上不僅存儲了24位真色彩信息還存儲了8位的alpha通道信息，就如同GIF能存儲透明和不透明信息一樣。當我們把圖片放到不太搭配的背景上的時候，透明PNG圖片的邊緣會顯示得更加平滑。
當然，我也知道你的想法，“但是Photoshop也能生成帶透明通道的PNG圖片！”我也知道，它只是表面上這么說是PNG24，讓我也產生困惑了。
作為一個傷感的Fireworks倡導者，我只使用PNG32支持附帶alpha通道的真色彩圖片。不管怎樣，如果你習慣使用Photoshop，你就應該知道，Photoshop在“存儲為WEB格式”中只提供PNG8和PNG24兩種PNG格式。
我敢肯定你經常會勾選“支持透明”選項，以獲得帶有透明度的PNG圖片，但是這樣你就獲取了一張PNG32圖片。——Photoshop只是覺得把PNG32這個名稱給隱藏掉了。奇怪吧？……
對png8的誤解
Png8的在ie中的怪異表現：
半透明的png8在ie6以下的瀏覽器顯示為全透明。
Alpha透明的全色PNG（png32）在ie6中會出現背景顏色（通常是灰色）。
由上面可以總結：
（a）全透明的png8可以在任一瀏覽器正常顯示（就像gif一樣）。半透明的png8在除了ie6及其以下的瀏覽器下錯誤的顯示成全透明，其它瀏覽器都能正常顯示半透明。這個bug並不需要特殊對待，因為在不支持半透明的瀏覽器下只是顯示為全透明，對用戶體驗影響不大，它反而是透明gif的加強版。
（b）第二個bug沒有什么好的方法解決，只能通過影響性能的方法AlphaImageLoader與需要加特殊標簽（VML）。
因此得出結論就是：請使用PNG8。
Png8的軟件問題：
Photoshop只能導出布爾透明的PNG8。
Fireworks既能導出布爾透明的PNG8，也能導出alpha透明的PNG8.
6、 算法題：
有一個長度為n-1的數組，包含1-n中不重復的亂序的數，求尋找范圍內不在數組中的數，考慮空間占用，性能優化，溢出等情況，至少寫兩個算法
當n不太大時，可以考慮求和。先算出1~n的所有數的和，然后減去數組中出現的所有自然數的和。時間復雜度為O(n)，空間復雜度O(1)。這種方法的缺點是n不能太大，n比較大時，求和容易溢出。
用位圖。從頭到尾的掃描整個數組，把出現的數相應的位設置為1.然后再掃描位圖，找出不為1的那一位，即為要找的數。這種方法的時間復雜度為O(n),空間復雜度為O(n)。
異或有個很巧妙的地方：同一變量和該變量與另一變量的異或值的異或等於這個變量自身。所以我們可以把1~n的所有數異或，再把數組中出現的所有數異或，然后再把這兩個異或的結果異或，最后得到的值即為我們要找的值。這樣時間復雜度為O(n),空間復雜度為O（1）。在空間上比第二種方法要好，而且不會出現第一種方法中所說的溢出問題。
7、 實現以下方法（與標准一致）
Element.prototype .getElemantsByclassname
element.prototype.getElementsByClassName = function (searchClass, node,tag) {
if(document.getElementsByClassName){
var nodes = (node || document).getElementsByClassName(searchClass),result = [];
for(var i=0 ;node = nodes[i++];){
if(tag !== "*" && node.tagName === tag.toUpperCase()){
result.push(node)
}
}
return result
}else{
node = node || document;
tag = tag || "*";
var classes = searchClass.split(" "),
elements = (tag === "*" && node.all)? node.all : node.getElementsByTagName(tag),
patterns = [],
current,
match;
var i = classes.length;
while(--i >= 0){
patterns.push(new RegExp("(^|\\s)" + classes[i] + "(\\s|$)"));
}
var j = elements.length;
while(--j >= 0){
current = elements[j];
match = false;
for(var k=0, kl=patterns.length; k<kl; k++){
match = patterns[k].test(current.className);
if (!match) break;
}
if (match) result.push(current);
}
return result;
}
}
Function.Prototype.bind
Function.prototype.bind = function (oThis) {
if (typeof this !== "function") {
throw new TypeError("bind function error");
}
var aArgs = Array.prototype.slice.call(arguments,1),
fToBind = this,
fBound = function () {
return fToBind.apply(oThis || window,aArgs.concat(Array.prototype.slice.call(arguments)));
};
return fBound;
};
8、 能夠設置文本加粗的樣式屬性是什么
字體加粗（font-weight）
功能：用於設置字體筆划的粗細。
屬性值：正常度 - normal
相對度 - bold, bolder, light, lighter
漸變度 - 100, 200, 300, 400(相當於normal), 500, 600, 700(相當於 bold、 lighter、 bolder、以及數值100－900。
語法為：h1 {font-weight: 屬性值}
9、 編寫一個方法去掉一個數組的重復元素
1.遍歷數組法
最簡單的去重方法， 實現思路：新建一新數組，遍歷傳入數組，值不在新數組就加入該新數組中；注意點：判斷值是否在數組的方法“indexOf”是ECMAScript5 方法，IE8以下不支持，需多寫一些兼容低版本瀏覽器代碼，源碼如下：
// 最簡單數組去重法
function unique1(array){
var n = []; //一個新的臨時數組
//遍歷當前數組
for(var i = 0; i < array.length; i++){
//如果當前數組的第i已經保存進了臨時數組，那么跳過，
//否則把當前項push到臨時數組里面
if (n.indexOf(array[i]) == -1) n.push(array[i]);
}
return n;
}
// 判斷瀏覽器是否支持indexOf ，indexOf 為ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
if (!Array.prototype.indexOf){
// 新增indexOf方法
Array.prototype.indexOf = function(item){
var result = -1, a_item = null;
if (this.length == 0){
return result;
}
for(var i = 0, len = this.length; i < len; i++){
a_item = this[i];
if (a_item === item){
result = i;
break;
}
}
return result;
}
}
2.對象鍵值對法
該方法執行的速度比其他任何方法都快， 就是占用的內存大一些；實現思路：新建一js對象以及新數組，遍歷傳入數組時，判斷值是否為js對象的鍵，不是的話給對象新增該鍵並放入新數組。注意點： 判斷是否為js對象鍵時，會自動對傳入的鍵執行“toString()”，不同的鍵可能會被誤認為一樣；例如： a[1]、a["1"] 。解決上述問題還是得調用“indexOf”。
// 速度最快， 占空間最多（空間換時間）
function unique2(array){
var n = {}, r = [], len = array.length, val, type;
for (var i = 0; i < array.length; i++) {
val = array[i];
type = typeof val;
if (!n[val]) {
n[val] = [type];
r.push(val);
} else if (n[val].indexOf(type) < 0) {
n[val].push(type);
r.push(val);
}
}
return r;
}
3.數組下標判斷法
還是得調用“indexOf”性能跟方法1差不多，實現思路：如果當前數組的第i項在當前數組中第一次出現的位置不是i，那么表示第i項是重復的，忽略掉。否則存入結果數組。
function unique3(array){
var n = [array[0]]; //結果數組
//從第二項開始遍歷
for(var i = 1; i < array.length; i++) {
//如果當前數組的第i項在當前數組中第一次出現的位置不是i，
//那么表示第i項是重復的，忽略掉。否則存入結果數組
if (array.indexOf(array[i]) == i) n.push(array[i]);
}
return n;
}
4.排序后相鄰去除法
雖然原生數組的”sort”方法排序結果不怎么靠譜，但在不注重順序的去重里該缺點毫無影響。實現思路：給傳入數組排序，排序后相同值相鄰，然后遍歷時新數組只加入不與前一值重復的值。
// 將相同的值相鄰，然后遍歷去除重復值
function unique4(array){
array.sort();
var re=[array[0]];
for(var i = 1; i < array.length; i++){
if( array[i] !== re[re.length-1])
{
re.push(array[i]);
}
}
return re;
}
5.優化遍歷數組法
實現思路：獲取沒重復的最右一值放入新數組。（檢測到有重復值時終止當前循環同時進入頂層循環的下一輪判斷）
// 思路：獲取沒重復的最右一值放入新數組
function unique5(array){
var r = [];
for(var i = 0, l = array.length; i < l; i++) {
for(var j = i + 1; j < l; j++)
if (array[i] === array[j]) j = ++i;
r.push(array[i]);
}
return r;
}
10、 編寫一個布局，頁面寬度自適應，最小寬度300px，左邊定寬35%，右邊定寬65%
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container{
height: 600px;
_width: 300px;
min-width: 300px;
}
.left{
width: 35%;
height: 100%;
background: #ff0;
float: left;
}
.right{
overflow:hidden;
width: 65%;
height: 100%;
background: #0f0;
}
</style>
11、 談談對html5的了解
1.良好的移動性，以移動設備為主。
2.響應式設計，以適應自動變化的屏幕尺寸
3.支持離線緩存技術，webStorage本地緩存
4.新增canvas，video，audio等新標簽元素。新特殊內容元素：article，footer，header，nav，section等，新的表單控件：calendar，date，time，email，url，search。
5.地理定位...
6.新增webSocket/webWork技術
12、 Js面向對象的幾種方式
1.對象的字面量 var obj = {}
2.創建實例對象 var obj = new Object();
3.構造函數模式 function fn(){} , new fn();
4.工廠模式：用一個函數，通過傳遞參數返回對象。function fn(params){var obj =new Object();obj.params = params; return obj;},fn(params);
5.原型模式：function clock(hour){} fn.prototype.hour = 0; new clock();
首先，每個函數都有一個prototype(原型)屬性，這個指針指向的就是clock.prototype對象。而這個原型對象在默認的時候有一個屬性constructor，指向clock，這個屬性可讀可寫。而當我們在實例化一個對象的時候，實例newClock除了具有構造函數定義的屬性和方法外（注意，只是構造函數中的）,還有一個指向構造函數的原型的指針，ECMAScript管他叫[[prototype]]，這樣實例化對象的時候，原型對象的方法並沒有在某個具體的實例中，因為原型沒有被實例。
13、 在css中哪個屬性會影響dom讀取文檔流的順序
1.direction, writing-mode
14、 前端頁面有哪三層構成，分別是什么，作用是什么
Css: 層疊樣式表 ,表現, 由css負責創建。css對“如何顯示有關內容”的問題做出了回答。
Html:超文本標記語言 ,結構, 由 HTML 或 xhtml之類的標記語言負責創建。標簽，也就是那些出現在尖括號里的單詞，對網頁內容的語義含義做出了描述，但這些標簽不包含任何關於如何顯示有關內容的信息。例如，P標簽表達了這樣一種語義：“這是一個文本段。”
Js: 客戶端腳本語言 ,行為, 內容應該如何對事件做出反應
15、 Css的基本語句構成是？
語法:
（自定義的樣式名稱）｛
樣式內容
｝
16、 如何對網站的文件和資源進行優化
1．文件合並（目的是減少http請求）
2．文件壓縮 （目的是直接減少文件下載的體積）
3.使用cdn托管資源
4.使用緩存
5.gizp壓縮你的js和css文件
6.meta標簽優化（title,description,keywords）,heading標簽的優化,alt優化
7.反向鏈接，網站外鏈接優化
17、 Javascipt的本地對象，內地對象和宿主對象
本地對象：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 （它們也是本地對象，根據定義，每個內置對象都是本地對象）。
如此就可以理解了。內置對象是本地對象的一種。而其包含的兩種對象中，Math對象我們經常用到，可這個Global對象是啥東西呢？
Global對象是ECMAScript中最特別的對象，因為實際上它根本不存在，有點玩人的意思。大家要清楚，在ECMAScript中，不存在獨立的函數，所有函數都必須是某個對象的方法。
類似於isNaN()、parseInt()和parseFloat()方法等，看起來都是函數，而實際上，它們都是Global對象的方法。而且Global對象的方法還不止這些.
宿主對象: ECMAScript中的“宿主”就是我們網頁的運行環境，即“操作系統”和“瀏覽器”。所有非本地對象都是宿主對象（host object），即由 ECMAScript 實現的宿主環境提供的對象。所有的BOM和DOM對象都是宿主對象。因為其對於不同的“宿主”環境所展示的內容不同。其實說白了就是，ECMAScript官方未定義的對象都屬於宿主對象，因為其未定義的對象大多數是自己通過ECMAScript程序創建的對象。自定義的對象也是宿主對象。
18、 JQuery中有幾種類型的選擇器
1.層疊選擇器$(“form input”)
2.基本過濾選擇器:first:last:not()
3.內容過濾選擇器:odd:eq():animated
4.可視化過濾選擇器:hidden:visible
5.屬性過濾選擇器：div[id]
6.子元素過濾選擇器:first-child:last-child:only:child
7.表單元素過濾選擇器:enabled:disabled:checked:selected
8.id,類，類型,元素...
19、 jQuery中的Delegate{}函數有什么作用
delegate() 方法為指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。
使用 delegate() 方法的事件處理程序適用於當前或未來的元素（比如由腳本創建的新元素）。$("div").delegate("button","click",function(){
$("p").slideToggle();
});
20、 用性能最高的一個方式寫一個函數去掉數組重復元素，返回一
個新數組
function unique(array){
var n = []; //一個新的臨時數組
//遍歷當前數組
for(var i = 0; i < array.length; i++){
//如果當前數組的第i已經保存進了臨時數組，那么跳過，
//否則把當前項push到臨時數組里面
if (n.indexOf(array[i]) == -1) {
n.push(array[i]);
}
}
return n;
}
// 判斷瀏覽器是否支持indexOf ，indexOf 為ecmaScript5新方法 IE8以下（包括IE8， IE8只支持部分ecma5）不支持
if (!Array.prototype.indexOf){
// 新增indexOf方法
Array.prototype.indexOf = function(item){
var result = -1, a_item = null;
if (this.length == 0){
return result;
}
for(var i = 0, len = this.length; i < len; i++){
a_item = this[i];
if (a_item === item){
result = i;
break;
}
}
return result;
}
}
21、 行內元素有那些。塊級元素有那些。空元素有哪些
首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（1）行內元素有：a b span img input select strong（強調的語氣）
（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）常見的空元素：
<br> <hr> <img> <input> <link> <meta>
鮮為人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
22、 說幾條javasprit的基本規范
1.不要在同一行聲明多個變量。
2.請使用 ===/!==來比較true/false或者數值
3.使用對象字面量替代new Array這種形式
4.不要使用全局函數。
5.Switch語句必須帶有default分支
6.函數不應該有時候有返回值，有時候沒有返回值。
7.For循環必須使用大括號
8.If語句必須使用大括號
9.for-in循環中的變量 應該使用var關鍵字明確限定作用域，從而避免作用域污染。
23、 介紹一下標准的css盒子模型，低版本ie盒子的模型有什么不同
（1）有兩種， IE 盒子模型、W3C 盒子模型；
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border)；
（3）區 別： IE的width部分把 border 和 padding計算了進去;
24、 說出三種減少頁面加載的方法（加載時間指感知的時間或實際
加載的時間）
CSS Sprites；
JS、CSS源碼壓縮、圖片大小控制合適；
網頁Gzip；
CDN托管；
data緩存 ；
圖片服務器；
25、 用js代碼簡單的介紹下自己
<script>
function person(name,jingli,jineng) {
this.name=name;
this.jingli=jingli;
this.jineng=jineng;
}
person.prototype.show=function(){
console.log("我是"+this.name+"我有如下經歷:"+this.jingli+"我會如下技能"+this.jineng);
}
var myself=new person("田野","小田工作室創辦人，鳳翔網絡推廣顧問","熟悉前端基本技能，熟悉網絡營銷思想有實戰經驗，掌握項目經理技能，可以編寫文檔，也可以使用axure進行原型設計，掌握自動化測試和性能測試技能")
myself.show();
</script>
26、 Html5中datalist是什么
<datalist> 標簽定義選項列表，與 input 元素配合使用該元素，來定義 input 可能的值。
datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。
<input id="myCar" list="cars" />
<datalist id="cars">
<option value="BMW">
<option value="Ford">
<option value="Volvo">
</datalist>
27、 Ajax同步和異步的區別，如何解決跨域問題
同步的概念應該是來自於OS中關於同步的概念:不同進程為協同完成某項工作而在先后次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰后.異步則不存在這種順序性.
同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新，重新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操作。
異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。
jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面
28、 Html5中本地存儲概念是什么，有什么優點
cookie是網站為了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（通常經過加密）。
cookie數據始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務器間來回傳遞。
sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。
存儲大小：
cookie數據大小不能超過4k。
sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。
有期時間：
localStorage 存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；
sessionStorage 數據在當前瀏覽器窗口關閉后自動刪除。
cookie 設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
29、 什么是ajax和json，它們的優缺點
ajax的全稱：Asynchronous Javascript And XML。
異步傳輸+js+xml。
所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。
(1)創建XMLHttpRequest對象,也就是創建一個異步調用對象
(2)創建一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息
(3)設置響應HTTP請求狀態變化的函數
(4)發送HTTP請求
(5)獲取異步調用返回的數據
(6)使用JavaScript和DOM實現局部刷新
30、 請使用javascript寫出快速排序代碼
<script>
function quiktSort(arr){
var left =[],right=[];
if(arr.length<1){
return arr;
}
var index = Math.floor(arr.length/2);
var point = arr.splice(index,1);
for(var i=0,len=arr.length;i<len;i++){
if(arr[i]<point){
left.push(arr[i]);
}else{
right.push(arr[i]);
}
}
return quickSort(left).concat(point,quickSort(right));
}
</script>
31、 Html5有那些新增的表單元素
表單控件，calendar、date、time、email、url、search
32、 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 服務器端暫時無法處理請求（可能是過載或維護）。
完整版
1**(信息類)：表示接收到請求並且繼續處理
100——客戶必須繼續發出請求
101——客戶要求服務器根據請求轉換HTTP協議版本
2**(響應成功)：表示動作被成功接收、理解和接受
200——表明該請求被成功地完成，所請求的資源發送回客戶端
201——提示知道新文件的URL
202——接受和處理、但處理未完成
203——返回信息不確定或不完整
204——請求收到，但返回信息為空
205——服務器完成了請求，用戶代理必須復位當前已經瀏覽過的文件
206——服務器已經完成了部分用戶的GET請求
3**(重定向類)：為了完成指定的動作，必須接受進一步處理
300——請求的資源可在多處得到
301——本網頁被永久性轉移到另一個URL
302——請求的網頁被轉移到一個新的地址，但客戶訪問仍繼續通過原始URL地址，重定向，新的URL會在response中的Location中返回，瀏覽器將會使用新的URL發出新的Request。
303——建議客戶訪問其他URL或訪問方式
304——自從上次請求后，請求的網頁未修改過，服務器返回此響應時，不會返回網頁內容，代表上次的文檔已經被緩存了，還可以繼續使用
305——請求的資源必須從服務器指定的地址得到
306——前一版本HTTP中使用的代碼，現行版本中不再使用
307——申明請求的資源臨時性刪除
4**(客戶端錯誤類)：請求包含錯誤語法或不能正確執行
400——客戶端請求有語法錯誤，不能被服務器所理解
401——請求未經授權，這個狀態代碼必須和WWW-Authenticate報頭域一起使用
HTTP 401.1 - 未授權：登錄失敗
HTTP 401.2 - 未授權：服務器配置問題導致登錄失敗
HTTP 401.3 - ACL 禁止訪問資源
HTTP 401.4 - 未授權：授權被篩選器拒絕
HTTP 401.5 - 未授權：ISAPI 或 CGI 授權失敗
402——保留有效ChargeTo頭響應
403——禁止訪問，服務器收到請求，但是拒絕提供服務
HTTP 403.1 禁止訪問：禁止可執行訪問
HTTP 403.2 - 禁止訪問：禁止讀訪問
HTTP 403.3 - 禁止訪問：禁止寫訪問
HTTP 403.4 - 禁止訪問：要求 SSL
HTTP 403.5 - 禁止訪問：要求 SSL 128
HTTP 403.6 - 禁止訪問：IP 地址被拒絕
HTTP 403.7 - 禁止訪問：要求客戶證書
HTTP 403.8 - 禁止訪問：禁止站點訪問
HTTP 403.9 - 禁止訪問：連接的用戶過多
HTTP 403.10 - 禁止訪問：配置無效
HTTP 403.11 - 禁止訪問：密碼更改
HTTP 403.12 - 禁止訪問：映射器拒絕訪問
HTTP 403.13 - 禁止訪問：客戶證書已被吊銷
HTTP 403.15 - 禁止訪問：客戶訪問許可過多
HTTP 403.16 - 禁止訪問：客戶證書不可信或者無效
HTTP 403.17 - 禁止訪問：客戶證書已經到期或者尚未生效
404——一個404錯誤表明可連接服務器，但服務器無法取得所請求的網頁，請求資源不存在。eg：輸入了錯誤的URL
405——用戶在Request-Line字段定義的方法不允許
406——根據用戶發送的Accept拖，請求資源不可訪問
407——類似401，用戶必須首先在代理服務器上得到授權
408——客戶端沒有在用戶指定的餓時間內完成請求
409——對當前資源狀態，請求不能完成
410——服務器上不再有此資源且無進一步的參考地址
411——服務器拒絕用戶定義的Content-Length屬性請求
412——一個或多個請求頭字段在當前請求中錯誤
413——請求的資源大於服務器允許的大小
414——請求的資源URL長於服務器允許的長度
415——請求資源不支持請求項目格式
416——請求中包含Range請求頭字段，在當前請求資源范圍內沒有range指示值，請求也不包含If-Range請求頭字段
417——服務器不滿足請求Expect頭字段指定的期望值，如果是代理服務器，可能是下一級服務器不能滿足請求長。
5**(服務端錯誤類)：服務器不能正確執行一個正確的請求
HTTP 500 - 服務器遇到錯誤，無法完成請求
HTTP 500.100 - 內部服務器錯誤 - ASP 錯誤
HTTP 500-11 服務器關閉
HTTP 500-12 應用程序重新啟動
HTTP 500-13 - 服務器太忙
HTTP 500-14 - 應用程序無效
HTTP 500-15 - 不允許請求 global.asa
Error 501 - 未實現
HTTP 502 - 網關錯誤
HTTP 503：由於超載或停機維護，服務器目前無法使用，一段時間后可能恢復正常
33、 什么是閉包（closure）為什么要用它
閉包是指有權訪問另一個函數作用域中變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域，將函數內部的變量和方法傳遞到外部。
閉包的特性：
1.函數內再嵌套函數
2.內部函數可以引用外層的參數和變量
3.參數和變量不會被垃圾回收機制回收
//li節點的onclick事件都能正確的彈出當前被點擊的li索引
<ul id="testUL">
<li> index = 0</li>
<li> index = 1</li>
<li> index = 2</li>
<li> index = 3</li>
</ul>
<script type="text/javascript">
var nodes = document.getElementsByTagName("li");
for(i = 0;i<nodes.length;i+= 1){
nodes[i].onclick = (function(i){
return function() {
console.log(i);
} //不用閉包的話，值每次都是4
})(i);
}
</script>
執行say667()后,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在
使得Javascript的垃圾回收機制GC不會收回say667()所占用的資源
因為say667()的內部函數的執行需要依賴say667()中的變量
這是對閉包作用的非常直白的描述
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() {
alert(num);
}
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()//執行結果應該彈出的667
34、 你知道那些針對jQuery的優化方法
基於Class的選擇性的性能相對於Id選擇器開銷很大，因為需遍歷所有DOM元素。
頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈式調用更好。
比如：var str=$("a").attr("href");
for (var i = size; i < arr.length; i++) {}
for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可以讓循環跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}
35、 用原型鏈繼承的方式寫一個類和子類
function Person(name,age){
this.name=name;
this.age=age;
}
Person.prototype.study=function(){
return "學習"
}
/*var p1 =new Person("張三",20);*/
/*p1.study();*/
function Student(class_,name,age){
this.class_=class_;
this.name=name;
this.age=age;
}
Student.prototype=new Person();
var s1 =new Student("二班","李大人",16);
console.log(s1.name,s1.age,s1.class_,s1.study());
36、 編寫一個方法求一個字符串的字節長度，假設：一個英文字符
占用一個字節，一個中文字符占用兩個字節
function num(str) {
var num1 = str.length;
var num2 = 0;
for (var i = 0; i < str.length; i++) {
if (str.charCodeAt(i) >= 10000) {
num2++;
}
}
console.log(num1 + num2)
}
37、 簡單概括瀏覽器事件模型，如何獲得資源dom節點
瀏覽器事件模型分為三個階段
1、捕獲階段
2、目標階段
3、冒泡階段
38、 寫一段ajax提交的js代碼
var xhr =xhr();
function xhr(){
if(window.XMLHttpRequest){
return window. XMLHttpRequest();
}else if(window.ActiveXObject){
try {
return new ActiveXObject("Microsoft.XMLHTTP");
}catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
}catch (ex) { }
}
}
}
xhr.open("get","url","true");
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && (xhr.status==200||xhr.status==304))
{
document.getElementById("myDiv").innerHTML=xhr.responseText;
}
}
xhr.send();
39、 判斷字符串是否是這樣組成的，第一個必須是字母，后面可以
是字母和數字、下划線總長度為5-20（請使用正則表達式）
function if_fit(str){
var reg=/^[A-Za-z]{1}\w{5,20}/g;
var result=str.search(reg);
return result;
}
40、 截取字符串abcdefg的efg
var str="abcdefg";
console.log(str.slice(4));
41、 在css引入的方式有那些，link和@import的區別是什么
內聯方式、嵌入方式、鏈接方式、導入方式
區別1：link是XHTML標簽，除了加載CSS外，還可以定義RSS等其他事務；@import屬於CSS范疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import需要頁面網頁完全載入以后加載。
區別3：link是XHTML標簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
42、 將字符串helloChina反轉輸出
var str = "helloChina";
方法1：console.log( str.split("").reverse().join("") )；');
方法2：for (var x = str.length-1; x >=0; x--)
{
document.write(str.charAt(x));
}
方法3：var a=str.split("");
var rs = new Array;
while(a.length)
{
rs.push(a.pop());
}
alert(rs.join(""));
43、 為什么無法定義1px左右高度的容器
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：overflow:hidden | zoom:0.08 | line-height:1px
44、 FireFox中標簽的居中問題的解決辦法
*{margin：0px auto；}
45、 請寫出XHTML和css如何注釋
XHTML:<!-- 注釋內容-->
css:/* 注釋內容*/
46、 現在想調節一下父元素的透明度，但是又不影響子元素的透明
度，怎么破
方法1：用RGBA
方法2：再加一層與父元素同級的div裝載子元素 定位到子元素原位置
47、 簡述cookies sessionStorage 和localStorage的區別
區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 接口使用更方便。
48、 簡述ECMASCRIPT6的新特性
1.增加塊作用域
2.增加let const
3.解構賦值
4.函數參數擴展 （函數參數可以使用默認值、不定參數以及拓展參數）
5.增加class類的支持
6.增加箭頭函數
7.增加模塊和模塊加載（ES6中開始支持原生模塊化啦）
8.math, number, string, array, object增加新的API
49、 Apply和call方法的異同
相同點:兩個方法產生的作用是完全一樣的，第一個參數都是對象；
不同點:
call()方法參數將依次傳遞給借用的方法作參數，即fn.call(thisobj, arg1,arg2,arg3...argn)，有n個參數
apply()方法第一個參數是對象，第二個參數是數組fn.apply(thisobj,arg)，此處的arg是一個數組,只有兩個參數
50、 在javascript中什么是偽數組，如何將偽數組轉化為標准數組
這里把符合以下條件的對象稱為偽數組：
1，具有length屬性
2，按索引方式存儲數據
3，不具有數組的push,pop等方法
偽數組（類數組）：無法直接調用數組方法或期望length屬性有什么特殊的行為，不具有數組的push,pop等方法，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於偽數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象。
51、 Js和nitive交互的方法與問題
實現JS和Native有兩種方式:
js與java互相調用
第一種：shouldOverrideUrlLoading(WebView view, String url）
通過給WebView加一個事件監聽對象（WebViewClient)並重寫shouldOverrideUrlLoading(WebView view, String url）方法。當按下某個連接時WebViewClient會調用這個方法，並傳遞參數view和url
第二種：JS和Java互調
WebView開啟JavaScript腳本執行
WebView設置供JavaScript調用的交互接口
客戶端和網頁端編寫調用對方的代碼
JS調用JAVA
JS : window.jsInterfaceName.methodName(parameterValues)
native: webView.addJavascriptInterface(new JsInteration(), “androidNative”);
下面給出一個實例,方便理解
webView.addJavascriptInterface(new JsInteration(), “androidNative”);
@JavascriptInterfacepublic void helloJS(){…}
window.androidNative.helloJS();
Java調用JS
webView調用js的基本格式為webView.loadUrl(“javascript:methodName(parameterValues)”)
調用js無參無返回值函數： String call =“javascript:sayHello()”；webView.loadUrl(call);
調用js有參無返回值函數：String call = “javascript:alertMessage(\”” + “content” + “\”)”; webView.loadUrl(call);
調用js有參數有返回值的函數
Android在4.4之前並沒有提供直接調用js函數並獲取值的方法，所以在此之前，常用的思路是 java調用js方法，js方法執行完畢，再次調用java代碼將值返回。
Android 4.4之后使用evaluateJavascript即可。
private void testEvaluateJavascript(WebView webView) {
webView.evaluateJavascript("getGreetings()", new ValueCallback<String>() {
@Override
public void onReceiveValue(String value) {
Log.i(LOGTAG, "onReceiveValue value=" + value);
}});
}
注:
參數類型如果是簡單的int或String，可以直接傳，對於復雜的數據類型，建議以字符串形式的json返回。
evaluateJavascript方法必須在UI線程（主線程）調用，因此onReceiveValue也執行在主線程。
當native與js交互時存cookie看到很多人遇到過這樣一個問題,cookie存不進去,網上有很多解釋方案,但是很多沒說到重點上,這里直接貼一下代碼:
public static void synCookies(Context context, String url, String version) {
CookieSyncManager.createInstance(context);
CookieManager cookieManager = CookieManager.getInstance();
cookieManager.setAcceptCookie(true);
cookieManager.removeAllCookie();
cookieManager.setCookie(url, "sessionKey=" + UserInfoShareprefrence.getInstance(context).getLocalSessionKey());
cookieManager.setCookie(url, "productVersion=android-epocket-v" + version);
CookieSyncManager.getInstance().sync();
}
存不進去的很大一部分原因是你的url不對,他官方給出的解釋是這樣的
/**
* Sets a cookie for the given URL. Any existing cookie with the same host,
* path and name will be replaced with the new cookie. The cookie being set
* will be ignored if it is expired.
*
* @param url the URL for which the cookie is to be set
* @param value the cookie as a string, using the format of the 'Set-Cookie'
* HTTP response header
*/
public void setCookie(String url, String value) {
throw new MustOverrideException();
}
其實沒說明白url到底是什么,這里的url就是顯示的url的域名,這里順便貼出取域名的方法,給出的是通過正則提取域名
/**
* 獲得域名
*
* @param url
* @return
*/public static String getDomain(String url) {
Pattern p = Pattern.compile("[^//]*?\\.(com|cn|net|org|biz|info|cc|tv)", Pattern.CASE_INSENSITIVE);
Matcher matcher = p.matcher(url);
matcher.find();
return matcher.group();
}
還有一點就是,如果你想傳遞多個值給cookie的話,可以多次使用setCookie,不要擅自的自己拼值,因為你拼的字符串中可能存在分號,內部多分號做了特殊處理,截取分號之前的,之后的直接放棄!
52、 用sass的minix定義一些代碼片段，且可傳參數
/**
* @module 功能
* @description 生成全屏方法
* @method fullscreen
* @version 1.7.0
* @param {Integer} $z-index 指定層疊級別 <1.7.0>
* @param {Keywords} $position 指定定位方式，取除`static | relative`之外的值，默認值：absolute <1.8.5>
*/
@mixin fullscreen($z-index: null, $position: absolute) {
position: $position;
z-index: $z-index;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
53、 移動端經常出現的兼容問題，談談移動端應用或者wap站得
一些優化技巧和心得
http://www.jb51.net/article/84973.htm
54、 H5中新增的一些單位rem是什么意思，和em的關系，以及rem在自適應布局中的應用方法
答：Em為單位：
這種技術需要一個參考點，一般都是以<body>的“font-size”為基准。比如說我們使用“1em”等於“10px”來改變默認值“1em=16px”，這樣一來，我們設置字體大小相當於“14px”時，只需要將其值設置為“1.4em”。
Rem為單位：
rem是相對於根元素<html>的“font-size”為基准。比如說我們給html設置font-size為100px，
那么我們要給html中的p標簽設置16px的字體，font-size設置.16rem就可以，在這里16px=.16rem。
這個單位與em有什么區別呢？
區別在於使用rem為元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。
55、 如何實現瀏覽器內多個標簽頁之間的通信？
通過WebSocket或SharedWorker把客戶端和服務器端建立socket連接，從而實現通信；也可以調用localstorge、cookies等本地存儲方法。
56、 假設現在頁面里有一個id是con的div，現在需要編寫js代碼，在頁面加載完成后 將div的高度設置成100px，寬度設置成60px，並設置成灰色的ipx的邊框，北京設置成淺黃色。
window.onload=function(){
var oDiv=document.getElementById("con");
oDiv.style.height="100px";
oDiv.style.width="60px";
oDiv.style.width="1px solid gray";
oDiv.style.color="yellow";
}
57、 對新技術有那些了解，常去的網站有那些
掘金、簡書、github、csdn等
58、 列舉幾種后端通訊的方法，分別使用的場景
答：1.后端程序可以通過session來進行通訊，session有過期時間，主要用於驗證碼的驗證，登錄過期等的應用。
2.數據庫，數據庫支持多種語言的操作，那么通過數據庫就可以通訊。
59、 用程序找出數組中出現次數超過一半的數字
思路：
1、 一個數字在數組中出現次數超過了一半，則排序后，位於數組中間的數字一定就是該出現次數超過了長度一半的數字（可以用反證法證明），也即是說，這個數字就是統計學上的中位數。最容易想到的辦法是用快速排序對數組排序號后，直接取出中間的那個數字，這樣的時間復雜度為O(nlogn)，空間復雜度為O(1)。
2 、事實上可以不用對數組進行排序，或者說僅部分排序，受快速排序的partition函數的啟發，我們可以利用反復調用partition函數來求的該數字。我們現在數組中隨機選取一個數字，而后通過Partition函數返回該數字在數組中的索引index，如果index剛好等於n/2，則這個數字便是數組的中位數，也即是要求的數，如果index大於n/2，則中位數肯定在index的左邊，在左邊繼續尋找即可，反之在右邊尋找。這樣可以只在index的一邊尋找，而不用兩邊都排序，減少了一半排序時間。這種情況的平均時間復雜度大致為：T(n) = n+n/2+n/4+n/8+....+1，很明顯當n很大時，T(n)趨近於2n，也就是說平均情況下時間復雜度為O(n),但是這種情況下，最壞的時間復雜度依然為O(n*n)，最壞情況下，index總是位於數組的最左或最右邊，這樣時間復雜度為T(n) = n+n-1+n-2+n-3+....+1 = n(n-1)/2，顯然，時間復雜度為O(n*n)，空間復雜度為O(1)。
60、 請設計一套方案，用於確保頁面中js加載完全，對於優化某網頁的加載速度，有什么獨到見解
答：js方法：
<script type="text/javascript">
window.onload=function(){
var userName="xiaoming";
alert(userName);
}
</script>
jquery方法：
<script type="text/javascript">
$(document).ready(function(){
var userName="xiaoming";
alert(userName);
});
</script>
或者簡寫：
$(function(){
var userName="xiaoming";
alert(userName);
});
如何確定一個js是否加載完全或者頁面中的所有js加載完全，具體辦法如下：
function loadScript（ url, callback） {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
}
} else {
script.onload = function() {
callback();
}
}
script.src = url;
document.getElementsByName("head")[0].appendChild(script);
}
如何讓腳本的執行順序按照你設定的順序執行，使用嵌套的方式：
loadScript("file1.js", function() {
loadScript("file2.js", function() {
loadScript("file3.js", function() {
alert("All files are loaded");
});
});
});
網頁加載速度優化：
1、減少請求
最大的性能漏洞就是一個頁面需要發起幾十個網絡請求來獲取諸如樣式表、腳本或者圖片這樣的資源，這個在相對低帶寬和高延遲的移動設備連接上來說影響更嚴重。
CDNs（內容分發網絡）把資源放在離用戶地理位置更近的地方對解決這個問題能起到很大作用，但是比起獲取請求，大量的請求對頁面加載時間的影響更為嚴重，而且最近的發現表明，CDNs對移動端用戶的性能影響越來越低。
2、整合資源
對開發者來說，將Javascript代碼和CSS樣式放到公共的文件中供多個頁面共享是一種標准的優化方法，這個方法能很簡單的維護代碼，並且提高客戶端緩存的使用效率。
在Javascript文件中，要確保在一個頁面中相同的腳本不會被加載多次，當大團隊或者多個團隊合作開發的時候，這種冗余的腳本就很容易出現，你可能會對它的發生頻率並不低感到非常吃驚。
Sprites是css中處理圖片的一項技術，Sprites就是將多張圖片整合到一個線性的網狀的大圖片中，頁面就可以將這個大圖片一次性獲取回來並且做為css的背景圖，然后使用css的背景定位屬性展示頁面需要的圖片部分，這種技術將多個請求整合成一個，能顯著地改善性能。
平穩地改進但是需要對資源有控制權限，根據開發者的網站不同權限，一些資源並不需要被整合起來（例如，一些由CMS生成的資源），還有，對於一些外部域引用的資源，強行整合可能會導致問題，馬海祥提醒大家需要注意的是，整合資源對手機瀏覽器來說是一把雙刃劍，整合資源確實會在首次訪問減少請求，但是大的資源文件可能會導致緩存失效，所以，需要小心地使用各種技術整合資源，以達到優化本地存儲的目的。
3、使用瀏覽器緩存和本地緩存
現在所有的瀏覽器都會使用本地資源去緩存住那些被Cache-Control或者Expires頭標記的資源，這些頭能標記資源需要緩存的時間，另外，ETag（實體標簽）和Last-Modified頭來標識當資源過期后是否需要重新請求，瀏覽器為了減少不必要的服務器請求，盡可能地從本地緩存中獲取資源，並且將那些已經過期的、或者當緩存空間減小的時候將那些很久不用的資源進行清理，瀏覽器緩存通常包括圖片，CSS，Javascript代碼，這些緩存能合理地提高網站的性能（比如為了支持后退和前進的按鈕，使用一個單獨的緩存來保存整個渲染的頁面）。
移動瀏覽器緩存，通常是比桌面PC小的多，這就導致了緩存的數據會很經常被清理，HTML5的緩存基於瀏覽器緩存提供了一個很好的替換方案，Javascript的localStorage已經在所有主流的桌面和移動端瀏覽器上都實現了，使用腳本代碼能簡便地支持HTML5的localStorage操作，可以讀寫鍵值數據，每個域名大概有5MB的容量，雖然不同的移動瀏覽器上讀寫速度相差很大，但是localStorage大容量的緩存使得它很適合作為客戶端的緩存，從localStorage獲取資源明顯快於從服務器上獲取資源，而且在大多數移動設備上也比依靠緩存頭或者瀏覽器的本地緩存更靈活可靠，這是移動瀏覽器比桌面PC更有優勢的一個地方，在桌面PC上，本地緩存仍然優先使用標准的瀏覽器緩存，導致桌面PC本地緩存的性能落后於移動瀏覽器。
在此，馬海祥要提醒各位一下：雖然localStorage的機制易於實現，但是它的一些控制機制卻是非常復雜的，你需要考慮到緩存帶給你的所有問題，比如緩存失效（什么時候需要刪除緩存？），緩存丟失（當你希望數據在緩存中的時候它並不在怎么辦？），還有當緩存滿的時候你怎么辦？
4、首次使用的時候在HTML中嵌入資源
HTML的標准是使用鏈接來加載外部資源，這使得更容易在服務器上（或者在CDN上）操作更新這些資源，而不是在每個頁面上修改更新這些資源，根據上文討論的，這種模式也使得瀏覽器能從本地緩存而不是服務器上獲取資源。
但是對還沒有緩存到瀏覽器localStorage的資源來說，這種模式對網站的性能有負面的影響，一般來說，一個頁面需要幾十個單獨的請求來獲取資源從而渲染頁面。
所以說，從性能的角度來說，如果一個資源沒有很高的被緩存的幾率的話，最好把它嵌入到頁面的HTML中（叫inlining），而不是使用鏈接外部，腳本和樣式是支持內嵌到HTML中的，但是圖片和其他的二進制資源其實也是可以通過內嵌包含base64編碼的文本來嵌入到HTML中的。
內嵌的缺點是頁面的大小會變得非常大，所以對於Web應用來說，關鍵的是能夠跟蹤分析這個資源什么時候需要從服務端獲取，什么時候已經緩存到客戶端了。
另外，在第一次請求資源后必須能夠使用代碼在客戶端緩存資源，因此，在移動設備上，使用HTML5 localStorage能很好地做到內嵌。
由於不知道用戶是否已經訪問過這個頁面了，所以需要網站有機制能生成不同版本的頁面。
5、使用HTML5服務端發送事件
Web應用已經使用了各種從服務器上輪詢資源的方法來持續地更新頁面，HTML5的EventSource對象和Server-Sent事件能通過瀏覽器端的JavaScript代碼打開一個服務端連接客戶端的單向通道，服務端可以使用這個寫通道來發送數據，這樣能節省了HTTP創建多個輪詢請求的消耗。
這種方式比HTML的WebSocket更高效，WebSocket的使用場景是，當有許多客戶端和服務端的交互的時候（比如消息或者游戲），在全雙工連接上建立一個雙向通道。
這個技術是基於具體的技術實現的，如果你的網站當前是使用其他的Ajax或者Comet技術來輪詢的，轉變成Server-Sent事件需要重構網站的Javascript代碼。
6、消除重定向
當用戶在一個移動設備上訪問桌面PC網站的時候，Web網站應用通常讀取HTTP的user-agent頭來判斷這個用戶是否是來自移動設備的，然后應用會發送帶有空HTTP body和重定向HTTP地址頭的HTTP 301（或者302）請求，把用戶重定向到網站的移動版本上去，但是這個額外的客戶端和服務端的交互通常在移動網絡上會消耗幾百毫秒，因此，在原先的請求上傳遞移動的web頁會比傳遞一個重定向的信息並讓客戶端再請求移動頁面更快。
對於那些想要在移動設備上看桌面PC網站的用戶來說，你可以在移動web頁面上提供一個鏈接入口，這樣也能同時表示你的網站是並不提倡這種行為的。
雖然這個技術在理論上是簡單的，但是實際上並不易於實施，由於有些m.sites是宿主在其他地方的，所以許多網站會選擇重定向到一個不同的服務器上，有的網站則是會在重定向請求的時候種植上Cookie告訴Web應用這個用戶是在使用移動設備，這種方法可能對web應用來說更容易控制。
7、減少資源負載
關於移動端頁面的大小問題，渲染小頁面更快，獲取小資源也更快，減小每個請求的大小通常不如減少頁面請求個數那么顯著地提高性能。
但是有些技術在性能方面，特別是在需要對帶寬和處理器性能精打細算的移動設備環境下，仍然是能帶來很大利益的。
8、壓縮文本和圖像
諸如gzip這樣的壓縮技術，依靠增加服務端壓縮和瀏覽器解壓的步驟，來減少資源的負載，但是，一般來說，這些操作都是被高度優化過了，而且測試表明，壓縮對網站還是起到優化性能的作用的，那些基於文本的響應，包括HTML，XML，JSON（Javascript Object Notation），Javascript，和CSS可以減少大約70%的大小。
瀏覽器在Accept-Encoding請求頭中申明它的解壓縮技術，並且當它們接收到服務端返回的Content-Encoding響應頭標示的時候，就會按照這個響應頭自動做解壓操作。
馬海祥覺得這種方法的優點就是易於實現，如果設置正確的話，現在所有的Web服務器都支持壓縮響應，但是，也有一些桌面PC的安全工具會將請求頭中的Accept-Encoding頭去掉，這樣即使瀏覽器支持解壓縮，用戶也無法獲取到壓縮后的響應。
9、代碼簡化
簡化通常是使用在腳本和樣式文件中，刪除一些不必要的字符，比如空格，換行符，或者注釋等，不需要暴露給外部的命名就可以被縮短為一個或者兩個字符，比如變量名，合適的簡化資源通常在客戶端不需要做任何其他的處理，並且平均減少20%的資源大小，內嵌在HTML中的腳本和樣式文件也是可以精簡的，有很多很好的庫來做精簡化的操作，這些庫一般也同時會提供合並多個文件這樣減少請求數的服務（具體可查看馬海祥博客《手機網站制作的常用方法及優化技巧》的相關介紹）。
簡化帶來的好處並不局限於減少帶寬和延遲，對於那些移動設備上緩存無法保存的過大資源來說，也是很有改善的，Gzip在這個方面並沒有任何幫助，因為資源是在被解壓后才被緩存起來的。
Google的Closure Compiler已經難以置信地完成了理解和簡化Javascript的工作，但是CSS的簡化則沒有那么容易，因為對不同瀏覽器來說有不同的CSS技術能迷惑CSS簡化工具，然后讓CSS簡化后無法正常工作，馬海祥提醒大家必須要注意的是，已經有這樣的案例了，即使只是刪除了不必要的字符，簡化工作也有可能破壞頁面，所以當你應用簡化技術之后，請做一下完整的功能測試工作。
10、調整圖片大小
圖片通常是占用了Web頁面加載的大部分網絡資源，也占用了頁面緩存的主要空間，小屏幕的移動設備提供了通過調整圖片大小來加速傳輸和渲染圖片資源的機會，如果用戶只是在小的移動瀏覽器窗口中看圖片的話，高分辨率的圖片就會浪費帶寬、處理時間和緩存空間。
為了加速頁面渲染速度和減少帶寬及內存消耗，可以動態地調整圖片大小或者將圖片替換為移動設備專用的更小的版本，不要依靠瀏覽器來將高分辨率的圖片轉換成小尺寸的圖片，這樣會浪費帶寬。
另外一個方法是先盡快加載一個低分辨率的圖片來渲染頁面，在onload或者用戶已經開始和頁面交互以后將這些低分辨率的圖片替換成為高分辨率的圖片。
特別應用在高度動態化的網站是有優勢的。
11、使用HTML5和CSS 3.0來簡化頁面
HTML5包括了一些新的結構元素，例如header，nav，article和footer，使用這些語義化的元素比傳統的使用div和span標簽能使得頁面更簡單和更容易解析，一個簡單的頁面更小加載更快，並且簡單的DOM（Document Object Model）代表着更快的JavaScript執行效率，新的標簽能很快地應用在包括移動端的新瀏覽器版本上，並且HTML5設計讓那些不支持它的瀏覽器能平穩過渡使用新標簽。
HTML5的一些表單元素提供了許多新屬性來完成原本需要javascript來完成的功能，例如，新的placeholder屬性用於顯示在用戶輸入進入輸入框之前顯示的介紹性文字，autofocus屬性用於標示哪個輸入框應當被自動定位。
也有一些新的輸入框元素能不用依靠Javascript就可以完成一些通用的需求，這些新的輸入框類型包括像e-mail，URL，數字，范圍，日期和時間這樣需要復雜的用戶交互和輸入驗證的元素，在移動瀏覽器上，當需要輸入文本的時候，彈出的鍵盤通常是由特定的輸入框類型來做選擇的，不支持指定的輸入類型的瀏覽器就會只顯示一個文本框。
另外，只要瀏覽器支持內建的層次，圓角，陰影，動畫，過渡和其他的圖片效果，CSS 3.0就能幫助你創建輕便簡易的頁面了，而這些圖片效果原先是需要加載圖片才能完成的，這樣，這些新特性就能加速頁面渲染了。
人工地做這些改動是非常復雜和耗時的，如果你使用CMS，它可以幫你生成許多你不需要控制的HTML和CSS（具體可查看馬海祥博客《制作移動端手機網站過程中的SEO優化方法技巧》的相關介紹）。
12、延遲渲染”BELOW-THE-FOLD”內容
可以確定的是如果我們將不可見區域的內容延遲加載，那么頁面就會更快地展現在用戶面前，這個區域叫做“below the fold”，為了減少頁面加載后需要重新訪問的內容，可以將圖片替換為正確的高寬所標記的<img>標簽。
一些好的Javascript庫可以用來處理這些below-the-fold 延遲加載的圖像。
13、延遲讀取和執行的腳本
在一些移動設備上，解析Javascript代碼的速度能達到100毫秒每千字節，許多腳本的庫直到頁面被渲染以后都是不需要的加載的，下載和解析這些腳本可以很安全地被推遲到onload事件之后來做。
例如，一些需要用戶交互的行為，比如托和拽，都不大可能在用戶看到頁面之前被調用，相同的邏輯也可以應用在腳本執行上面，盡量將腳本的執行延遲到onload事件之后，而不是在初始化頁面中重要的可被用戶看到的內容的時候執行。
這些延遲的腳本可能是你自己寫的，更重要的是，也有可能是第三方的，對廣告、社交媒體部件、或者分析的差勁的腳本優化會導致阻塞頁面的渲染，會增加珍貴的加載時間，當然，你需要小心地評估諸如jquery這樣為移動網站設計的大型腳本框架，特別當你僅僅只是使用這些框架中的一些對象的時候更要小心評估。
許多第三方的框架現在提供延遲加載的異步版本的API，開發者只需要將原先的邏輯轉化到這個異步版本，一些JavaScript要做延遲加載會有些復雜，因為在onload之后執行這些腳本需要注意很多注意事項（例如，你有個腳本需要綁定到onload事件上，你需要做什么？如果你將腳本延遲到onload事件之后，就一定就會失去很多執行的時機）。
14、使用Ajax來增強進程
Ajax（Asynchronous JavaScript and XML）是一項使用XHR（XMLHttpRequest）對象來從Web服務器上獲取數據的技術，它並不需要更新正在運行的頁面，Ajax能更新頁面上的某個部分而不需要重新構建整個頁面，它通常用來提交用戶的交互相應，但是也可以用來先加載頁面的框架部分，然后當用戶准備好瀏覽網頁的時候再填充詳細的內容。
盡管是這個名字，但是XMLHttpRequest並不強制要求你只能使用XML，你可以通過調用overrideMineType方法來制定“application/json”類型來使用json替換XML，使用JSON.parse會比使用原生的eval()函數快了幾乎兩倍，並且更為安全。
同時，切記Ajax的返回響應也會得益於那些應用在普通的返回響應的優化技術上面，確保對你的Ajax返回響應使用了緩存頭，簡化，gzip壓縮，資源合並等技術。
由於這個技術是根據具體應用不同而不同的，所以很難量化，或許由於跨域問題，你需要使用XHR2，這個技術能使用外部域的資源，從而能進行跨域的XHR請求。
15、根據網絡狀況進行適配處理
由於使用更多帶寬會使用更多移動網絡的費用，所以只有能檢測網絡的類型才能使用針對特定網絡的優化技術。
例如，預加載未來使用到的請求是非常聰明的做法，但是如果用戶的帶寬很稀有，並且加載的有些資源是永遠不會用到的話，這個技術就是不合理的了。
在Android 2.2+，navigator.connection.type屬性的返回值能讓你區分Wifi和2G/3G/4G網絡，在Blackberry上，blackberry.network也能提供相似的信息，另外，服務端通過檢測請求中的User-Agent頭或者其他的嵌入到請求中的信息能讓你的應用檢測到網絡狀況。
檢測網絡信息的API最近已經有所變化了，接口現在不是直接定義Wi-Fi，3G等網絡狀況，而是給出了帶寬信息和諸如“非常慢，慢，快和非常快”這樣的建議，有個屬性能給出估計的MB/s值和一個“meterd”的Boolean值來表示它的可信度，但是對瀏覽器來說，很難根據這個來判斷環境，判斷當前網絡環境然后適配仍然是一種最好的方法（具體可查看馬海祥博客《百度移動搜索開放適配服務的3種方法》的相關介紹），但是這種方法正在被考慮被替換。
16、對多線程來說盡量使用HTML5的WEB WORKER特性
HTML5中的Web Worker是使用多個線程並發執行Javascript程序，另外，這種特別的多線程實現能減少困惑開發者多年的，在其他平台上遇到的問題，例如，當一個線程需要改變一個正在被其他線程使用的資源該如何處理，在Web Worker中，子線程不能修改主用戶界面（UI）線程使用的資源。
對提高移動站點的性能來說，Web Worker中的代碼很適合用來預處理用戶完成進一步操作所需要的資源的，特別是在用戶的帶寬資源不緊缺的情況下，在低處理器性能的移動設備上，過多的預加載可能會干擾當前頁面的UI響應，使用多線程代碼，讓Web Worker對象（並且盡可能使用localStorage來緩存數據）在另外一個線程中操作預加載資源，這樣就能不影響當前的UI表現了。
要特別說明的是，Web Worker只在Android 2.0以上的版本實現，而且iphone上的ios5之前的版本也不支持，在桌面PC上，總是落后的IE只在IE 10才支持Web Worker。
雖然這項技術並不是非常難實現，但是對Web Workers來說，有一些限制需要強制遵守，Web Workers不能進入到頁面的DOM，也不能改變頁面上的任何東西，Web Worker很適合那種需要后台計算和處理的工作。
17、將CLICK事件替換成TOUCH事件
在觸摸屏設備上，當一個用戶觸碰屏幕的時候，onclick事件並沒有立即觸發，設備會使用大約半秒（大多數設備差不多都是300毫秒）來讓用戶確定是手勢操作還是點擊操作，這個延遲會很明顯地影響用戶期望的響應性能，要使用touchend事件來替換才能解決，當用戶觸碰屏幕的時候，這個事件會立即觸發。
為了要確保不會產生用戶不期望的行為，你應該也要使用touchstart和touchmove事件，例如，除非同時有個touchstart事件在button上，否則不要判斷touchend事件在button上就意味着點擊行為，因為用戶有可能從其他地方觸碰開始，然后拖拽到button上觸碰結束的，你也可以在touchstart事件之后使用touchmove事件來避免將touchend事件誤判為點擊，當然前提是需要假設拖拽的手勢並不是預期產生點擊行為。
另外，你也需要去處理onclick事件來讓瀏覽器改變button的外觀從而標識為已點擊的狀態，同時你也需要處理那些不支持touch事件的瀏覽器，為了避免代碼在touchend和onclick代碼中重復執行，你需要在確保用戶觸碰事件已經在touchend執行了之后，在click事件中調用preventDefault和stopPropagation方法。
這種技術需要更多工作才能在一個頁面中增加和維護鏈接，touch事件的代碼必須考慮其他手勢，因為替換click的還有可能是縮放或者敲擊動作。
18、支持SPDY協議
應用層HTTP和HTTPS協議導致的一些性能瓶頸，使得不論是桌面還是移動端的網站都非常難受，在2009年，谷歌開始研發一種叫做SPDY（諧意是“speedy”）的協議來替換已有的協議，這種協議宣稱能突破這些限制，這個協議的目標是讓多種瀏覽器和多種Web服務都能支持，所以這個協議是開源的，但是初步地，只有Google的Chrome瀏覽器（在版本10及之后的）和google的站點支持，一旦一個Web服務支持SPDY，那么它上面的所有站點都可以和支持這個協議的瀏覽器使用SPDY進行交互，將SPDY應用在25個top100的Internet網站上，Google收集到的數據是網站的速度會改善27%到60%不等。
SPDY自動使用gzip壓縮所有內容，和HTTP不同的是，它連header的數據也使用gzip壓縮，SPDY使用多線程技術讓多個請求流或者響應流能共用一個TCP連接，另外SPDY允許請求設置優先級，比如，頁面中心的視頻會比邊框的廣告擁有更高的優先級。
或許SPDY中最變革性的發明就是流是雙向的，並且可以由客戶端或者服務端發起，這樣能使得信息能推送到客戶端，而不用由客戶端發起第一次請求，例如，當一個用戶第一次瀏覽一個站點，還沒有任何站點的緩存，這個時候服務端就可以在響應中推送所有的請求資源，而不用等候每個資源被再次獨立請求了，作為替換協議，服務端可以發送暗示給客戶端，提示頁面需要哪些資源，同時也允許由客戶端來初始化請求。即使是使用后一種這樣的方式也比讓客戶端解析頁面然后自己發現有哪些資源需要被請求來得快。
雖然SPDY並沒有對移動端有什么特別的設置，但是移動端有限的帶寬就使得如果支持SPDY的話，SPDY在減少移動網站的延遲是非常有用的。
依據網站和服務的環境來進行平穩操作或進一步考慮，Google有一個SPDY模塊支持Apache2.2 – mod_spdy – 這個模塊是免費的；但是mod_spy有線程上的問題，並且和mod_php協作並不是很好，所以要求你使用這個技術的時候要確保你的網站的正常運行。
61、 請事先鼠標點擊中的任意標簽，alert該標簽的名稱（注意兼容性）
function elementName(evt){
evt = evt|| window.event;
var selected = evt.target || evt.srcElement;
alert(selected.tagName);
}
62、 對string對象進行擴展，使其具有刪除前后空格的方法
String.prototype.trim = function() {
return this.replace(/(^\s*)|(\s*$)/g, "");
}
63、 常使用的庫有哪些？常用的前端開發工具？開發過什么應用
或組件？
1)bootstrap, easy UI, jqueryUI , jquery、angular.js, vue.js等。
2)前端開發工具：gulp webpack
64、 用一句話概述您的有點，用一句話概述您的缺點
自由發揮
65、 描述下你對js閉包。面向對象、繼承的理解
1）閉包理解：
使用閉包主要是為了設計私有的方法和變量。閉包的優點是可以避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易造成內存泄露。在js中，函數即閉包，只有函數才會產生作用域的概念
閉包有三個特性：
1.函數嵌套函數
2.函數內部可以引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收
2） 面向對象：
http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html
3）繼承：https://segmentfault.com/a/1190000002440502
http://blog.csdn.net/james521314/article/details/8645815
66、 你做的頁面在哪些瀏覽器測試過？這些瀏覽器的內核分別是
什么？
IE內核瀏覽器：360，傲游，搜狗，世界之窗，騰訊TT。
非IE內核瀏覽器：firefox opera safari chrome 。
IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原為Presto，現為Blink；
67、 寫出幾種IE6 bug的解決方法
1）png24位的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.也可以引用一段腳本處理.
2）IE6雙倍邊距bug：在該元素中加入display:inline 或 display:block
3）像素問題 使用多個float和注釋引起的 使用dislpay:inline -3px
4）超鏈接hover 點擊后失效 使用正確的書寫順序 link visited hover active
5）z-index問題 給父級添加position:relative
6）Min-height 最小高度 ！Important 解決’ 7.select 在ie6下遮蓋 使用iframe嵌套
7）為什么沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
68、 清楚浮動的幾種放回，各自的優缺點
1、父級div定義偽類:after和zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題。
優點：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）。
缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
2、父級div定義overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;
/*解決代碼*/width:98%;overflow:hidden}
.div2{background:#800080;border:1px solid red;height:100px;margin- top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。
優點：簡單，代碼少，瀏覽器支持好。
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
3、結尾處加空div標簽clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度。
優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題。
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不爽。
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法。
4、父級div定義height
<style type="text/css">
.div1{background:#000080;border:1px solid red;/*解決代碼*/height:200px;}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單，代碼少，容易掌握。
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題。
建議：不推薦使用，只建議高度固定的布局時使用。
5、父級div定義overflow:auto
<style type="text/css">
.div1{background:#000080;border:1px solid red;
/*解決代碼*/width:98%;overflow:auto}
.div2{background:#800080; border:1px solid red; height:100px; margin-top:10px;width:98%}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度。
優點：簡單，代碼少，瀏覽器支持好。
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
69.Javascript的typeof返回哪些數據類型；列舉3種強制類型轉換和2中隱式類型轉換
1）返回數據類型
undefined
string
boolean
number
symbol(ES6)
Object
Function
2）強制類型轉換
Number(參數) 把任何類型轉換成數值類型。
parseInt(參數1，參數2) 將字符串轉換成整數
parseFloat()將字符串轉換成浮點數字
string(參數)：可以將任何類型轉換成字符串
Boolean() 可以將任何類型的值轉換成布爾值。
3）隱式類型轉換
1.四則運算
加法運算符+是雙目運算符，只要其中一個是String類型，表達式的值便是一個String。
對於其他的四則運算，只有其中一個是Number類型，表達式的值便是一個Number。
對於非法字符的情況通常會返回NaN：
'1' * 'a' // => NaN，這是因為parseInt(a)值為NaN，1 * NaN 還是 NaN
2.判斷語句
判斷語句中的判斷條件需要是Boolean類型，所以條件表達式會被隱式轉換為Boolean。 其轉換規則同Boolean的構造函數。比如：
var obj = {};if(obj){
while(obj);}
3.Native代碼調用
JavaScript宿主環境都會提供大量的對象，它們往往不少通過JavaScript來實現的。 JavaScript給這些函數傳入的參數也會進行隱式轉換。例如BOM提供的alert方法接受String類型的參數：
alert({a: 1}); // => [object Object]
69、 寫出3個使用this的典型應用
function Thing() { }
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
console.log(this.foo);
}
Thing.prototype.setFoo = function (newFoo) {
this.foo = newFoo;
}
var thing1 = new Thing();
var thing2 = new Thing();
thing1.logFoo(); //logs "bar"
thing2.logFoo(); //logs "bar"
thing1.setFoo("foo");
thing1.logFoo(); //logs "foo";
thing2.logFoo(); //logs "bar";
thing2.foo = "foobar";
thing1.logFoo(); //logs "foo";
thing2.logFoo(); //logs "foobar";
2.
function Thing1() { }
Thing1.prototype.foo = "bar";
function Thing2() {
this.foo = "foo";
}
Thing2.prototype = new Thing1();
function Thing3() {}
Thing3.prototype = new Thing2();
var thing = new Thing3();
console.log(thing.foo); //logs "foo"
3.
function Thing() {}
Thing.prototype.foo = "bar";
Thing.prototype.logFoo = function () {
function doIt() {
onsole.log(this.foo);
}
doIt.apply(this);
}
function doItIndirectly(method) {
method();
}
var thing = new Thing();
doItIndirectly(thing.logFoo.bind(thing)); //logs bar
對前端界面工程師這個職位是怎么樣理解的？它的前景會怎
樣？
前端工程師屬於一個比較新興的技術，各種技術層出不窮，隨着客戶體驗的重要性前端需要掌握的技能也越來越多了，對前端的要求也越來越多了，而且我們離客戶很近，除了掌握必要的技能還要掌握用戶的心理，屬於溝通。 前景：前景無疑是值得肯定的，也需要我們時刻關注最新的技術，這會是一個時刻都在學習的道路
70、 JQuery delegate函數的作用？請舉例說明
delegate() 方法為指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數
例如點擊div中的p標簽 讓 彈個窗口
$(‘div’).delegate(‘p’, ‘click’, function(){ alert();}
71、 Eval函數的作用
eval可以將字符串生成語句執行，一般執行動態的js語句。
eval的使用場合：有時候我們預先不知道要執行什么語句，只有當條件和參數給時才知道執行什么語句，這時候eval就派上用場了。
72、 標簽上title與alt屬性的區別是什么
title 是鼠標放上去的額外信息 alt 是不能正常顯示的信息
73、 對WEB標准以及w3c的理解與認識？
Web標准就是將頁面的解構、表現和行為各自獨立實現，w3c對標注提出了規范化的要求1.對結構的要求：（標簽規范可以提高搜索引擎對頁面的抓取效率，對SEO很有幫助）
1）標簽字母要小寫；
2）標簽要閉合；
3）標簽不允許隨意嵌套。
2.對css和js的要求：
1）盡量使用外聯css樣式表和js腳本，使結構、表現和行為分成三塊，符合規范，同時提高頁面渲染速度，提高用戶體驗；
2）樣式盡量少用行間樣式表，使結構與表現分離，標簽的id和class命名要做到見文知義，標簽越少，加載越快，用戶體驗更高，代碼維護更簡單，便於改版；
3）不需要變動頁面內容，便可提供打印版本而不需要復制內容，提高網站易用性
74、 Css選擇符有哪些？哪些屬性可以繼承？優先級算法如何計
算？
ID 和 CLASS ；Class 可繼承 ；偽類A標簽可以繼承；列表 UL LI DL DD DT 可繼承
；優先級就近原則，樣式定義最近者為准；載入樣式以最后載入的定位為准
優先級為
!important > [ id > class > tag ]
Important 比 內聯優先級高
75、 請戳出ie6/7下特有的cssbug
一：li邊距“無故” 增加
設置ul的顯示形式為*display:inline-block;即可，前面加*是只 針對IE6/IE7有效
二：IE6 不支持min-height屬性，但它卻認為height就是最小高度
使用ie6不支持但其余瀏覽器支持的屬性!important。
三:Overflow:
在IE6/7中，overflow無法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative;。
四：border：none 在IE6不起作用： 寫成border：0 就可以了，
五:100%高度
在IE6下，如果要給元素定義100%高度，必須要明確定義它的父級元素的高度，如果你需要給元素定義滿屏的高度，就得先給html和body定義 height:100%;。
六:雙邊距 Bug
當元素浮動時，IE6會錯誤的的把浮動方式的margin值雙倍計算，給float的元素添加一個display：inline
七：躲貓貓bug
些定義了:hover的鏈接，當鼠標移到那些鏈接上時，在IE6下就會觸發躲貓貓。
1.在（那個未浮動的）內容之后添加一個<span style=”clear: both;”> </span>
2.觸發包含了這些鏈接的容器的hasLayout，一個簡單的方法就是給其定義height:1%;
八:IE6 絕對定位的元素1px 間距bug
當絕對定位的父元素或寬度為奇數時，bottom和right會多出現1px，
解決方案，針對IE6進行hack處理
76、 如何將一個元素600毫秒的速度緩慢向上滑動顯示？
如果需要在父元素底部向上，可以利用margin-top 把子元素，擠下去，同事父元素設置隱藏，然后改變margintop的值也可以利用定來做，把子元素定位最下邊
(function(){
var oDiv = document.createElement('div');
oDiv.style.width = '100px';
oDiv.style.height = '100px';
oDiv.style.backgroundColor = 'red';
oDiv.style.position = 'absolute';
oDiv.style.marginTop = 100 + 'px';
document.body.appendChild(oDiv);
var timer = setInterval(function(){
var m = parseInt(oDiv.style.marginTop);
if (m == 0 ) {
clearInterval(timer);
return;
}
oDiv.style.marginTop = parseInt(oDiv.style.marginTop) - 1 + 'px';
},600);
})();
77、 寫一個獲取非行間樣式的函數
Function getStyle(obj, attr){
If(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
78、 請用正則表達式驗證數字
^[0-9]*$
79、 為什么利用多個域名來提供網站資源會更有效？
一、 突破瀏覽器的並發限制（瀏覽器同一域名最大的並發請求數量為6個，ie6為2個）
二、 節約cookie帶寬
三、 CDN緩存更方便
四、 防止不必要的安全問題（尤其是cookie的隔離尤為重要）
五、 節約主機域名連接數，優化頁面響應速度
80、 你如何從瀏覽器的URL中獲取參數信息
瀏覽器宿主環境中，有一個location對象，同時這個對象也是window對象和document對象的屬性。
location對象中提供了與當前窗口加載的文檔有關的的信息，即URL信息。
如 https://www.baidu.com/api/sousu?search=baidu&id=123#2
location.href: 完整URL
location.protocol: 返回協議（https:）
location.host: 返回服務器名稱和端口號（www.baidu.com）
location.hostname: 返回服務器名稱（www.baidu.com）
location.port:返回服務器端口號（http默認80，https默認443）
location.pathname:返回URL中的目錄和文件名（api/sousu）
location.search:返回查詢字符串（?search=baidu&id=123#2）
location.hash:返回hash值（#2）
81、 手機端文字大小用什么單位
對於只需要適配少部分手機設備，且分辨率對頁面影響不大的，使用px即可
對於需要適配各種移動設備，使用rem，例如只需要適配iPhone和iPad等分辨率差別比較挺大的設備
82、 是否做過有上百圖層的psd切圖？ps隱藏其他圖層，只顯示其中一個圖層的快捷鍵
Alt + 當前圖層前眼睛
83、 瀏覽器標准模式和懷疑模式之間的區別是什么？
這是個歷史遺留問題，W3C標准推出前，舊的頁面都是根據舊的渲染方式對頁面進行渲染的，因此在W3C標准推出后為了保證舊頁面的正常顯示，保持瀏覽器的兼容性，這樣瀏覽器上就產生了能夠兼容W3C標准渲染的嚴格模式和保證舊頁面顯示的怪異模式的標准兼容模式。
具體表現：
1.在嚴格模式中 ：width是內容寬度 ，元素真正的寬度 = margin-left + border-left-width + padding-left + width + padding-right + border-right- width + margin-right;
在怪異模式中 ：width則是元素的實際寬度 ，內容寬度 = width - ( padding-left + padding-right + border-left-width + border-right-width)
2）可以設置行內元素的高寬
在標准模式下，給span等行內元素設置wdith和height都不會生效，而在怪異模式下，則會生效。
3）可設置百分比的高度
在標准模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置高度，子元素設置一個百分比的高度是無效的。
4）用margin:0 auto設置水平居中在IE下會失效
使用margin:0 auto在標准模式下可以使元素水平居中，但在怪異模式下卻會失效, 怪異模式下的解決辦法，用text-align屬性:
body{text-align:center};#content{text-align:left}
5）怪異模式下設置圖片的padding會失效
6）怪異模式下Table中的字體屬性不能繼承上層的設置
7）怪異模式下white-space:pre會失效
84、 Javascript的同源策略
同源策略是Javascript重要的安全度量標准。它最早出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不同源裝載。所謂的同源就是同協議，同主機名，同端口號。
它的精髓很簡單：它認為自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被允許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。
85、 你所做的WEB移動端項目中，有遇到哪些兼容?
給大家推薦個網址：
http://www.jb51.net/article/84973.htm
86、 有了解響應式布局嗎？請大體說一說
響應式布局概念：Responsive design，意在實現不同屏幕分辨率的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。
設計步驟：
- 設置meta標簽
- 根據媒體查詢設置樣式
- 設置多種視圖寬度
注意點：
- 寬度使用百分比
- 處理圖片縮放問題
87、 身為以為web前端工程師，你肯定知道現在最流行的前端技
術吧，有那些？
Vuejs2.0/Angular2.0/React Native /es6//Nodejs
http2
gulp/webpack
88、 請簡述為什么要使用數據庫的事務
數據庫事務(Database Transaction) ，是指作為單個邏輯工作單元執行的一系列操作，要么完全地執行，要么完全地不執行。
原子性（Atomic）（Atomicity)
事務必須是原子工作單元；對於其數據修改，要么全都執行，要么全都不執行。通常，與某個事務關聯的操作具有共同的目標，並且是相互依賴的。如果系統只執行這些操作的一個子集，則可能會破壞事務的總體目標。原子性消除了系統處理操作子集的可能性。
一致性（Consistent）(Consistency)
事務在完成時，必須使所有的數據都保持一致狀態。在相關數據庫中，所有規則都必須應用於事務的修改，以保持所有數據的完整性。事務結束時，所有的內部數據結構（如 B 樹索引或雙向鏈表）都必須是正確的。某些維護一致性的責任由應用程序開發人員承擔，他們必須確保應用程序已強制所有已知的完整性約束。例如，當開發用於轉帳的應用程序時，應避免在轉帳過程中任意移動小數點。
隔離性（Insulation）(Isolation)
由並發事務所作的修改必須與任何其它並發事務所作的修改隔離。事務查看數據時數據所處的狀態，要么是另一並發事務修改它之前的狀態，要么是另一事務修改它之后的狀態，事務不會查看中間狀態的數據。這稱為隔離性，因為它能夠重新裝載起始數據，並且重播一系列事務，以使數據結束時的狀態與原始事務執行的狀態相同。當事務可序列化時將獲得最高的隔離級別。在此級別上，從一組可並行執行的事務獲得的結果與通過連續運行每個事務所獲得的結果相同。由於高度隔離會限制可並行執行的事務數，所以一些應用程序降低隔離級別以換取更大的吞吐量。
持久性（Duration）(Durability）
事務完成之后，它對於系統的影響是永久性的。該修改即使出現致命的系統故障也將一直保持。