一、HTML
1. 針對移動瀏覽器端開發(fā)頁面评凝，不期望用戶放大屏幕追葡，且要求“視口（viewport）”寬度等于屏幕寬度，視口高度等于設(shè)備高度奕短，如何設(shè)置宜肉？
移動web前端viewport詳解
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
2.data-xxx 屬性的作用是什么？
HTML5 data-* 屬性:
定義和用法
data-* 屬性用于存儲頁面或應(yīng)用程序的私有自定義數(shù)據(jù)翎碑。
data-* 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力谬返。
存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗（不進行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）日杈。
data-* 屬性包括兩部分：
屬性名不應(yīng)該包含任何大寫字母遣铝，并且在前綴 "data-" 之后必須有至少一個字符
屬性值可以是任意字符串
注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性佑刷。
這里的data-前綴就被稱為data屬性，其可以通過腳本進行定義酿炸，也可以應(yīng)用CSS屬性選擇器進行樣式設(shè)置瘫絮。數(shù)量不受限制，在控制和渲染數(shù)據(jù)的時候提供了非常強大的控制填硕。
html:
<div class="mm" data-name="張含韻"></div>
<div class="mm" data-name="undefined"></div>
css:
.mm{width:256px; height:200px;}
.mm[data-name='張含韻']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg) no-repeat;}
.mm[data-name='undefined']{background:url(http://image.zhangxinxu.com/image/study/s/s256/mm3.jpg) no-repeat;}
js:
expense = document.getElementById('day2-meal-expense').dataset;
3.請描述一下cookies麦萤，sessionStorage和localStorage的區(qū)別？
之前總結(jié)過:http://www.reibang.com/p/da227e50df43
HTTP cookies 詳解
微軟的 IE6 SP1 在 cookie 中引入了一個新的選項：HTTP-only廷支，HTTP-Only背后的意思是告之瀏覽器該 cookie 絕不能通過 JavaScript 的 document.cookie屬性訪問频鉴。設(shè)計該特征意在提供一個安全措施來幫助阻止通過 JavaScript 發(fā)起的跨站腳本攻擊 (XSS) 竊取 cookie 的行為
4.什么是瀏覽器的標準模式（standards mode）和怪異模式（quirks mode）
目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標準模式（Almost standards mode）恋拍、以及標準模式（Standards mode）垛孔。在怪異模式下，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行為施敢。為了支持在網(wǎng)絡(luò)標準被廣泛采用前周荐，就已經(jīng)建好的網(wǎng)站，這么做是必要的僵娃。在標準模式下概作，行為即（但愿如此）由 HTML 與 CSS 的規(guī)范描述的行為。在接近標準模式下默怨，只有少數(shù)的怪異行為被實現(xiàn)讯榕。
那么所謂標準模式，就一定都“標準”嗎匙睹？答案當然是否定的愚屁，因為各個瀏覽器廠商實現(xiàn)標準的階段不同，所以各個瀏覽器的“標準模式”之間也會有很大的不同痕檬。
Firefox霎槐、Safari、Chrome梦谜、Opera (自 7.5 以后)丘跌、 IE8 和 IE9 都有一個準標準模式。那么既然標準模式都不那么標準唁桩，準標準的模式肯定就更不標準了闭树。
-
瀏覽器如何決定用哪個模式？
對HTML文件來說荒澡，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標準模式處理蔼啦。為了確保你的頁面使用標準模式，請確認你的頁面如同本范例一樣擁有 DOCTYPE：
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Hello World!</title>
</head>
<body>
</body>
</html>
范例中的DOCTYPE仰猖，<!DOCTYPE html>捏肢，是所有可用的DOCTYPE之中最簡單的奈籽，而且是HTML5 所推薦的。HTML的早期變種也屬于推薦標準鸵赫，不過今日的瀏覽器都會對這個 DOCTYPE 使用標準模式衣屏，就算是已過時的 Internet Explorer 6 也一樣。目前并沒有正當?shù)睦碛杀绨簦ナ褂闷渌鼜?fù)雜的 DOCTYPE狼忱。如果你使用其他的 DOCTYPE，你可能會冒著觸發(fā)接近標準模式或者怪異模式的風險一睁。
- 使用
請確定你把 DOCTYPE 正確地放在 HTML 文件的頂端钻弄。任何放在 DOCTYPE 前面的東西，比如批注或 XML 聲明者吁，會令 Internet Explorer 9 或更早期的瀏覽器觸發(fā)怪異模式窘俺。
在 HTML5中，DOCTYPE 唯一的作用是啟用標準模式复凳。更早期的 HTML 標準會附加其他意義瘤泪，但沒有任何瀏覽器會將 DOCTYPE 用于怪異模式和標準模式之間互換以外的用途。
由于歷史的原因育八，各個瀏覽器在對頁面的渲染上存在差異对途，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同髓棋。在W3C標準出臺以前实檀，瀏覽器在對頁面的渲染上沒有統(tǒng)一規(guī)范，產(chǎn)生了差異(Quirks mode或者稱為Compatibility Mode)按声；由于W3C標準的推出膳犹，瀏覽器渲染頁面有了統(tǒng)一的標準(CSScompat或稱為Strict mode也有叫做Standars mode)，這就是二者最簡單的區(qū)別儒喊。W3C標準推出以后，瀏覽器都開始采納新標準币呵，但存在一個問題就是如何保證舊的網(wǎng)頁還能繼續(xù)瀏覽怀愧，在標準出來以前，很多頁面都是根據(jù)舊的渲染方法編寫的余赢，如果用的標準來渲染芯义，將導(dǎo)致頁面顯示異常。為保持瀏覽器渲染的兼容性妻柒，使以前的頁面能夠正常瀏覽扛拨，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產(chǎn)生了Quircks mode和Standars mode举塔，兩種渲染方法共存在一個瀏覽器上绑警。
火狐一直工作在標準模式下求泰，但IE（6，7计盒，8）標準模式與怪異模式差別很大渴频，主要體現(xiàn)在對盒子模型的解釋上，這個很重要北启，下面就重點說這個卜朗。那么瀏覽器究竟該采用哪種模式渲染呢？這就引出的DTD咕村，既是網(wǎng)頁的頭部聲明场钉，瀏覽器會通過識別DTD而采用相對應(yīng)的渲染模式：
- 瀏覽器要使老舊的網(wǎng)頁正常工作，但這部分網(wǎng)頁是沒有doctype聲明的懈涛，所以瀏覽器對沒有doctype聲明的網(wǎng)頁采用quirks mode解析逛万。
- 對于擁有doctype聲明的網(wǎng)頁，什么瀏覽器采用何種模式解析肩钠，這里有一張詳細列表可參考：http://hsivonen.iki.fi/doctype泣港。
- 對于擁有doctype聲明的網(wǎng)頁，這里有幾條簡單的規(guī)則可用于判斷：對于那些瀏覽器不能識別的doctype聲明价匠，瀏覽器采用strict mode解析当纱。
- 在doctype聲明中，沒有使用DTD聲明或者使用HTML4以下（不包括HTML4）的DTD聲明時踩窖，基本所有的瀏覽器都是使用quirks mode呈現(xiàn)坡氯，其他的則使用strict mode解析。
- 可以這么說洋腮，在現(xiàn)有有doctype聲明的網(wǎng)頁箫柳，絕大多數(shù)是采用strict mode進行解析的。
- 在ie6中啥供，如果在doctype聲明前有一個xml聲明(比如:
<?xml version=”1.0″ encoding=”iso-8859-1″?>)悯恍，則采用quirks mode解析。這條規(guī)則在ie7中已經(jīng)移除了伙狐。
如何判定現(xiàn)在是標準模式還是怪異模式：
方法一：執(zhí)行以下代碼
alert(window.top.document.compatMode) ;
//BackCompat 表示怪異模式
//CSS1Compat 表示標準模式
方法二：jquery為我們提供的方法涮毫，如下：
alert($.boxModel)
alert($.support.boxModel)
CSS
1. 解釋一下盒模型寬高值的計算方式，邊界塌陷贷屎，負值作用罢防，box-sizing概念。
1.1 盒模型
a. ie678怪異模式（不添加 doctype）使用 ie 盒模型唉侄，寬度=邊框+padding+內(nèi)容寬度
b. chrome咒吐， ie9+, ie678(添加 doctype) 使用標準盒模型，寬度= 內(nèi)容寬度
1.2 box-sizing
content-box（默認）
布局所占寬度Width：
Width = width + padding-left + padding-right + border-left + border-right
布局所占高度Height:
Height = height + padding-top + padding-bottom + border-top + border-bottom
border-box
布局所占寬度Width：
Width = width(包含padding-left + padding-right + border-left + border-right)
布局所占高度Height:
Height = height(包含padding-top + padding-bottom + border-top + border-bottom)
1.3 邊界塌陷
之前總結(jié)的
1.4 負值作用
display:inline-block是什么呢？相信大家對這個屬性并不陌生恬叹，根據(jù)名字inline-block我們就可以大概猜出它是結(jié)合了inline和block兩者的特性于一身候生，簡單的說：設(shè)置了inline-block屬性的元素既擁有了block元素可以設(shè)置width和height的特性，又保持了inline元素不換行的特性妄呕。
在margin屬性中一共有兩類參考線陶舞，top和left的參考線屬于一類，right和bottom的參考線屬于另一類绪励。top和left是以外元素為參考肿孵，right和bottom是以元素本身為參考。
厲害了我的margin_由淺入深漫談margin屬性
margin:-10px 20px -30px 40px;
這時候 margin 的解析邏輯是怎樣的呢疏魏？首先我們要搞清 div 的和周邊元素的關(guān)系停做，div 沒有相連元素，而此時 div 的 containing block 是 body 產(chǎn)生的 block box大莫。則根據(jù)上面介紹的參考線原理蛉腌，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時以 body 的 content 左邊為參考線進行水平向右位移只厘，位移的大小為 40px烙丛，同理，上邊距以 body 的 content 上邊為參考線進行垂直向上位移 10px（負值和正值的方向相反）羔味，下邊距依照現(xiàn)在 div 的 borer 下邊（此時的 div 已經(jīng)經(jīng)過上邊距位移過了）垂直向上位移 30px（此時河咽，margin 不會改變 box 的 border 內(nèi)的物理大小，但會改變 box 的邏輯大小赋元，即：以此 box 的 margin 的下邊為參考的元素忘蟹，不是從 box 的物理位置開始的，而是從邏輯位置開始）搁凸，右邊距依照現(xiàn)在 div 的 borer 右邊（此時的 div 已經(jīng)經(jīng)過左邊距位移過了）水平向右位移 20px媚值。或許有朋友問你分析的順序怎么和 margin 表達式中出現(xiàn)的順序不一樣护糖？如果按照 margin 表達式中出現(xiàn)的順序來分析褥芒，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒有按照表達式的順序來分析嫡良。
margin為負值產(chǎn)生的影響和常見布局應(yīng)用
應(yīng)用
- 左右固定锰扶，中間自適應(yīng)（雙飛翼）那些年，奇妙的圣杯與雙飛翼皆刺，還有負邊距
<div class="main">
<div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
*{ margin:0; padding: 0 }
.main{ float: left; width: 100%; }
.main .main-content{
margin: 0 210px;
background-color: rgba(33, 114, 214, 0.8);
height: 500px
}
.left{
width: 200px;
float: left;
background-color:
rgba(255, 82, 0, 0.8);
margin-left: -100%;
height: 200px
}
.right{
width: 200px;
height: 200px;
margin-left: -200px;
float: left;
background-color: rgba(90, 243, 151, 0.8);
}
- 負邊距+定位：水平垂直居中
還有其他少辣。凌摄。
[margin,padding]任一方向的百分數(shù)都是相對于包含塊的寬度(width)的羡蛾。
一般left和right(用于absolute/fixed)在一個樣式是只能使用其一，不能left和right都設(shè)置锨亏，要么使用left就不使用right痴怨，要么使用right就不使用left忙干，如果left和right均使用將會出現(xiàn)兼容問題，一個對象設(shè)置了靠左left多少距離浪藻，自然右邊距離自然就有了所以無需設(shè)置左邊捐迫。
相同道理，top和bottom對一個對象只能使用其一爱葵，不然會出現(xiàn)邏輯兼容問題施戴。譬如一個人讓你往左走，一個人讓你往右走萌丈，同時發(fā)出往左往右走這個時候你也不好判斷往那邊走赞哗。
2. BFC(Block Formatting Context)是什么？有哪些應(yīng)用辆雾？
CSS之BFC詳解
[CSS]深入理解BFC原理及應(yīng)用
Block Formatting Context肪笋，中文直譯為塊級格式上下文。BFC就是一種布局方式度迂，在這種布局方式下藤乙，盒子們自所在的containing block頂部一個接一個垂直排列，水平方向上撐滿整個寬度（除非內(nèi)部盒子自己建立了新的BFC）惭墓。兩個相鄰的BFC之間的距離由margin決定坛梁。在同一個BFC內(nèi)部，兩個垂直方向相鄰的塊級元素的margin會發(fā)生“塌陷”诅妹。
文檔這里也間接指出了垂直相鄰盒子margin合并的解決辦法：就是給這兩個盒子也創(chuàng)建BFC罚勾。
通俗一點，可以把BFC理解為一個封閉的大箱子吭狡，箱子內(nèi)部的元素無論如何翻江倒海尖殃，都不會影響到外部。
- 如何創(chuàng)建BFC
總結(jié)一下就是：
float屬性不為none
overflow不為visible(可以是hidden划煮、scroll送丰、auto)
position為absolute或fixed
display為inline-block、table-cell弛秋、table-caption
- BFC的作用
1. 清除內(nèi)部浮動我們在布局時經(jīng)常會遇到這個問題：對子元素設(shè)置浮動后器躏，父元素會發(fā)生高度塌陷，也就是父元素的高度變?yōu)?蟹略。解決這個問題登失，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden挖炬。
2. 垂直margin合并在CSS當中揽浙，相鄰的兩個盒子的外邊距可以結(jié)合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距馅巷。折疊的結(jié)果：
兩個相鄰的外邊距都是正數(shù)時膛虫，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數(shù)時钓猬，折疊結(jié)果是兩者絕對值的較大值稍刀。
兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和敞曹。這個同樣可以利用BFC解決账月。關(guān)于原理在前文已經(jīng)講過了。
3. 創(chuàng)建自適應(yīng)兩欄布局在很多網(wǎng)站中澳迫，我們炒氛希看到這樣的一種結(jié)構(gòu)，左圖片+右文字的兩欄結(jié)構(gòu)纲刀。
顯然项炼，這是文字受到了圖片浮動的影響。當然示绊，如果你想做文本繞排的效果锭部，浮動是不二之選。不過在這里面褐，這顯然不是我們想要的拌禾。此時我們可以為P元素的內(nèi)容建立一個BFC，讓其內(nèi)容消除對外界浮動元素的影響展哭。給文字加上overflow:hidden
3.如何要求容器在寬度自由很縮的情況下湃窍，A/B/C的寬度始終是1:1:1，如何實現(xiàn)匪傍，寫出兩種方法您市。
flex布局：
.div1 {
width: 100%;
height: 400px;
border: 1px solid #888;
flex-direction: row;
/**主要代碼*/
display: flex;
/* align-items: center; */
/* justify-content: center; */
}
.div {
/* position:absolute; */
/* width:500px; */
flex-grow: 1;
border: 1px solid #888;
}
百分數(shù)布局:inline-block元素間間隙產(chǎn)生及去除詳解:
<div class="div1">
<div class="div2 div">
div2
</div><div class="div3 div">
div3
</div><div class="div4 div">
div4
</div>
</div>
.div1 {
width: 100%;
height: 400px;
background-color: red;
}
.div2{
margin-left: 5%;
}
.div {
width:30%;
display:inline-block;
background-color:#888;
}
4.
如圖，A若寬高已知役衡，如何實現(xiàn)水平茵休、垂直均相對于父元素居中？若A高度未知呢手蝎？
之前總結(jié)的
JavaScript
1. 函數(shù)中的arguments是什么榕莺？是數(shù)組嗎？若不是棵介，如何將它轉(zhuǎn)化為真正的數(shù)組钉鸯？
arguments不是真正的數(shù)組。沒有數(shù)組的方法
function a(){
console.log(arguments);
var args = Array.prototype.slice.call(arguments);
console.log(args);
/* arguments.forEach(function(){
}) */
}
a(1,2,3)
2. 列舉JavaScript中typeof操作符的可能結(jié)果邮辽，如何區(qū)分：{}和[]類型唠雕？
3. Function中的call扣蜻、apply、bind的區(qū)別是什么及塘？請針對每一個寫出一個代碼示例。
4. 使用jQuery锐极，找到id位selector的select標簽中有用data-target屬性為isme的option的值笙僚？
var se = $("#selector option[data-target=isme]");
console.log(se.val());
5. 優(yōu)化代碼
for(var i = 0; i < document.getElementsByTagName('a').length; i++) {
document.getElementsByTagName('a')[i].onmouseover = function(){
this.style.color = 'red';
};
document.getElementsByTagName('a')[i].onmouseout = function(){
this.style.color = '';
};
5.1 CSS
回流與重繪：CSS性能讓JavaScript變慢？
翻譯計劃-重繪重排重渲染
通過類修改樣式
有時候我們需要通過JavaScript給元素增加樣式灵再，比如如下代碼：
element.style.fontWeight = 'bold';
element.style.backgroundImage = 'url(back.gif)';
element.style.backgroundColor = 'white';element.style.color = 'white';//...
這樣效率很低肋层，每次修改style屬性后都會觸發(fā)元素的重繪，如果修改了的屬性涉及大小和位置翎迁，將會導(dǎo)致回流栋猖。所以我們應(yīng)當盡量避免多次為一個元素設(shè)置style屬性，應(yīng)當通過給其添加新的CSS類汪榔，來修改其CSS
當一個元素的外觀的可見性visibility發(fā)生改變的時候蒲拉，重繪(repaint)也隨之發(fā)生，但是不影響布局痴腌。類似的例子包括：outline, visibility, or background color雌团。根據(jù)Opera瀏覽器，重繪的代價是高昂的士聪，因為瀏覽器必須驗證DOM樹上其他節(jié)點元素的可見性锦援。而回流更是性能的關(guān)鍵因為其變化涉及到部分頁面（或是整個頁面）的布局。一個元素的回流導(dǎo)致了其所有子元素以及DOM中緊隨其后的祖先元素的隨后的回流剥悟。
如何避免回流或?qū)⑺鼈儗π阅艿挠绊懡档阶畹停?/p>
- 如果想設(shè)定元素的樣式灵寺，通過改變元素的 class 名 (盡可能在 DOM 樹的最末端)（Change classes on the element you wish to style (as low in the dom tree as possible)）
- 避免設(shè)置多項內(nèi)聯(lián)樣式（Avoid setting multiple inline styles）
- 應(yīng)用元素的動畫，使用 position 屬性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
- 權(quán)衡平滑和速度（Trade smoothness for speed）
- 避免使用table布局（Avoid tables for layout）
- 避免使用CSS的JavaScript表達式 (僅 IE 瀏覽器)（Avoid JavaScript expressions in the CSS (IE only)）
結(jié)合著看
- “離線”的批量改變和表現(xiàn)DOM区岗÷园澹“離線”意味著不在當前的DOM樹中做修改。你可以：通過documentFragment來保留臨時變動慈缔。
- 復(fù)制你即將更新的節(jié)點蚯根，在副本上工作，然后將之前的節(jié)點和新節(jié)點交換胀糜。
- 通過display:none屬性隱藏元素（只有一次重排重繪）颅拦，添加足夠多的變更后，通過display屬性顯示（另一次重排重繪）教藻。通過這種方式即使大量變更也只觸發(fā)兩次重排距帅。
- 不要頻繁計算樣式。如果你有一個樣式需要計算括堤，只取一次碌秸，將它緩存在一個變量中并且在這個變量上工作绍移。
- 通常情況下，考慮一下渲染樹和變更后需要重新驗證的消耗讥电。舉個例子蹂窖，使用絕對定位會使得該元素單獨成為渲染樹中body的一個子元素，所以當你對其添加動畫時恩敌，它不會對其它節(jié)點造成太多影響瞬测。當你在這些節(jié)點上放置這個元素時，一些其它在這個區(qū)域內(nèi)的節(jié)點可能需要重繪纠炮，但是不需要重排月趟。
5.2 事件綁定
當使用 addEventListener()為一個元素注冊事件的時候，句柄里的 this 值是該元素的引用恢口。其與傳遞給句柄的 event 參數(shù)的 currentTarget 屬性的值一樣孝宗。
document.addEventListener("mouseover", function(e){
var target = e.target;
if(target.nodeName.toLowerCase() === 'a'){
target.style.color = 'red';
}
}, false)
document.addEventListener("mouseout", function(e){
var target = e.target;
if(target.nodeName.toLowerCase() === 'a'){
target.style.color = '';
}
}, false)
6. 請設(shè)計一個算法。將兩個有序數(shù)組合并為一個數(shù)組耕肩。請不要使用concat以及sort方法纳账。
Javascript排序算法之合并排序（歸并排序）的2個例子
function merge(left, right) {
var result = [],
il = 0,
ir = 0;
while (il < left.length && ir < right.length) {
if (left[il] < right[ir]) {
result.push(left[il++]);
} else {
result.push(right[ir++]);
}
}
result.push(left[il] ? left[il] : right[ir]);
return result;
}
var left = [1, 4, 7];
var right = [2, 5];
console.log(merge(left, right))
這個方法有個缺陷屿笼，left更大的時候腥例，后面的元素沒了
改下：
function merge(left, right) {
var result = [],
il = 0,
ir = 0;
while (il < left.length && ir < right.length) {
if (left[il] < right[ir]) {
result.push(left[il++]);
} else {
result.push(right[ir++]);
}
}
//這里注意
result = result.concat(left[il] ? left.slice(il) : right.slice(ir));
return result;
}
var left = [1, 4, 7, 8, 9, 10];
var right = [2, 5];
console.log(merge(left, right))
