基礎(chǔ)問(wèn)題

1. = 和 == 和 === 的區(qū)別？
   = : 用于賦值== : 用于判斷=== : 用于判斷，必須類型
   和值
   同時(shí)相等才是等

2.有幾種方式清除浮動(dòng)？
父級(jí)元素overflow: hidden;

浮動(dòng)元素后面的元素clear: both;

偽元素選擇器:.clear:after { content: ''; display: block; clear: both; }

父級(jí)元素設(shè)置高度
父級(jí)元素display: table;

3.請(qǐng)解釋JS中的閉包？
閉包，一個(gè)概念，在一個(gè)函數(shù)中，返回另一個(gè)函數(shù)，里面的函數(shù)即成為閉包閉包限制了一定的作用域，保證變量不被釋放掉

// 示例代碼var add = (function () { var count = 0; return function () { return ++count; };})();add(); // 1add(); // 2add(); // 3

4.常見兼容性問(wèn)題？
1.png24位的圖片在iE6瀏覽器上出現(xiàn)背景，解決方案是做成PNG8
2.瀏覽器默認(rèn)的margin和padding不同。解決方案是加一個(gè)全局的{margin:0;padding:0;}來(lái)統(tǒng)一。
3.IE6雙邊距bug:塊屬性標(biāo)簽float后，又有橫行的margin情況下，在ie6顯示margin比設(shè)置的大。浮動(dòng)ie產(chǎn)生的雙倍距離 #box{float:left;width:10px;margin:0 0 0 10px;} 這種情況之下IE會(huì)產(chǎn)生20px的距離，解決方案是在float的標(biāo)簽樣式控制中加入 ——display:inline;將其轉(zhuǎn)化為行內(nèi)屬性。(這個(gè)符號(hào)只有ie6會(huì)識(shí)別) 漸進(jìn)識(shí)別的方式，從總體中逐漸排除局部。首先，巧妙的使用“\9”這一標(biāo)記，將IE游覽器從所有情況中分離出來(lái)。接著，再次使用“+”將IE8和IE7、IE6分離開來(lái)，這樣IE8已經(jīng)獨(dú)立識(shí)別。 css.bb{background-color:#f1ee18;/所有識(shí)別/.background-color:#00deff\9;/IE6、7、8識(shí)別/+background-color:#a200ff;/IE6、7識(shí)別/_background-color:#1e0bd1;/IE6識(shí)別*/}
4.IE下,既可以使用獲取常規(guī)屬性的方法來(lái)獲取自定義屬性, 又可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性. 解決方法:統(tǒng)一通過(guò)getAttribute()獲取自定義屬性.
5.IE下,even對(duì)象有x,y屬性,但是沒(méi)有pageX,pageY屬性;Firefox下,event對(duì)象有pageX,pageY屬性,但是沒(méi)有x,y屬性. 解決方法：（條件注釋）缺點(diǎn)是在IE瀏覽器下可能會(huì)增加額外的HTTP請(qǐng)求數(shù)。
6.Chrome 中文界面下默認(rèn)會(huì)將小于 12px 的文本強(qiáng)制按照 12px 顯示, 可通過(guò)加入 CSS 屬性 -webkit-text-size-adjust:none; 解決. 如果這一屬性也不成 使用 transform:scale 來(lái)實(shí)施
7.超鏈接訪問(wèn)過(guò)后hover樣式就不出現(xiàn)了 被點(diǎn)擊訪問(wèn)過(guò)的超鏈接樣式不再具有hover和active樣式了解決方法是改變CSS屬性的排列順序:LoVe-HA:a:link{}a:visited{}a:hover{}a:active{}

5.如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間同域頁(yè)面的通信?
調(diào)用localstorge
、cookies
等本地存儲(chǔ)方式

HTML相關(guān)問(wèn)題

1.HTML5新標(biāo)簽？
nav
/header
/footer
/ section
/article
/aside
/detail
/summary

video
/audio
/source
/canvas
/figure
/figcaption

time
/progress
/mark

2.HTML5新表單元素?
url
/email
/date
/datetime
/time
/week
/month
/search
/range
/color

3.HTML5中有哪些新功能？
本地存儲(chǔ)：localStorage
/sessionStorage

離線緩存：Manifest

新標(biāo)簽：canvas
/video
/audio

拖放API：drag drop

地理位置：geolocation

瀏覽器后臺(tái)執(zhí)行：web worker

4.請(qǐng)解釋Cookie、sessionStroage、localStroage的區(qū)別？
Cookie
: 存儲(chǔ)數(shù)據(jù)量小，可以設(shè)置存儲(chǔ)時(shí)間，到期自動(dòng)刪除sessionStroage
: 將數(shù)據(jù)臨時(shí)存儲(chǔ)，離開當(dāng)前頁(yè)面就刪除localStroage
: 將數(shù)據(jù)保存到設(shè)備上，可以實(shí)現(xiàn)永久存儲(chǔ)，需要主動(dòng)刪除

5.描述application cache更新的過(guò)程?
第一次訪問(wèn)緩存manifest文件里列的文件，之后訪問(wèn)先加載緩存，在后臺(tái)加載manifest文件按字節(jié)對(duì)比看是否有變化，如果沒(méi)變化則說(shuō)明緩存未失效，否則在后臺(tái)按列表更新緩存，在下一次刷新頁(yè)面的時(shí)候使用新的資源

