藍本面試總結

時間 2020-09-14

標籤藍本面試總結欄目快樂工作简体版

原文原文鏈接

HTML5面試題javascript

1、 Doctype的做用? 嚴格模式和混雜模式的區分，以及如何觸發這2種模式?php

<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，用什麼文檔類型規範來解析這個文檔。css

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

嚴格模式就是瀏覽器根據web標準去解析頁面，是一種要求嚴格的DTD(文檔類型定義)，不容許使用任何表現層的語法，前端

混雜模式是一種向後兼容的解析方法。vue

觸發標準模式或者說嚴格模式很簡單，就是Html前申明正確的DTD，出發混雜模式能夠在html文檔開始不聲明DTD，或者在DOCTYPE前加入XML聲明html5

2、請寫出至少20個HTML5標籤java

<article> <aside> <audio> <canvas> <datalist> <command> <details> <embed> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <mark> <nav> <section> <time> <video> <summary> <meter> <output> <progress> <source>node

3、語義化的理解？react

1.html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；

2.在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。

3.搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO(搜索引擎優化)。

4.使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

4、列舉5種IE haslayout的屬性及其值

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（jpg）格式特色:
　　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、可以設置文本加粗的樣式屬性是什麼

字體加粗（font一weight）　　

功能：用於設置字體筆劃的粗細。　　

屬性值：取消加粗- normal 　　

屬性值一 bold, bolder, light, lighter 　　

漸變度一 100, 200, 300, 400(至關於normal), 500, 600, 700(至關於 bold、 lighter、 bolder、以及數值100－900。　　（500如下常規字體，600-900加粗字體）

語法爲：h1 { font一weight：屬性值 }

7、 Html和xhtml有什麼區別?

html是一種基本的web網頁設計語言（超文本標記語言）。

xhtml是一個基於XML的置標語言。（可擴展超文本語言）

最主要的不一樣:

XHTML元素必須正確的被嵌套，元素必須關閉，標籤必須小寫，必須有根元素。

8、算法題：有一個長度爲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）。在空間上比第二種方法要好，並且不會出現第一種方法中所說的溢出問題。

9、實現如下方法（與標準一致）

Element.prototype.getElementsByClassName：

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;

};

10、編寫一個方法去掉一個數組的重複元素

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;

}

11、請使用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>

12、編寫一個佈局，頁面寬度自適應，最小寬度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>

十3、談談對html5的瞭解

1.良好的移動性，以移動設備爲主。

2.響應式設計，以適應自動變化的屏幕尺寸

3.支持離線緩存技術，webStorage本地緩存

4.新增canvas，video，audio等新標籤元素。新增特殊內容元素：article，footer，header，nav，section等，新增表單控件：calendar，date，time，email，url，search。

5.地理定位...

6.新增webSocket/webWork技術

十4、 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]]，這樣實例化對象的時候，原型對象的方法並無在某個具體的實例中，由於原型沒有被實例。

十5、在css中哪一個屬性會影響dom讀取文檔流的順序

1.direction, writing一mode

十6、前端頁面由哪三層構成，分別是什麼，做用是什麼

Html (結構) : 超文本標記語言, 由 HTML 或 xhtml之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

Css (表現) : 層疊樣式表 , 由css負責建立。css對「如何顯示有關內容」的問題作出了回答。

Js (行爲) : 客戶端腳本語言 , 內容應該如何對事件作出反應

十7、 Css的基本語句構成是？

語法:
（自定義的樣式名稱）｛
樣式內容（屬性：屬性值；）
｝

十8、如何對網站的文件和資源進行優化

1．文件合併（目的是減小http請求）

2．文件壓縮（目的是直接減小文件下載的體積）

3．使用cdn託管資源

4．使用緩存

5．gizp壓縮須要的js和css文件

6．meta標籤優化（title,description,keywords）,heading標籤的優化,alt優化

7．反向連接，網站外連接優化

十9、 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程序建立的對象。自定義的對象也是宿主對象。

二10、輸入url後的加載過程

1) 查找域名對應IP地址

2) 創建鏈接(TCP的三次握手)

3) 構建網頁

4) 斷開鏈接(TCP的四次揮手)

二11、說說TCP傳輸的三次握手四次揮手策略

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

發送端首先發送一個帶SYN標誌的數據包給對方。接收端收到後，回傳一個帶有SYN/ACK標誌的數據包以示傳達確認信息。

最後，發送端再回傳一個帶ACK標誌的數據包，表明「握手」結束。

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

斷開一個TCP鏈接則須要「四次揮手」：

第一次揮手：主動關閉方發送一個FIN，用來關閉主動方到被動關閉方的數據傳送，也就是主動關閉方告訴被動關閉方：我已經不會再給你發數據了(固然，在fin包以前發送出去的數據，若是沒有收到對應的ack確認報文，主動關閉方依然會重發這些數據)，可是，此時主動關閉方還可以接受數據。

第二次揮手：被動關閉方收到FIN包後，發送一個ACK給對方，確認序號爲收到序號+1（與SYN相同，一個FIN佔用一個序號）。

第三次揮手：被動關閉方發送一個FIN，用來關閉被動關閉方到主動關閉方的數據傳送，也就是告訴主動關閉方，個人數據也發送完了，不會再給你發數據了。

第四次揮手：主動關閉方收到FIN後，發送一個ACK給被動關閉方，確認序號爲收到序號+1，至此，完成四次揮手。

二12、 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,類，類型,元素...

二十3、 jQuery中的Delegate()函數有什麼做用

delegate() 方法爲指定的元素（屬於被選元素的子元素）添加一個或多個事件處理程序，並規定當這些事件發生時運行的函數。

使用 delegate() 方法的事件處理程序適用於當前或將來的元素（好比由腳本建立的新元素）。$("div").delegate("button","click",function(){

$("p").slideToggle();});

二十4、行內元素有那些。塊級元素有那些。空元素有哪些

首先：CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，如div的display默認值爲「block」，則爲「塊級」元素； span默認display屬性值爲「inline」，是「行內」元素。

（1）行內元素有：a b span select strong（強調的語氣）img input（內聯元素）

（2）塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

（3）常見的空元素：

不爲人知的是：

二十5、說幾條javasprit的基本規範

1.不要在同一行聲明多個變量。

2.請使用 ===/!==來比較true/false或者數值

3.使用對象字面量替代new Array這種形式

4.不要使用全局函數。

5.Switch語句必須帶有default分支

6.函數不該該有時候有返回值，有時候沒有返回值。

7.For循環必須使用大括號

8.If語句必須使用大括號

9.for一in循環中的變量應該使用var關鍵字明確限定做用域，從而避免做用域污染。

二十6、介紹一下標準的css盒模型，低版本ie盒模型有什麼不一樣

（1）盒模型有兩種， IE 盒子模型、W3C 盒子模型；

（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；

（3）區別： IE的width部分把 border 和 padding計算了進去;

二十7、說出三種減小頁面加載的方法（加載時間指感知的時間或實際加載的時間）

CSS Sprites；

JS、CSS源碼壓縮、圖片大小控制合適；

網頁Gzip；

CDN託管；

data緩存；

圖片服務器；

二十8、用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>

二十9、 Html5中datalist是什麼

<datalist> 標籤訂義選項列表，與 input 元素配合使用該元素，來定義 input 可能的值。

datalist 及其選項不會被顯示出來，它僅僅是合法的輸入值列表。

<input id="myCar" list="cars" />

<datalist id="cars">

<option value="BMW">

<option value="Ford">

<option value="Volvo">

</datalist>

三10、 Ajax同步和異步的區別，如何解決跨域問題

同步的概念應該是來自於OS中關於同步的概念:不一樣進程爲協同完成某項工做而在前後次序上調整(經過阻塞,喚醒等方式).同步強調的是順序性.誰先誰後.異步則不存在這種順序性.

同步：瀏覽器訪問服務器請求，用戶看獲得頁面刷新，從新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操做。

異步：瀏覽器訪問服務器請求，用戶正常操做，瀏覽器後端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。

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

三11、列舉幾種後端通信的方法及其使用的場景，關於跨域的理解。

1.後端程序能夠經過session來進行通信，session有過時時間，主要用於驗證碼的驗證，登陸過時等的應用。

2.數據庫，數據庫支持多種語言的操做，那麼經過數據庫就能夠通信。

關於跨域：

跨域請求存在的緣由：因爲瀏覽器的同源策略，即屬於不一樣域的頁面之間不能相互訪問各自的頁面內容。

跨域的場景：

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（得不到數據返回)

一.image.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.webSocket（瞭解性拓展）

服務端推送websocket和sse場景及應用

應用場景

均可以進行服務端推送,而且都是使用長鏈接來進行.但二者的實現又有一點不一樣,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來路由.

三12、設計一個幻燈應用，須要列舉選擇的基礎框架、項目的基礎框架和代碼管理、幻燈數據的存儲和讀取，部分特效的實現，能夠只寫思路，後續面聊。

本題無標準答案，同窗們能夠本身研究考慮一下，。

三十3、 Html5中本地存儲概念是什麼，有什麼優勢，與cookie有什麼區別？

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

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的；

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

區別：

一、 cookie數據始終在同源的http請求中攜帶（即便不須要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

二、存儲大小限制也不一樣，cookie數據不能超過4k，同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

三、數據有效期不一樣，sessionStorage：僅在當前瀏覽器窗口關閉前有效，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，所以用做持久數據；cookie只在設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉。

四、做用域不一樣，sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage 在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。

三十4、說說你對做用域鏈的理解

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

三十5、什麼是ajax和json，它們的優缺點

ajax的全稱：Asynchronous Javascript And XML。

異步傳輸+js+xml。實現無刷新狀態更新頁面和異步提交

所謂異步，在這裏簡單地解釋就是：向服務器發送請求的時候，咱們沒必要等待結果，而是能夠同時作其餘的事情，等到有告終果它本身會根據設定進行後續操做，與此同時，頁面是不會發生整頁刷新的，提升了用戶體驗。

Ajax實現過程：

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

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

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

(4)發送HTTP請求

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

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

優勢：

不須要插件支持

用戶體驗極佳

提高Web程序性能

減輕服務器和寬帶的負擔

缺點：

前進後退按鈕被破壞

搜索引擎的支持不夠

開發調試工具缺少

JSON（JavaScript Object Notation）和XML同樣也是一種簡單文本格式。是一種比較流行的標準格式，是數據的載體，相對於XML，JSON更加易讀、更便於肉眼檢查。在語法的層面上，JSON與其餘格式的區別是在於分隔數據的字符，JSON中的分隔符限於單引號、小括號、中括號、大括號、冒號和逗號。

優勢：

做爲一種數據傳輸格式，JSON 與 XML 很類似，可是它更加靈巧。

JSON不須要從服務器端發送含有特定內容類型的首部信息。

缺點：

語法過於嚴謹

代碼不易讀

eval 函數存在風險

三十6、 Html5有那些新增的表單元素

表單控：color，calendar，date，datetime，datetime一local，time，mouth，week，email，url，search，range，tel

新的表單元素：datalist，keygen，output

三十7、 h1ttp狀態碼有那些，分別表明什麼意思

簡單版:

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：因爲超載或停機維護，服務器目前沒法使用，一段時間後可能恢復正常

三十8、 HTTP的請求方法

HTTP（Hypertext Transfer Protocol）的八種請求方法：

方法	概述
❤GET	請求頁面的詳細信息，並返回實體主體。
❤POST	向指定資源提交數據進行數據請求（例如提交表單，或者上傳文件）。數據被包含在請求體中。POST請求可能會致使新的資源的創建和/或已有資源的修改。
PUT	從客戶端向服務器傳送的數據取代指定的文檔內容。
DELETE	請服務器刪除指定的頁面。
HEAD	相似與Get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
CONNECT	HTTP/1.1協議中預留給可以將鏈接改成管道方式的代理服務器。
OPTIONS	容許客戶端查看服務器的性能。
TRACE	回顯服務器收到的請求，主要用於測試或診斷。

三十9、什麼是閉包（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

你知道哪些針對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++) {}

四10、用原型鏈繼承的方式寫一個類和子類

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());

四11、編寫一個方法求一個字符串的字節長度，假設：一個英文字符佔用一個字節，一箇中文字符佔用兩個字節

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)

}

四12、簡單歸納瀏覽器事件模型，如何得到資源dom節點

在各類瀏覽器中存在三種事件模型:原始事件模型( original event model),DOM2事件模型,IE事件模型.其中原始的事件模型被全部瀏覽器所支持,而DOM2中所定義的事件模型目前被除了IE之外的全部主流瀏覽器支持。

瀏覽器事件模型分爲三個階段

一、捕獲階段

二、目標階段

三、冒泡階段

Dom節點獲取方法：

1．經過id屬性獲取 document.getElementById()

2．經過name屬性獲取 document.getElementsByName()

3．經過標籤名獲取 document.getElementsByTagName()

4．經過class屬性獲取 document.getElementsByClassName()

5．原生js中的querySelector 和 querySelectorAll方法也一樣能夠獲取到相應的dom節點，類似於jquery，但比jq更快

四十3、寫一段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();

}

四十4、判斷字符串是不是這樣組成的，第一個必須是字母，後面能夠是字母和數字、下劃線，總長度爲5一20（請使用正則表達式）

function if_fit(str){

var reg=/^[A一Za一z]{1}\w{5,20}/g;

var result=str.search(reg);

return result;

}

四十5、截取字符串abcdefg的efg

var str="abcdefg";

console.log(str.slice(4));

四十6、 css引入的方式有哪些，link和@import的區別是什麼

有四種形式:

1.鏈入外部樣式表,就是把樣式表保存爲一個樣式表文件,而後在頁面中用<link rel="stylesheet" type="text/css" href="*.css">連接這個樣式表文件.

2.內部樣式表,就是把樣式表放到頁面的<head>區裏. <style type="text/css">

div {height: 600px;}

</style>

3.導入外部樣式表,用@import,在<head>與</head>之間，<style type="text/css">

<!一一

@import "*.css"

一一>

</style>

4.內嵌樣式,就是在標籤內寫入style="",好比:

<div style="background:#cccccc"></div>設置div背景色爲灰色.

區別：

1）. link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。

2）. link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。

3）. link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。

4）. link支持使用Javascript控制DOM去改變樣式；而@import不支持。

四十7、將字符串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(""));

四十8、爲何沒法定義1px左右高度的容器

IE6下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：overflow:hidden | zoom:0.08 | line一height:1px

四十9、 FireFox中標籤的居中問題的解決辦法

*{margin：0px auto；}

五10、請寫出XHTML和css如何註釋

XHTML:<!一一註釋內容一一>

css:/* 註釋內容*/

五11、如今想調節一下父元素的透明度，可是又不影響子元素的透明度，怎麼破？

方法1：用RGBA

方法2：再加一層與父元素同級的div裝載子元素定位到子元素原位置

五12、簡述ECMASCRIPT6的新特性

1.增長塊做用域

2.增長let const

3.解構賦值

4.函數參數擴展（函數參數能夠使用默認值、不定參數以及拓展參數）

5.增長class類的支持

6.增長箭頭函數

7.增長模塊和模塊加載（ES6中開始支持原生模塊化啦）

8.math, number, string, array, object增長新的API

五十3、 Apply和call方法的異同

相同點:兩個方法產生的做用是徹底同樣的，第一個參數都是對象；

不一樣點:

call()方法參數將依次傳遞給借用的方法做參數，即fn.call(thisobj, arg1,arg2,arg3...argn)，有n個參數

apply()方法第一個參數是對象，第二個參數是數組fn.apply(thisobj,arg)，此處的arg是一個數組,只有兩個參數

五十4、在javascript中什麼是僞數組，如何將僞數組轉化爲標準數組

這裏把符合如下條件的對象稱爲僞數組：

1，具備length屬性

2，按索引方式存儲數據

3，不具備數組的push,pop等方法

僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，不具備數組的push,pop等方法，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用document.getElementsByTagName, document.childNodes之類的,它們返回的NodeList對象都屬於僞數組。

能夠使用如下函數將僞數組轉化爲真正的Array對象（兼容問題處理）。

function makeArray(c) {

try{

return Array.prototype.slice.call(c);

}catch(e){

var ret = [],i, len = c.length;

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

ret[i] = (c[i]);

}

return ret;

}

五十5、 Js和native交互的方法與問題

實現JS和Native交互有兩種方式:

第一種：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」);

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不對 ,這裏的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,不要擅自的本身拼值,由於你拼的字符串中可能存在分號,內部多分號作了特殊處理,截取分號以前的,以後的直接放棄!

五十6、用sass的mixin定義一些代碼片斷，且可傳參數

