【转】前端面试
一、HTML
1. 針對移動瀏覽器端開發頁面，不期望用戶放大屏幕，且要求“視口（viewport）”寬度等于屏幕寬度，視口高度等于設備高度，如何設置？
移動web前端viewport詳解
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
meta使用詳細總結
2.data-xxx 屬性的作用是什么？
HTML5 data-* 屬性:
定義和用法
data- 屬性用于存儲頁面或應用程序的私有自定義數據。
data- 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。
存儲的（自定義）數據能夠被頁面的 JavaScript 中利用，以創建更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。
data-* 屬性包括兩部分：
屬性名不應該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
屬性值可以是任意字符串
注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。
這里的data-前綴就被稱為data屬性，其可以通過腳本進行定義，也可以應用CSS屬性選擇器進行樣式設置。數量不受限制，在控制和渲染數據的時候提供了非常強大的控制。
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的區別？
之前總結過:http://www.jianshu.com/p/da227e50df43
HTTP cookies 詳解
微軟的 IE6 SP1 在 cookie 中引入了一個新的選項：HTTP-only，HTTP-Only背后的意思是告之瀏覽器該 cookie 絕不能通過 JavaScript 的 document.cookie屬性訪問。設計該特征意在提供一個安全措施來幫助阻止通過 JavaScript 發起的跨站腳本攻擊 (XSS) 竊取 cookie 的行為
4.什么是瀏覽器的標準模式（standards mode）和怪異模式（quirks mode）
目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標準模式（Almost standards mode）、以及標準模式（Standards mode）。在怪異模式下，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行為。為了支持在網絡標準被廣泛采用前，就已經建好的網站，這么做是必要的。在標準模式下，行為即（但愿如此）由 HTML 與 CSS 的規范描述的行為。在接近標準模式下，只有少數的怪異行為被實現。
那么所謂標準模式，就一定都“標準”嗎？答案當然是否定的，因為各個瀏覽器廠商實現標準的階段不同，所以各個瀏覽器的“標準模式”之間也會有很大的不同。
Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一個準標準模式。那么既然標準模式都不那么標準，準標準的模式肯定就更不標準了。
-
瀏覽器如何決定用哪個模式？
<!DOCTYPE html> <html> <head><meta charset=UTF-8> <title>Hello World!</title> </head> <body> </body> </html>
對HTML文件來說，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標準模式處理。為了確保你的頁面使用標準模式，請確認你的頁面如同本范例一樣擁有 DOCTYPE：范例中的DOCTYPE，<!DOCTYPE html>，是所有可用的DOCTYPE之中最簡單的，而且是HTML5 所推薦的。HTML的早期變種也屬于推薦標準，不過今日的瀏覽器都會對這個 DOCTYPE 使用標準模式，就算是已過時的 Internet Explorer 6 也一樣。目前并沒有正當的理由，去使用其他更復雜的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能會冒著觸發接近標準模式或者怪異模式的風險。
-
使用
請確定你把 DOCTYPE 正確地放在 HTML 文件的頂端。任何放在 DOCTYPE 前面的東西，比如批注或 XML 聲明，會令 Internet Explorer 9 或更早期的瀏覽器觸發怪異模式。在 HTML5中，DOCTYPE 唯一的作用是啟用標準模式。更早期的 HTML 標準會附加其他意義，但沒有任何瀏覽器會將 DOCTYPE 用于怪異模式和標準模式之間互換以外的用途。
-
瀏覽器的標準模式與怪異模式的設置與區分方法
由于歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標準出臺以前，瀏覽器在對頁面的渲染上沒有統一規范，產生了差異(Quirks mode或者稱為Compatibility Mode)；由于W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱為Strict mode也有叫做Standars mode)，這就是二者最簡單的區別。W3C標準推出以后，瀏覽器都開始采納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來以前，很多頁面都是根據舊的渲染方法編寫的，如果用的標準來渲染，將導致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。
火狐一直工作在標準模式下，但IE（6，7，8）標準模式與怪異模式差別很大，主要體現在對盒子模型的解釋上，這個很重要，下面就重點說這個。那么瀏覽器究竟該采用哪種模式渲染呢？這就引出的DTD，既是網頁的頭部聲明，瀏覽器會通過識別DTD而采用相對應的渲染模式：
如何判定現在是標準模式還是怪異模式：
方法一：執行以下代碼 alert(window.top.document.compatMode) ; //BackCompat 表示怪異模式 //CSS1Compat 表示標準模式 方法二：jquery為我們提供的方法，如下： alert($.boxModel) alert($.support.boxModel)
CSS
1. 解釋一下盒模型寬高值的計算方式，邊界塌陷，負值作用，box-sizing概念。
1.1 盒模型
a. ie678怪異模式（不添加 doctype）使用 ie 盒模型，寬度=邊框+padding+內容寬度
b. chrome， ie9+, ie678(添加 doctype) 使用標準盒模型，寬度= 內容寬度
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 邊界塌陷
之前總結的
1.4 負值作用
display:inline-block是什么呢？相信大家對這個屬性并不陌生，根據名字inline-block我們就可以大概猜出它是結合了inline和block兩者的特性于一身，簡單的說：設置了inline-block屬性的元素既擁有了block元素可以設置width和height的特性，又保持了inline元素不換行的特性。
在margin屬性中一共有兩類參考線，top和left的參考線屬于一類，right和bottom的參考線屬于另一類。top和left是以外元素為參考，right和bottom是以元素本身為參考。
厲害了我的margin_由淺入深漫談margin屬性
這時候 margin 的解析邏輯是怎樣的呢？首先我們要搞清 div 的和周邊元素的關系，div 沒有相連元素，而此時 div 的 containing block 是 body 產生的 block box。則根據上面介紹的參考線原理，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時以 body 的 content 左邊為參考線進行水平向右位移，位移的大小為 40px，同理，上邊距以 body 的 content 上邊為參考線進行垂直向上位移 10px（負值和正值的方向相反），下邊距依照現在 div 的 borer 下邊（此時的 div 已經經過上邊距位移過了）垂直向上位移 30px（此時，margin 不會改變 box 的 border 內的物理大小，但會改變 box 的邏輯大小，即：以此 box 的 margin 的下邊為參考的元素，不是從 box 的物理位置開始的，而是從邏輯位置開始），右邊距依照現在 div 的 borer 右邊（此時的 div 已經經過左邊距位移過了）水平向右位移 20px。或許有朋友問你分析的順序怎么和 margin 表達式中出現的順序不一樣？如果按照 margin 表達式中出現的順序來分析，結果是一樣的，只是為了更好的方便大家的理解而沒有按照表達式的順序來分析。
margin為負值產生的影響和常見布局應用
應用
- 左右固定，中間自適應（雙飛翼）那些年，奇妙的圣杯與雙飛翼，還有負邊距
- 負邊距+定位：水平垂直居中
還有其他。。
[margin,padding]任一方向的百分數都是相對于包含塊的寬度(width)的。
一般left和right(用于absolute/fixed)在一個樣式是只能使用其一，不能left和right都設置，要么使用left就不使用right，要么使用right就不使用left，如果left和right均使用將會出現兼容問題，一個對象設置了靠左left多少距離，自然右邊距離自然就有了所以無需設置左邊。
相同道理，top和bottom對一個對象只能使用其一，不然會出現邏輯兼容問題。譬如一個人讓你往左走，一個人讓你往右走，同時發出往左往右走這個時候你也不好判斷往那邊走。
2. BFC(Block Formatting Context)是什么？有哪些應用？
CSS之BFC詳解
[CSS]深入理解BFC原理及應用
Block Formatting Context，中文直譯為塊級格式上下文。BFC就是一種布局方式，在這種布局方式下，盒子們自所在的containing block頂部一個接一個垂直排列，水平方向上撐滿整個寬度（除非內部盒子自己建立了新的BFC）。兩個相鄰的BFC之間的距離由margin決定。在同一個BFC內部，兩個垂直方向相鄰的塊級元素的margin會發生“塌陷”。
文檔這里也間接指出了垂直相鄰盒子margin合并的解決辦法：就是給這兩個盒子也創建BFC。
通俗一點，可以把BFC理解為一個封閉的大箱子，箱子內部的元素無論如何翻江倒海，都不會影響到外部。
-
如何創建BFC
總結一下就是：float屬性不為none
overflow不為visible(可以是hidden、scroll、auto)
position為absolute或fixed
display為inline-block、table-cell、table-caption -
BFC的作用
1. 清除內部浮動我們在布局時經常會遇到這個問題：對子元素設置浮動后，父元素會發生高度塌陷，也就是父元素的高度變為0。解決這個問題，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設置overflow:hidden。
2. 垂直margin合并在CSS當中，相鄰的兩個盒子的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。折疊的結果：
兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
兩個外邊距一正一負時，折疊結果是兩者的相加的和。這個同樣可以利用BFC解決。關于原理在前文已經講過了。
3. 創建自適應兩欄布局在很多網站中，我們常看到這樣的一種結構，左圖片+右文字的兩欄結構。
顯然，這是文字受到了圖片浮動的影響。當然，如果你想做文本繞排的效果，浮動是不二之選。不過在這里，這顯然不是我們想要的。此時我們可以為P元素的內容建立一個BFC，讓其內容消除對外界浮動元素的影響。給文字加上overflow:hidden
3.如何要求容器在寬度自由很縮的情況下，A/B/C的寬度始終是1:1:1，如何實現，寫出兩種方法。
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; }百分數布局:inline-block元素間間隙產生及去除詳解:
<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若寬高已知，如何實現水平、垂直均相對于父元素居中？若A高度未知呢？
之前總結的
JavaScript
1. 函數中的arguments是什么？是數組嗎？若不是，如何將它轉化為真正的數組？
arguments不是真正的數組。沒有數組的方法
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操作符的可能結果，如何區分：{}和[]類型？
3. Function中的call、apply、bind的區別是什么？請針對每一個寫出一個代碼示例。
4. 使用jQuery，找到id位selector的select標簽中有用data-target屬性為isme的option的值？
var se = $("#selector option[data-target=isme]"); console.log(se.val());5. 優化代碼
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給元素增加樣式，比如如下代碼：
這樣效率很低，每次修改style屬性后都會觸發元素的重繪，如果修改了的屬性涉及大小和位置，將會導致回流。所以我們應當盡量避免多次為一個元素設置style屬性，應當通過給其添加新的CSS類，來修改其CSS
當一個元素的外觀的可見性visibility發生改變的時候，重繪(repaint)也隨之發生，但是不影響布局。類似的例子包括：outline, visibility, or background color。根據Opera瀏覽器，重繪的代價是高昂的，因為瀏覽器必須驗證DOM樹上其他節點元素的可見性。而回流更是性能的關鍵因為其變化涉及到部分頁面（或是整個頁面）的布局。一個元素的回流導致了其所有子元素以及DOM中緊隨其后的祖先元素的隨后的回流。
render.png
如何避免回流或將它們對性能的影響降到最低？
- 如果想設定元素的樣式，通過改變元素的 class 名 (盡可能在 DOM 樹的最末端)（Change classes on the element you wish to style (as low in the dom tree as possible)）
- 避免設置多項內聯樣式（Avoid setting multiple inline styles）
- 應用元素的動畫，使用 position 屬性的 fixed 值或 absolute 值（Apply animations to elements that are position fixed or absolute）
- 權衡平滑和速度（Trade smoothness for speed）
- 避免使用table布局（Avoid tables for layout）
- 避免使用CSS的JavaScript表達式 (僅 IE 瀏覽器)（Avoid JavaScript expressions in the CSS (IE only)）
結合著看
- “離線”的批量改變和表現DOM。“離線”意味著不在當前的DOM樹中做修改。你可以：通過documentFragment來保留臨時變動。
- 復制你即將更新的節點，在副本上工作，然后將之前的節點和新節點交換。
- 通過display:none屬性隱藏元素（只有一次重排重繪），添加足夠多的變更后，通過display屬性顯示（另一次重排重繪）。通過這種方式即使大量變更也只觸發兩次重排。
- 不要頻繁計算樣式。如果你有一個樣式需要計算，只取一次，將它緩存在一個變量中并且在這個變量上工作。
- 通常情況下，考慮一下渲染樹和變更后需要重新驗證的消耗。舉個例子，使用絕對定位會使得該元素單獨成為渲染樹中body的一個子元素，所以當你對其添加動畫時，它不會對其它節點造成太多影響。當你在這些節點上放置這個元素時，一些其它在這個區域內的節點可能需要重繪，但是不需要重排。
5.2 事件綁定
當使用 addEventListener()為一個元素注冊事件的時候，句柄里的 this 值是該元素的引用。其與傳遞給句柄的 event 參數的 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. 請設計一個算法。將兩個有序數組合并為一個數組。請不要使用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更大的時候，后面的元素沒了
改下：
作者：darr250
鏈接：http://www.jianshu.com/p/258a2f734a85
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。
轉載于:https://www.cnblogs.com/sivkun/p/7586971.html
總結
- 上一篇： c#listView
- 下一篇： 2017年html5行业报告,云适配发布