6.iframe有那些缺點(diǎn)?
1.iframe會(huì)阻塞主頁(yè)面的Onload事件
2.iframe和主頁(yè)面共享連接池，而瀏覽器對(duì)相同域的連接有限制，所以會(huì)影響頁(yè)面的并行加載。使用iframe之前需要考慮這兩個(gè)缺點(diǎn)。如果需要使用iframe，最好是通過(guò)javascript 動(dòng)態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個(gè)問(wèn)題。
3.iframe 會(huì)降低頁(yè)面整體性能， 之前QQ空間的數(shù)據(jù)是頁(yè)面每新增一個(gè)iframe，性能下降10%。 更多詳細(xì)內(nèi)容， 參見知乎問(wèn)答：http://www.zhihu.com/question/20653055

CSS相關(guān)問(wèn)題

1.CSS3新屬性？
更多的選擇器
彈性布局：flex

幀動(dòng)畫：keyframes
/animations

過(guò)渡動(dòng)畫：transition

多列布局：column

背景漸變：linear-gradient
/radial-gradient

背景屬性：background-image
/background-size
/background-clip
/background-origin

邊框、陰影：border-image
/border-radius
/box-shadow

2D、3D變換：transform
/transform-origin

用戶界面屬性添加：box-sizing
/outline-offset
/cursor更多屬性值

2.請(qǐng)簡(jiǎn)述flex布局？
CSS3中的新增的特性，也稱為彈性布局。
使用flex布局，會(huì)更加快速與方便，但是有一定的兼容問(wèn)題（display: -webkit-flex）。
主要含有主軸
、交叉軸
的概念，通過(guò)彈性布局，可以非常方便的設(shè)置元素的左對(duì)齊
、右對(duì)齊
、上對(duì)齊
、下對(duì)齊
、居中對(duì)齊
等等各種對(duì)齊方式，快速實(shí)現(xiàn)頁(yè)面效果。
常用屬性有:flex-direction
/flex-wrap
/justify-content
/align-items
/align-content
/flex-grow
/flex-shrink
/flex-basis
/align-self
/ 等等

3.rem如何使用？
CSS3中的一個(gè)新單位
和em的區(qū)別是rem單位只針對(duì)HTML根元素，而em是根據(jù)父標(biāo)簽的大小進(jìn)行計(jì)算
通常都是給html
標(biāo)簽設(shè)置好font-size
之后，然后其它的單位都換算為rem
進(jìn)行使用。這樣，當(dāng)根標(biāo)簽的font-size
發(fā)生改變了之后，頁(yè)面中所有根據(jù)rem
設(shè)置的元素都會(huì)發(fā)生改變。
html的font-size
會(huì)根據(jù)屏幕的寬度進(jìn)行調(diào)整，可以使用媒體查詢，根據(jù)屏幕寬度進(jìn)行font-size
的設(shè)置。或者使用JS，根據(jù)屏幕寬度，計(jì)算出html
的font-size
的大小

4.Less和Sass分別是什么？
CSS預(yù)處理工具
使用編程的思路編寫CSS代碼，更加高效、快速、便捷
可以使用變量
、嵌套規(guī)則
、混入（函數(shù)）
、參數(shù)混入
、運(yùn)算
、顏色功能
、作用域
等等類似編程中的功能
Sass在市面上有一些成熟的框架，比如說(shuō)Compass，而且有很多框架也在使用Sass，比如說(shuō)Foundation

5.什么是樣式重置文件（重置樣式表）？
reset.css

由于各個(gè)瀏覽器對(duì)標(biāo)簽的默認(rèn)樣式支持方式不同，所以樣子都不太一樣。為了實(shí)現(xiàn)不同瀏覽器效果一致，開發(fā)者會(huì)主動(dòng)清掉默認(rèn)樣式，這些代碼就放到reset.css文件中，叫樣式重置文件（重置樣式表）。

6.em和rem的區(qū)別？
em
是相對(duì)于父級(jí)標(biāo)簽字體大小rem
是CSS3新的單位，相對(duì)根標(biāo)簽(HTML)
字體大小，通常用來(lái)做移動(dòng)端適配

7.如何做水平垂直居中？
方案一：已知寬高，設(shè)置position: absolute;
，然后left
和top
都設(shè)置為50%
，再根據(jù)margin的負(fù)值來(lái)調(diào)正方案二：類似方案一，最后一步用transform:translate(-50%,-50%);
方案三：絕對(duì)定位，top
、bottom
、left
、right
都設(shè)置為0
，設(shè)置好寬高，然后margin: auto;
方案四：display:table-cell;
+vertical-align:middle;
方案五：使用flex
彈性盒模型

8.transition、animation、transform有什么區(qū)別?
transition
: 處理過(guò)渡效果animation
: CSS3動(dòng)畫，和keyframes
一起使用transform
: 處理元素的形變，位移
、旋轉(zhuǎn)
、縮放
、傾斜

9.display: inline-block;
顯示的縫隙如何去掉？
1.移除空格2.使用margin負(fù)值3.使用font-size:04.letter-spacing5.word-spacing6.float

