【轉】前端面試

時間 2019-12-12

原文原文鏈接

1、HTML

1. 針對移動瀏覽器端開發頁面，不指望用戶放大屏幕，且要求「視口（viewport）」寬度等於屏幕寬度，視口高度等於設備高度，如何設置？

移動web前端viewport詳解
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">javascript

meta使用詳細總結css

2.data-xxx 屬性的做用是什麼？

HTML5 data-* 屬性:html

定義和用法
data- 屬性用於存儲頁面或應用程序的私有自定義數據。
data- 屬性賦予咱們在全部 HTML 元素上嵌入自定義 data 屬性的能力。
存儲的（自定義）數據可以被頁面的 JavaScript 中利用，以建立更好的用戶體驗（不進行 Ajax 調用或服務器端數據庫查詢）。
data-* 屬性包括兩部分：
屬性名不該該包含任何大寫字母，而且在前綴 "data-" 以後必須有至少一個字符
屬性值能夠是任意字符串前端

註釋：用戶代理會徹底忽略前綴爲 "data-" 的自定義屬性。
這裏的data-前綴就被稱爲data屬性，其能夠經過腳本進行定義，也能夠應用CSS屬性選擇器進行樣式設置。數量不受限制，在控制和渲染數據的時候提供了很是強大的控制。java

html:node

<div class="mm" data-name="張含韻"></div>
<div class="mm" data-name="undefined"></div>

css:jquery

.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:git

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 的行爲github

4.什麼是瀏覽器的標準模式（standards mode）和怪異模式（quirks mode）

目前瀏覽器的排版引擎有三種模式：怪異模式（Quirks mode）、接近標準模式（Almost standards mode）、以及標準模式（Standards mode）。在怪異模式下，排版會模擬 Navigator 4 與 Internet Explorer 5 的非標準行爲。爲了支持在網絡標準被普遍採用前，就已經建好的網站，這麼作是必要的。在標準模式下，行爲即（希望如此）由 HTML 與 CSS 的規範描述的行爲。在接近標準模式下，只有少數的怪異行爲被實現。web

那麼所謂標準模式，就必定都「標準」嗎？答案固然是否認的，由於各個瀏覽器廠商實現標準的階段不一樣，因此各個瀏覽器的「標準模式」之間也會有很大的不一樣。
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 也同樣。目前並無正當的理由，去使用其餘更復雜的 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而採用相對應的渲染模式：
瀏覽器要使老舊的網頁正常工做，但這部分網頁是沒有doctype聲明的，因此瀏覽器對沒有doctype聲明的網頁採用quirks mode解析。

對於擁有doctype聲明的網頁，什麼瀏覽器採用何種模式解析，這裏有一張詳細列表可參考：http://hsivonen.iki.fi/doctype。

對於擁有doctype聲明的網頁，這裏有幾條簡單的規則可用於判斷：對於那些瀏覽器不能識別的doctype聲明，瀏覽器採用strict mode解析。

在doctype聲明中，沒有使用DTD聲明或者使用HTML4如下（不包括HTML4）的DTD聲明時，基本全部的瀏覽器都是使用quirks mode呈現，其餘的則使用strict mode解析。

能夠這麼說，在現有有doctype聲明的網頁，絕大多數是採用strict mode進行解析的。
在ie6中，若是在doctype聲明前有一個xml聲明(好比:<?xml version=」1.0″ encoding=」iso-8859-1″?>)，則採用quirks mode解析。這條規則在ie7中已經移除了。
如何斷定如今是標準模式仍是怪異模式：
方法一：執行如下代碼
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:-10px 20px -30px 40px;

這時候 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爲負值產生的影響和常見佈局應用

應用

左右固定，中間自適應（雙飛翼）那些年，奇妙的聖盃與雙飛翼，還有負邊距

<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]任一方向的百分數都是相對於包含塊的寬度(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給元素增長樣式，好比以下代碼：

element.style.fontWeight = 'bold';
element.style.backgroundImage = 'url(back.gif)';
element.style.backgroundColor = 'white';element.style.color = 'white';//...

這樣效率很低，每次修改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更大的時候，後面的元素沒了
改下：

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

做者：darr250 連接：http://www.jianshu.com/p/258a2f734a85 來源：簡書著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。