/**

* @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;

}

五十7、移動端常常出現的兼容問題，談談移動端應用或者wap站的一些優化技巧和心得

一、安卓瀏覽器看背景圖片，有些設備會模糊。

由於手機分辨率過小，若是按照分辨率來顯示網頁，字會很是小，安卓手機devicePixelRatio比較亂，有1.5的，有2的也有3的。想讓圖片在手機裏顯示更爲清晰，必須使用2x的背景圖來代替img標籤（通常狀況都是用2倍），或者指定 background一size:contain;均可以

二、防止手機中網頁放大和縮小

三、 apple一mobile一web一app一capable是設置Web應用是否以全屏模式運行。

format一detection 啓動或禁用自動識別頁面中的電話號碼。

語法：<meta name="format一detection" content="telephone=no">

默認狀況下，設備會自動識別任何多是電話號碼的字符串。設置telephone=no能夠禁用這項功能。

html5調用安卓或者ios的撥號功能

html5提供了自動調用撥號的標籤，只要在a標籤的href中添加tel:就能夠了。

以下：<a href="tel:4008106999,1034">400一810一6999 轉 1034</a>

撥打手機號以下<a href="tel:15677776767">點擊撥打15677776767</a>

上下拉動滾動條時卡頓、慢

body {

一webkit一overflow一scrolling: touch;

overflow一scrolling: touch;

}

Android3+和iOS5+支持CSS3的新屬性爲overflow一scrolling

禁止複製、選中文本

Element {

一webkit一user一select: none;

一moz一user一select: none;

一khtml一user一select: none;

user一select: none;

}

解決移動設備可選中頁面文本(視產品須要而定)

10. 長時間按住頁面出現閃退

element {

一webkit一touch一callout: none;

}

11. iphone及ipad下輸入框默認內陰影

Element{

一webkit一appearance: none;

}

12. ios和android下觸摸元素時出現半透明灰色遮罩

Element {

一webkit一tap一highlight一color:rgba(255,255,255,0)

}

設置alpha值爲0就能夠去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。詳細介紹參照（http://www.jb51.net/post/phone_web_ysk）

13. active兼容處理即僞類 :active 失效

方法一：body添加ontouchstart

方法二：js給 document 綁定 touchstart 或 touchend 事件

<style>

a {

color: #000;

}

a:active {

color: #fff;

}

</style>

document.addEventListener('touchstart',function(){},false);

</script>

14. 動畫定義3D啓用硬件加速

Element {

一webkit一transform:translate3d(0, 0, 0)

transform: translate3d(0, 0, 0);

}

注意：3D變形會消耗更多的內存與功耗

15. Retina屏的1px邊框

Element{

border一width: thin;

}

16. webkit mask 兼容處理

某些低端手機不支持css3 mask，能夠選擇性的降級處理。

好比能夠使用js判斷來引用不一樣class：

if( 'WebkitMask' in document.documentElement.style){

alert('支持mask');

} else {

alert('不支持mask');

}

17. 旋轉屏幕時，字體大小調整的問題

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {

一webkit一text一size一adjust:100%;

}

18. transition閃屏

/設置內嵌的元素在 3D 空間如何呈現：保留3D /

一webkit一transform一style: preserve一3d;

/ 設置進行轉換的元素的背面在面對用戶時是否可見：隱藏 /

一webkit一backface一visibility:hidden;

19. 圓角bug

某些Android手機圓角失效 background一clip: padding一box;

20. 頂部狀態欄背景色

說明：

除非你先使用apple一mobile一web一app一capable指定全屏模式，不然這個meta標籤不會起任何做用。

若是content設置爲default，則狀態欄正常顯示。若是設置爲blank，則狀態欄會有一個黑色的背景。若是設置爲blank一translucent，則狀態欄顯示爲黑色半透明。若是設置爲default或blank，則頁面顯示在狀態欄的下方，即狀態欄佔據上方部分，頁面佔據下方部分，兩者沒有遮擋對方或被遮擋。若是設置爲blank一translucent，則頁面會充滿屏幕，其中頁面頂部會被狀態欄遮蓋住（會覆蓋頁面20px高度，而iphone4和itouch4的Retina屏幕爲40px）。默認值是default。

21. 設置緩存

手機頁面一般在第一次加載後會進行緩存，而後每次刷新會使用緩存而不是去從新向服務器發送請求。若是不但願使用緩存能夠設置no一cache。

22. 桌面圖標

iOS下針對不一樣設備定義不一樣的桌面圖標。

圖片尺寸能夠設定爲5757（px）或者Retina能夠定爲114114（px），ipad尺寸爲72*72（px)

23. 啓動畫面

iOS下頁面啓動加載時顯示的畫面圖片，避免加載時的白屏。

能夠經過madia來指定不一樣的大小：

<!一一iPhone一一>

<!一一 iPhone Retina 一一>

<!一一 iPhone 5 一一>

<!一一 iPad portrait 一一>

<!一一 iPad landscape 一一>

<!一一 iPad Retina portrait 一一>

<!一一 iPad Retina landscape 一一>

24. 瀏覽器私有及其它meta

QQ瀏覽器私有

全屏模式

強制豎屏

強制橫屏

應用模式

UC瀏覽器私有

全屏模式

強制豎屏

強制橫屏

應用模式

其它(針對手持設備優化，主要是針對一些老的不識別viewport的瀏覽器，好比黑莓)

微軟的老式瀏覽器

windows phone 點擊無高光

25. IOS中input鍵盤事件keyup、keydown、keypress支持不是很好

用input search作模糊搜索的時候，在鍵盤裏面輸入關鍵詞，會經過ajax後臺查詢，而後返回數據，而後再對返回的數據進行關鍵詞標紅。用input監聽鍵盤keyup事件，在安卓手機瀏覽器中是能夠的，可是在ios手機瀏覽器中變紅很慢，用輸入法輸入以後，並未馬上響應keyup事件，只有在經過刪除以後才能響應！

解決辦法：

能夠用html5的oninput事件去代替keyup

document.getElementById('testInput').addEventListener('input', function(e){

var value = e.target.value;

});

</script>

而後就達到相似keyup的效果！

26. h5網站input 設置爲type=number的問題

通常會產生三個問題，一個問題是maxlength屬性很差用了。另一個是form提交的時候，默認給取整了。三是部分安卓手機出現樣式問題。

問題一解決，用js以下

function checkTextLength(obj, length) {

if(obj.value.length > length) {

obj.value = obj.value.substr(0, length);

}

問題二，是由於form提交默認作了表單驗證，step默認是1,要設置step屬性，假如保留2位小數，寫法以下：

關於step：input 中type=number，通常會自動生成一個上下箭頭，點擊上箭頭默認增長一個step，點擊下箭頭默認會減小一個step。number中默認step是1。也就是step=0.01,能夠容許輸入2位小數，而且點擊上下箭頭分別增長0.01和減小0.01。

假如step和min一塊兒使用，那麼數值必須在min和max之間。

問題三，去除input默認樣式

input[type=number] {

一moz一appearance:textfield;

}

input[type=number]::一webkit一inner一spin一button,

input[type=number]::一webkit一outer一spin一button {

一webkit一appearance: none;

margin: 0;

}

27. ios 設置input 按鈕樣式會被默認樣式覆蓋

解決方式以下：

input,

textarea {

border: 0;

一webkit一appearance: none;

}

設置默認樣式爲none

28. IOS鍵盤字母輸入，默認首字母大寫

解決方案，設置以下屬性

29. select 下拉選擇設置右對齊

設置以下：

select option {

direction: rtl;

}

30. 經過transform進行skew變形，rotate旋轉會形成出現鋸齒現象

能夠設置以下：

一webkit一transform: rotate(一4deg) skew(10deg) translateZ(0);

transform: rotate(一4deg) skew(10deg) translateZ(0);

outline: 1px solid rgba(255,255,255,0)

31. 移動端點擊300ms延遲

300ms致使用戶體驗不是很好，解決這個問題，咱們通常在移動端用tap事件來取代click事件。推薦兩個js，一個是fastclick，一個是tap.js

關於300ms延遲，具體請看：http://thx.github.io/mobile/300ms一click一delay/

32. 移動端點透問題

案例以下：

<div id="haorooms">點頭事件測試</div>

div是絕對定位的蒙層,而且z一index高於a。而a標籤是頁面中的一個連接，咱們給div綁定tap事件：

$('#haorooms').on('tap',function(){

$('#haorooms').hide();

});

咱們點擊蒙層時 div正常消失，可是當咱們在a標籤上點擊蒙層時，發現a連接被觸發，這就是所謂的點透事件。

緣由：

touchstart 早於 touchend 早於click。即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說咱們tap觸發以後蒙層隱藏，此時click尚未觸發，300ms以後因爲蒙層隱藏，咱們的click觸發到了下面的a連接上。

解決：

（1）儘可能都使用touch事件來替換click事件。例如用touchend事件(推薦)。

（2）用fastclick，參考：https://github.com/ftlabs/fastclick

（3）用preventDefault阻止a標籤的click

（4）延遲必定的時間(300ms+)來處理事件（不推薦）

（5）以上通常都能解決，實在不行就換成click事件。

下面介紹一下touchend事件，以下：

$("#haorooms").on("touchend", function (event) {

event.preventDefault();

});

33. 關於 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)

iOS 瀏覽器橫屏時會重置字體大小，設置 text一size一adjust 爲 none 能夠解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，所以最佳方案是將 text一size一adjust 爲 100% 。

一webkit一text一size一adjust: 100%;

一ms一text一size一adjust: 100%;

text一size一adjust: 100%;

34. 關於 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格能夠經過正則去掉this.value = this.value.replace(/\u2006/g, '');

35. 移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，因爲自動播放網頁中的音頻或視頻，會給用戶帶來一些困擾或者沒必要要的流量消耗，因此蘋果系統和安卓系統一般都會禁止自動播放和使用JS的觸發播放，必須由用戶來觸發才能夠播放。

解決方法思路：先經過用戶touchstart觸碰，觸發播放並暫停（音頻開始加載，後面用 JS 再操做就沒問題了）。

解決代碼：

document.addEventListener('touchstart', function () {

document.getElementsByTagName('audio')[0].play();

document.getElementsByTagName('audio')[0].pause();

});

移動端 HTML5 input date 不支持 placeholder 問題

複製代碼代碼以下:

有的瀏覽器可能要點擊兩遍！

部分機型存在type爲search的input，自帶close按鈕樣式修改方法

有些機型的搜索input控件會自帶close按鈕（一個僞元素），而一般爲了兼容全部瀏覽器，咱們會本身實現一個，此時去掉原生close按鈕的方法爲

#Search::一webkit一search一cancel一button{

display: none;

}

若是想使用原生close按鈕，又想使其符合設計風格，能夠對這個僞元素的樣式進行修改。

喚起select的option展開

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {

var event;

event = document.createEvent('MouseEvents');

event.initMouseEvent('mousedown', true, true, window);

sltElement.dispatchEvent(event);

};

五十8、 H5中新增的單位rem是什麼意思，和em的關係，以及rem在自適應佈局中的應用方法

Rem爲單位：

rem是相對於根元素<html>的「font一size」爲基準。好比說咱們給html設置font一size爲100px，

那麼咱們要給html中的p標籤設置16px的字體，font一size設置.16rem就能夠，在這裏16px=.16rem。

Em爲單位：

這種技術須要一個參考點，通常都是以<body>的「font一size」爲基準。好比說咱們使用「1em」等於「10px」來改變默認值「1em=16px」，這樣一來，咱們設置字體大小至關於「14px」時，只須要將其值設置爲「1.4em」。

這個單位與em有什麼區別呢？

區別在於使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖反應。目前，除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。這些瀏覽器會忽略用rem設定的字體大小。

五十9、如何實現瀏覽器內多個標籤頁之間的通訊？

經過WebSocket或SharedWorker把客戶端和服務器端創建socket鏈接，從而實現通訊；也能夠調用localstorge、cookies等本地存儲方法。

六10、假設如今頁面裏有一個id是con的div，如今須要編寫js代碼，在頁面加載完成後將div的高度設置成100px，寬度設置成60px，並設置成灰色的1px的邊框，背景設置成淺黃色。

window.onload=function(){

var oDiv=document.getElementById("con");

oDiv.style.height="100px";

oDiv.style.width="60px";

oDiv.style.width="1px solid gray";

oDiv.style.backgroundColor="yellow";

}

六11、對新技術有那些瞭解，常去的網站有那些

node.js、angular.js、vue.js，reactjs，react-native，微信小程序

掘金、簡書、github、csdn，知乎等

六12、用程序找出數組中出現次數超過一半的數字

思路：

一、一個數字在數組中出現次數超過了一半，則排序後，位於數組中間的數字必定就是該出現次數超過了長度一半的數字（能夠用反證法證實），也便是說，這個數字就是統計學上的中位數。最容易想到的辦法是用快速排序對數組排序號後，直接取出中間的那個數字，這樣的時間複雜度爲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)。

六十3、請設計一套方案，用於確保頁面中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");

});

網頁加載速度優化：

一、減小請求

最大的性能漏洞就是一個頁面須要發起幾十個網絡請求來獲取諸如樣式表、腳本或者圖片這樣的資源，這個在相對低帶寬和高延遲的移動設備鏈接上來講影響更嚴重。

CDNs（內容分發網絡）把資源放在離用戶地理位置更近的地方對解決這個問題能起到很大做用，可是比起獲取請求，大量的請求對頁面加載時間的影響更爲嚴重，並且最近的發現代表，CDNs對移動端用戶的性能影響愈來愈低。

二、整合資源

對開發者來講，將Javascript代碼和CSS樣式放到公共的文件中供多個頁面共享是一種標準的優化方法，這個方法能很簡單的維護代碼，而且提升客戶端緩存的使用效率。

在Javascript文件中，要確保在一個頁面中相同的腳本不會被加載屢次，當大團隊或者多個團隊合做開發的時候，這種冗餘的腳本就很容易出現，你可能會對它的發生頻率並不低感到很是吃驚。

Sprites是css中處理圖片的一項技術，Sprites就是將多張圖片整合到一個線性的網狀的大圖片中，頁面就能夠將這個大圖片一次性獲取回來而且作爲css的背景圖，而後使用css的背景定位屬性展現頁面須要的圖片部分，這種技術將多個請求整合成一個，能顯著地改善性能。

平穩地改進可是須要對資源有控制權限，根據開發者的網站不一樣權限，一些資源並不須要被整合起來（例如，一些由CMS生成的資源），還有，對於一些外部域引用的資源，強行整合可能會致使問題，馬海祥提醒你們須要注意的是，整合資源對手機瀏覽器來講是一把雙刃劍，整合資源確實會在首次訪問減小請求，可是大的資源文件可能會致使緩存失效，因此，須要當心地使用各類技術整合資源，以達到優化本地存儲的目的。

三、使用瀏覽器緩存和本地緩存

如今全部的瀏覽器都會使用本地資源去緩存住那些被Cache一Control或者Expires頭標記的資源，這些頭能標記資源須要緩存的時間，另外，ETag（實體標籤）和Last一Modified頭來標識當資源過時後是否須要從新請求，瀏覽器爲了減小沒必要要的服務器請求，儘量地從本地緩存中獲取資源，而且將那些已通過期的、或者當緩存空間減少的時候將那些好久不用的資源進行清理，瀏覽器緩存一般包括圖片，CSS，Javascript代碼，這些緩存能合理地提升網站的性能（好比爲了支持後退和前進的按鈕，使用一個單獨的緩存來保存整個渲染的頁面）。

移動瀏覽器緩存，一般是比桌面PC小的多，這就致使了緩存的數據會很常常被清理，HTML5的緩存基於瀏覽器緩存提供了一個很好的替換方案，Javascript的localStorage已經在全部主流的桌面和移動端瀏覽器上都實現了，使用腳本代碼能簡便地支持HTML5的localStorage操做，能夠讀寫鍵值數據，每一個域名大概有5MB的容量，雖然不一樣的移動瀏覽器上讀寫速度相差很大，可是localStorage大容量的緩存使得它很適合做爲客戶端的緩存，從localStorage獲取資源明顯快於從服務器上獲取資源，並且在大多數移動設備上也比依靠緩存頭或者瀏覽器的本地緩存更靈活可靠，這是移動瀏覽器比桌面PC更有優點的一個地方，在桌面PC上，本地緩存仍然優先使用標準的瀏覽器緩存，致使桌面PC本地緩存的性能落後於移動瀏覽器。

在此，馬海祥要提醒各位一下：雖然localStorage的機制易於實現，可是它的一些控制機制倒是很是複雜的，你須要考慮到緩存帶給你的全部問題，好比緩存失效（何時須要刪除緩存？），緩存丟失（當你但願數據在緩存中的時候它並不在怎麼辦？），還有當緩存滿的時候你怎麼辦？

四、首次使用的時候在HTML中嵌入資源

HTML的標準是使用連接來加載外部資源，這使得更容易在服務器上（或者在CDN上）操做更新這些資源，而不是在每一個頁面上修改更新這些資源，根據上文討論的，這種模式也使得瀏覽器能從本地緩存而不是服務器上獲取資源。

可是對尚未緩存到瀏覽器localStorage的資源來講，這種模式對網站的性能有負面的影響，通常來講，一個頁面須要幾十個單獨的請求來獲取資源從而渲染頁面。

因此說，從性能的角度來講，若是一個資源沒有很高的被緩存的概率的話，最好把它嵌入到頁面的HTML中（叫inlining），而不是使用連接外部，腳本和樣式是支持內嵌到HTML中的，可是圖片和其餘的二進制資源其實也是能夠經過內嵌包含base64編碼的文原本嵌入到HTML中的。

內嵌的缺點是頁面的大小會變得很是大，因此對於Web應用來講，關鍵的是可以跟蹤分析這個資源何時須要從服務端獲取，何時已經緩存到客戶端了。

另外，在第一次請求資源後必須可以使用代碼在客戶端緩存資源，所以，在移動設備上，使用HTML5 localStorage能很好地作到內嵌。

因爲不知道用戶是否已經訪問過這個頁面了，因此須要網站有機制能生成不一樣版本的頁面。

五、使用HTML5服務端發送事件

Web應用已經使用了各類從服務器上輪詢資源的方法來持續地更新頁面，HTML5的EventSource對象和Server一Sent事件能經過瀏覽器端的JavaScript代碼打開一個服務端鏈接客戶端的單向通道，服務端能夠使用這個寫通道來發送數據，這樣能節省了HTTP建立多個輪詢請求的消耗。

這種方式比HTML的WebSocket更高效，WebSocket的使用場景是，當有許多客戶端和服務端的交互的時候（好比消息或者遊戲），在全雙工鏈接上創建一個雙向通道。

這個技術是基於具體的技術實現的，若是你的網站當前是使用其餘的Ajax或者Comet技術來輪詢的，轉變成Server一Sent事件須要重構網站的Javascript代碼。

六、消除重定向

當用戶在一個移動設備上訪問桌面PC網站的時候，Web網站應用一般讀取HTTP的user一agent頭來判斷這個用戶是不是來自移動設備的，而後應用會發送帶有空HTTP body和重定向HTTP地址頭的HTTP 301（或者302）請求，把用戶重定向到網站的移動版本上去，可是這個額外的客戶端和服務端的交互一般在移動網絡上會消耗幾百毫秒，所以，在原先的請求上傳遞移動的web頁會比傳遞一個重定向的信息並讓客戶端再請求移動頁面更快。

對於那些想要在移動設備上看桌面PC網站的用戶來講，你能夠在移動web頁面上提供一個連接入口，這樣也能同時表示你的網站是並不提倡這種行爲的。

雖然這個技術在理論上是簡單的，可是實際上並不易於實施，因爲有些m.sites是宿主在其餘地方的，因此許多網站會選擇重定向到一個不一樣的服務器上，有的網站則是會在重定向請求的時候種植上Cookie告訴Web應用這個用戶是在使用移動設備，這種方法可能對web應用來講更容易控制。

七、減小資源負載

關於移動端頁面的大小問題，渲染小頁面更快，獲取小資源也更快，減少每一個請求的大小一般不如減小頁面請求個數那麼顯著地提升性能。

可是有些技術在性能方面，特別是在須要對帶寬和處理器性能精打細算的移動設備環境下，仍然是能帶來很大利益的。

八、壓縮文本和圖像

諸如gzip這樣的壓縮技術，依靠增長服務端壓縮和瀏覽器解壓的步驟，來減小資源的負載，可是，通常來講，這些操做都是被高度優化過了，並且測試代表，壓縮對網站仍是起到優化性能的做用的，那些基於文本的響應，包括HTML，XML，JSON（Javascript Object Notation），Javascript，和CSS能夠減小大約70%的大小。

瀏覽器在Accept一Encoding請求頭中申明它的解壓縮技術，而且當它們接收到服務端返回的Content一Encoding響應頭標示的時候，就會按照這個響應頭自動作解壓操做。

馬海祥以爲這種方法的優勢就是易於實現，若是設置正確的話，如今全部的Web服務器都支持壓縮響應，可是，也有一些桌面PC的安全工具會將請求頭中的Accept一Encoding頭去掉，這樣即便瀏覽器支持解壓縮，用戶也沒法獲取到壓縮後的響應。

九、代碼簡化

簡化一般是使用在腳本和樣式文件中，刪除一些沒必要要的字符，好比空格，換行符，或者註釋等，不須要暴露給外部的命名就能夠被縮短爲一個或者兩個字符，好比變量名，合適的簡化資源一般在客戶端不須要作任何其餘的處理，而且平均減小20%的資源大小，內嵌在HTML中的腳本和樣式文件也是能夠精簡的，有不少很好的庫來作精簡化的操做，這些庫通常也同時會提供合併多個文件這樣減小請求數的服務（具體可查看馬海祥博客《手機網站製做的經常使用方法及優化技巧》的相關介紹）。

簡化帶來的好處並不侷限於減小帶寬和延遲，對於那些移動設備上緩存沒法保存的過大資源來講，也是頗有改善的，Gzip在這個方面並無任何幫助，由於資源是在被解壓後才被緩存起來的。

Google的Closure Compiler已經難以置信地完成了理解和簡化Javascript的工做，可是CSS的簡化則沒有那麼容易，由於對不一樣瀏覽器來講有不一樣的CSS技術能迷惑CSS簡化工具，而後讓CSS簡化後沒法正常工做，馬海祥提醒你們必需要注意的是，已經有這樣的案例了，即便只是刪除了沒必要要的字符，簡化工做也有可能破壞頁面，因此當你應用簡化技術以後，請作一下完整的功能測試工做。

十、調整圖片大小

圖片一般是佔用了Web頁面加載的大部分網絡資源，也佔用了頁面緩存的主要空間，小屏幕的移動設備提供了經過調整圖片大小來加速傳輸和渲染圖片資源的機會，若是用戶只是在小的移動瀏覽器窗口中看圖片的話，高分辨率的圖片就會浪費帶寬、處理時間和緩存空間。

爲了加速頁面渲染速度和減小帶寬及內存消耗，能夠動態地調整圖片大小或者將圖片替換爲移動設備專用的更小的版本，不要依靠瀏覽器來將高分辨率的圖片轉換成小尺寸的圖片，這樣會浪費帶寬。

另一個方法是先儘快加載一個低分辨率的圖片來渲染頁面，在onload或者用戶已經開始和頁面交互之後將這些低分辨率的圖片替換成爲高分辨率的圖片。

特別應用在高度動態化的網站是有優點的。

十一、使用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優化方法技巧》的相關介紹）。

十二、延遲渲染」BELOW一THE一FOLD」內容

能夠肯定的是若是咱們將不可見區域的內容延遲加載，那麼頁面就會更快地展示在用戶面前，這個區域叫作「below the fold」，爲了減小頁面加載後須要從新訪問的內容，能夠將圖片替換爲正確的高寬所標記的<img>標籤。

一些好的Javascript庫能夠用來處理這些below一the一fold 延遲加載的圖像。

1三、延遲讀取和執行的腳本

在一些移動設備上，解析Javascript代碼的速度能達到100毫秒每千字節，許多腳本的庫直到頁面被渲染之後都是不須要的加載的，下載和解析這些腳本能夠很安全地被推遲到onload事件以後來作。

例如，一些須要用戶交互的行爲，好比託和拽，都不大可能在用戶看到頁面以前被調用，相同的邏輯也能夠應用在腳本執行上面，儘可能將腳本的執行延遲到onload事件以後，而不是在初始化頁面中重要的可被用戶看到的內容的時候執行。

這些延遲的腳本多是你本身寫的，更重要的是，也有多是第三方的，對廣告、社交媒體部件、或者分析的差勁的腳本優化會致使阻塞頁面的渲染，會增長珍貴的加載時間，固然，你須要當心地評估諸如jquery這樣爲移動網站設計的大型腳本框架，特別當你僅僅只是使用這些框架中的一些對象的時候更要當心評估。

許多第三方的框架如今提供延遲加載的異步版本的API，開發者只須要將原先的邏輯轉化到這個異步版本，一些JavaScript要作延遲加載會有些複雜，由於在onload以後執行這些腳本須要注意不少注意事項（例如，你有個腳本須要綁定到onload事件上，你須要作什麼？若是你將腳本延遲到onload事件以後，就必定就會失去不少執行的時機）。

1四、使用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請求。

1五、根據網絡情況進行適配處理

因爲使用更多帶寬會使用更多移動網絡的費用，因此只有能檢測網絡的類型才能使用針對特定網絡的優化技術。

例如，預加載將來使用到的請求是很是聰明的作法，可是若是用戶的帶寬很稀有，而且加載的有些資源是永遠不會用到的話，這個技術就是不合理的了。

在Android 2.2+，navigator.connection.type屬性的返回值能讓你區分Wifi和2G/3G/4G網絡，在Blackberry上，blackberry.network也能提供類似的信息，另外，服務端經過檢測請求中的User一Agent頭或者其餘的嵌入到請求中的信息能讓你的應用檢測到網絡情況。

檢測網絡信息的API最近已經有所變化了，接口如今不是直接定義Wi一Fi，3G等網絡情況，而是給出了帶寬信息和諸如「很是慢，慢，快和很是快」這樣的建議，有個屬性能給出估計的MB/s值和一個「meterd」的Boolean值來表示它的可信度，可是對瀏覽器來講，很難根據這個來判斷環境，判斷當前網絡環境而後適配仍然是一種最好的方法（具體可查看馬海祥博客《百度移動搜索開放適配服務的3種方法》的相關介紹），可是這種方法正在被考慮被替換。

1六、對多線程來講儘可能使用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很適合那種須要後臺計算和處理的工做。

1七、將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的還有多是縮放或者敲擊動做。

1八、支持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協做並非很好，因此要求你使用這個技術的時候要確保你的網站的正常運行。

六十4、請實現鼠標點擊任意標籤，alert該標籤的名稱（注意兼容性）

function elementName(evt){

evt = evt|| window.event;

var selected = evt.target || evt.srcElement;

alert(selected.tagName);

}

六十5、對string對象進行擴展，使其具備刪除先後空格的方法

String.prototype.trim = function() {

return this.replace(/(^\s*)|(\s*$)/g, "");

}

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

1)bootstrap, easy UI, highcharts和echarts， jqueryUI , jquery、angular.js, vue.js, reactjs等。

2)前端開發工具：gulp webpack

3)輪播插件，拖拽插件

六十7、用一句話概述您的優勢，用一句話概述您的缺點

自由發揮

六十8、描述下你對js閉包。面向對象、繼承的理解

1）閉包理解：

我的理解：閉包就是可以讀取其餘函數內部變量的函數；

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

閉包有三個特性：

1.函數嵌套函數

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

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

閉包常見用途：

建立特權方法用於訪問控制

事件處理程序及回調

2）面向對象：

面向對象編程，即OOP，是一種編程範式，知足面向對象編程的語言，通常會提供類、封裝、繼承等語法和概念來輔助咱們進行面向對象編程。

參考：

http://www.ruanyifeng.com/blog/2010/05/object一oriented_javascript_encapsulation.html

3）繼承：

對象繼承分兩種狀況，一種是構造函數的繼承，一種是原型（prototype）的繼承：

1．構造函數的繼承，比較簡單，只須要在子對象中添加代碼：parent.apply(this, arguments);

關於原型的繼承最優化的方法，利用空對象做爲中介

2．拷貝繼承

可參考：

http://www.javashuo.com/article/p-ueosnihj-ew.html

http://blog.csdn.net/james521314/article/details/8645815

六十9、你作的頁面在哪些瀏覽器測試過？這些瀏覽器的內核分別是什麼？

IE內核瀏覽器：360，傲遊，搜狗，世界之窗，騰訊TT。

非IE內核瀏覽器：firefox opera safari chrome 。

IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

七10、寫出幾種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）

七11、清楚浮動的幾種方法，各自的優缺點

一、父級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代碼。

二、父級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理解比較深的朋友使用。

三、結尾處加空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，讓人感受很不爽。

建議：不推薦使用，但此方法是之前主要使用的一種清除浮動方法。

四、父級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不同時，會產生問題。

建議：不推薦使用，只建議高度固定的佈局時使用。

五、父級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時，會出現滾動條。

建議：不推薦使用，若是你須要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

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

七十3、寫出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";

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"

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

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

前端工程師屬於一個比較新興的技術，各類技術層出不窮，隨着客戶體驗的重要性前端須要掌握的技能也愈來愈多，對前端的要求也愈來愈多，並且咱們前端是最貼近用戶的程序員，主要負責實現界面交互，提高用戶體驗，並且有了Node.js，前端能夠實現服務端的一些事情，針對服務器的優化、擁抱最新前端技術，除了掌握必要的技能還要掌握用戶的心理，善於溝通。

前景：前景無疑是值得確定的，也須要咱們時刻關注最新的技術，這會是一個時刻都在學習的道路

七十5、 Eval函數的做用

eval能夠將字符串生成語句執行，通常執行動態的js語句。
eval的使用場合：有時候咱們預先不知道要執行什麼語句，只有當條件和參數給時才知道執行什麼語句，這時候eval就派上用場了。

七十6、標籤上title與alt屬性的區別是什麼

title 是鼠標放上去的額外信息

alt 是圖片不能正常顯示的時候，用文字代替

七十7、對WEB標準以及w3c的理解與認識？

Web標準就是將頁面的解構、表現和行爲各自獨立實現，w3c對標註提出了規範化的要求

1.對結構的要求：（標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO頗有幫助）

1）標籤字母要小寫；

2）標籤要閉合；

3）標籤不容許隨意嵌套。

2.對css和js的要求：

1）儘可能使用外聯css樣式表和js腳本，使結構、表現和行爲分紅三塊，符合規範，同時提升頁面渲染速度，提升用戶體驗；

2）樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class命名要作到見文知義，標籤越少，加載越快，用戶體驗更高，代碼維護更簡單，便於改版；

3）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性

七十8、 Css選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？

1.id選擇器（ # myid）

2.類選擇器（.myclassname）

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

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

5.子選擇器（ul < li）

6.後代選擇器（li a）

7.通配符選擇器（ * ）

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

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

可繼承： font一size font一family color,;

不可繼承：border padding margin width height

優先級就近原則，樣式定義最近者爲準；載入樣式以最後載入的定位爲準;

優先級爲: !important > id > class > tag

important 比內聯優先級高

七十9、請戳出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處理

八10、如何將一個元素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);

})();

八11、寫一個獲取非行間樣式的函數

Function getStyle(obj, attr){

If(obj.currentStyle){

return obj.currentStyle[attr];

}else{

return getComputedStyle(obj,false)[attr];

}

八12、請用正則表達式驗證數字

/[0一9]*$/

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

1) 突破瀏覽器的併發限制（瀏覽器同一域名最大的併發請求數量爲6個，ie6爲2個）

2) 節約cookie帶寬

3) CDN緩存更方便

4) 防止沒必要要的安全問題（尤爲是cookie的隔離尤其重要）

5) 節約主機域名鏈接數，優化頁面響應速度

八十4、你如何從瀏覽器的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）

八十5、手機端文字大小用什麼單位

對於只須要適配少部分手機設備，且分辨率對頁面影響不大的，使用px便可

對於須要適配各類移動設備，使用rem，例如只須要適配iPhone和iPad等分辨率差異比較挺大的設備

八十6、是否作過有上百圖層的psd切圖？ps隱藏其餘圖層，只顯示其中一個圖層的快捷鍵

Alt + 當前圖層前眼睛

八十7、瀏覽器標準模式和怪異模式之間的區別是什麼？

這是個歷史遺留問題，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會失效

八十8、 Javascript同源策略

同源策略是Javascript重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。所謂的同源就是同協議，同主機名，同端口號。

它的精髓很簡單：它認爲自任何站點裝載的信賴內容是不安全的。當被瀏覽器半信半疑的腳本運行在沙箱時，它們應該只被容許訪問來自同一站點的資源，而不是那些來自其它站點可能懷有惡意的資源。

八十9、爲何要有同源限制？

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

缺點：

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

九10、瞭解響應式佈局嗎？請大致說一說

響應式佈局概念：Responsive design，意在實現不一樣屏幕分辨率的終端上瀏覽網頁的不一樣展現方式。經過響應式設計能使網站在手機和平板電腦上有更好的瀏覽閱讀體驗。

設計步驟：

1．設置meta標籤

2．根據媒體查詢設置樣式

3．設置多種視圖寬度

4．注意點：

5．寬度使用百分比

6．處理圖片縮放問題

九11、身爲覺得web前端工程師，你確定知道如今最流行的前端技術吧，有那些？

Vuejs2.0/Angular2.0/React Native /es6//Nodejs

http2

gulp/webpack

九12、請簡述爲何要使用數據庫的事務

數據庫事務(Database Transaction) ，是指做爲單個邏輯工做單元執行的一系列操做，要麼徹底地執行，要麼徹底地不執行。

原子性（Atomic）（Atomicity)
　　事務必須是原子工做單元；對於其數據修改，要麼全都執行，要麼全都不執行。一般，與某個事務關聯的操做具備共同的目標，而且是相互依賴的。若是系統只執行這些操做的一個子集，則可能會破壞事務的整體目標。原子性消除了系統處理操做子集的可能性。
　　一致性（Consistent）(Consistency)
　　事務在完成時，必須使全部的數據都保持一致狀態。在相關數據庫中，全部規則都必須應用於事務的修改，以保持全部數據的完整性。事務結束時，全部的內部數據結構（如 B 樹索引或雙向鏈表）都必須是正確的。某些維護一致性的責任由應用程序開發人員承擔，他們必須確保應用程序已強制全部已知的完整性約束。例如，當開發用於轉賬的應用程序時，應避免在轉賬過程當中任意移動小數點。
　　隔離性（Insulation）(Isolation)
　　由併發事務所做的修改必須與任何其它併發事務所做的修改隔離。事務查看數據時數據所處的狀態，要麼是另外一併發事務修改它以前的狀態，要麼是另外一事務修改它以後的狀態，事務不會查看中間狀態的數據。這稱爲隔離性，由於它可以從新裝載起始數據，而且重播一系列事務，以使數據結束時的狀態與原始事務執行的狀態相同。當事務可序列化時將得到最高的隔離級別。在此級別上，從一組可並行執行的事務得到的結果與經過連續運行每一個事務所得到的結果相同。因爲高度隔離會限制可並行執行的事務數，因此一些應用程序下降隔離級別以換取更大的吞吐量。
　　持久性（Duration）(Durability）
　　事務完成以後，它對於系統的影響是永久性的。該修改即便出現致命的系統故障也將一直保持。

九十3、聊一聊前端存儲。

老朋友cookie

短暫的 sessionStorage

簡易強大的localStorage

websql與indexeddb

詳細參見：https://segmentfault.com/aZ1190000005927232

九十4、 BFC

w3c規範中的BFC定義：

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如inline一blocks, table一cells,和 table一captions),以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的 BFC (塊級格式上下文）。

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。

在BFC中，每個盒子的左外邊緣（margin一left)會觸碰到容器的左邊緣(border一left)(對於從右到左的格式來講，則觸碰到右邊緣）。

BFC的通俗理解：

首先BFC是一個名詞，是一個獨立的佈局環境，咱們能夠理解爲一個箱子（其實是看不見摸不着的），箱子裏面物品的擺放是不受外界的影響的。轉換爲BFC的理解則是：BFC中的元素的佈局是不受外界的影響（咱們每每利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。

詳細參見：

http://www.w3cplus.com/css/understanding一bfc一and一margin一collapse.html

https://www.zhihu.com/question/28433480

一一一一一一一一前端工程化一一一一一

九十5、場景：你是第一天來公司上班的，項目代碼託管在 GitLab，項目地址：git@lab.com:org/project.git，如今有一處代碼須要你修改。請完成此項任務中，與 git/gitlab相關的操做步驟。

第一步：$> ssh一keygen 一t rss 一C zhangsan@abc.com

第二步：拷貝公鑰到gitlab

第三步：

$> git config —global user.name zhangsan

$> git config —global user.email zhangsan@abc.com

第四步：$> git clone git@lab.com:org/project.git

第五步：$> git checkout 一b project一20170227一zhangsan一bugfix

第六步：修改代碼

第七步：git status

第八步：git add .

第九步：git commit 一am ‘bugfix’

第十步：

git push 一一set一upstream origin project一20170227一zhangsan一bugfix

九十6、 CSS，JS代碼壓縮，以及代碼CDN託管，圖片整合

CSSJS代碼壓縮：

能夠應用gulp的gulp一uglify, gulp一minify一css模塊完成；能夠應用webpack的 UglifyJsPlugin 壓縮插件完成。

CDN:

內容分發網絡(CDN)是一個經策略性部署的總體系統，包括分佈式存儲、負載均衡、網絡請求的重定向和內容管理4個要件。主要特色有：本地Cache加速，鏡像服務，遠程加速，帶寬優化。關鍵技術有：內容發佈，內容路由，內容交換，性能管理。CDN網站加速適合以諮詢爲主的網站。CDN是對域名加速不是對網站服務器加速。CDN和鏡像站比較不須要訪客手動選擇要訪問的鏡像站。CDN使用後網站無需任何修改便可使用CDN得到加速效果。

若是經過CDN後看到的網頁仍是舊網頁，能夠經過URL推送服務解決，新增的網頁和圖片不須要URL推送。使用動態網頁能夠不緩存即時性要求很高的網頁和圖片。CDN能夠經過 gi域SVN來管理。

圖片整合

減小網站加載時間的最有效的方式之一就是減小網站的HTTP請求數。實現這一目標的一個有效的方法就是經過CSS Sprites ——將多個圖片整合到一個圖片中，而後再用CSS來定位。缺點是可維護性差。能夠使用百度的fis/webpack來自動化管理sprite。

九十7、如何利用webpack把代碼上傳服務器以及轉碼測試?

代碼上傳：

能夠使用sftp一webpack一plugin,可是會把子文件夾給提取出來，不優雅。能夠使用gulp +webpack來實現。

轉碼測試

webpack應用babel來對ES6轉碼，開啓devtool: 「source一map"來進行瀏覽器測試。應用 karma或mocha來作單元測試。

九十8、項目上線流程是怎樣的？

流程建議

一模擬線上的開發環境

本地反向代理線上真實環境開發便可。（apache, nginx, nodejs都可實現）

一模擬線上的測試環境

模擬線上的測試環境，實際上是須要一臺有真實數據的測試機，建議沒條件搭daily的，就直接用線上數據測好了，只不過程序部分走大家的測試環境而已，有條件搭daily最好。

一可連調的測試環境

可連調的測試環境，分爲2種。一種是開發測試都在一個局域網段，直接綁hosts便可，不在一個網段，就每人分配一臺虛擬的測試機，放在你們均可以訪問到的公司內網，代碼直接往上布便可。

一自動化的上線系統

自動化的上線系統，能夠採用Jenkins。若是沒有，能夠自行搭建一個簡易的上線系統，原理是每次上線時都抽取最新的trunk或master，作一個tag，再打一個時間戳的標記，而後分發到cdn就好了。界面裏就2個功能，打tag,回滾到某tag,部署。

一適合先後端的開發流程

開發流程依據公司所用到的工具，構建，框架。原則就是分散獨立開發，互相不干擾，連調時有hosts可綁便可。

簡單的可操做流程

一代碼經過git管理，新需求建立新分支，分支開發，主幹發佈一上線走簡易上線系統，參見上一節

一經過gulp+webpack連到發佈系統，一鍵集成，本地只關心原碼開發

一本地環境經過webpack反向代理的server

一搭建基於linux的本地測試機，自動完成build+push功能

九十9、工程化怎麼管理的？

前端工程化能夠自動化處理一些繁複的工做，提升開發效率，減小低級錯誤。

目前前端構建工具不少，綜合比較來看，gulp相對來講更靈活，能夠作更多的定製化任務，而webpack在模塊化方面更完美一些

gulp打造前端工程化方案，同時引入webpack來管理模塊化代碼，大體分工以下：

gulp：處理html壓縮/預處理/條件編譯，圖片壓縮，精靈圖自動合併等任務

webpack：管理模塊化，構建js/css。

具體流程可參考： http://blog.csdn.net/java_goodstudy/article/details/52797322

一百、 git經常使用命令

Workspace:工做區

Index/Stage:暫存區

Repository:倉庫區（或本地倉庫）

Remote:遠程倉庫

git init; (# 在當前目錄新建一個Git代碼庫)

git add （添加當前目錄的全部文件到暫存區）

git rm –cached [file] (# 中止追蹤指定文件，但該文件會保留在工做區)

git commit [file1] [file2] -m [message] (# 提交暫存區的指定文件到倉庫區 )

git branch -a (列出全部本地分支和遠程分支)

git checkout [branch-name] (# 切換到指定分支，並更新工做區)

git status( # 顯示有變動的文件)

git push [remote] -tags (# 提交全部tag)

詳細參見：http://www.ruanyifeng.com/blog/2015/12/git一cheat一sheet.html

一百〇1、 git與svn的區別

git是分佈式的，svn不是。

git跟svn同樣有本身的集中式版本庫或服務器。但git更傾向於被使用於分佈式模式，克隆版本庫後即便沒有網絡也可以commit文件，查看歷史版本記錄，建立項目分支等，等網絡再次鏈接上Push到服務器端。

git把內容按元數據方式存儲，而svn是按文件。

全部的資源控制系統都是把文件的元信息隱藏在一個相似.svn,.cvs等的文件夾裏。

git目錄是處於你的機器上的一個克隆版的版本庫，它擁有中心版本庫上全部的東西，例如標籤，分支，版本記錄等。

git沒有一個全局的版本號，svn有。

git的內容完整性優於svn。由於git的內容存儲使用的是SHA-1哈希算法。

git能夠有無限個版本庫，svn只能有一個指定中央版本庫。

當svn中央版本庫有問題時，全部工做成員都一塊兒癱瘓直到版本庫維修完畢或者新的版本庫設立完成。

每個git都是一個版本庫，區別是它們是否擁有活躍目錄（Git Working Tree）。若是主要版本庫（例如：置於GitHub的版本庫）有問題，工做成員仍然能夠在本身的本地版本庫（local repository）提交，等待主要版本庫恢復便可。工做成員也能夠提交到其餘的版本庫！

一百〇2、 webpack 和 gulp 對比

Gulp就是爲了規範前端開發流程，實現先後端分離、模塊化開發、版本控制、文件合併與壓縮、mock數據等功能的一個前端自動化構建工具。說的形象點，「Gulp就像是一個產品的流水線，整個產品從無到有，都要受流水線的控制，在流水線上咱們能夠對產品進行管理。」另外，Gulp是經過task對整個開發過程進行構建。

Webpack是當下最熱門的前端資源模塊化管理和打包工具。它能夠將許多鬆散的模塊按照依賴和規則打包成符合生產環境部署的前端資源。還能夠將按需加載的模塊進行代碼分隔，等到實際須要的時候再異步加載。經過loader的轉換，任何形式的資源均可以視做模塊，比如 CommonJs 模塊、AMD 模塊、ES6 模塊、CSS、圖片、JSON、Coffeescript、LESS等。

Gulp和Webpack功能實現對比：從基本概念、啓動本地Server、sass/less預編譯、模塊化開發、文件合併與壓縮、mock數據、版本控制、組件控制八個方面對Gulp和Webpack進行對比。

詳細參見：http://www.tuicool.com/articles/e632EbA

一百〇3、 webpack打包文件太大怎麼辦？

webpack把咱們全部的文件都打包成一個JS文件，這樣即便你是小項目，打包後的文件也會很是大。能夠從去除沒必要要的插件，提取第三方庫，代碼壓縮，代碼分割，設置緩存幾個方面着手優化。

詳細參見：http://www.jianshu.com/p/a64735eb0e2b

一百〇4、談談你對webpack的見解

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

webpack的兩大特點：

1.code splitting（能夠自動完成）

2.loader 能夠處理各類類型的靜態文件，而且支持串聯操做

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

webpack具備requireJs和browserify的功能，但仍有不少本身的新特性：

1. 對 CommonJS 、 AMD 、ES6的語法作了兼容

2. 對js、css、圖片等資源文件都支持打包

3. 串聯式模塊加載器以及插件機制，讓其具備更好的靈活性和擴展性，例如提供對CoffeeScript、ES6的支持

4. 有獨立的配置文件webpack.config.js

5. 能夠將代碼切割成不一樣的chunk，實現按需加載，下降了初始化時間

6. 支持 SourceUrls 和 SourceMaps，易於調試

7. 具備強大的Plugin接口，大可能是內部插件，使用起來比較靈活

8.webpack 使用異步 IO 並具備多級緩存。這使得 webpack 很快且在增量編譯上更加快

一百〇5、說說你對AMD和Commonjs的理解

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

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

一百〇6、不想讓別人盜用你的圖片，訪問你的服務器資源該怎麼處理？

目前經常使用的防盜鏈方法主要有兩種：

(1) 設置Referer:適合不想寫代碼的用戶，也適合喜歡開發的用戶（Referer是HTTP協議中的請求頭，在跨頁面訪問的時候會帶上。須要看看瀏覽器請求的Referer是http://仍是https://，通常是http://）

(2) 簽名URL:適合喜歡開發的用戶

詳細參見：https://yq.aliyun.com/articles/57931

一百〇7、精靈圖和base64如何選擇？

css精靈，用於一些小的圖標不是特別多，一個的體積也稍大，好比大於10K (這個沒有嚴格的界定）。

base64,用於小圖標體積較小（相對於css精靈），多少都無所謂。字體圖標，用於一些別人作好的圖標庫（也有少數本身去作的）用起來比較方便，他的圖標只能用於單色，圖標用只能於一種顏色。

一百〇8、 webpack怎麼引入第三方的庫？

拿jQuery爲例：

entry: {

page: 'path/to/page.js',

jquery: 'node—modules/jquery/dist/jquery.min.js'

}

new HtmlWebpaekPlugin({

filename: 'index.html',

template: 'index.html',

inject: true,

chunks: ['jquery','page'] // 按照前後順序插入 script 標籤

})

一百〇9、若是線上出現bug git怎麼操做？

方法1：在當前主分支修改bug，暫存當前的改動的代碼，目的是讓工做空間和遠程代碼一致：

Git stash

修改完bug後提交修改：

git add .

git commit 一m "fix bug 1"

git push

從暫存區把以前的修改恢復，這樣就和以前改動同樣了

git stash pop

這時可能會出現衝突，由於你以前修改的文件，可能和bug是同一個文件，若是有衝突會提示：

Auto一merging xxx.Java

CONFLICT (content): Merge conflict in xxx.java

前往xxx.java解決衝突

注意stash pop意思是從暫存區恢復到工做空間，同時刪除此條暫存記錄。

方式2：拉一個新分支，老司機都推薦這樣作，充分利用了git特性，先暫存一下工做空間改動：

git stash

新建一個分支，而且換到這個新分支

git branch fix_bug //新建分支

git checkout fix_bug //切換分支

這時候就能夠安心的在這個fix_bug分支改bug了，改完以後：

git add .

git commit 一m "fix a bug"

切換到master主分支

git checkout master

從fix_bug合併到master分支

git merge fix_bug

提交代碼

git push

而後從暫存區恢復代碼

git stash pop

此時若有衝突，須要解決衝突

一百一10、用過Nginx嗎？都用過哪些？

nginx是一個高性能的HTTP和反向代理服務器。

常使用場景：

(1) 反向代理

(2) 網站負載均衡

詳細參見：http://www.cnblogs.com/hobinly/p/6023883.html

移動端佈局與適配

一百一11、 iscroll安卓低版本卡頓，如何解決？

方案一：iScroll v5.1.3 設置momentum: true

方案二：配置probeType

方案三：開啓硬價加速：給scroll元素增長css樣式：一webkit一transform:translate3d(0,0,0);

方案四：判斷手機版系統版本，應用原生CSS: overflow:scroll一y

一百一12、移動佈局自適應不一樣屏幕的幾種方式

(1) 響應式佈局

(2) 100%佈局（彈性佈局）

(3) 等比縮放佈局（rem)

一百一十3、請說下移動端常見的適配不一樣屏幕大小的方法？

響應式佈局

簡而言之，就是頁面元素的位置隨着屏幕尺寸的變化而變化，一般會用百分比來定位，而在設計上須要預留一些可被「壓縮」的空間。

Cover佈局

就跟background一size的cover屬性同樣，保持頁面的寬高比，取寬或高之中的較小者佔滿屏幕，超出的內容會被隱藏。此佈局適用於主要內容集中在中部，邊沿無重要內容的設計。

Contain佈局

一樣，也跟background一size的contain屬性那樣，保持頁面的寬高比，取寬或高之中的較大者佔滿屏幕，不足的部分會用背景填充。我的比較推薦用這種方式，但在設計上須要背景爲單色，或者是可平鋪的背景。

一百一十4、大家作移動端平時在什麼瀏覽器上測試？

Chrome，Safari，微信X5, UC，其餘手機自帶瀏覽器

一百一十5、說說移動端是如何調試的？

移動端調試：

(1) 模擬手機調試

(2) 真機調試之android手機+Chrome

(3) 真機調試之 iphone + safari ⑷UC瀏覽器

(1) 微信內置瀏覽器調試

(2) debuggap

(3) 抓包

詳細參考：https://segmentfault.eom/a/1190000005964730

一百一十6、 ICONFONT使用及其利與弊？

把一些零散的icon作成字體。咱們調用文字的時候，渲染出來的就是icon圖像，這樣的顯示就是iconfont（字體圖標）

好處：

iconfont圖像放大後，不會失真。
iconfont節省流量
iconfont在顏色變幻方面很簡單

缺點：

iconfont不能支持一個圖像裏面混入多重顏色
iconfont的使用沒有使用圖片那麼直接，簡單。

詳細參見：https://segmentfault.com/a/1190000005904616? ea=953657

一百一十7、說說移動端Web分辨率

從如下幾個方面作答：

(1) pc到移動，渲染的變遷

(2) 能夠更改的佈局寬度

(3) 再次變遷的像素

(4) 又一次變遷

(5) 是時候說說安卓了

詳細參見：http://www.javashuo.com/article/p-ghwggguw-ez.html

性能和效率

一百一十8、你平時如何評測你寫的前端代碼的性能和效率。

Chrome DevTools的Timeline:是用來排查應用性能瓶頸的最佳工具。

Chrome DevTools的Audits:對頁面性能進行檢測，根據測試的結果進行優化。

第三方工具Yslow。

詳細參見：

http://www.cnblogs.com/一simon/p/5883336.html

http://blog.csdn.net/ivan0609/artide/details/45508365

http://www.wtoutiao.com/p/1305TZW.html

一百一十9、如何優化頁面，加快頁面的加載速度(至少5條)

(1) 優化圖片資源的格式和大小

(2) 開啓網絡壓縮

(3) 使用瀏覽器緩存

(4) 減小重定向請求

(5) 使用CDN存儲靜態資源

(6) 減小DNS查詢次數

(7) 壓縮css和js內容

詳細參見：http://www.mahaixiang.cn/wyzz/1589.html

一百二10、怎麼保證多人開發進行內存泄漏的檢查（內存分析工具）

1) 使用xcode裏面的Analyze進行靜態分析

build setting ----》 automa ----》 mrc環境

product ----》 analyze ----》command + R

2) 爲避免沒必要要的麻煩，多人開發的時候儘可能使用 ARC

內存泄露：

參考：http://blog.csdn.net/panda_bear/article/details/8009421

一百二11、先後端性能如何調優？

1. 減小http請求數

2. 使用內容分佈式網絡

3. 給頭部添加一個失效期或者Cache一Control

4. Gzip壓縮組件

5. 把樣式表放在前面

6. 把腳本放在最後

7. 不使用CSS表達式

8. 使用外部的JavaScript和CSS

9. 減小DNS的查詢

10. 縮小JavaScript和CSS

參考：http://blog.csdn.net/sonta/article/details/44454787

一百二12、瀏覽器http請求過多怎麼解決？

(1) 合併JS、CSS文件

(2) 合併圖片css sprite

(3) 使用 Image maps

(4) data嵌入圖片：如base64

(5) 使用CDN，減小http請求頭

Web安全

一百二十3、你所瞭解到的Web攻擊技術

(1) XSS攻擊

(2) CSRF攻擊

(3) 網絡劫持攻擊

(4) 控制檯注入代碼

(5) 釣魚

詳細參見：http://blog.csdn.net/fengyinchao/article/details/52303118

一百二十4、如何防止XSS攻擊？

(1) 將前端輸出數據都進行轉義

(2) 將輸出的字符串中的\反斜槓進行轉義

(3) 從url中獲取的信息，防止方法是由後端獲取，在前端轉義後再行輸出

(4) 使用cookie的HttpOnly屬性，保護好cookie

1.過濾輸入 2.轉義輸出

詳細參見：http://blog.csdn.net/fengyinchao/article/details/52303118

一百二十5、項目中有沒有用過加密，哪一種加密算法？

項目中沒有用過，但我瞭解幾個加密算法：

(1) RSA加密

(2) MD5加密

(3) SHA256加密

一百二十6、聊一聊網頁的分段傳輸與渲染

從下面幾個方面說：

(1) CHUNKED編碼

(2) BIGPIPE

(3) 分段傳輸與bigpipe適用場景

詳細參見：https://segmentfault.com/a/1190000005989601 ? ea=984496

一百二十7、百度移動端首頁秒開是如何作到的？

從幾個方面優化：

(1) 靜態文件放置

(2) 緩存

(3) 外鏈

(4) 緩存DOM

(5) 使用 iconfont

(6) 卡片的異步加載與緩存

(7) 不在首屏的就要異步化

(8) 少許靜態文件的域名

詳細參見：http://www.javashuo.com/article/p-wrkmdljz-gd.html

一百二十8、前端速度統計（性能統計）如何作？

回答下面的兩個問題：

(1) 網站都有哪些指標？

(2) 如何統計本身網站的這些指標？

詳細參見：https://segmentfault.eom/a/1190000005869953

架構

一百二十9、若是讓你來製做一個訪問量很高的大型網站，你會如何來管理全部css、js文件、圖片？

(1) 遵循自定的一套CSS，JS和圖片文件和文件夾命名規範

(2) 依託採用的前端工程化工具，依照工具腳手架規範（gulp, webpack, grunt, yeoman)

(3) 依據採用的框架規範（Vue, React, jQuery)

一百三10、若是沒有框架、怎麼搭建你的項目

應用原生JS本身嘗試搭建一個MVC架構：

(1)基本模塊

common:公共的一組件，下面的各模塊都會用到

config:配置模塊，解決框架的配置問題

startup:啓動模塊，解決框架和Servlet如何進行整合的問題

plugin:插件模塊，插件機制的實現，提供IPlugin的抽象實現

routing:路由模塊，解決請求路徑的解析問題，提供了 IRoute的抽象實現和基本實現

controller:控制器模塊，解決的是如何產生控制器

model:視圖模型模塊，解決的是如何綁定方法的參數

action: action模塊，解決的是如何調用方法以及方法返回的結果，提供了IActionResult的抽象實現和基本實現

view:視圖模塊，解決的是各類視圖引擎和框架的適配

filter:過濾器模塊，解決是執行Action,返回IActionResult先後的AOP功能，提供了 IFilter 的抽象實現以及基本實現

擴展模塊filters：一些IFilter 的實現

results :―些IActionResult 的實現

routes :―些IRoute 的實現

plugins:—些 IPlugin 的實現

一百三11、在選擇框架的時候要從哪方面入手

影響團隊技術選型有不少因素，如技術組成，新技術，新框架，語言及發佈等。爲了更好的考量不一樣的因素，須要列出重要的象限，如開發效率、團隊喜愛，依次來決定哪一個框架更適合當前的團隊和項目。上線時間影響框架選擇，不要盲目替換現有框架。

(1) jQuery

項目功能比較簡單。並不須要作成一個單頁面應用，就不須要MV*框架。項目是一個遺留系統。與其使用其餘框架來替換，不如留着之後重寫項目。

(2) AngularJS

當咱們在製做一個應用，它對性能要求不是很高的時候，那麼咱們應該選擇開發速度更快的技術棧AngularJS，她擁有混合開發能力的ionic框架。對於複雜的前端應用來講，基於 Angular.js應用的運行效率，仍然有大量地改進空間。Angular2須要學習新的語言，需慎重選擇。

(3) React

選擇React有兩個緣由，一是經過Virtual DOM提升運行效率，二是經過組件化提升開發效率。大型項目首選。選擇React還有_個緣由是：React Native、React VR等等，可讓 React運行在不一樣的平臺之上。咱們還能經過React輕鬆編寫出原生應用，還有VR應用。

使人遺憾的是React只是一個View層，它是爲了優化DOM的操做而誕生的。爲了完成一個完整的應用，咱們還須要路由庫、執行單向流庫、web AP丨調用庫、測試庫、依賴管理庫等等，爲了完整搭建出一個完整的React項目，咱們還須要作大量的額外工做。

(4) Vue.js

對於使用Vue.js的開發者來講，咱們仍然能夠使用熟悉的HTML和CSS來編寫代碼。並且，Vue.js也使用了 Virtual D〇M、Reactive及組件化的思想，可讓咱們集中精力於編寫應用，而不是應用的性能。

對於沒有Angular和React經驗的團隊，而且規模不大的前端項目來講，Vue.js是一個很是好的選擇。

詳細參見：https://zhuanlan.zhihu.com/p/25194137

一百三12、聊一聊前端模板與渲染

(1) 頁面級的渲染，後端模板

如smarty，這種方式的特色是展現數據快，直接後端拼裝好數據與模板，展示到用戶面前，對SEO友好。

(2) 異步的請求與新增模板，前端模板

如Mustache, ArtTemplate,前端解析模板的引擎的語法，與後端解析模板引擎語法一致。這樣就達到了一份HTML先後端一塊兒使用的效果。

詳細參見：http://www.javashuo.com/article/p-mfnsewxr-kp.html

混合開發

一百三十3、 UIWebView和JavaScript之間是怎麼交互的？

UlWebView是i〇S SDK中渲染網面的控件，在顯示網頁的時候，咱們能夠hack網頁而後顯示想顯示的內容。其中就要用至JavaScript的知識，而UlWebView與javascript交互的方法就是 stringByEvaluatingJavaScriptFromString:

有了這個方法咱們能夠經過objc調用javascript,能夠注入javascript。

UIWebView是iOS SDK中渲染網面的控件，在顯示網頁的時候，咱們能夠hack網頁而後顯示想顯示的內容。其中就要用至JavaScript的知識，而UIWebView與javascript交互的方法就是stringByEvaluatingJavaScriptFromString,有了這個方法咱們能夠經過objc調用 javascript,能夠注入 javascript

Js調用〇C方法原理就是利用UIWebView重定向請求，傳一些命令到咱們的 UIWebView,在UIWebView的delegate的方法中接收這些命令，並根據命令執行相應的objc 方法。這樣就至關於在javascript中調用objc的方法。

在android中，咱們有固有組件webview,通過設置可讓它支持咱們的js的渲染，然後在代碼中設置（WebViewClient/WebChromeClient)讓應用跳轉頁面時在本webview中跳轉，經過webview.loadurl (String str)方法能夠在須要的地方加載咱們前端的頁面或者調用前端所定義的方法（wv.loadUrl("javascript:sendDataToAndroid('我是來自js的呦，你看到了嗎')");），咱們再經過JavascriptInterface接口設置咱們前端和android通信的標識，

wv.addJavascriptInterface(new MJavascriptInterface(getApplicationContext()), "WebViewFunc");

這樣前端就能夠在頁面上調用咱們的方法了，funl方法是在android中定義的 Window.WebViewFunc.fun1 ();

總之，前端和android或者ios進行結合開發，咱們稱之爲混合開發，原理就是在原生的開發語言中，咱們提供了一個組件webview，這個組件就是咱們的原生語言的瀏覽器，但是咱們得自行設置讓其可以完美支持咱們的應用，須要設置對應的標識，而後鏈接起來，我們稱之爲 JavascriptInterfac。

一百三十4、混合開發橋接api是怎麼調用的，須要引入類庫嘛？調用的對象是什麼？

Hybrid框架結構

HyBrid App = H5 App + Native 框架

H5App用來實現功能邏輯和頁面渲染 Native框架提供WebView和設備接口供H5調用

方案一重混合應用，在開發原生應用的基礎上，嵌入WebView可是總體的架構使用原生應用提供，通常這樣的開發由Native開發人員和Web前端開發人員組成。Native開發人

員會寫好基本的架構以及API讓Web開發人員開發界面以及大部分的渲染。保證到交互設計，以及開發都有一個比較折中的效果出來，優化得好也會有很棒的效果。

Hybrid App技術發展的早期，Web的運行性能成爲主要瓶頸！

爲解決性能問題Hybrid App走向‘‘重混」。

經過多WebView:實現流暢的多頁加載和專場動畫。

使用Navtive UI組件：框架、菜單、日期等。

‘‘重混」的優缺點優勢：

一提高了運行性能一加強了交互體驗

缺點一

一Web和Native技術交叉混雜一須要同時掌握Web和Native技術，學習難度增長一一個頁面有Web組件也有Native組件，編程調試困難

須要引入各自須要的各類依賴工具

方案二：輕混合應用，使用PhoneGap、AppCan之類的中間件，以WebView做爲用戶界面層，以Javascript做爲基本邏輯，以及和中間件通信，再由中間件訪問底層API的方式，進行應用開發。這種架構通常會很是依賴WebView層的性能。

隨着時代的發展，手機硬件、瀏覽器技術、無線網絡技術都獲得了大幅的提高，H5已經可以支持複雜應用，並擁有良好的運行性能。使用輕混方案的App也愈來愈多。

目前咱們要學習的Hybrid App開發就是方案二，使用H5+Js+Native框架開發當前輕混合應用。

Phonegap 引入phonegap.js 或者 cordova.js,對象爲 navigator Dcloud引入引入mui.js或者其餘的js組件，對象爲plus apiloud引入各類第三方插件，對象爲api

順變提一下，2012年8月，微信公衆平臺的上線，從新定義了移動應用：移動應用 =Iphone App + Android App + 微信 App

一百三十5、說一下你對支付，推送（遠程，本地）的理解

消息的推送主要有兩種：

一種是本地推送，主要應用在系統的工具中，例如：鬧鐘，生日提醒等；實現本地推送須要如下三個步驟，

實例化一個本地推送對象
設置通知對象的各個屬性
添加本地推送對象

一種是遠程消息推送，主要應用聯網設備的信息推送，例如：郵件，各類軟件的廣告或優惠信息的推送。遠程推送比較複雜，須要使用開發者帳號進行申請證書，得到實

現推送功能的配置文件，因此想要實現遠程推送功能，必需要有開發者帳號而且生成配置文件

完成證書的申請和Xcode的配置
在Demo中註冊遠程服務對象，並設置其代理
找一個簡單的App服務器進行消息推送（推薦使用:PushMeBaby, gitup網站上就有）
運行 PushMeBaby

參考網址：http://blog.csdn.net/u014642572/article/details/26857717

遠程推送流程圖以下

一百三十6、什麼是代理和通知，寫一下他們基本的實現方式

代理：「一對一」，對同一個協議，一個對象只能設置一個代理delegate

六個步驟：

1．聲明一個協議,定義代理方法

2．遵循協議

3．設置一個代理對象

4．調用代理方法

5．給代理賦值

6．實現代理方法

注意事項：

1．單例對象不能用代理；

2．代理執行協議方法時要使用respondsToSelector檢查其代理是否符合

3．協議(檢查對象可否響應指定的消息),以免代理在回調時由於沒有實現方法而形成程序崩潰

使用場景：

公共接口，方法較多也選擇用delegate進行解耦 iOS最經常使用tableViewDelegate, textViewDelegate iOS有不少例子好比經常使用的網絡庫AFNetwork，ASIHTTP庫， UlAlertView 類。

通知：一對一一對多傳值

四個步驟：

1．發送通知

2．建立監聽者

3．接收通知

4．移除監聽者

使用場景：

1一不少控制器都須要知道一個事件，應該用通知；

2 一相隔多層的兩個控制器之間跳轉

注意事項：

1．一旦接收消息的對象多了，就難以控制了，可能有你不但願的對象接收了消息並作了處理

2．建立了觀察者，在dealloc裏面必定要移除；

Block : Block是i〇S4.0+和Mac OS X 10.6+引進的對C語言的擴展，用來實現匿名函數的特性。Blocks語法塊代碼以閉包得形式將各類內容進行傳遞，能夠是代碼，能夠是數組無所不能。閉包就是可以讀取其它函數內部變量的函數。就是在一段請求連續代碼中能夠看到調用參數（如發送請求）和響應結果。因此採用Block技術可以抽象出不少共用函數，提高了代碼的可讀性，可維護性，封裝性。

使用場景：

—: 動畫

二：數據請求回調

三：枚舉回調

四：多線程gcd

注意事項：Iblock須要注意防止循環引用

參考網址：http://www.cnblogs.com/wenboliu/articles/5422033.html

一百三十7、 UIViewController 的生命週期

1．經過alloc init分配內存，初始化controller.

2．loadView （loadView方法默認實現[super loadView]

若是在初始化controller吋指定了xib文件名，就會根據傳入的xib文件名加載對應的xib文件，若是沒傳xib文件名，默認會加載跟controller同名的xib文件，若是沒找到相關聯的xib文件，就會建立一個空白的UIView,而後賦給controller的view）

3．viewDidLoad (當loadView建立完view以後，此吋view已經完成加載了，會調用 viewDidLoad方法；通常我會在這裏作界面上的初始化操做，好比添加按鈕，子視圖，等等.）

4．viewWillAppear (當view在load完以後，將要顯示在屏幕以前會調用這個方法，在重寫這些方法吋候最好先調用一下系統的方法以後在作操做。）

5．viewDidAppear (當view已經在屏幕上顯示出來以後，會調用這個方法，當一個視圖被移除屏幕而且銷燬的吋候）

6．viewWillDisappear (當視圖將要從屏幕上移除吋候調用 )

7．viewDidDisappear (當視圖已經從屏幕上移除吋候調用 )

8．Dealloc (view被銷燬吋候調用，若是是手動管理內存的話，須要釋放掉以前在init和 viewDidLoad中分配的內存（相似alloc,new,copy) ; dealloc方法不能甶咱們主動調用，必須等引用計數爲0吋候甶系統調用.）

9．參考網址： http://www.cnblogs.eom/wujy/p/5822329.html

一百三十8、 rem佈局字體太大怎麼處理？

通常狀況下咱們設置了html根節點的字體大小做爲rem單位的一個基本標準，那麼我們能夠緊接着在body標籤內設置一個字體大小爲該應用的基本字體大小

針對於一些機型若是一開始就顯示的字體不正常，咱們能夠經過判斷機型而後加載不一樣的樣式

〈script language="javascript">

window.onload = function() {

alert(「1」);

var u = navigator.userAgent;

if(u.index〇f('Android') > 一1 || u.indexOf('Linux') > 一1) { //安卓手機

alert("安卓手機")；

} else if(u.index〇f('iPhone') > 一1) { //蘋果手機

alert("蘋果手機")；

} else if(u.index〇f('Windows Phone') > 一1) { //winphone手機 alert("winphone 手機")；

}

〈/script>

一百三十9、如何調用原生的接口？

首先你得選擇一個合適的框架做爲本身的基礎，以Dcloud爲例，頁面中必定要存在一個事件，plusready, plusready其實是原生將橋接js注入到頁面中的容器，進行任何方法調用的時候都在plusready以後。全部api方法所有都託管在了一個plus對象中。使用語法 plus.模塊名稱.具體方法（參數，callback)

當咱們須要打開系統相冊的時候，能夠這樣作：

Gallery模塊管理系統相冊，支持從相冊中選擇圖片或視頻文件、保存圖片或視頻文件到相冊等功能。經過plus.gallery獲取相冊管理對象。打開相冊plus.gallery.pick進行打開，選取多個圖片{multiple:true,maximum:9,system:false}

一百四10、微信支付怎麼作？說說流程

1．申請微信公衆號及支付功能申請：根據公衆號申請流程申請便可。

2．獲取商戶支付配置信息及支付測試配置：

支付受權目錄最多能夠配置三個域名，測試受權目錄只能夠一個，這裏須要注意的是域名大小寫必需要網站URL—致，不然會沒法經過受權，提示支付請求的 URL不合法。另外，測試支付的微信號必須加到測試白名單，不然沒法進行支付測試。

3．H5頁面發起支付請求，請求生成支付訂單，獲取用戶受權（獲取用戶的openid)

4．調用統一下單API，生成預付單

5．生成JSAPI頁面調用的支付參數並簽名，注意時間戳timeStamp是32位字符串

6．返回支付參數prepay—id,paySign參數的html文本給前端。

7．微信瀏覽器自動調起支付JSAPI接口支付，提示用戶輸入密碼。

8．確認支付，輸入密碼，提交支付。

9．步通知商戶支付結果，商戶收到通知返回確認信息。

10．返回支付結果，併發微信消息提示。

11．展現支付信息給用戶，跳轉到支付結果頁面。

一百四11、混合開發的注意點

加強WebView : 原生WebView基本是PC平臺瀏覽器內核的移植，但對於移動場景並不徹底適合，各類硬件API得不到HTML5原生支持。所以對於WebView的種種Hack、加強應運而生，甚至出現了基於加強WebView提供第三方服務的。

路由：應用內跳轉因爲加入了 WebView而變得複雜起來，同時因爲組件化、模塊化帶來的問題，路由也成爲人們討論的重點。

緩存：移動網絡條件差，爲了用戶體驗，必需要作資源緩存和預加載。

通訊：即HTML5和Native之間的通訊。利用系統提供的橋接API能夠實現，不過在應用上還有着一些坑點和安全問題。

一百四12、說說你對手機平臺的安裝包後綴的理解

Android：**apk

Ios：**ipa

Windows： wp7 wp8的是xap wp8.1之後用8.1開發的是appx

NodeJS

一百四十3、談談你對Socket編程的理解及實現原理，Socket 之間是怎麼通信的

A、Socket定義

Socket是進程通信的一種方式，即調用這個網絡庫的一些API函數實現分佈在不一樣主機的相關進程之間的數據交換。幾個定義：IP地址：即依照TCP/IP協議分配給本地主機的網絡地址，兩個進程要通信，任一進程首先要知道通信對方的位置，即對方的IP。端口號：用來辨別本地通信進程，一個本地的進程在通信時均會佔用一個端口號，不一樣的進程端口號不一樣，所以在通信前必需要分配一個沒有被訪問的端口號。鏈接：指兩個進程間的通信鏈路。

B、實現原理

在TCP/IP網絡應用中，通訊的兩個進程間相互做用的主要模式是客戶/服務器（Client/ Server, C/S)模式，即客戶向服務器發出服務請求，服務器接收到請求後，提供相應的服務。客戶/服務器模式的創建基於如下兩點：首先，創建網絡的原由是網絡中軟硬件資源、運算能力和信息不均等，須要共享，從而造就擁有衆多資源的主機提供服務，資源較少的客戶請求服務這一非對等做用。其次，網間進程通訊徹底是異步的，相互通訊的進程間既不存在父子關係，又不共享內存緩衝區，所以須要一種機制爲但願通訊的進程間創建聯繫，爲二者的數據交換提供同步，這就是基於客戶/服務器模式的TCP/IP。

C、通信過程

服務器端：其過程是首先服務器方要先啓動，並根據請求提供相應服務：（1)打開一通訊通道並告知本地主機，它願意在某一公認地址上的某端□(如FTP的端口可能爲21)接收客戶請求；（2)等待客戶請求到達該端口；（3)接收到客戶端的服務請求時，處理該請求並發送應答信號。接收到併發服務請求，要激活一新進程來處理這個客戶請求（如UNIX系統中用fork、exec)。新進程處理此客戶請求，並不須要對其它請求做出應答。服務完成後，關閉此新進程與客戶的通訊鏈路，並終止。（4)返回第（2)步，等待另外一客戶請求。（5）關閉服務器客戶端：（1)打開一通訊通道，並鏈接到服務器所在主機的特定端口；(2)向服務器發服務請求報文，等待並接收應答；繼續提出請求......（3)請求結束後關閉通訊通道並終止。

從上面所描述過程可知：（1）客戶與服務器進程的做用是非對稱的，因此代碼不一樣。（2）服務器進程通常是先啓動的。只要系統運行，該服務進程一直存在，直到正常或強迫終止。

詳細參見：

https://www.zhihu.com/question/29637351

http://blog.csdn.net/panker2008/article/details/46502783?ref=myread

一百四十4、 WEB應用從服務器主動推送Data到客戶端有哪些方式？

通常的服務器Push技術包括：

1) 基於AJAX的長輪詢（long一polling)方式，服務器Hold—段時間後再返回信息；

2) HTTP Streaming,經過iframe和〈script〉#簽完成數據的傳輸；

3) TCP長鏈接

4) HTML5新引入的WebSocket，能夠實現服務器主動發送數據至網頁端，它和HTTP— 樣，是一個基於HTTP的應用層協議，跑的是TCP，因此本質上仍是個長鏈接，雙向通訊，意味着服務器端和客戶端能夠同時發送並響應請求，而再也不像HTTP的請求和響應。

5) nodejs的http://socket.io，它是websocket的一^^開源實現，對不支持websocket的瀏覽器降級成comet / ajax輪詢，http://socket.io的良好封裝使代碼編寫很是容易。

上述的 1 和2統稱爲comet技術。comet詳細參考：http://www.ibm.com/developerworks/cn/ web/wa一lo一comet/

一百四十5、簡述Node.js的適用場景？

IIO 密集而非計算密集的情景；高併發微數據（好比帳號系統）的情景。特別是高併發，Node.js 的性能隨併發數量的提升而衰減的現象相比其餘 server 都有很明顯的優點。

Bad Use Cases

1．CPU heavy apps （高CPU消耗的app）

2．Simple CRUD / HTML apps （簡單的CRUD / HTML apps）

3．NoSQL + Node.js + Buzzword Bullshit （NoSQL + Node.js + 各類扯淡的時髦詞彙）

Good Use Cases

1．JSON API

2．Single page apps （單頁面app）

3．Shelling out to unix tools （對unix工具的腳本化調用）

4．Streaming data （流數據）

5．Soft Realtime Applications （軟件實時程序）

一百四十6、什麼是HTTPS，作什麼用的呢？如何開啓HTTPS?

1) 什麼是HTTPS

https是http的加密版本，是在http請求的基礎上，採用ssl進行加密傳輸。

2) 作什麼用

加密數據，反劫持，SEO

3) 如何開啓

生成私鑰與證書，配置nginx,重啓nginx看效果

詳細參見：http://www.javashuo.com/article/p-zxpaqdyh-he.html?utm_source=tuicool&utm_medium=referral

一百四十7、大家原來公司如何發送的新消息推送?

（參考：）通常的服務器Push技術包括：

1．基於 AJAX 的長輪詢（long一polling）方式，服務器Hold一段時間後再返回信息；

2．HTTP Streaming，經過iframe和<script>標籤完成數據的傳輸；

3．TCP 長鏈接

4．HTML5新引入的WebSocket，能夠實現服務器主動發送數據至網頁端，它和HTTP同樣，是一個基於HTTP的應用層協議，跑的是TCP，因此本質上仍是個長鏈接，雙向通訊，意味着服務器端和客戶端能夠同時發送並響應請求，而再也不像HTTP的請求和響應

上述的1和2統稱爲comet技術，Comet：基於 HTTP 長鏈接的「服務器推」技術前些日子給項目網站加了後臺通知的實時推送到前端顯示，用的是nodejs的http://socket.io，它是websocket的一個開源實現，對不支持websocket的瀏覽器降級成comet / ajax 輪詢，http://socket.io的良好封裝使代碼編寫很是容易。

一百四十8、如何用NodeJS搭建中間層？

（以下圖）最上端是服務端，就是咱們常說的後端。後端對於咱們來講，就是一個接口的集合，服務端提供各類各樣的接口供咱們使用。由於有Node層，也不用侷限是什麼形式的服務。對於後端開發來講，他們只用關心業務代碼的接口實現。

服務端下面是Node應用。

Node應用中有一層Model Proxy與服務端進行通信。這一層主要目前是抹平咱們對不一樣接口的調用方式，封裝一些view層須要的Model。

Node層還能輕鬆實現原來vmcommon,tms (引用淘寶內容管理系統）等需求。

Node層要使用什麼框架由開發者本身決定。不過推薦使用express + xTemplate的組合， xTemplate能作到先後端公用。

怎麼用Node你們本身決定，可是使人興奮的是，咱們終於能夠使用Node輕鬆實現咱們想要的輸出方式 JSON/JSONP/RESTful/HTML/BigPipe/Comet/Socket/同步、異步，想怎麼整就怎麼整，徹底根據你的場景決定。

瀏覽器層在咱們這個架構中沒有變化，也不但願由於引入Node改變你之前在瀏覽器中開發的認知。

引入Node，只是把本該就前端控制的部分交由前端掌控。

詳細參見：http://blog.csdn.net/u011413061/article/details/50294263

組件設計

一百四十9、設計一個彈框組件，組件寬度爲屏幕高度的50%，寬度爲屏幕寬度的80%，水平垂直居中。彈窗組件有 header, body, footer三部分，header中有標題，可定製，body區域，footer區域有肯定和取消按鈕，可定製兩個按鈕的文字內容，組件外的內容有遮罩，點擊遮罩和取消按鈕時關閉彈框，參照下圖。（相似於layer的彈出層插件）

使用面向對象封裝插件較爲合適

構造函數的參數有header的標題及body內容和按鈕文字內容

封裝的方法應該有show, hide,在點擊遮罩和取消按鈕時調用hide方法

而且hide和show方法應該有返回值以供判斷。

一百五10、實現一個手勢滑動輪播圖組件。效果參考：https://static.xiaohongchun.com/goods/4514 (請在手機裏打開）

詳細參考：http://www.jb51.net/article/65177.htm

一百五11、設計基於觀察者模式的事件綁定機制

觀察者模式（發佈-訂閱模式）的定義：Observer的意圖是定義對象之間的一種一（被觀察者）對多（觀察者）的關係，當一個對象的狀態發生改變時，全部依賴它的對象獲得通知，而且會自動更新本身

在JavaScript中，通常使用事件模型來替代傳統的觀察者模式。

好處：

（1）可普遍應用於異步編程中，是一種替代傳遞迴調函數的方案。

（2）可取代對象之間硬編碼的通知機制，一個對象不用再顯示地調用另一個對象的某個接口。兩對象輕鬆解耦。

代碼參考：http://blog.csdn.net/phker/article/details/6880371

http://www.cnblogs.com/LuckyWi nty/p/5796190.html

一百五12、 jq本身擴展過什麼插件？

彈出層插件、pagination插件、瀑布流插件、模態框插件等

參考：Jquery插件庫 jquery之家

一百五十3、側滑菜單如何實現？

主要依靠兩個大的容器來模擬側滑菜單界面和主界面，把側滑菜單放到頁面右側看不到的地方，在操做的同時，使用css3過渡、動畫或者jq來使兩個容器相對運動，實現側滑菜單效果

參考：http://www.111cn.net/wy/js一ajax/99687.htm

一百五十4、權限管理如何實現？

（1）前端控制：

　　前端的控制比較簡單，從後臺獲取到用戶的權限以後，能夠存在session或者cookie中，而後在頁面加載的時候，經過session或者cookie中存的權限來選擇讓該功能展示或者禁用。

前端實現代碼詳細參見：http://blog.csdn.net/liuweidagege/article/details/42497731

（2）後臺控制：

　　僅僅依靠前端的控制是沒法完美解決權限控制的問題，由於前端頁面的加載過程是在瀏覽器中完成的，用戶能夠自行篡改頁面；或者用戶能夠直接經過URI請求來獲取非法權限功能。因此須要在後臺實現權限控制。

　　後臺的控制方法也不少，好比filter、spring的AOP等。在此選用springMVC的interceptor來控制。

（3）全局異常管理：

　　思路是在攔截器中權限校驗失敗時，拋出一個權限校驗失敗的異常，而後經過全局異常管理類來捕獲並返回前端特定的格式。具體以下。

一百五十5、 —個大數組，可能存了 100萬個數字，要從其中取出來第二大的數的下標，有什麼快速的方法？

用兩個變量max，max2，其中max儲存最大值，max2儲存第二大值；初始化的時候，將數組中的第一個元素中較大的存進max中，較小的存進max2中，而後從第三個元素(下標爲2)的元素開始，若是遇到的數比max大，就讓max2=max;max等於遇到的數一直循環，直到數組尾部，最後輸出max2

單元測試

一百五十6、單個組件怎麼測試性能

React組件測試框架用mocha,測試庫用官方的測試工具庫，也可以使用第三方庫Enzyme,建議使用第三方的。

詳細參見：http://www.ruanyifeng.com/blog/2016/02/react一testing一tutorial.html

Vue使用Unit和e2e測試工具：

詳細參見：http://www.tuicool.com/articles/6vulNvR

React

一百五十7、有了解過React.js嗎？

React.js 只是一個視圖庫

　　（1）聲明式設計

　　（2）高效：經過對DOM的模擬，最大限度的減小與DOM的交互。

　　（3）靈活：能夠與已知的框架或庫很好的配合。

　　（4）JSX：是js語法的擴展，不必定使用，但建議用。

　　（5）組件：構建組件，使代碼更容易獲得複用，可以很好地應用在大項目的開發中。

　　（6）單向響應的數據流：React實現了單向響應的數據流，從而減小了重複代碼，這也是解釋了它爲何比傳統數據綁定更簡單。

一百五十8、 redux中間件

中間件提供第三方插件的模式，自定義攔截action一> reducer的過程。變爲action一〉 middlewares 一> reducer。這種機制可讓咱們改變數據流，實現如異步action， action過濾，日誌輸出，異常報告等功能。

常見的中間件：

redux一logger:提供日誌輸出

redux一thunk:處理異步操做

redux一promise:處理異步操做，actionCreator的返回值是promise

一百五十9、 redux有什麼缺點

1．一個組件所須要的數據，必須甶父組件傳過來，而不能像flux中直接從store取。

2．當一個組件相關數據更新吋，即便父組件不須要用到這個組件，父組件仍是會從新render,可能會有效率影響，或者須要寫複雜的shouldComponentUpdate進行判斷。

一百六10、 react組件的劃分業務組件技術組件？

根據組件的職責一般把組件分爲UI組件和容器組件。

UI組件負責UI的呈現，容器組件負責管理數據和邏輯。

二者經過React一Redux提供connect方法聯繫起來。

具體使用能夠參照以下連接：

http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_three_react一redux.html

一百六11、 react生命週期函數

這個問題要考察的是組件的生命週期

1、初始化階段：

getDefaultProps:獲取實例的默認屬性

getInitialState:獲取每一個實例的初始化狀態

componentWillMount:組件即將被裝載、渲染到頁面上

render:組件在這裏生成虛擬的DOM節點

componentDidMount:組件真正在被裝載以後

2、運行中狀態：

componentWillReceiveProps:組件將要接收到屬性的時候調用

shouldComponentUpdate:組件接受到新屬性或者新狀態的時候（能夠返回false,接收數據後不更新，阻止render調用，後面的函數不會被繼續執行了）

componentWillUpdate:組件即將更新不能修改屬性和狀態

render:組件從新描繪

componentDidUpdate:組件已經更新

3、銷燬階段：

compcomponentWillUnmount:組件即將銷燬

一百六12、 react性能優化是哪一個周期函數？

shouldComponentUpdate這個方法用來判斷是否須要調用render方法從新描繪dom。由於dom的描繪很是消耗性能，若是咱們能在shouldComponentUpdate方法中可以寫出更優化的dom diff算法，能夠極大的提升性能。

詳細參考：http://www.javashuo.com/article/p-eqdqeqmg-eh.html

一百六十3、爲何虛擬dom會提升性能？

虛擬dom至關於在js和真實dom中間加了一個緩存，利用dom diff算法避免了沒有必要的dom操做，從而提髙性能。

具體實現步驟以下：

1．用JavaScript對象結構表示DOM樹的結構；而後用這個樹構建一個真正的DOM樹，插到文檔當中

2．當狀態變動的時候，從新構造一棵新的對象樹。而後用新的樹和舊的樹進行比較，記錄兩棵樹差別

3．把2所記錄的差別應用到步驟1所構建的真正的DOM樹上，視圖就更新了。

參考連接：https://www.zhihu.com/question/29504639?sort=created

一百六十4、 diff 算法？

1) 把樹形結構按照層級分解，只比較同級元素。

2) 給列表結構的每一個單元添加惟_的key屬性，方便比較。

3) React只會匹配相同class的component (這裏面的class指的是組件的名字）

4) 合併操做，調用component的setState方法的時候,React將其標記爲dirty.到每個事件循環結束,React檢查全部標記dirty的component從新繪製.

5) 選擇性子樹渲染。開發人員能夠重寫shouldComponentUpdate提升diff的性能。

參考連接：http://www.javashuo.com/article/p-qmngkjkx-kn.html

一百六十5、 react性能優化方案

1) 重寫shouldComponentUpdate來避免沒必要要的dom操做0

2) 使用 production 版本的react.js0

3) 使用key來幫助React識別列表中全部子組件的最小變化。

參考連接：

http://www.javashuo.com/article/p-eqdqeqmg-eh.html http://blog.csdn.net/limm33/article/details/50948869

一百六十6、簡述flux思想

Flux的最大特色，就是數據的"單向流動"。

1．用戶訪問View

2．View發出用戶的Action

3．Dispatcher收到Action,要求Store進行相應的更新

4．Store更新後，發出一個"change"事件

5．View收到"change"事件後，更新頁面

參考連接：http://www.ruanyifeng.com/blog/2016/01/flux.html

一百六十7、 React項目用過什麼腳手架？ Mern? Yeoman?

Mern: MERN是腳手架的工具，它能夠很容易地使用Mongo, Express, React and NodeJS生成

同構JS應用。它最大限度地減小安裝時間，並獲得您使用的成熟技術來加速開發。

參考連接：http://www.open一open.com/lib/view/open1455953055292.html

Vue.js

一百六十8、 vue與react的對比，如何選型？從性能，生態圈，數據量，數據的傳遞上，做比較

1) React和Vue有許多類似之處，它們都有：

使用 Virtual DOM

提供了響應式（Reactive)和組件化（Composable)的視圖組件。

將注意力集中保持在覈心庫，伴隨於此，有配套的路由和負責處理全局狀態管理的庫。

2) 性能：

到目前爲止，針對現實狀況的測試中，Vue的性能是優於React的。

3) 生態圈

Vue.js: ES6+Webpack+unit/e2e+Vue+vue一router+單文件組件+vuex+iVew

React: ES6+Webpack+Enzyme+React+React一router+Redux

4) 何時選擇Vue.js

若是你喜歡用（或但願可以用）模板搭建應用，請使用Vue

若是你喜歡簡單和」能用就行」的東西，請使用Vue

若是你的應用須要儘量的小和快，請使用Vue

若是你計劃構建一個大型應用程序，請使用React

若是你想要一個同時適用於Web端和原生App的框架，請選擇React

若是你想要最大的生態圈，請使用React

詳細參考：

http://cn.vuejs.org/v2/guide/comparison.html#React

http://blog.csdn.net/yzh_2017/article/details/54909166

一百六十9、 vue slot是作什麼的？

簡單來講，假如父組件須要在子組件內放一些D〇M，那麼這些DOM是顯示、不顯示、在哪個地方顯示、如何顯示，就是slot分發負責的活。

詳細參考：http://cn.vueis.orq/v2/quide/comp〇nents.html#使用一Slot一分發內容

一百七10、 vue和angular的優缺點以及適用場合？

參見：《在選擇框架的時候要從哪方面入手》一題

一百七11、 vue路甶實現原理？

以官方倉庫下examples/basic基礎例子來一點點具體分析整個流程。

和流程相關的主要須要關注點的就是components、history目錄以及create一matcher.js、 create一route一map.js、index.js，install.js。

從入口，做爲插件，實例化VueRouter,實例化History,實例化Vue, defineReactive定義_route, router一link和router一view組件等幾個方面展開分析

必須參見：http://www.tuicool.com/articles/jQRnlrF

一百七12、大家vue項目是打包了一個js文件，一個css文件，仍是有多個文件？

根據vue一cli腳手架規範，一個js文件，一個CSS文件。

詳細參見：

http://blog.csdn.net/lx376693576/article/details/54911340

https://zhuanlan.zhihu.com/p/24322005

一百七十3、 vue遇到的坑，如何解決的？

Vue1.0升級2.0有不少坑:生命週期；路由中引入靜態js，全局組件，全局變量，全局 function; v一for循環的key, value值互換了位置，還有track一by; filter過濾器；遍歷數組時， key值不能作model;父子通訊等。

其餘坑詳見：

http://blog.csdn.net/lemon_zhao/article/details/55510589 http://www.javashuo.com/article/p-hnrtwfco-gv.html http://www.tuicool.com/articles/aUrmumV

一百七十4、 vue的雙向綁定的原理，和angular的對比

在不一樣的MWM框架中，實現雙向數據綁定的技術有所不一樣。

AngulaJS採用‘‘髒值檢測」的方式，數據發生變動後，對於全部的數據和視圖的綁定關係進行一次檢測，識別是否有數據發生了改變，有變化進行處理，可能進一步引起其餘數據的改變，因此這個過程可能會循環幾回，一直到再也不有數據變化發生後，將變動的數據發送到視圖，更新頁面展示。若是是手動對ViewModel的數據進行變動，爲確保變動同步到視圖，須要手動觸發一次‘‘髒值檢測」。

VueJS則使用ES5提供的〇bject.defineProperty()方法，監控對數據的操做，從而能夠自動觸發數據同步。而且，因爲是在不一樣的數據上觸發同步，能夠精確的將變動發送給綁定的視圖，而不是對全部的數據都執行一次檢測。

詳細參見：http://www.jianshu.eom/p/d3a15a1f94a0

一百七十5、 vue一cli，腳手架

安裝：$ npm instaH 一g vue一cli

使用：$ vue init <template一name> <project一name>

webpack配置詳解：https://zhuanlan.zhihu.eom/p/24322005

一百七十6、 Vue裏面router一link在電腦上有用，在安卓上沒反應怎麼解決？

Vue路由在Android機上有問題，babel問題，安裝babel polypill插件解決。

框架底層

一百七十7、 j〇uery源碼中值得借鑑的？

使用模塊化思想，模塊間保持獨立，不會致使多個開發人員合做時產生的衝突。

1．在設計程序時，要結構清晰，髙內聚，低耦合。

2．利用多態的方式，實現方法的重載，提髙代碼的複用率

3．jQuery的鏈式調用以及回溯

4．jQuery.fn.extend與;jQuery.extend方法來實現擴展靜態方法或實例方法

一百七十8、 $.ready是怎麼實現的？

原生js中window.onload事件是在頁面全部的資源都加載完畢後觸發的.若是頁面上有大圖片等資源響應緩慢，會致使window.onload事件遲遲沒法觸發.因此出現了 DOM Ready事件.此事件在D0M文檔結構準備完畢後觸發，即在資源加載前觸發.

jQuery中的ready方法實現了當頁面加載完成後才執行的效果，但他並非window.onload或者doucment.onload的封裝，而是使用標準W3C瀏覽器DOM隱藏api和舊瀏覽器缺陷來完成的。能夠經過閱讀jq源碼來理解：

DOMContentLoaded = function(){

//取消事件監聽，執行ready方法

if ( document.addEventListener ){

document.removeEventListener( "DOMContentLoaded",

DOMContentLoaded, false );

jQuery.ready();

}else if ( document.readyState === "complete" ) {

document.detachEvent( "onreadystatechange", DOMContentLoaded );

jQuery.ready();

}

};

在 jQuery 中完整的代碼以下所示。

jQuery.ready.promise = function( obj ) {

if ( !readyList ) {

readyList = jQuery.Deferred();

//表示頁面已經加載完成，直接調用 ready方法

if ( document.readyState === "complete" ) {

//將 jQuery.ready壓入異步消息隊列，設置延遲時間1毫秒（注意，有些瀏覽器延遲不能小於4毫秒）

setTimeout( jQuery.ready);

}

else if ( document.addEventListener ) //

{

//監聽DOM加載完成

document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );

//這裏是爲了確保全部ready執行結束，若是DOMContentLoaded方法執行了，將有一個狀態值 isReady被設置爲true,所以，

//ready方法一旦執行，那麼將只執行一次，window.addEventListener中的ready 將被 return 中斷

window.addEventListener( "load", jQuery.ready, false );

} else {

//低版本的IE瀏覽器

document.attachEvent( "onreadystatechange", DOMContentLoaded );

window.attachEvent( "onload", jQuery.ready );

var top = false;

try {

top = window.frameElement == null && document.documentElement;

} catch(e) {

}

if ( top && top.doScroll ) //剔除iframe的成分

{

(function doScrollCheck() {

if ( !jQuery.isReady ) {

try {

//根據bug來兼容低版本的IE http://javascript.nwbox.com/IEContentLoaded/

top.doScroll("left");

} catch(e) {

//因爲低版本的IE 瀏覽器，onreadystatechange事件不可靠，所以須要根據各個bug來判斷頁面是否已加載完成

return setTimeout( doScrollCheck, 50 );

}

jQuery.ready();

}

})();

}

return readyList.promise( obj );

};

須要的時候，在咱們調用 ready 函數的時候，才須要註冊這些判斷頁面是否徹底加載的處理，以下所示：

ready: function( wait ){

if ( wait === true ? 一一jQuery.readyWait : jQuery.isReady ) {

//判斷頁面是否已完成加載而且是否已經執行ready方法

return;

}

if ( !document.body ) {

return setTimeout( jQuery.ready );

}

jQuery.isReady = true; //指示ready方法已被執行

if ( wait !== true && 一一jQuery.readyWait > 0 ) {

return;

}

readyList.resolveWith( document, [ jQuery ] );

if ( jQuery.fn.trigger ) {

jQuery( document ).trigger("ready").off("ready");

}

總結：

頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁麪包含圖片等文件在內的全部元素都加載完成。(能夠說：ready 在onload 前加載！！！)
通常樣式控制的，好比圖片大小控制放在onload 裏面加載;
jS事件觸發的方法，能夠在ready 裏面加載;

一百七十9、懶加載的實現原理?

意義：懶加載的主要目的是做爲服務器前端的優化，減小請求數或延遲請求數。

實現原理：先加載一部分數據，當觸發某個條件時利用異步加載剩餘的數據，新獲得的數據不會影響原有數據的顯示，同時最大程度上減小服務器端的資源耗用。

實現方式：

第一種是純粹的延遲加載，使用setTimeOut或setlnterval進行加載延遲.
第二種是條件加載，符合某些條件，或觸發了某些事件纔開始異步下載。
第三種是可視區加載，即僅加載用戶能夠看到的區域，這個主要由監控滾動條來實現，通常會在距用戶看到某圖片前必定距離便開始加載，這樣能保證用戶拉下時正好能看到圖片。

一百八10、雙向數據綁定和單向數據的區別？

1．單向數據流中，父組件給子組件傳遞數據，但反過來不能夠傳遞，也就是說單向數據流是從最外層節點傳遞到子節點，他們只需從最外層節點獲取props渲染便可，若是頂層組件的某個prop改變了，React會遞歸的向下便利整棵組件樹，從新渲染全部使用這個屬性的組件， React組件內部還具備本身的狀態，這些狀態只能在組件內修改；雙向數據綁定是數據與視圖雙向綁定，數據發生改變時，視圖也改變，視圖發生改變時，數據也會發生改變。

2．雙向數據綁定的各類數據相互依賴相互綁定，致使數據問題的源頭難以被跟蹤到；單向數據流的數據流動方向能夠跟蹤，流動單一，追查問題的時候能夠更快捷，缺點是寫起來不太方便，要使視圖發生改變就得建立各類action來維護state。

3．雙向綁定把數據變動的操做隱藏在框架內部，調用者並不會直接感知。而在踐行單向數據流的flux系的實現中，其實不過是在全局搞了一個單例的事件分發器（dispatcher)，開發者必須顯式地經過這個統一的事件機制作數據變動通知。

一百八11、怎麼實現一個相似於const功能的方法？

es6中const至關於聲明常量不可更改，咱們利用defineProperty能夠模擬實現；咱們把 writable設置爲false的時候，該屬性就成了只讀，也就知足了常量了性質，咱們把常量封裝在CONST命名空間裏面，可是由於咱們依然能夠經過修改屬性writable爲true修改屬性值，因此 configurable設置爲false,不能修改屬性；

模擬：

以下代碼CONST.a至關於es6中cont a=2; CONST.a是不能夠更改的常量；

var CONST = { };

Object.defineProperty(CONST, ‘a’, {

value: 2,

writable: false,

configurable: false,

enumerable: true //可枚舉

});

console.log(CONST.a); //2

CONST.a = 3;

console.log(CONST.a); //2

一百八12、使用原生js模擬一個apply方法

apply方法：

語法：apply([thisObj[,argArray]])

定義：應用某一對象的一個方法，用另外一個對象替換當前對象。

說明：

若是 argArray 不是一個有效的數組或者不是 arguments 對象，那麼將致使一個 TypeError。

若是沒有提供 argArray 和 thisObj 任何一個參數，那麼 Global 對象將被用做 thisObj，而且沒法被傳遞任何參數。

Function.prototype.apply = function (context, arr) {

var context = Object(context) || window;

context.fn = this;

var result;

if (!arr) {

result = context.fn();

}

else {

var args = [];

for (var i = 0, len = arr.length; i < len; i++) {

args.push('arr[' + i + ']');

}

result = eval('context.fn(' + args + ')')

}

delete context.fn

return result;

}

一百八十3、使用原生js模擬一個call方法

call()方法在使用一個指定的this值和若干個指定的參數值的前提下調用某個函數或方法。

Function.prototype.call = function (context) {

var context = context || window;

context.fn = this;

var args = [];

for(var i = 1, len = arguments.length; i < len; i++) {

args.push('arguments[' + i + ']');

}

var result = eval('context.fn(' + args +')');

delete context.fn

return result;

}

以上兩個方法的具體實現原理能夠參考：http://www.javashuo.com/article/p-cytaaewc-h.html

一百八十4、 Object.create()和直接建立對象有什麼區別？

Object.create()方法建立一個擁有指定原型和若干個指定屬性的對象 //Object.create(proto,[propertiesObject])

該方法建立一個對象，其接受兩個參數，第一個參數是這個對象的原型對象proto,

第二個是一個可選參數，用以對對象的屬性作進一步描述

若是proto參數不是null或一個對象值，則拋出一個TypeError異常

var objl = Object.create({

x: 1,

y: 2

}); //對象obj1繼承了屬性x和y

var obj2 = Object.create(null);//對象 obj2 沒有原型

對象字面量是建立對象最簡單的一種形式，

目的是在於簡化建立包含大量屬性的對象的過程。

對象字面量由若干屬性名(keys)和屬性值(values)成對組成的映射表，

key和value中間使用冒號(:)分隔，

每對key/value之間使用逗號(,)分隔，

整個映射表用花括號({})括起來。

在用字面量來建立對象的時候，對象中的property定義能夠用單引號或雙引號來包括，也能夠忽略引號。不過，當property中出現空格、斜槓等特殊字符，或者使用的property與JS關鍵詞衝突時，則必須使用引號。

var obj = {

property_1: value_1,// property—# 多是一個標識符...

2: value_2, //或者是一個數字 "property n": value_n // 或是一個字符串

}

經過對象字面量建立的對象複用性較差，

使用Object.create()建立對象時不須要定義一個構造函數就容許你在對象中選擇其原型對象。

一百八十5、使用for in遍歷對象和使用Object.keys來遍歷對象有什麼區別？

1．for in主要用於遍歷對象的可枚舉屬性，包括自有屬性、繼承自原型的屬性

2．Object.keys返回一個數組，元素均爲對象自有的可枚舉屬性

3．Object.getOwnProperty 用於返回對象的自有屬性，包括可枚舉的和不可枚舉的

var obj = {

"name":"xiaosan",

"age":23

}

Object.defineProperty(obj,"height",{value:178,enumerable:false})

Object.prototype.prototypel = function(){

console.log('aaa')

}

Object.prototype.prototype2 = 'bbb';

//for in

for(var i in obj){

console.log(i); //name age prototypel prototype2

}

//Object.keys

console.log(Object.keys(obj)) //name age

//Object.getOwnProperty

console.log(Object.getOwnPropertyNames(obj)) //name age height

一百八十6、深拷貝和淺拷貝以及應用場景

i.淺拷貝

//拷貝就是把父對象的屬性，所有拷貝給子對象。

var Chinese = {

nation:'中國’

}

Var Doctor={

career:'醫生'

}

function extendCopy(p) {

var c = {};

for (var i in p) {

c[i] = p[i];

}

c.uber = p; return c;

}

//使用的時候，這樣寫：

Doctor = extendCopy(Chinese);

Doctor.career ='醫生'；

alert(Doctor.nation); // 中國

//可是，這樣的拷貝有一個問題。那就是，若是父對象的屬性等於數組或另外一個對象，那麼實際上，子對象得到的只是一個內存地址，而不是真正拷貝，所以存在父對象被篡改的可能。

//請看，如今給Chinese添加一個"出生地"屬性，它的值是一個數組。

Chinese.birthPlaces =['北京','上海','香港'];

//經過extendCopy()函數，Doctor繼承了Chinese。

Doctor = extendCopy(Chinese);

//而後，咱們爲Doctor的"出生地"添加一個城市：

Doctor.birthPlaces.push('廈門')；

//看一下輸入結果

alert(Doctor.birthPlaces); //北京，上海，香港，廈門 alert(Chinese.birthPlaces); //北京，上海，香港，廈門

//結果是兩個的出生地都被改了。

//因此，extendCopy()只是拷貝了基本類型的數據，咱們把這種拷貝叫作''淺拷貝〃。

2.深拷貝

//所謂"深拷貝"，就是可以實現真正意義上的數組和對象的拷貝。它的實現並不難，只要遞歸調用"淺拷貝"就好了。

var Chinese = {

nation:'中國’

}

var Doctor = {

career:'醫生'

}

function deepCopy(p, c) {

var c = c || {};

for (var i in p) {

if (typeof p[i] === 'object') {

c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]);

} else {

c[i] = p[i];

}

return c;

}

//看一下使用方法：

Doctor = deepCopy(Chinese);

//如今，給父對象加一個屬性，值爲數組。而後，在子對象上修改這個屬性：

Chinese.birthPlaces =['北京','上海','香港'];

Doctor.birthPlaces.push('廈門')；

alert(Doctor.birthPlaces); //北京，上海，香港，廈門

alert(Chinese.birthPlaces); //北京，上海，香港

JavaScript中的對象通常是可變的（Mutable),由於使用了引用賦值，新的對象簡單的引用了原始對象，改變新的對象將影響到原始對象。如'foo={a: 1}; bar=foo; bar.a=2'你會發現此時 'foo.a'也被改爲了 '2'。

雖然這樣作能夠節約內存，但當應用複雜後，這就形成了很是大的隱患，Mutable帶來的優勢變得得不償失。爲了解決這個問題，通常的作法是使用shallowCopy (淺拷貝）或deepCopy (深拷貝）來避免被修改，但這樣作形成了CPU和內存的浪費。

Immutable能夠很好地解決這些問題。

一百八十7、原型鏈，閉包與繼承

閉包的好處：

1．不會污染全局環境；

2．能夠進行形參的記憶，減小形參的個數,延長形參生命週期；

function add(x) {

return function(y) {

return (x+y);

}

var sum = add(2);

sum(5);//結果爲 7

3．方便進行模塊化開發；

var module = (function() {

var name = '123';

function init() {

console.log(name);

}

return {

getname:init

}

})()

module.getname();//結果爲 123;

繼承：一個構造函數繼承另外一個構造函數中的方法;能夠省去大量的重複。

function Man(name,age) {

this.name = name; this.age = age;

}

var person = new Man('tom',19);

function Woman(name,age) {

this.sex = 'woman';

Man.call(this,name,age);

}

Woman.prototype = Man.prototype;

var person1 = new Woman('july',20);

person1.name//結果爲 july

person1.age //結果爲 20

person1.sex //結果爲 woman

原型鏈查找：進行方法調用的時候，會先在實例自身上找，若是沒有就去該實例的原型上找。

function People() {

this.name = 'a People';

}

People.prototype.say = function() {

this.age = '10';

console.log(this.name,this.age);

}

var person = new People();

person.say();

AngularJS

一百八十8、說說你對MVC和MVVM的理解

mvc:

View 傳送指令到 Controller

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

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

全部通訊都是單向的。

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

組成部分Model、View、ViewModel

View：UI界面

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

Model：數據訪問層

一百八十9、對 bootstrap 的掌握？爲何用 angular+bootstrap 搭建後臺管理系統

bootstrap是一個快速開發的響應式框架，主要是爲了快速搭建ui界面，bootstrap 的web組件和js插件對pc端開發比較友好，尤爲是柵格化系統能夠良好兼容瀏覽器，低版本瀏覽器能夠使用bootstrap一responsive的插件兼容，js插件有各類回調機制，能夠知足本身的多樣開發需求，並且bootstrap使用css屬性來操做樣式，免去了手寫原生代碼的痛苦，使用angular進行數據綁定，bootstrap來搭建界面，提高開發效率

我的心得：

我在實際開發中使用ace admin這套基於boostrap的框架，能夠更快速的開發，數據項經過json結構進行配置，幾乎不用手寫代碼，提高開發效率

一百九10、 angular中ng一if和ng-show/hide 有什麼區別？

1．ng一if 在後面表達式爲 true 的時候才建立這個 dom 節點，ng一show 是初始時就建立了，用 display:block 和 display:none 來控制顯示和不顯示。

2．ng一if 會（隱式地）產生新做用域，ng一switch .ng一include 等會動態建立一塊界面的也是如此。

我的心得：

ng一if添加刪除節點，那麼確定回建立做用域，而ng一show/hide則不會

一百九11、 Angular中ng一click中寫的表達式，能夠用js原生上的方法嗎？爲何？

ng一click和原生事件完成的功能是同樣的，可是ng一click作了優化，並且ng一click裏面能夠寫表達式，運算過程，click則要單獨處理，手寫功能。

我的心得：

若是不在做用域裏添加函數，能夠配合ng一init初始化屬性值，在ng一click裏添加算法或者某一功能，雖然ng一inK不推薦使用，可是側面說明ng一click的優點

一百九12、內置filter都有哪些？

ng 內置的 filter 有九種：

date（日期）

currency（貨幣）

limitTo（限制數組或字符串長度）

orderBy（排序）

lowercase（小寫）

uppercase（大寫）

number（格式化數字，加上千位分隔符，並接收參數限定小數點位數）

json（格式化 json 對象）

filter（處理一個數組，過濾出含有某個子串的元素）

filter有兩種使用方法，一種是直接在頁面裏：

<p>{{now | date : 'yyyy一MM一dd'}}</p>

另外一種是在 js 裏面用：

// $filter('過濾器名稱')(須要過濾的對象, 參數1, 參數2,...)

$filter('date')(now, 'yyyy一MM一dd hh:mm:ss');

一百九十3、如何自定義filter?

在模塊下掛在一個filter()方法，第一個參數傳入過濾器的名字，第二個參數是回調函數，處理過濾方法的詳細內容，最後返回結果，這樣外部就能夠根據過濾器的名字調用了

例如

myAppModule.filter("reverse"，function(){

return function(input,uppercase){

var out ="";

for(var i=0 ; i<input.length; i++){

out = input.charAt(i)+out;

}

if(uppercase){

out = out.toUpperCase();

}

return out;

}

});

使用：name丨reverse經過管道符調用

一百九十4、 factory、service 和 provider 是什麼關係？

factory , service , provider都是angular 提供的服務

factory就是原生js裏的方法，一個簡單的函數

service相似原生裏構造函數的過程，擁有一個構造器constructor，也就是說有 new的過程，追加屬性和方法都是在this上追加的

provider是服務商當service須要配置的時候，須要使用provider提供服務，例如當使用angular進行跨域訪問，須要配置jsonp信息的時候，就能夠使用provider進行config的配置，簡單理解是service的高級版本，provider提供一個$get的屬性來返回 $provider的實例

他們都是單例模式，只實例化一次

我的理解：

provider > service > factory

factory用來配置簡單的服務

service是在factory的基礎之上加入了面向對象的思想，提供更多功能的服務

provider是在service的基礎上進一步改進配置信息

factory與service在底層代碼上都來源於provider

例子介紹：

我能夠在factory裏寫一個$http( )請求，不作任何配置，參數寫死

我能夠在service裏寫一個$http( )請求，傳入請求的參數能夠先配置在this的屬性上傳入方法

我能夠在provider裏寫一個請求，而後在config上傳入要配置的參數，URL， method，data等信息，經過config來修改provider的參數，再將服務商提供的服務注入控制器controller

注意事項：

config裏傳入的參數是nameProvider而不是name，也就是說你的叫作 myProvider, config 裏傳入的參數就是myProviderProvider而不是myProvider

一百九十5、 angular的數據綁定採用什麼機制？詳述原理

經過$watch來監聽每一次dom的變化，而後$digest來遍歷循環全部的$watch 隊列，發現與原來不一樣的值，也就是髒值則進行修改，最後通知$apply , $apply會進入angular context的執行環境，通知瀏覽器拿回控制權，修改相應的dom節點

我的心得：

每個ng指令的觸發都在內部觸發了一個$Watch的隊列，加入一組標籤

</li>

循環了 10次，那麼就觸發了10個item與1個ng一repeat的11個$watch的隊列，

$digest會遍歷循環這些隊列，比較值的變化，有變化的即爲髒值過程叫作dirty一checking，$digest修改完對應的值就會通知$apply()準備進入angular context的執行階段修改dom，沒有變化則不修改。也就是說咱們在頁面每次觸發的操做，每次輸入一個文字都會觸發$watch，可見於react相比angular的劣勢出現了

一百九十6、兩個平級界面塊a和b，若是a中觸發一個事件，有哪些方式能讓b知道？詳述原理

1．經過a的子controller將事件使用$emit傳遞給父controller再將事件用 $broadcast傳遞給b controller實現數據傳遞

2．也能夠經過service服務，將數據保存在service以內，而後在b中調用service

我的心得：

像這種數據傳遞的方式其實有不少種，本質是不一樣做用於之間的數據傳遞，只要掌握住這一點思想有不少方式解決，好比我能夠嘗試掛在$rootScope之上進行共享，也能夠用本地存儲來存儲數據，實現數據共享。方法不重要，關鍵是如何解決的思路。

一百九十7、 —個angular應用應當如何良好地分層？

目錄結構的劃分

對於小型項目，能夠按照文件類型組織，好比：

css

controllers

models

services

filters

templates

可是對於規模較大的項目，最好按業務模塊劃分，好比：

css

modules

account

controllers

models

services

filters

templates

disk

controllers

models

services

filters

templates

modules下最好再有一個common目錄來存放公共的東西

一百九十8、 angular應用經常使用哪些路甶庫，各自的區別是什麼？

ng一router，ui一touter，ui一router能夠嵌套子視圖

一百九十9、若是經過angular的directive規劃一套全組件化體系，可能遇到哪些挑戰？

隔離做用域，ng一指令的做用域傳遞

二百、分屬不一樣團隊進行開發的angular應用，若是要作整合，可能會遇到哪些問題，如何解決？

可能會遇到不一樣模塊之間的衝突。好比一個團隊全部的開發在moduleA下進行，另外一團隊開發的代碼在moduleB下

angular.module('myApp.moduleA'，[ ])

.factory('serviceA', function(){

.......

})

angular.module('myApp.moduleB'，[ ])

.factory('serviceA'，function(){

......

})

angular.module('myApp'，['myApp.moduleA'，'myApp.moduleB'])

會致使兩個module下面的serviceA發生了覆蓋。

我的心得：沒有太好的解決方案，只能約定命名規範

二百〇1、 angular的缺點有哪些？

不適合作交互過多的項目，由於沒有選擇器的存在，

致使學習成本較高，對前端不友好。但遵照AngularJS的約定時，生產力會很高，對Java程序員友好

由於全部內容都是動態獲取並渲染生成的，搜索引擎無法爬取

二百〇2、如何看待angularl.2中引入的controller as語法？

爲angular添加this做用域鏈，使得angular更加像原聲寫法

二百〇3、詳述angular的「依賴注入」。

依賴注入是一個在組件中給出的替代了硬的組件內的編碼它們的依賴關係的軟件設計模式。這減輕一個組成部分，從定位的依賴，依賴配置。這有助於使組件可重用，維護和測試。

AngularJS提供了一個至高無上的依賴注入機制。它提供了一個可注入彼此依賴 constant value factory service provide 核心組件。

二百〇4、當你簡單的動態給頁面插入html時，此時html帶有 angular的語法不會執行的，爲何？

經過$compile進行處理，任何指令的生效都須要compile，這一步在app啓動的時候angular先幫你作了，但你插入的html是沒有通過compile這個步驟的，因此你手動 compile下便可。

二百〇5、使用ng一repeat出錯：Error: [ngRepeat:dupes]，怎麼回事？

Error: [ngRepeat:dupes]這個出錯提示具體意思是指數組中有2個以上的相同數字。 ngRepeat不容許collection中存在兩個相同Id的對象

對於數字對象來講，它的id就是它自身的值，所以，數組中是不容許存在兩個相同的數字的。爲了規避這個錯誤，須要定義本身的track by表達式。

例如：在ng一repeat="itme in items "中加入rack by item.id 或者track by fnCustomld(item)。嫌麻煩的話，直接拿循環的索引變量$index來用item in items track by $index——>ng一repeat="itme in items track by $index"

一句話總結：由於angular不容許數組中出現重複的值，因此會報錯dupes錯誤，意思是重複的參數錯誤

二百〇6、 Ng一repeat迭代數組的時候，若是數組中有相同值，會有什麼問題，如何解決？

見上題

二百〇7、使用第三方插件或者原生的js修改angular中的 model或者view的值時，相應的model或者view的值不會變化，也就是angular的雙向數據綁定失效，怎麼回事？

angular有本身的一個上下文，全部與angular有關的代碼執行（如雙向數據綁定）都在這個上下文中進行，所以若是你用第三方插件或者原生的js進行操做時，此時代碼是在javascript的上下文中執行，angular沒法知道你是否修改model或者view的值，天然也就沒法進行雙向數據綁定。

解決方案是在操做以後執行$scope.$apply( )或者將操做的代碼放在$scope.$apply(function( ){//操做的代碼...})

二百〇8、 angular中注入方式有推斷式注入、$inject注入、內聯式注入，固然這三種方式在angular中是等效的，但推斷式注入對於壓縮的JavaScript代碼來講是不起做用的，爲何？

由於壓縮事後的 JavaScript 代碼重命名了函數的參數名。在壓縮js代碼的時候儘可能不要用推斷式注入，最佳是用內聯式注入的方式。

二百〇9、如何看待 angular2?

相比Angularl.x，Angular2的改動很大，幾乎算是一個全新的框架。

基於TypeScript (能夠使用TypeScript進行開發），在大型項目團隊協做時，強語言類型更有利。

組件化，提高開發和維護的效率。

還有module支持動態加載，new router，promise的原生支持等等。

迎合將來標準，吸納其餘框架的優勢，值得期待，不過同時要學習的東西也更多了 (ES next、TS、Rx等）

詳細參考：

http://www.tuicool.com/articles/ymmq2mf

http://www.cnblogs.eom/laixiangran/p/4938732.html

綜合問題

二百一10、請列舉你知道的前端框架？經常使用的前端開發工具？開發過哪些應用和組件？

(1) 前端框架

bootstrap/jQuery/zepto/backbone/AngularJS/vue.js/React/

React Native/小程序

(2) 前端開發工具 gulp/webpack/git/svn/npm/linux

架構工具：bower、npm、yeoman、gulp、webpack

(3) 應用和組件

根據本身作的項目對答

二百一11、項目測試沒問題。可是放到線上就有問題了，你是怎麼分析解決的？

可能的緣由：

(1) 後端緣由：後端接口，後端服務器

(2) 域名、IP和路徑問題

(3) 網絡環境問題

(4) 線上庫、框架、工具的版本和本地不一致問題

(5) 線上和本地數據資源不一致問題

(6) 程序bug

二百一12、 ES6裏面你用過什麼？

1) 塊做用域一let

2) 衡量一const

3) 解構數組一Array Destructuring

4) 解構對象一Object Destructuring

5) 模板字符串一Template Strings

6) 展開操做符

7) 剩餘操做符

8) 解構參數

9) 箭頭函數

10) 對象表達式

11) 對象屬性名

12) 對比兩個值是否相等

13) 把對象的值複製到另外一個對象裏

14) 設置對象的prototype

15) __proto__

16) supper

17) 迭代器

18) class 類

19) get set

20) 靜態方法

21) 繼承

22) 模塊化

細節參見：http://es6.ruanyifeng.com/

二百一十3、如何管理團隊？

(1) 區分技術和管理角色在乎識上的差別

(2) 時間管理

(3) 同時管理本身和其餘人的代碼

(4) 贏得團隊的尊敬

詳細參見：http://www.t262.com/read/187780.html

二百一十4、你作過的你負責的最難的數據交互模塊是?

根據本身作的項目對答。

二百一十5、你平時寫過什麼業務邏輯？

根據本身作的項目對答。

二百一十6、在項目開發過程當中你負責的具體是什麼模塊？

根據本身作的項目對答。

二百一十7、若是須要你加班，你會加嗎，抵觸嗎？

其實你確定抵觸，但你確定要回答若是項目須要確定會加

二百一十8、一個小項目讓你本身負責搭建底層一些架構，你能勝任嗎？

例：我確定願意嘗試，並作到最優的選擇方案出來

二百一十9、若是項目拖過久，你情緒低落或者厭煩了怎麼調節？

例：你結合自身挑着好聽的說就行，就像聊天

二百二10、你建議本身造輪子，仍是利用開源的輪子？

例：根據實際狀況而定，若是開源徹底知足能夠本身二次開發就好，大大縮短開發週期若是實在沒有契合度很高的，能夠花費幾個工做日嘗試造輪。

注：

開放性問題（通常面試中咱們都避免不了），這些問題每每決定你是否最終被錄用或者等到終輪面試，技術點回答錯了沒關係，人腦不是機器，是能夠惡補的。但若是你沒有思想和獨到的思路，基礎挖的再深，可能也打動不了面試官，由於比你基礎好的一大堆，但每一個人的個性思想倒是不一樣的，所以咱們除了在學會知識點的基礎上，還要懂得一些爲人處事，注意咱們平時的言談舉止，不要因小失大；