10.rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能實(shí)現(xiàn)透明效果但最大的不同是opacity作用于元素，以及元素內(nèi)的所有內(nèi)容的透明度
而rgba()只作用于元素的顏色或其背景色。（設(shè)置rgba透明的元素的子元素不會(huì)繼承透明效果！）

11.inline、block、inline-block的區(qū)別是什么？
inline
元素和其他inline元素在同一行展示，寬度由內(nèi)容決定，無(wú)法設(shè)置寬度
block
元素在新行開始，默認(rèn)寬度為容器的寬度，可以設(shè)置寬度
inline-block
從外面看是inline，里面看是block，可以設(shè)置寬度

12.display:none與visibility:hidden的區(qū)別是什么？
display
: 隱藏對(duì)應(yīng)的元素但不擠占該元素原來(lái)的空間visibility
:隱藏對(duì)應(yīng)的元素并且擠占該元素原來(lái)的空間
即是，使用CSSdisplay:none;
屬性后，HTML元素（對(duì)象）的寬度、高度等各種屬性值都將“丟失”;而使用visibility:hidden;
屬性后，HTML元素（對(duì)象）僅僅是在視覺(jué)上看不見（完全透明），而它所占據(jù)的空間位置仍然存在

13.知道css有個(gè)content屬性嗎？有什么作用？有什么應(yīng)用？
css的content屬性專門應(yīng)用在 before/after偽元素上，用于來(lái)插入生成內(nèi)容
最常見的應(yīng)用是利用偽類清除浮動(dòng)
一種常見利用偽類清除浮動(dòng)的代碼

.clearfix::after { content: ".";//這里利用到了content屬性 display: block; height: 0; visibility: hidden; clear: both;}.clearfix { *zoom: 1;}

14.有幾種方式可以對(duì)一個(gè)DOM設(shè)置它的CSS樣式？
外部樣式表
，引入一個(gè)外部css文件2內(nèi)部樣式表
，將css代碼放在標(biāo)簽內(nèi)部
內(nèi)聯(lián)樣式
，將css樣式直接定義在HTML元素內(nèi)部

15.什么是Css Hack？ie6,7,8的hack分別是什么？
針對(duì)不同的瀏覽器寫不同的CSScode的過(guò)程，就是CSShack

test{ width:300px; height:300px; background-color:blue; /firefox/ background-color:red\9; /all ie/ background-color:yellow; /ie8/ +background-color:pink; /ie7/ _background-color:orange; /ie6/} :root #test { background-color:purple\9; /ie9/} @media all and (min-width:0px) { #test { background-color: black; /opera/ } } @media screen and (-webkit-min-device-pixel-ratio:0) { #test { background-color: gray; /chrome and safari/ } }

16.CSS中l(wèi)ink和@import的區(qū)別?
link
屬于html標(biāo)簽，而@import
是CSS中提供的
在頁(yè)面加載的時(shí)候，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)在頁(yè)面加載完成后才會(huì)加載引用的CSS
@import只有在ie5以上才可以被識(shí)別，而link是html標(biāo)簽，不存在瀏覽器兼容性問(wèn)題
link引入樣式的權(quán)重大于@import的引用（@import是將引用的樣式導(dǎo)入到當(dāng)前的頁(yè)面中）

JavaScript相關(guān)問(wèn)題

1.說(shuō)說(shuō)你了解的ES6新特性？
let關(guān)鍵字
模板字符串
箭頭函數(shù)
函數(shù)默認(rèn)值的設(shè)置
for..of..更多內(nèi)容參照博客：http://es6.ruanyifeng.com/

2.JQ如何擴(kuò)展插件？
jQuery.extend()
: 給JQuery對(duì)象本身擴(kuò)展方法
jQuery.fn.extend()
: 給JQ元素?cái)U(kuò)展方法

3.AJAX兼容問(wèn)題？
AJAX用于請(qǐng)求網(wǎng)絡(luò)數(shù)據(jù)
正常情況下使用XMLHttpRequest
對(duì)象即可，但是在IE瀏覽器下需要使用ActiveXObject
對(duì)象處理兼容問(wèn)題
如果使用JQ，則直接使用$.get()
/$.post()
/$.getJSON()
/$.ajax()
即可處理網(wǎng)絡(luò)請(qǐng)求問(wèn)題

4.JQ和Zepto的區(qū)別？
Zepto更加的輕量級(jí)，專為移動(dòng)端開發(fā)
Zepto并不是包含JQ所有的功能，只是封裝JQ常用的一些方法
Zepto內(nèi)部劃分模塊，不同的功能放到了不同的文件中，需要使用的時(shí)候引入，否則不引入。
JQ則是所有功能都放到一個(gè)文件中。JQ會(huì)更加占用項(xiàng)目體積，而Zepto的使用率更高

5.JQ的優(yōu)勢(shì)？
代碼簡(jiǎn)介，語(yǔ)法簡(jiǎn)單
強(qiáng)大的選擇器支持
封裝了常用功能，例如：slideUp()
、$.each()
等等
很好的兼容處理
豐富強(qiáng)大的插件庫(kù)
完善的AJAX
鏈?zhǔn)秸Z(yǔ)法
完善的文檔、開源

