【转】前端面试
一、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">
meta使用詳細(xì)總結(jié)
2.data-xxx 屬性的作用是什么？
HTML5 data-* 屬性:
定義和用法
data- 屬性用于存儲頁面或應(yīng)用程序的私有自定義數(shù)據(jù)。
data- 屬性賦予我們在所有 HTML 元素上嵌入自定義 data 屬性的能力。
存儲的（自定義）數(shù)據(jù)能夠被頁面的 JavaScript 中利用，以創(chuàng)建更好的用戶體驗(yàn)（不進(jìn)行 Ajax 調(diào)用或服務(wù)器端數(shù)據(jù)庫查詢）。
data-* 屬性包括兩部分：
屬性名不應(yīng)該包含任何大寫字母，并且在前綴 "data-" 之后必須有至少一個字符
屬性值可以是任意字符串
注釋：用戶代理會完全忽略前綴為 "data-" 的自定義屬性。
這里的data-前綴就被稱為data屬性，其可以通過腳本進(jìn)行定義，也可以應(yīng)用CSS屬性選擇器進(jìn)行樣式設(shè)置。數(shù)量不受限制，在控制和渲染數(shù)據(jù)的時候提供了非常強(qiáng)大的控制。
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.jianshu.com/p/da227e50df43
HTTP cookies 詳解
微軟的 IE6 SP1 在 cookie 中引入了一個新的選項(xiàng)：HTTP-only，HTTP-Only背后的意思是告之瀏覽器該 cookie 絕不能通過 JavaScript 的 document.cookie屬性訪問。設(shè)計(jì)該特征意在提供一個安全措施來幫助阻止通過 JavaScript 發(fā)起的跨站腳本攻擊 (XSS) 竊取 cookie 的行為
4.什么是瀏覽器的標(biāo)準(zhǔn)模式（standards mode）和怪異模式（quirks mode）
目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標(biāo)準(zhǔn)模式（Almost standards mode）、以及標(biāo)準(zhǔn)模式（Standards mode）。在怪異模式下，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標(biāo)準(zhǔn)行為。為了支持在網(wǎng)絡(luò)標(biāo)準(zhǔn)被廣泛采用前，就已經(jīng)建好的網(wǎng)站，這么做是必要的。在標(biāo)準(zhǔn)模式下，行為即（但愿如此）由 HTML 與 CSS 的規(guī)范描述的行為。在接近標(biāo)準(zhǔn)模式下，只有少數(shù)的怪異行為被實(shí)現(xiàn)。
那么所謂標(biāo)準(zhǔn)模式，就一定都“標(biāo)準(zhǔn)”嗎？答案當(dāng)然是否定的，因?yàn)楦鱾€瀏覽器廠商實(shí)現(xiàn)標(biāo)準(zhǔn)的階段不同，所以各個瀏覽器的“標(biāo)準(zhǔn)模式”之間也會有很大的不同。
Firefox、Safari、Chrome、Opera (自 7.5 以后)、 IE8 和 IE9 都有一個準(zhǔn)標(biāo)準(zhǔn)模式。那么既然標(biāo)準(zhǔn)模式都不那么標(biāo)準(zhǔn)，準(zhǔn)標(biāo)準(zhǔn)的模式肯定就更不標(biāo)準(zhǔn)了。
-
瀏覽器如何決定用哪個模式？
<!DOCTYPE html> <html> <head><meta charset=UTF-8> <title>Hello World!</title> </head> <body> </body> </html>
對HTML文件來說，瀏覽器使用文件開頭的 DOCTYPE 來決定用怪異模式處理或標(biāo)準(zhǔn)模式處理。為了確保你的頁面使用標(biāo)準(zhǔn)模式，請確認(rèn)你的頁面如同本范例一樣擁有 DOCTYPE：范例中的DOCTYPE，<!DOCTYPE html>，是所有可用的DOCTYPE之中最簡單的，而且是HTML5 所推薦的。HTML的早期變種也屬于推薦標(biāo)準(zhǔn)，不過今日的瀏覽器都會對這個 DOCTYPE 使用標(biāo)準(zhǔn)模式，就算是已過時的 Internet Explorer 6 也一樣。目前并沒有正當(dāng)?shù)睦碛?#xff0c;去使用其他更復(fù)雜的 DOCTYPE。如果你使用其他的 DOCTYPE，你可能會冒著觸發(fā)接近標(biāo)準(zhǔn)模式或者怪異模式的風(fēng)險(xiǎn)。
-
使用
請確定你把 DOCTYPE 正確地放在 HTML 文件的頂端。任何放在 DOCTYPE 前面的東西，比如批注或 XML 聲明，會令 Internet Explorer 9 或更早期的瀏覽器觸發(fā)怪異模式。在 HTML5中，DOCTYPE 唯一的作用是啟用標(biāo)準(zhǔn)模式。更早期的 HTML 標(biāo)準(zhǔn)會附加其他意義，但沒有任何瀏覽器會將 DOCTYPE 用于怪異模式和標(biāo)準(zhǔn)模式之間互換以外的用途。
-
瀏覽器的標(biāo)準(zhǔn)模式與怪異模式的設(shè)置與區(qū)分方法
由于歷史的原因，各個瀏覽器在對頁面的渲染上存在差異，甚至同一瀏覽器在不同版本中，對頁面的渲染也不同。在W3C標(biāo)準(zhǔn)出臺以前，瀏覽器在對頁面的渲染上沒有統(tǒng)一規(guī)范，產(chǎn)生了差異(Quirks mode或者稱為Compatibility Mode)；由于W3C標(biāo)準(zhǔn)的推出，瀏覽器渲染頁面有了統(tǒng)一的標(biāo)準(zhǔn)(CSScompat或稱為Strict mode也有叫做Standars mode)，這就是二者最簡單的區(qū)別。W3C標(biāo)準(zhǔn)推出以后，瀏覽器都開始采納新標(biāo)準(zhǔn)，但存在一個問題就是如何保證舊的網(wǎng)頁還能繼續(xù)瀏覽，在標(biāo)準(zhǔn)出來以前，很多頁面都是根據(jù)舊的渲染方法編寫的，如果用的標(biāo)準(zhǔn)來渲染，將導(dǎo)致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產(chǎn)生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。
火狐一直工作在標(biāo)準(zhǔn)模式下，但I(xiàn)E（6，7，8）標(biāo)準(zhǔn)模式與怪異模式差別很大，主要體現(xiàn)在對盒子模型的解釋上，這個很重要，下面就重點(diǎn)說這個。那么瀏覽器究竟該采用哪種模式渲染呢？這就引出的DTD，既是網(wǎng)頁的頭部聲明，瀏覽器會通過識別DTD而采用相對應(yīng)的渲染模式：
如何判定現(xiàn)在是標(biāo)準(zhǔn)模式還是怪異模式：
方法一：執(zhí)行以下代碼 alert(window.top.document.compatMode) ; //BackCompat 表示怪異模式 //CSS1Compat 表示標(biāo)準(zhǔn)模式 方法二：jquery為我們提供的方法，如下： alert($.boxModel) alert($.support.boxModel)
CSS
1. 解釋一下盒模型寬高值的計(jì)算方式，邊界塌陷，負(fù)值作用，box-sizing概念。
1.1 盒模型
a. ie678怪異模式（不添加 doctype）使用 ie 盒模型，寬度=邊框+padding+內(nèi)容寬度
b. chrome， ie9+, ie678(添加 doctype) 使用標(biāo)準(zhǔn)盒模型，寬度= 內(nèi)容寬度
1.2 box-sizing
content-box（默認(rèn)）
布局所占寬度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 負(fù)值作用
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 的解析邏輯是怎樣的呢？首先我們要搞清 div 的和周邊元素的關(guān)系，div 沒有相連元素，而此時 div 的 containing block 是 body 產(chǎn)生的 block box。則根據(jù)上面介紹的參考線原理，div 的左外邊距以 containing block 的 content 左邊為參考線，及此時以 body 的 content 左邊為參考線進(jìn)行水平向右位移，位移的大小為 40px，同理，上邊距以 body 的 content 上邊為參考線進(jìn)行垂直向上位移 10px（負(fù)值和正值的方向相反），下邊距依照現(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?；蛟S有朋友問你分析的順序怎么和 margin 表達(dá)式中出現(xiàn)的順序不一樣？如果按照 margin 表達(dá)式中出現(xiàn)的順序來分析，結(jié)果是一樣的，只是為了更好的方便大家的理解而沒有按照表達(dá)式的順序來分析。
margin為負(fù)值產(chǎn)生的影響和常見布局應(yīng)用
應(yīng)用
- 左右固定，中間自適應(yīng)（雙飛翼）那些年，奇妙的圣杯與雙飛翼，還有負(fù)邊距
- 負(fù)邊距+定位：水平垂直居中
還有其他。。
[margin,padding]任一方向的百分?jǐn)?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。
通俗一點(diǎn)，可以把BFC理解為一個封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會影響到外部。
-
如何創(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當(dāng)中，相鄰的兩個盒子的外邊距可以結(jié)合成一個單獨(dú)的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距。折疊的結(jié)果：
兩個相鄰的外邊距都是正數(shù)時，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負(fù)數(shù)時，折疊結(jié)果是兩者絕對值的較大值。
兩個外邊距一正一負(fù)時，折疊結(jié)果是兩者的相加的和。這個同樣可以利用BFC解決。關(guān)于原理在前文已經(jīng)講過了。
3. 創(chuàng)建自適應(yīng)兩欄布局在很多網(wǎng)站中，我們?？吹竭@樣的一種結(jié)構(gòu)，左圖片+右文字的兩欄結(jié)構(gòu)。
顯然，這是文字受到了圖片浮動的影響。當(dāng)然，如果你想做文本繞排的效果，浮動是不二之選。不過在這里，這顯然不是我們想要的。此時我們可以為P元素的內(nèi)容建立一個BFC，讓其內(nèi)容消除對外界浮動元素的影響。給文字加上overflow:hidden
3.如何要求容器在寬度自由很縮的情況下，A/B/C的寬度始終是1:1:1，如何實(shí)現(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; }百分?jǐn)?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若寬高已知，如何實(shí)現(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標(biāo)簽中有用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變慢？
翻譯計(jì)劃-重繪重排重渲染
通過類修改樣式
有時候我們需要通過JavaScript給元素增加樣式，比如如下代碼：
這樣效率很低，每次修改style屬性后都會觸發(fā)元素的重繪，如果修改了的屬性涉及大小和位置，將會導(dǎo)致回流。所以我們應(yīng)當(dāng)盡量避免多次為一個元素設(shè)置style屬性，應(yīng)當(dāng)通過給其添加新的CSS類，來修改其CSS
當(dāng)一個元素的外觀的可見性visibility發(fā)生改變的時候，重繪(repaint)也隨之發(fā)生，但是不影響布局。類似的例子包括：outline, visibility, or background color。根據(jù)Opera瀏覽器，重繪的代價是高昂的，因?yàn)闉g覽器必須驗(yàn)證DOM樹上其他節(jié)點(diǎn)元素的可見性。而回流更是性能的關(guān)鍵因?yàn)槠渥兓婕暗讲糠猪撁?#xff08;或是整個頁面）的布局。一個元素的回流導(dǎo)致了其所有子元素以及DOM中緊隨其后的祖先元素的隨后的回流。
render.png
如何避免回流或?qū)⑺鼈儗π阅艿挠绊懡档阶畹?#xff1f;
- 如果想設(shè)定元素的樣式，通過改變元素的 class 名 (盡可能在 DOM 樹的最末端)（Change classes on the element you wish to style (as low in the dom tree as possible)）
- 避免設(shè)置多項(xiàng)內(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表達(dá)式 (僅 IE 瀏覽器)（Avoid JavaScript expressions in the CSS (IE only)）
結(jié)合著看
- “離線”的批量改變和表現(xiàn)DOM?！半x線”意味著不在當(dāng)前的DOM樹中做修改。你可以：通過documentFragment來保留臨時變動。
- 復(fù)制你即將更新的節(jié)點(diǎn)，在副本上工作，然后將之前的節(jié)點(diǎn)和新節(jié)點(diǎn)交換。
- 通過display:none屬性隱藏元素（只有一次重排重繪），添加足夠多的變更后，通過display屬性顯示（另一次重排重繪）。通過這種方式即使大量變更也只觸發(fā)兩次重排。
- 不要頻繁計(jì)算樣式。如果你有一個樣式需要計(jì)算，只取一次，將它緩存在一個變量中并且在這個變量上工作。
- 通常情況下，考慮一下渲染樹和變更后需要重新驗(yàn)證的消耗。舉個例子，使用絕對定位會使得該元素單獨(dú)成為渲染樹中body的一個子元素，所以當(dāng)你對其添加動畫時，它不會對其它節(jié)點(diǎn)造成太多影響。當(dāng)你在這些節(jié)點(diǎn)上放置這個元素時，一些其它在這個區(qū)域內(nèi)的節(jié)點(diǎn)可能需要重繪，但是不需要重排。
5.2 事件綁定
當(dāng)使用 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. 請?jiān)O(shè)計(jì)一個算法。將兩個有序數(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更大的時候，后面的元素沒了
改下：
作者：darr250
鏈接：http://www.jianshu.com/p/258a2f734a85
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
轉(zhuǎn)載于:https://www.cnblogs.com/sivkun/p/7586971.html
總結(jié)
- 上一篇： c#listView
- 下一篇： vscode如何用浏览器预览运行html