6.JavaScript嚴(yán)格模式是什么？
ECMAScript5添加了“嚴(yán)格模式”這種模式下JavaScript在更嚴(yán)格的條件下運(yùn)行
主要目的：1.消除JavaScript語(yǔ)法的一些不合理，不嚴(yán)謹(jǐn)，減少一些怪異行為2.消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全3.提高編譯器效率，增加運(yùn)行速度4.為未來(lái)新版JavaScript做好鋪墊
注意：同樣的代碼，在“嚴(yán)格模式下”，可能會(huì)有不一樣的運(yùn)行結(jié)果；一些“正常模式”可以運(yùn)行的語(yǔ)句，在嚴(yán)格模式下將不能運(yùn)行
“use strict”;
，進(jìn)入嚴(yán)格模式的標(biāo)志，老版本瀏覽器會(huì)當(dāng)做一行普通字符串，加以忽略將“use strict”;
放到第一行，則整個(gè)腳本都將以嚴(yán)格模式運(yùn)行。也可以放到函數(shù)中的第一行，則只作用當(dāng)前函數(shù)，

// 優(yōu)化寫法(function () { "use strict"; // some code ...})();

嚴(yán)格模式的一些限制：1.全局變量必須顯示聲明2.禁止this指向全局對(duì)象(構(gòu)造函數(shù)，必須加new
)3.函數(shù)不能有重復(fù)的形參名4.保留字(let、interface、package、private、protected、public、static、yield、implements)

7.JavaScript中常用的設(shè)計(jì)模式？
1.單例模式2.原型模式3.構(gòu)造函數(shù)4.工廠模式5.適配器模式6.策略模式

8.什么是作用域鏈？
作用域的范圍是函數(shù)，函數(shù)嵌套函數(shù)，查找變量從內(nèi)層函數(shù)依次向外層找，最后找不到在window上找

9.解釋call、apply、bind的區(qū)別?
call
和apply
都是調(diào)用一個(gè)函數(shù)，并指定this和參數(shù)，call
和apply
第一個(gè)參數(shù)都是指定的this的值，區(qū)別在于call
第二個(gè)參數(shù)開始的參數(shù)是替換的參數(shù)，而apply
的第二個(gè)參數(shù)是一個(gè)數(shù)組。
bind
是由一個(gè)函數(shù)創(chuàng)建一個(gè)新函數(shù)，并綁定this和部分參數(shù)，參數(shù)形式和call
類似

10.描述事件委派(delegate)的原理和優(yōu)點(diǎn)?
原理: 在容器節(jié)點(diǎn)上綁定事件，利用冒泡，判斷事件是否在匹配指定的選擇器的節(jié)點(diǎn)上被觸發(fā)
優(yōu)點(diǎn): 只用綁定一次，不用對(duì)每個(gè)目標(biāo)做綁定，還有對(duì)動(dòng)態(tài)插入的節(jié)點(diǎn)也生效，無(wú)需重新綁定

11.有哪些原生觸屏事件？
touchstart
，touchmove
，touchend
，touchcancel

12.為什么老版本的webkit的click事件有300ms延遲？
為了支持雙擊放大，如果300ms以內(nèi)有兩次點(diǎn)擊則觸發(fā)放大操作，而不是click。chromium較新版本在沒(méi)有雙擊放大的頁(yè)面去掉了click事件的300ms延遲

13.ajax和jsonp哪個(gè)可以跨域，原理是什么？
ajax默認(rèn)無(wú)法跨域，xhr2新增的CORS讓ajax也可以跨域，需要輸出http頭(Access-Control-Allow-Origin)
jsonp可以跨域，原理是script元素的src可以跨域

14.JavaScript基本數(shù)據(jù)類型？
基本數(shù)據(jù)類型：number
,string
,boolean
,undefined
,null

引用數(shù)據(jù)類型： Object(Array
,Date
,RegExp
,Function
)

15.談?wù)凾his對(duì)象的理解?
this是JavaScript的一個(gè)關(guān)鍵字，隨著函數(shù)使用場(chǎng)合不同，this的值會(huì)發(fā)生變化
但是有一個(gè)總原則，那就是this指的是調(diào)用函數(shù)的那個(gè)對(duì)象。this一般情況下：是全局對(duì)象Global。作為方法調(diào)用，那么this就是指這個(gè)對(duì)象

16.new操作符具體干了什么?
1.創(chuàng)建一個(gè)空對(duì)象，并且 this 變量引用該對(duì)象，同時(shí)還繼承了該函數(shù)的原型2.屬性和方法被加入到 this 引用的對(duì)象中3.新創(chuàng)建的對(duì)象由 this 所引用，并且最后隱式的返回 this

var obj = {};obj.proto = Base.prototype;Base.call(obj);

Other問(wèn)題

1.AngularJS中與項(xiàng)目壓縮的問(wèn)題？
在寫控制器的時(shí)候，有一種寫法，會(huì)在使用壓縮工具的時(shí)候出問(wèn)題

// 在進(jìn)行代碼壓縮的時(shí)候，參數(shù)$scope/$css等服務(wù)名稱會(huì)被壓縮工具替換掉，就造成無(wú)法使用的錯(cuò)誤app.controller("homeCtrl", function ($scope, $css) {});// 換成如下寫法即可：app.controller('homeCtrl', ['$scope', '$css', function ($scope, $css) {}]);

2.什么是模塊化開發(fā)？AMD和CMD是什么？
NodeJS
實(shí)現(xiàn)了JavaScript語(yǔ)言編寫后臺(tái)，其中使用CommonJS
規(guī)范實(shí)現(xiàn)了模塊化開發(fā)
模塊化開發(fā)其實(shí)就是讓JavaScript文件可以互相引用，每個(gè)文檔代表一個(gè)模塊，提高代碼的使用頻率。在HTML中引入JS文件也會(huì)方便很多。原生JavaScript中并不支持模塊化開發(fā)，出現(xiàn)了一些規(guī)范，就是所說(shuō)的AMD
和CMD
，這兩種方式適合使用桌面端，可以進(jìn)行異步加載
，而在NodeJS
中使用CommonJS
是同步的，所以CommonJS
并不適合桌面端
在require.js推廣的過(guò)程中，產(chǎn)生了一種模塊化規(guī)范，叫AMD

在sea.js推廣的過(guò)程中，產(chǎn)生了一種模塊化規(guī)范，叫CMD

sea.js
是淘寶的前端開發(fā)工程師，網(wǎng)名叫玉伯
的人編寫的。require.js
而是國(guó)外朋友編寫。sea.js
是根據(jù)CommonJS
規(guī)范來(lái)編寫的，和CommonJS
語(yǔ)法類似，而require.js
的寫法則教特殊一些

3.微信JSSDK是什么？以及使用流程？
如果項(xiàng)目需要使用微信提供的一些功能，例如：分享、定位、掃一掃、支付、等，就需要借助微信JSSDK來(lái)實(shí)現(xiàn)這些功能
使用流程：1.將自己項(xiàng)目的域名添加到微信公眾賬號(hào)中，設(shè)置為安全域名2.在代碼中引入JSSDK所需的js文件3.進(jìn)行配置: wx.config({debug: true, appId: '', timestamp: '', nonceStr: '', signature: '', jsApiList: []});4.調(diào)用JSSDK提供的方法進(jìn)行調(diào)用

4.什么是SPA？
Single Page Application 單頁(yè)應(yīng)用程序
打開SPA項(xiàng)目的時(shí)候，通常只有一個(gè)主頁(yè)面，然后根據(jù)點(diǎn)擊不同的按鈕，切換主頁(yè)面中顯示的內(nèi)容。
通過(guò)點(diǎn)擊不同的按鈕(a標(biāo)簽)
，來(lái)修改錨點(diǎn)
的值，然后使用路由
根據(jù)錨點(diǎn)，實(shí)現(xiàn)加載不同的頁(yè)面不需要進(jìn)行網(wǎng)頁(yè)跳轉(zhuǎn)，即可切換頁(yè)面

5.什么是懶加載？什么是預(yù)加載?
懶加載懶加載又稱延遲加載
，當(dāng)圖片需要顯示到頁(yè)面上的時(shí)候，才開始真正的發(fā)起圖片的網(wǎng)絡(luò)請(qǐng)求，否則不請(qǐng)求。
懶加載原理：1. 將圖片地址不寫入src
屬性，而是寫入其它的屬性(data-original)
中2. 頁(yè)面onload時(shí)候，根據(jù)圖片的offsetTop
值，判斷哪些圖片顯示在用戶視野范圍內(nèi)，然后把這些圖片的地址從data-original
中取出，放到src
屬性中，圖片會(huì)自動(dòng)請(qǐng)求3. 設(shè)置好onscroll
函數(shù)，監(jiān)測(cè)屏幕的滾動(dòng)，如果有圖片即將進(jìn)入用戶視野，則同樣將圖片的地址從data-original
取出，放到src
屬性中取出即可

預(yù)加載在頁(yè)面正式顯示之前，先把所需要的圖片資源全部加載下來(lái)，然后再顯示界面，用戶就不會(huì)看到圖片加載的過(guò)程，提高了用戶體驗(yàn)
預(yù)加載原理1.拿到所有圖片的地址，分別創(chuàng)建Image對(duì)象，并賦值給src2.在imgObj.onload方法中，判斷是否所有圖片都已經(jīng)加載完畢3.當(dāng)所有圖片加載完畢之后，調(diào)用回調(diào)函數(shù)，處理頁(yè)面的顯示

6.如何提高網(wǎng)頁(yè)加載速度？（網(wǎng)站如何優(yōu)化？）
上線的時(shí)候，使用壓縮后三方庫(kù)（帶有min的文件: jquery.min.js）
盡可能使用CDN來(lái)加載你的三方庫(kù)
選取圖片的時(shí)候，能選擇jpg就不選擇png（只有鏤空?qǐng)D才選擇png圖片）
圖片搞定之后，使用網(wǎng)站進(jìn)行二次壓縮（TinyPNG）
減少網(wǎng)路請(qǐng)求，比如使用懶加載等等
優(yōu)化代碼

7.如何解決跨域問(wèn)題？
由于瀏覽器同源策略
的限制，訪問(wèn)非同源的數(shù)據(jù)需要進(jìn)行跨域處理
實(shí)現(xiàn)跨域的幾種方式:1. JSONP2. 后臺(tái)設(shè)置訪問(wèn)源限制3. 使用后臺(tái)代理

JSONP實(shí)現(xiàn)跨域問(wèn)題最常用的一種方式利用了script標(biāo)簽src屬?zèng)]有域的限制而完成需要前端、后臺(tái)
配合完成
JSONP使用步驟:1. 動(dòng)態(tài)創(chuàng)建script標(biāo)簽2. 將目標(biāo)數(shù)據(jù)的地址放到script標(biāo)簽的src屬性中，并在請(qǐng)求地址中拼接callback參數(shù)并攜帶回調(diào)函數(shù)名3. 定義回調(diào)函數(shù)，當(dāng)數(shù)據(jù)請(qǐng)求成功之后，回調(diào)函數(shù)被調(diào)用4. 數(shù)據(jù)完成之后，移除script標(biāo)簽注意：后臺(tái)返回的數(shù)據(jù)不是真正的JSON數(shù)據(jù)，而是一個(gè)函數(shù)調(diào)用，數(shù)據(jù)為參數(shù)的一段字符串。( callbackFun('jsonString'); )
如果使用JQ，直接使用$.getJSON()
函數(shù)即可進(jìn)行跨域請(qǐng)求，JQ已經(jīng)對(duì)跨域請(qǐng)求做了封裝。

后臺(tái)設(shè)置訪問(wèn)源限制：只需后臺(tái)做訪問(wèn)源(Access-Control-Allow-Origin)
的設(shè)置，前端就可以正常訪問(wèn)跨域的數(shù)據(jù)。
NodeJS設(shè)置方式:response.setHeader("Access-Control-Allow-Origin", "*");
*****號(hào)代表了所有域名，設(shè)置好之后代表任何域名都可以訪問(wèn)，也可以對(duì)域名進(jìn)行單獨(dú)控制
此種方式不夠安全

使用后臺(tái)代理:前端不直接訪問(wèn)跨域的數(shù)據(jù)，而是交給服務(wù)器去做服務(wù)器去請(qǐng)求別的站點(diǎn)的數(shù)據(jù)，后臺(tái)服務(wù)器是沒(méi)有域的限制的，所以很方便當(dāng)后臺(tái)獲取到數(shù)據(jù)之后，前端從自己的服務(wù)器請(qǐng)求到數(shù)據(jù)，無(wú)需做跨域處理此種方式，主要內(nèi)容都在后臺(tái)，前端進(jìn)行正常AJAX請(qǐng)求

8.請(qǐng)解釋baiduTemplate.js模板引擎？
模板引擎根據(jù)數(shù)據(jù)，快速生成HTML代碼片段，插入到HTML結(jié)構(gòu)中顯示
首先編寫結(jié)構(gòu)，可以將HTML和JavaScript混寫，然后賦值數(shù)據(jù)，就可以生成HTML代碼片段

<script type="text/template" id="li"> <%for (var i = 0; i < data.length; i++) {%> <li><%= data[i] %></li> <%}%></script>// 根據(jù)數(shù)據(jù)，生成HTML代碼片段var data = ['小明', '小紅', '小黑'];var html = baidu.template('li', {data: data});document.getElementById("result").innerHTML = html;

和baiduTemplate相似模板引擎還有很多，還會(huì)使用artTemplate.js
，語(yǔ)法相似http://www.jq22.com/jquery-info1097

9.請(qǐng)解釋MVC和MVVM設(shè)計(jì)模式？

10.XSS是什么？
跨站腳本攻擊（Cross-site scripting, XSS）
是一種網(wǎng)站應(yīng)用程序的安全漏洞攻擊，是代碼注入的一種。允許用戶將惡意代碼注入到網(wǎng)頁(yè)上，影響網(wǎng)頁(yè)。
這類攻擊通常包含了HTML以及用戶端腳本語(yǔ)言。

11.移動(dòng)端性能優(yōu)化？
加載優(yōu)化1.減少HTTP請(qǐng)求2.壓縮JS、CSS、HTML靜態(tài)資源并在服務(wù)器設(shè)置gzip3.首屏加載，不超過(guò)120k4.壓縮圖片5.避免重定向6.異步加載第三方資源: async / 動(dòng)態(tài)創(chuàng)建script / defer7.oneRequest: 首次內(nèi)聯(lián)CSS，JavaScript，存localStroage，第二次讀取localStroage8.按需加載: 滾動(dòng)加載、點(diǎn)擊加載
CSS優(yōu)化1.層次不超過(guò)32.合并CSS規(guī)則，合并margin、background等屬性3.移除空的CSS規(guī)則4.去掉0的單位5.不要聲明過(guò)多的font-size
腳本執(zhí)行優(yōu)化1.避免iframe、img等src為空2.圖片盡量避免使用DataURI3.避免重設(shè)圖片大小4.點(diǎn)擊事件優(yōu)化5.注意scroll resize事件綁定時(shí)機(jī)
渲染優(yōu)化1.動(dòng)畫優(yōu)化: 使用CSS3動(dòng)畫、使用requestAnimationFrame替代setTimeout2.高頻事件優(yōu)化: touch事件、scroll事件3.圖片優(yōu)化: 壓縮圖片、webp優(yōu)于jpg、png8優(yōu)于gif、對(duì)圖片使用lazyload、避免使用DataURI4.GPU加速: 使用transition觸發(fā)、tranform觸發(fā)、opacity5.DOM層次不宜過(guò)多6.JS主動(dòng)的釋放內(nèi)存

12.Tween.JS如何使用？
// 首先獲取所需要的4個(gè)數(shù)字var currentStep = 0; // 當(dāng)前步數(shù)var allStep = 100; // 總步數(shù)var startValue = $(window).scrollTop(); // 開始的值var changeValue = 0 - startValue; // 改變的值// 使用定時(shí)器進(jìn)行改變var timer = setInterval(function () { // 當(dāng)前步數(shù)增加 currentStep++; // 判斷結(jié)束時(shí)間 if (currentStep > allStep) { clearInterval(timer); } // 四個(gè)參數(shù)（當(dāng)前步數(shù)、開始值、變化值、總步數(shù)） var v = Tween.Bounce.easeIn(currentStep, startValue, changeValue, allStep); // 使用Tween.js實(shí)現(xiàn)效果 $(window).scrollTop(v);}, 10);

13.什么是Cordova？
hybird App
開發(fā)平臺(tái)一個(gè)工具，正常編寫HTML、CSS、JavaScript代碼，即可通過(guò)Cordova生成各個(gè)平臺(tái)的Native App

可以通過(guò)編寫JavaScript代碼調(diào)用設(shè)備的功能
常用命令1.cordova create ProjectPath com.lidaze.www HelloCordova
2.cordova platform add ios
3.cordova platform rm ios
4.cordova build ios
5.cordova emulate ios
6.cordova plugin add cordova-plugin-dialogs
7.cordova plugin remove cordova-plugin-dialogs

14.什么是Web App
? 什么是hybird App
?
Web App
: 移動(dòng)App，通過(guò)編寫HTML、CSS、JavaScript實(shí)現(xiàn)Native App的功能外觀，還是運(yùn)行在瀏覽器中。有時(shí)會(huì)被嵌入到Native App中
hybird App
: 混合App，通過(guò)編寫HTML、CSS、JavaScript實(shí)現(xiàn)Navtive App的功能和外觀，可直接生成各個(gè)操作系統(tǒng)的Native App，可直接安裝到手機(jī)中

15.http狀態(tài)碼有那些？分別代表是什么意思？
100-199 用于指定客戶端應(yīng)相應(yīng)的某些動(dòng)作
200-299 用于表示請(qǐng)求成功
300-399 用于已經(jīng)移動(dòng)的文件并且常被包含在定位頭信息中指定新的地址信息
400-499 用于指出客戶端的錯(cuò)誤。400 語(yǔ)義有誤，當(dāng)前請(qǐng)求無(wú)法被服務(wù)器理解。401 當(dāng)前請(qǐng)求需要用戶驗(yàn)證403 服務(wù)器已經(jīng)理解請(qǐng)求，但是拒絕執(zhí)行它。
500-599 用于支持服務(wù)器錯(cuò)誤。503 – 服務(wù)不可用

16.你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同嗎?
漸進(jìn)增強(qiáng)progressiveenhancement
：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)
優(yōu)雅降級(jí)gracefuldegradation
：一開始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。
優(yōu)雅降級(jí)觀點(diǎn)“優(yōu)雅降級(jí)”觀點(diǎn)認(rèn)為應(yīng)該針對(duì)那些最高級(jí)、最完善的瀏覽器來(lái)設(shè)計(jì)網(wǎng)站。而將那些被認(rèn)為“過(guò)時(shí)”或有功能缺失的瀏覽器下的測(cè)試工作安排在開發(fā)周期的最后階段，并把測(cè)試對(duì)象限定為主流瀏覽器（如IE、Mozilla等）的前一個(gè)版本。在這種設(shè)計(jì)范例下，舊版的瀏覽器被認(rèn)為僅能提供“簡(jiǎn)陋卻無(wú)妨(poor,butpassable)”的瀏覽體驗(yàn)。你可以做一些小的調(diào)整來(lái)適應(yīng)某個(gè)特定的瀏覽器。但由于它們并非我們所關(guān)注的焦點(diǎn)，因此除了修復(fù)較大的錯(cuò)誤之外，其它的差異將被直接忽略。
漸進(jìn)增強(qiáng)觀點(diǎn)“漸進(jìn)增強(qiáng)”觀點(diǎn)則認(rèn)為應(yīng)關(guān)注于內(nèi)容本身。內(nèi)容是我們建立網(wǎng)站的誘因。有的網(wǎng)站展示它，有的則收集它，有的尋求，有的操作，還有的網(wǎng)站甚至?xí)陨系姆N種，但相同點(diǎn)是它們?nèi)忌婕暗絻?nèi)容。這使得“漸進(jìn)增強(qiáng)”成為一種更為合理的設(shè)計(jì)范例。這也是它立即被Yahoo!所采納并用以構(gòu)建其“分級(jí)式瀏覽器支持(GradedBrowserSupport)”策略的原因所在。

17.簡(jiǎn)述一下src與href的區(qū)別？
src用于替換當(dāng)前元素，href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。
src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置；在請(qǐng)求src資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔內(nèi)，例如js腳本，img圖片和frame等元素。
<scriptsrc=”js.js”></script>
當(dāng)瀏覽器解析到該元素時(shí)，會(huì)暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當(dāng)前標(biāo)簽內(nèi)。這也是為什么將js腳本放在底部而不是頭部。
href是HypertextReference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點(diǎn)）或當(dāng)前文檔（鏈接）之間的鏈接，如果我們?cè)谖臋n中添加
<linkhref=”common.css”rel=”stylesheet”/>
那么瀏覽器會(huì)識(shí)別該文檔為css文件，就會(huì)并行下載資源并且不會(huì)停止對(duì)當(dāng)前文檔的處理。這也是為什么建議使用link方式來(lái)加載css，而不是使用@import方式。

非技術(shù)問(wèn)題

1.使用過(guò)哪些開發(fā)工具？
編輯器:
Sublime Text
Atom (GitHub)
VS Code(微軟)

IDE（集成開發(fā)環(huán)境）:
HBuilder(國(guó)內(nèi))
WebStorm(國(guó)外）

2.前公司技術(shù)團(tuán)隊(duì)多少人？H5開發(fā)有幾個(gè)？

3.談?wù)勔郧岸私嵌瘸霭l(fā)做好SEO需要考慮什么？
了解搜索引擎如何抓取網(wǎng)頁(yè)和如何索引網(wǎng)頁(yè)你需要知道一些搜索引擎的基本工作原理，各個(gè)搜索引擎之間的區(qū)別，搜索機(jī)器人（SErobot或叫webcrawler）如何進(jìn)行工作，搜索引擎如何對(duì)搜索結(jié)果進(jìn)行排序等等。
Meta標(biāo)簽優(yōu)化主要包括主題（Title)，網(wǎng)站描述(Description)，和關(guān)鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語(yǔ)種）等。
如何選取關(guān)鍵詞并在網(wǎng)頁(yè)中放置關(guān)鍵詞搜索就得用關(guān)鍵詞。關(guān)鍵詞分析和選擇是SEO最重要的工作之一。首先要給網(wǎng)站確定主關(guān)鍵詞（一般在5個(gè)上下），然后針對(duì)這些關(guān)鍵詞進(jìn)行優(yōu)化，包括關(guān)鍵詞密度（Density），相關(guān)度（Relavancy），突出性（Prominency）等等。
了解主要的搜索引擎雖然搜索引擎有很多，但是對(duì)網(wǎng)站流量起決定作用的就那么幾個(gè)。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎對(duì)頁(yè)面的抓取和索引、排序的規(guī)則都不一樣。還要了解各搜索門戶和搜索引擎之間的關(guān)系，比如AOL網(wǎng)頁(yè)搜索用的是Google的搜索技術(shù)，MSN用的是Bing的技術(shù)。
主要的互聯(lián)網(wǎng)目錄OpenDirectory自身不是搜索引擎，而是一個(gè)大型的網(wǎng)站目錄，他和搜索引擎的主要區(qū)別是網(wǎng)站內(nèi)容的收集方式不同。目錄是人工編輯的，主要收錄網(wǎng)站主頁(yè)；搜索引擎是自動(dòng)收集的，除了主頁(yè)外還抓取大量的內(nèi)容頁(yè)面。
按點(diǎn)擊付費(fèi)的搜索引擎搜索引擎也需要生存，隨著互聯(lián)網(wǎng)商務(wù)的越來(lái)越成熟，收費(fèi)的搜索引擎也開始大行其道。最典型的有Overture和百度，當(dāng)然也包括Google的廣告項(xiàng)目GoogleAdwords。越來(lái)越多的人通過(guò)搜索引擎的點(diǎn)擊廣告來(lái)定位商業(yè)網(wǎng)站，這里面也大有優(yōu)化和排名的學(xué)問(wèn)，你得學(xué)會(huì)用最少的廣告投入獲得最多的點(diǎn)擊。
搜索引擎登錄網(wǎng)站做完了以后，別躺在那里等著客人從天而降。要讓別人找到你，最簡(jiǎn)單的辦法就是將網(wǎng)站提交（submit）到搜索引擎。如果你的是商業(yè)網(wǎng)站，主要的搜索引擎和目錄都會(huì)要求你付費(fèi)來(lái)獲得收錄（比如Yahoo要299美元），但是好消息是（至少到目前為止）最大的搜索引擎Google目前還是免費(fèi)，而且它主宰著60％以上的搜索市場(chǎng)。
鏈接交換和鏈接廣泛度（LinkPopularity）網(wǎng)頁(yè)內(nèi)容都是以超文本（Hypertext）的方式來(lái)互相鏈接的，網(wǎng)站之間也是如此。除了搜索引擎以外，人們也每天通過(guò)不同網(wǎng)站之間的鏈接來(lái)Surfing（“沖浪”）。其它網(wǎng)站到你的網(wǎng)站的鏈接越多，你也就會(huì)獲得更多的訪問(wèn)量。更重要的是，你的網(wǎng)站的外部鏈接數(shù)越多，會(huì)被搜索引擎認(rèn)為它的重要性越大，從而給你更高的排名。
合理的標(biāo)簽使用

4.“有什么想問(wèn)我的？”， 面試官說(shuō)。
目前關(guān)注哪些最新的Web前端技術(shù)（未來(lái)的發(fā)展方向）？
前端團(tuán)隊(duì)如何工作的（實(shí)現(xiàn)一個(gè)產(chǎn)品的流程）？
公司的薪資結(jié)構(gòu)是什么樣子的？