web面試小技能

時間  2019-11-10
標籤 web 面試 小技 欄目 HTML 简体版
原文   原文鏈接

遇到的一些坑

  1. 問題：手機端 click 事件會有大約 300ms 的延遲 javascript

    緣由：手機端事件 touchstart --\> touchmove --> touchend or touchcancel --> click，由於在touch事件觸發以後，瀏覽器要判斷用戶是否會作出雙擊屏幕的操做，因此會等待300ms來判斷，再作出是否觸發click事件的處理，因此就會有300ms的延遲css

    解決方法：使用touch事件來代替click事件，如 zepto.js 的tap事件和fastClick，還有我本身也寫了個移動端手勢操做庫mTouch，都有相應的事件能夠代替click事件解決這個問題html

  2. 問題：在部分機型下（如小米四、小米2s、中興） body 設置的 font-size 是用 rem 單位的話，若其餘元素沒有設置font-size，該font-size值繼承於body，則會很高几率出現字體異常變大的狀況前端

    緣由：估計是跟app的webview默認設置有關，body的font-size使用rem單位，就是相對於當前根節點的font-size來肯定的，可能在某些webview的設置下，body用的是webview設置的默認字體大小，由於在我給html設置了一個px單位的默認font-size時，仍是會出現字體異常變大的狀況，具體webview的一些細節就沒有再研究了html5

    解決方法：body設置一個px單位的默認font-size值，不用rem，或者給字體會異常變大的元素設定一個px單位的font-size值java

  3. 問題：使用zepto的 tap 事件時會出現「點透」bug，好比：一個元素A綁定了tap事件，緊跟其後的元素B綁定了click事件，A觸發tap事件時將本身remove掉，B就會自動「掉」到A的位置，接下來就是不正常的狀況，由於這個時候B的click事件也觸發了node

    緣由：由於tap事件是經過 touchstart 、touchmove 、touchend 這三個事件來模擬實現的，在手機端事件機制中，觸發touch事件後會緊接着觸發touch事件座標元素的click事件，由於B元素在300ms內恰好「掉」回來A的位置，因此就觸發了B的click事件，還有zepto的tap事件都是代理到body的，因此想經過e.preventDefault()阻止默認行爲也是不可行的jquery

    解決方法：（1）A元素換成click事件；（2）使用我寫的庫 mTouch 來給A綁定tap事件，而後在事件回調中經過e.preventDefault()來阻止默認行爲，或者換用其餘的支持tap事件的庫android

  4. 問題 iOS自動識別數字爲手機號碼，致使部分設置好的樣式無效（字體顏色等）ios

    緣由 iOS自動識別數字後會給數字加上 <a href="tel:數字">數字</a> 標籤，因此數字的部分樣式繼承了a標籤的樣式，致使部分樣式無效

    解決方法：（1）meta 標籤加上<meta name="format-detection" content="telephone=no" /> 阻止默認識別數字爲電話；（2）設置樣式的時候 css 選擇器把a標籤選上，如：

    <span class="number">123<span> // 原來樣式 .number { color: #f00; } // 修改後樣式 .number, .number a { color: #f00; }

一些有用技能點

  1. 經過設置css屬性 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);取消掉手機端webkit瀏覽器 點擊按鈕或超連接之類的 默認灰色背景色

     

  2. 設置css屬性 -webkit-user-select:none; 控制用戶不可選擇文字

     

  3. 區域性 overflow: scroll | auto 滾動時使用原生效果：-webkit-overflow-scrolling: touch （ios8+，Android4.0+）

     

  4. 單行、多行溢出省略

    /* 單行省略 */ .ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 多行省略 */ .ellipsis-2l { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 數值表明顯示幾行 */ -webkit-box-orient: vertical; }

     

     

  5. 垂直居中經常使用方法：

    <!-- html結構 --> <body> <div class="wrap"> <div class="box"></div> </div> </body> /* css樣式 */ /* (1) 模仿單行文字居中的方式 */ .wrap { width: 200px; height: 80px; line-height: 80px; } .box { display: inline-block; vertical-align:middle; } /* (2) 已知寬高，經過position:absolute; */ .wrap { width: 200px; height: 200px; position: relative; } .box { width: 100px; height: 80px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -40px; } /* (3) 未知寬高，經過css3屬性 transfrom */ .wrap { width: 200px; height: 200px; position: relative; } .box { position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } /* (4) 經過flex佈局 */ <!-- html結構 --> <body> <div class="wrap flexbox flexbox-center flexbox-middle"> <div class="box"></div> </div> </body> /* css樣式 */ .flexbox { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } /* 水平居中 */ .flexbox-center { -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; } /* 垂直居中 */ .flexbox-middle { -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; }

  6. retina屏幕實現真正的1px邊框

    <!-- html結構 --> <body> <div class="box retina-border rt-bd-all"></div> </body> /* css樣式 */ .box { width: 200px; heigth: 100px; box-sizing: border-box; border: 1px solid #aaa; } /* 去掉元素原有的邊框 */ .retina-border { position: relative; border: none; } /* 經過設置僞元素放大到2倍的寬高，設置1px邊框，再縮小1倍，以達到0.5px邊框的效果*/ .retina-border:after { content: ''; display: block; width: 200%; height: 200%; position: absolute; left: 0; top: 0; box-sizing: border-box; border: 0px solid #aaa; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(.5); transform: scale(.5); } .rt-bd-all:after { border-width: 1px; } /* 若是隻是想設置一條邊框，能夠這樣改一下，以此類推 */ <!-- html結構 --> <body> <div class="box retina-border rt-bd-b"></div> </body> /* css樣式 */ .tr-bd-b:after { border-bottom-width: 1px; } .tr-bd-t:after { border-top-width: 1px; } .tr-bd-l:after { border-left-width: 1px; } .tr-bd-r:after { border-right-width: 1px; }

  7. 關於水平、垂直、多列布局的多種實現參照：《利用HTML和CSS實現常見的佈局》

 

目錄

  1. 前言
  2. HTML 部分
  3. CSS 部分
  4. JavaScript 部分
  5. 其餘問題

前言

本文總結了一些優質的前端面試題（多數源於網絡），初學者閱後也要用心鑽研其中的原理，重要知識須要系統學習，透徹學習，造成本身的知識鏈。萬不可投機取巧，只求面試過關是錯誤的！

面試有幾點需注意：(來源程劭非老師 github:@wintercn)

  1. 面試題目： 根據你的等級和職位變化，入門級到專家級：範圍↑、深度↑、方向↑。

  2. 題目類型： 技術視野、項目細節、理論知識題，算法題，開放性題，案例題。

  3. 進行追問： 能夠確保問到你開始不懂或面試官開始不懂爲止，這樣能夠大大延展題目的區分度和深度，知道你的實際能力。由於這種關聯知識是長時期的學習，絕對不是臨時記得住的。

  4. 回答問題再棒，面試官（多是你的直接領導面試），會考慮我要不要這我的作個人同事？因此態度很重要。（感受更像是相親）

  5. 資深的工程師能把absolute和relative弄混，這樣的人不要也罷，由於團隊須要的你這我的具備能夠依靠的才能（靠譜）。

前端開發面試知識點大綱：

HTML&CSS：
    對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應 

JavaScript：  
    數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

其餘：
   HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯

做爲一名前端工程師，不管工做年頭長短都應該必須掌握的知識點：

一、DOM結構 —— 兩個節點之間可能存在哪些關係以及如何在節點之間任意移動。

    二、DOM操做  ——如何添加、移除、移動、複製、建立和查找節點等。

    三、事件    —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差異。

    四、XMLHttpRequest —— 這是什麼、怎樣完整地執行一次GET請求、怎樣檢測錯誤。

    五、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。

    六、盒模型 —— 外邊距、內邊距和邊框之間的關係，及IE8如下版本的瀏覽器中的盒模型

    七、塊級元素與行內元素 —— 怎麼用CSS控制它們、以及如何合理的使用它們

    八、浮動元素——怎麼使用它們、它們有什麼問題以及怎麼解決這些問題。

    九、HTML與XHTML——兩者有什麼區別，你以爲應該使用哪個並說出理由。

    十、JSON  —— 做用、用途、設計結構。

HTML

  • Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

    （1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器的解析器，
      用什麼文檔類型 規範來解析這個文檔。 

（2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

  • 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？

    （1）CSS規範規定，每一個元素都有display屬性，肯定該元素的類型，每一個元素都有默認的display值，
  好比div默認display屬性值爲「block」，成爲「塊級」元素；
  span默認display屬性值爲「inline」，是「行內」元素。  

（2）行內元素有：a b span img input select strong（強調的語氣） 
 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p  

（3）知名的空元素： 
<br> <hr> <img> <input> <link> <meta> 
不爲人知的是： 
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

  • link 和@import 的區別是？

    （1）link屬於XHTML標籤，而@import是CSS提供的;

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;

（3）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;

（4）link方式的樣式的權重 高於@import的權重.

  • 瀏覽器的內核分別是什麼?

    * IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera內核原爲Presto，現爲Blink；

  • 常見兼容性問題？

    * png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。 

  浮動ie產生的雙倍距離 #box{ float:left; width:10px; margin:0 0 0 10px;} 

 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

  漸進識別的方式，從整體中逐漸排除局部。 

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
       background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/ 
      } 

*  IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,
   也能夠使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,even對象有x,y屬性,可是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 
  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

  • HTML5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 Html5？

    * HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 繪畫 canvas  
  用於媒介回放的 video 和 audio 元素 
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
  sessionStorage 的數據在瀏覽器關閉後自動刪除

  語意化更好的內容元素，好比 article、footer、header、nav、section 
  表單控件，calendar、date、time、email、url、search  
  新的技術webworker, websockt, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何區分： DOCTYPE聲明\新增的結構元素\功能元素

  • 語義化的理解？

    用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

  • HTML5的離線儲存？

    localStorage    長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage  數據在瀏覽器關閉後自動刪除。

  • (寫)描述一段語義的html代碼吧。

    （HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）
 就是基於語義化設計原則）  
    < div id="header"> 
    < h1>標題< /h1> 
    < h2>專一Web前端技術< /h2> 
    < /div>

  • iframe有那些缺點？

    *iframe會阻塞主頁面的Onload事件；

*iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。

  • 請描述一下 cookies，sessionStorage 和 localStorage 的區別？

    cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；

CSS

  • 介紹一下CSS的盒子模型？

    （1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

  • CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

    *   1.id選擇器（ # myid）
    2.類選擇器（.myclassname）
    3.標籤選擇器（div, h1, p）
    4.相鄰選擇器（h1 + p）
    5.子選擇器（ul < li）
    6.後代選擇器（li a）
    7.通配符選擇器（ * ）
    8.屬性選擇器（a[rel = "external"]）
    9.僞類選擇器（a: hover, li: nth - child）

*   可繼承的樣式： font-size font-family color, UL LI DL DD DT;

*   不可繼承的樣式：border padding margin width height ;

*   優先級就近原則，同權重狀況下樣式定義最近者爲準;

*   載入樣式以最後載入的定位爲準;

    優先級爲:

    !important >  id > class > tag  

   important 比 內聯優先級高

    CSS3新增僞類舉例：

    p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

  • 如何居中div？如何居中一個浮動元素？

    • 給div設置一個寬度，而後添加margin:0 auto屬性

      div{
    width:200px;
    margin:0 auto;
 }

    • 居中一個浮動元素

      肯定容器的寬高 寬500 高 300 的層
  設置層的外邊距

 .div { 
  Width:500px ; height:300px;//高度能夠不設
  Margin: -150px 0 0 -250px;
  position:relative;相對定位
  background-color:pink;//方便看效果
  left:50%;
  top:50%;
}

  • 列出display的值，說明他們的做用。position的值， relative和absolute定位原點是？

    1.   
  block 象塊類型元素同樣顯示。
  none 缺省值。象行內元素類型同樣顯示。
  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

  2. 
  *absolute 
        生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位。 

  *fixed （老IE不支持）
        生成絕對定位的元素，相對於瀏覽器窗口進行定位。 

  *relative 
        生成相對定位的元素，相對於其正常位置進行定位。 

  * static  默認值。沒有定位，元素出如今正常的流中
  *（忽略 top, bottom, left, right z-index 聲明）。

  * inherit 規定從父元素繼承 position 屬性的值。

  • CSS3有哪些新特性？

    CSS3實現圓角（border-radius:8px），陰影（box-shadow:10px），
  對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
  增長了更多的CSS選擇器  多背景 rgba

  • 一個滿屏 品 字佈局 如何設計?

  • 常常遇到的CSS的兼容性有哪些？緣由，解決方法是什麼？

  • 爲何要初始化CSS樣式。

    - 由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

- 固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

淘寶的樣式初始化： 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

  • absolute的containing block計算方式跟正常流有什麼不一樣？

  • position跟display、margin collapse、overflow、float這些特性相互疊加後會怎麼樣？

  • 對BFC規範的理解？

    （W3C CSS 2.1 規範中的一個概念,它決定了元素如何對其內容進行定位,以及與其餘元素的關 系和相互做用。）

  • css定義的權重

    如下是權重的規則：標籤的權重爲1，class的權重爲10，id的權重爲100，如下例子是演示各類定義的權重值：

/*權重爲1*/
div{
}
/*權重爲10*/
.class1{
}
/*權重爲100*/
#id1{
}
/*權重爲100+1=101*/
#id1 div{
}
/*權重爲10+1=11*/
.class1 div{
}
/*權重爲10+10+1=21*/
.class1 .class2 div{
} 

若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

  • 解釋下浮動和它的工做原理？清除浮動的技巧

  • 用過媒體查詢，針對移動端的佈局嗎？

  • 使用 CSS 預處理器嗎？喜歡那個？

    SASS

JavaScript

  • JavaScript原型，原型鏈 ? 有什麼特色？

在JavaScript中,一共有兩種類型的值,原始值和對象值.每一個對象都有一個內部屬性[[prototype]],咱們一般稱之爲原型.原型的值能夠是一個對象,也能夠是null.若是它的值是一個對象,則這個對象也必定有本身的原型.這樣就造成了一條線性的鏈,咱們稱之爲原型鏈.
訪問一個對象的原型能夠使用ES5中的Object.getPrototypeOf方法,或者ES6中的__proto__屬性.
原型鏈的做用是用來實現繼承,好比咱們新建一個數組,數組的方法就是從數組的原型上繼承而來的.
var arr = [];

arr.map === Array.prototype.map //arr.map是從arr.__proto__上繼承下來的,arr.__proto__也就是Array.prototype

圖形化原型鏈
雖然咱們都說原型鏈,但實際上,在不考慮網頁中frame的狀況,js引擎在執行期間的某一時刻,全部存在的對象組成的是一棵原型樹.默認狀況下,只有一棵樹.根節點能夠說是Object.prototype,也能夠說是null.

但咱們能夠再創建一棵原型樹,經過使用Object.create方法
var foo = Object.create(null); //foo是一個對象,但它是遊離的,不屬於已有的那棵原型樹
var bar = Object.create(foo); //bar的原型是foo
var baz = Object.create(foo); //baz的原型是foo 

這樣咱們有了第二棵原型樹

遍歷原型鏈
咱們沒有辦法遍歷到全部以某個對象爲原型的對象,但咱們能夠向上遍歷,獲取到一個對象全部的上層原型,這個原型鏈一定是線性的,盡頭是null.
function getPrototypeChain(object) {
var protoChain = [];
while (object = object.__proto__) {
protoChain.push(object);
}
protoChain.push(null);
return protoChain;
}


  • eval是作什麼的？

    它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

  • null，undefined 的區別？

undefined表示變量聲明但未初始化的值，null表示準備用來保存對象，尚未真正保存對象的值。從邏輯角度看，null表示一個空對象指針。

  • 寫一個通用的事件偵聽器函數。

    // event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
        // 頁面加載完成後
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        // 視能力分別使用dom0||dom2||IE方式 來綁定事件
        // 參數： 操做的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型、須要執行的函數、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEnentListener) {
                element.removeEnentListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }, 
        // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默認行爲
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

  • Node.js的適用場景？

    高併發、聊天、實時消息推送

  • 介紹js的基本數據類型。

    number,string,boolean,object,undefined

  • JavaScript如何實現繼承？

    經過原型和構造器

  • ["1", "2", "3"].map(parseInt) 答案是多少？

    [1, NaN, NaN] 由於 parseInt 須要兩個參數 (val, radix) 但 map 傳了 3 個 (element, index, array)

  • 如何建立一個對象? （畫出此對象的內存圖）

    function Person(name, age) {
    this.name = name;
    this.age = age;
    this.sing = function() { alert(this.name) } 
  }

  • 談談This對象的理解。

    this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。

可是有一個總原則，那就是this指的是調用函數的那個對象。

this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象

  • 事件是？IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

    1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。  
 2. 事件處理機制：IE是事件冒泡、火狐是 事件捕獲；
 3. ev.stopPropagation();

  • 什麼是閉包（closure），爲何要用它？

    執行say667()後,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所佔用的資源，由於say667()的內部函數的執行須要依賴say667()中的變量。這是對閉包做用的很是直白的描述.

  function say667() {
    // Local variable that ends up within closure
    var num = 666;
    var sayAlert = function() { alert(num); }
    num++;
    return sayAlert;
}

 var sayAlert = say667();
 sayAlert()//執行結果應該彈出的667

  • "use strict";是什麼意思 ? 使用它的好處和壞處分別是什麼？

"use strict"是一個指令，指示解釋器用更嚴格的方式檢查代碼

好處：

若是在語法檢測時發現語法問題，則整個代碼失效，並致使一個語法異常。

若是在運行期出現了違反嚴格模式的代碼，則拋出執行異常。

壞處：

如今的網站的JS都會進行壓縮，一些文件用了嚴格模式，而另一些沒有。這時這些原本是嚴格模式的文件，被merge後，這個串到了文件的中間，不只僅沒有指示嚴格模式，反而在壓縮後浪費了字節。


  • 如何判斷一個對象是否屬於某個類？

    使用instanceof （待完善）

   if(a instanceof Person){
       alert('yes');
   }

  • new操做符具體幹了什麼呢?

    一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
     二、屬性和方法被加入到 this 引用的對象中。
     三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

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

  • JavaScript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？

    hasOwnProperty

  • JSON 的瞭解？

    JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
{'age':'12', 'name':'back'}

  • js延遲加載的方式有哪些？

    defer和async、動態建立DOM方式（用得最多）、按需異步載入js

  • ajax 是什麼?

異步javascript和XML，是指一種建立交互式網頁應用的網頁開發技術。經過後臺與服務器進行少許數據交換，AJAX能夠使用網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。

  • 同步和異步的區別?

javascript同步表示sync，指：代碼依次執行
javascript異步表示async，指：代碼執行不按順序，‘跳過’執行，待其餘某些代碼執行完後再來執行，成爲異步。

  • 如何解決跨域問題?

    jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

  • 模塊化怎麼作？

    當即執行函數,不暴露私有成員

    var module1 = (function(){
    　　　　var _count = 0;
    　　　　var m1 = function(){
    　　　　　　//...
    　　　　};
    　　　　var m2 = function(){
    　　　　　　//...
    　　　　};
    　　　　return {
    　　　　　　m1 : m1,
    　　　　　　m2 : m2
    　　　　};
    　　})();

  • AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規範區別？

二者都是異步模塊定義的一個實現；CMD和AMD都是CommonJS的一種規範的實現定義，RequireJS和SeaJS是對應的實踐；

CMD和AMD的區別：CMD至關與按需加載，定義一個模塊的時候不須要當即制定依賴模塊，在須要的時候require就能夠了，比較方便；而AMD則相反，定義模塊的時候須要制定依賴模塊，並以形參的方式引入factory中。


  • 異步加載的方式有哪些？

    (1) defer，只支持IE

  (2) async：

  (3) 建立script，插入到DOM中，加載完畢後callBack

  • documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML能夠重繪頁面的一部分

  • .call() 和 .apply() 的區別？

    例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，因此運行結果爲：alert(4); 

  注意：js 中的函數實際上是對象，函數名是對 Function 對象的引用。

    function add(a,b)
    {
        alert(a+b);
    }

    function sub(a,b)
    {
        alert(a-b);
    }

    add.call(sub,3,1);

  • jQuery與jQuery UI 有啥區別？

    *jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。

*jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。
 提供了一些經常使用的界面元素，諸如對話框、拖動行爲、改變大小行爲等等

  • jQuery的源碼看過嗎？能不能簡單說一下它的實現原理？

  • jquery 中如何將數組轉化爲json字符串，而後再轉化回來？

jQuery中沒有提供這個功能，因此你須要先編寫兩個jQuery的擴展：

$.fn.stringifyArray = function(array) {
        return JSON.stringify(array)
    }

    $.fn.parseArray = function(array) {
        return JSON.parse(array)
    } 

    而後調用：
    $("").stringifyArray(array)

  • 針對 jQuery 的優化方法？

    *基於Class的選擇性的性能相對於Id選擇器開銷很大，由於需遍歷全部DOM元素。

*頻繁操做的DOM，先緩存起來再操做。用Jquery的鏈式調用更好。   
 好比：var str=$("a").attr("href");

*for (var i = size; i < arr.length; i++) {}
 for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可讓循環跑得更快： 
 for (var i = size, length = arr.length; i < length; i++) {}

  • JavaScript中的做用域與變量聲明提高？

  • 如何編寫高性能的Javascript？

  • 那些操做會形成內存泄漏？

    內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

  • JQuery一個對象能夠同時綁定多個事件，這是如何實現的？

其餘問題

  • 你遇到過比較難的技術問題是？你是如何解決的？

  • 常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

  • 頁面重構怎麼操做？

  • 列舉IE 與其餘瀏覽器不同的特性？

  • 99%的網站都須要被重構是那本書上寫的？

  • 什麼叫優雅降級和漸進加強？

  • WEB應用從服務器主動推送Data到客戶端有那些方式？

  • 對Node的優勢和缺點提出了本身的見解？

    *（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
  所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
  此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
  所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
  並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

  • 你有哪些性能優化的方法？

    （看雅虎14條性能優化原則）。

  （1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

  （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

  （8） 避免在頁面的主體佈局中使用table，table要等其中的內容徹底下載以後纔會顯示出來，顯示比div+css佈局慢。

  • http狀態碼有那些？分別表明是什麼意思？

    100-199 用於指定客戶端應相應的某些動做。 
200-299 用於表示請求成功。 
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 
400-499 用於指出客戶端的錯誤。400    一、語義有誤，當前請求沒法被服務器理解。401   當前請求須要用戶驗證 403  服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用

  • 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？（流程說的越詳細越好）

    查找瀏覽器緩存 
    DNS解析、查找該域名對應的IP地址、重定向（301）、發出第二個GET請求
    進行HTTP協議會話
    客戶端發送報頭(請求報頭)
    服務器回饋報頭(響應報頭)
    html文檔開始下載
    文檔樹創建，根據標記請求所需指定MIME類型的文件
    文件顯示
    [
    瀏覽器這邊作的工做大體分爲如下幾步：

    加載：根據請求的URL進行域名解析，向服務器發起請求，接收文件（HTML、JS、CSS、圖象等）。

    解析：對加載到的資源（HTML、JS、CSS等）進行語法解析，建議相應的內部數據結構（好比HTML的DOM樹，JS的（對象）屬性表，CSS的樣式規則等等）
    }

  • 除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

  • 你經常使用的開發工具是什麼，爲何？

  • 對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

    前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
    一、實現界面交互
    二、提高用戶體驗
    三、有了Node.js，前端能夠實現服務端的一些事情

前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

 參與項目，快速高質量完成實現效果圖，精確到1px；

 與團隊成員，UI設計，產品經理的溝通；

 作好的頁面結構，頁面重構和用戶體驗；

 處理hack，兼容、寫出優美的代碼格式；

 針對服務器的優化、擁抱最新前端技術。

  • 加班的見解？

    加班就像借錢，原則應當是------救急不救窮

  • 平時如何管理你的項目？

    先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等

        編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

        標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

        頁面進行標註（例如 頁面 模塊 開始和結束）；

        CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）

        JS 分文件夾存放 命民以該JS 功能爲準英文翻譯；

        圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

  • 如何設計突發大規模併發架構？

  • 說說最近最流行的一些東西吧？常去哪些網站？

    Node.js、Mongodb、npm、MVVM、MEAN、three.js

  • 移動端（Android iOS）怎麼作好用戶體驗?

    清晰的視覺縱線、信息的分組、極致的減法、
    利用選擇代替輸入、標籤及文字的排布方式、
    依靠明文確認密碼、合理的鍵盤利用、

  • 你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

  • 你認爲怎樣纔是全端工程師（Full Stack developer）？

  • 介紹一個你最得意的做品吧？

  • 你的優勢是什麼？缺點是什麼？

  • 如何管理前端團隊?

  • 最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

  • 想問公司的問題？

    問公司問題：
    目前關注哪些最新的Web前端技術（將來的發展方向）？
    前端團隊如何工做的（實現一個產品的流程）？
    公司的薪資結構是什麼樣子的？

 

經常使用原生JS方法總結（兼容性寫法）

 

常常會用到原生JS來寫前端。。。可是原生JS的一些方法在適應各個瀏覽器的時候寫法有的也不怎麼同樣的。。。

今天下班有點累。。。

就來總結一下簡單的東西吧……

 

備註：一下的方法都是包裹在一個EventUtil對象裏面的，直接採用對象字面量定義方法了。。。

①添加事件方法

1
2
3
4
5
6
7
8
9
addHandler： function (element,type,handler){
    if (element.addEventListener){ //檢測是否爲DOM2級方法
        element.addEventListener(type, handler,  false );
    } else if (element.attachEvent){ //檢測是否爲IE級方法
        element.attachEvent( "on" + type, handler);
    } else { //檢測是否爲DOM0級方法
        element[ "on" + type] = handler;
    }
}

②移除以前添加的事件方法

1
2
3
4
5
6
7
8
9
removeHandler： function (element, type, handler){
       if (element.removeEventListener){
           element.removeEventListener(type, handler,  false );
       } else if (element.detachEvent){
           element.detachEvent( "on" + type, handler);
       } else {
           element[ "on" + type] =  null ;
       }
   }

③獲取事件及事件對象目標

1
2
3
4
5
6
7
8
//獲取事件對象的兼容性寫法
getEvent: function (event){
     return event ? event : window.event;
},
//獲取事件對象目標的兼容性寫法
getTarget: function (event){
     return event.target || event.srcElement;
}

④阻止瀏覽器默認事件的兼容性寫法

1
2
3
4
5
6
7
preventDefault: function (event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue =  false ;
        }
    }

⑤阻止事件冒泡的兼容性寫法

1
2
3
4
5
6
7
stopPropagation: function (event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble =  true ;
        }
    }

⑥mouseover和mouseout 事件才包含的獲取相關元素的方法

1
2
3
4
5
6
7
8
9
10
11
12
//mouseover和mouseout 事件才包含的獲取相關元素的方法
getRelatedTarget: function (event){
    if (event.relatedTarget){
        return event.relatedTarget;
    } else if (event.toElement){
        return event.toElement;
    } else if (event.fromElement){
        return event.fromElement;
    } else {
        return null ;
    }
}

⑦鼠標滾輪判斷

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
    /*對於mousedown 和mouseup 事件來講，則在其event 對象存在一個button 屬性，
表示按下或釋放的按鈕。DOM的button 屬性可能有以下3 個值：0 表示主鼠標按鈕，1 表示中間的鼠
標按鈕（鼠標滾輪按鈕），2 表示次鼠標按鈕。在常規的設置中，主鼠標按鈕就是鼠標左鍵，而次鼠標
按鈕就是鼠標右鍵。
IE8 及以前版本也提供了button 屬性，但這個屬性的值與DOM 的button 屬性有很大差別。
 0：表示沒有按下按鈕。
 1：表示按下了主鼠標按鈕。
 2：表示按下了次鼠標按鈕。
 3：表示同時按下了主、次鼠標按鈕。
 4：表示按下了中間的鼠標按鈕。
 5：表示同時按下了主鼠標按鈕和中間的鼠標按鈕。
 6：表示同時按下了次鼠標按鈕和中間的鼠標按鈕。
 7：表示同時按下了三個鼠標按鈕。*/
getButton: function (event){
    if (document.implementation.hasFeature( "MouseEvents" , "2.0" )){
        return event.button;
    } else {
        switch (event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
            return 0;
            case 2:
            case 6:
            return 2;
            case 4:
            return 1;
        }
    }
}

⑧可以取得鼠標滾輪增量值（delta）的方法

1
2
3
4
5
6
7
8
getWheelDelta: function (event){
    if (event.wheelDelta){
        return (client.engine.opera && client.engine.opera < 9.5 ?
            -event.wheelDelta : event.wheelDelta);
    } else {
        return -event.detail * 40; //firefox中的值爲+3表示向上滾，-3表示向下滾
    }
}

⑨跨瀏覽器的方式取得字符編碼

1
2
3
4
5
6
7
getCharCode: function (event){
    if ( typeof event.charCode ==  "number" ){
        return event.charCode;
    } else {
        return event.keyCode;
    }
}

⑩訪問剪貼板中的數據

1
2
3
4
getClipboardText: function (event){
        var clipboardData = (event.clipboardData || window.clipboardData);
        return clipboardData.getData( "text" );
    }

11.設置剪貼板中的數據

1
2
3
4
5
6
7
setClipboardText: function (event, value){
        if (event.clipboardData){
            return event.clipboardData.setData( "text/plain" , value);
        } else if (window.clipboardData){
            return window.clipboardData.setData( "text" , value);
        }
    }

~~~~~~~~~

封裝一下，而後就能夠直接用了呢。。。。


前端開發面試知識點大綱：

HTML&CSS：  對Web標準的理解、瀏覽器內核差別、兼容性、hack、CSS基本功：佈局、盒子模型、選擇器優先級及使用、HTML五、CSS三、移動端適應。

JavaScript：   數據類型、面向對象、繼承、閉包、插件、做用域、跨域、原型鏈、模塊化、自定義事件、內存泄漏、事件機制、異步裝載回調、模板引擎、Nodejs、JSON、ajax等。

其餘：  HTTP、安全、正則、優化、重構、響應式、移動端、團隊協做、可維護、SEO、UED、架構、職業生涯

1.請你談談Cookie的弊端

cookie雖然在持久保存客戶端數據提供了方便，分擔了服務器存儲的負擔，但仍是有不少侷限性的。 第一：每一個特定的域名下最多生成20個cookie

1.IE6或更低版本最多20個cookie
2.IE7和以後的版本最後能夠有50個cookie。
3.Firefox最多50個cookie
4.chrome和Safari沒有作硬性限制

IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。

cookie的最大大約爲4096字節，爲了兼容性，通常不能超過4095字節。

IE 提供了一種存儲能夠持久化用戶數據，叫作uerData，從IE5.0就開始支持。每一個數據最多128K，每一個域名下最多1M。這個持久化數據放在緩存中，若是緩存沒有清理，那麼會一直存在。

優勢：極高的擴展性和可用性

1.經過良好的編程，控制保存在cookie中的session對象的大小。
2.經過加密和安全傳輸技術（SSL），減小cookie被破解的可能性。
3.只在cookie中存放不敏感數據，即便被盜也不會有重大損失。
4.控制cookie的生命期，使之不會永遠有效。偷盜者極可能拿到一個過時的cookie。

缺點：

1.`Cookie`數量和長度的限制。每一個domain最多隻能有20條cookie，每一個cookie長度不能超過4KB，不然會被截掉。

2.安全性問題。若是cookie被人攔截了，那人就能夠取得全部的session信息。即便加密也與事無補，由於攔截者並不須要知道cookie的意義，他只要原樣轉發cookie就能夠達到目的了。

3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。

2.瀏覽器本地存儲

在較高版本的瀏覽器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage來取代globalStorage。

html5中的Web Storage包括了兩種存儲方式：sessionStorage和localStorage。

sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。

而localStorage用於持久化的本地存儲，除非主動刪除數據，不然數據是永遠不會過時的。

3.web storage和cookie的區別

Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的。Cookie的大小是受限的，而且每次你請求一個新的頁面的時候Cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不能夠跨域調用。

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生

瀏覽器的支持除了IE７及如下不支持外，其餘標準瀏覽器都徹底支持(ie及FF需在web服務器裏運行)，值得一提的是IE老是辦好事，例如IE七、IE6中的UserData其實就是javascript本地存儲的解決方案。經過簡單的代碼封裝能夠統一到全部的瀏覽器都支持web storage。

localStorage和sessionStorage都具備相同的操做方法，例如setItem、getItem和removeItem等

CSS 相關問題

display:none和visibility:hidden的區別？

display:none  隱藏對應的元素，在文檔佈局中再也不給它分配空間，它各邊的元素會合攏，
就當他歷來不存在。

visibility:hidden  隱藏對應的元素，可是在文檔佈局中仍保留原來的空間。

CSS中 link 和@import 的區別是？

A：(1) link屬於HTML標籤，而@import是CSS提供的; (2) 頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;(3) import只在IE5以上才能識別，而link是HTML標籤，無兼容問題; (4) link方式的樣式的權重 高於@import的權重.

position的absolute與fixed共同點與不一樣點

A：共同點：
1.改變行內元素的呈現方式，display被置爲block；2.讓元素脫離普通流，不佔據空間；3.默認會覆蓋到非定位元素上

B不一樣點：
absolute的」根元素「是能夠設置的，而fixed的」根元素「固定爲瀏覽器窗口。當你滾動網頁，fixed元素與瀏覽器窗口之間的距離是不變的。

介紹一下CSS的盒子模型？

1）有兩種， IE 盒子模型、標準 W3C 盒子模型；IE的content部分包含了 border 和 pading;

2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).

 

CSS 選擇符有哪些？哪些屬性能夠繼承？優先級算法如何計算？ CSS3新增僞類有那些？

*   1.id選擇器（ # myid）
        2.類選擇器（.myclassname）
        3.標籤選擇器（div, h1, p）
        4.相鄰選擇器（h1 + p）
        5.子選擇器（ul > li）
        6.後代選擇器（li a）
        7.通配符選擇器（ * ）
        8.屬性選擇器（a[rel = "external"]）
        9.僞類選擇器（a: hover, li:nth-child）

    *   可繼承的樣式： font-size font-family color, text-indent;

    *   不可繼承的樣式：border padding margin width height ;

    *   優先級就近原則，同權重狀況下樣式定義最近者爲準;

    *   載入樣式以最後載入的定位爲準;

優先級爲:


   !important >  id > class > tag  

   important 比 內聯優先級高,但內聯比 id 要高

CSS3新增僞類舉例：


p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每一個 <p> 元素。
p:last-of-type  選擇屬於其父元素的最後 <p> 元素的每一個 <p> 元素。
p:only-of-type  選擇屬於其父元素惟一的 <p> 元素的每一個 <p> 元素。
p:only-child    選擇屬於其父元素的惟一子元素的每一個 <p> 元素。
p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個 <p> 元素。
:enabled  :disabled 控制表單控件的禁用狀態。
:checked        單選框或複選框被選中。

列出display的值，說明他們的做用。position的值， relative和absolute分別是相對於誰進行定位的？

1.   
  block 象塊類型元素同樣顯示。
  inline 缺省值。象行內元素類型同樣顯示。
  inline-block 象行內元素同樣顯示，但其內容象塊類型元素同樣顯示。
  list-item 象塊類型元素同樣顯示，並添加樣式列表標記。

  2. 
  *absolute 
        生成絕對定位的元素，相對於 static 定位之外的第一個祖先元素進行定位。 

  *fixed （老IE不支持）
        生成絕對定位的元素，相對於瀏覽器窗口進行定位。 

  *relative 
        生成相對定位的元素，相對於其在普通流中的位置進行定位。 

  * static  默認值。沒有定位，元素出如今正常的流中
  *（忽略 top, bottom, left, right z-index 聲明）。

  * inherit 規定從父元素繼承 position 屬性的值。

CSS3有哪些新特性？

CSS3實現圓角（border-radius），陰影（box-shadow），
對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增長了更多的CSS選擇器  多背景 rgba 
在CSS3中惟一引入的僞元素是::selection.
媒體查詢，多欄佈局
border-image

爲何要初始化CSS樣式。

由於瀏覽器的兼容問題，不一樣瀏覽器對有些標籤的默認值是不一樣的，若是沒對CSS初始化每每會出現瀏覽器之間的頁面顯示差別。

    固然，初始化樣式會對SEO有必定的影響，但魚和熊掌不可兼得，但力求影響最小的狀況下初始化。

*最簡單的初始化方法就是： * {padding: 0; margin: 0;} （不建議）

    淘寶的樣式初始化： 
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
    h1, h2, h3, h4, h5, h6{ font-size:100%; }
    address, cite, dfn, em, var { font-style:normal; }
    code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
    small{ font-size:12px; }
    ul, ol { list-style:none; }
    a { text-decoration:none; }
    a:hover { text-decoration:underline; }
    sup { vertical-align:text-top; }
    sub{ vertical-align:text-bottom; }
    legend { color:#000; }
    fieldset, img { border:0; }
    button, input, select, textarea { font-size:100%; }
    table { border-collapse:collapse; border-spacing:0; }

對BFC規範的理解？

BFC，塊級格式化上下文，一個建立了新的BFC的盒子是獨立佈局的，盒子裏面的子元素的樣式不會影響到外面的元素。在同一個BFC中的兩個毗鄰的塊級盒在垂直方向（和佈局方向有關係）的margin會發生摺疊。
    （W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行佈局，以及與其餘元素的關係和相互做用。）

解釋下 CSS sprites，以及你要如何在頁面或網站中使用它。

CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。這樣能夠減小不少圖片請求的開銷，由於請求耗時比較長；請求雖然能夠併發，可是也有限制，通常瀏覽器都是6個。對於將來而言，就不須要這樣作了，由於有了`http2`。

html部分

說說你對語義化的理解？

1，去掉或者丟失樣式的時候可以讓頁面呈現出清晰的結構
2，有利於SEO：和搜索引擎創建良好溝通，有助於爬蟲抓取更多的有效信息：爬蟲依賴於標籤來肯定上下文和各個關鍵字的權重；
3，方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）以意義的方式來渲染網頁；
4，便於團隊開發和維護，語義化更具可讀性，是下一步吧網頁的重要動向，遵循W3C標準的團隊都遵循這個標準，能夠減小差別化。

Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?

（1）、<!DOCTYPE> 聲明位於文檔中的最前面，處於 <html> 標籤以前。告知瀏覽器以何種模式來渲染文檔。 

（2）、嚴格模式的排版和 JS 運做模式是  以該瀏覽器支持的最高標準運行。

（3）、在混雜模式中，頁面以寬鬆的向後兼容的方式顯示。模擬老式瀏覽器的行爲以防止站點沒法工做。

（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現。

你知道多少種Doctype文檔類型？

該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
 HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
 XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
 （包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。

HTML與XHTML——兩者有什麼區別

區別：
1.全部的標記都必需要有一個相應的結束標記
2.全部標籤的元素和屬性的名字都必須使用小寫
3.全部的XML標記都必須合理嵌套
4.全部的屬性必須用引號""括起來
5.把全部<和&特殊符號用編碼表示
6.給全部屬性賦一個值
7.不要在註釋內容中使「--」
8.圖片必須有說明文字

常見兼容性問題？

* png24位的圖片在iE6瀏覽器上出現背景，解決方案是作成PNG8.也能夠引用一段腳本處理.

* 瀏覽器默認的margin和padding不一樣。解決方案是加一個全局的*{margin:0;padding:0;}來統一。

* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin狀況下，在ie6顯示margin比設置的大。 

* 浮動ie產生的雙倍距離（IE6雙邊距問題：在IE6下，若是對元素設置了浮動，同時又設置了margin-left或margin-right，margin值會加倍。）
  #box{ float:left; width:10px; margin:0 0 0 100px;} 

 這種狀況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化爲行內屬性。(_這個符號只有ie6會識別)

*  漸進識別的方式，從整體中逐漸排除局部。 

  首先，巧妙的使用「\9」這一標記，將IE遊覽器從全部狀況中分離出來。 
  接着，再次使用「+」將IE8和IE七、IE6分離開來，這樣IE8已經獨立識別。

  css
      .bb{
       background-color:#f1ee18;/*全部識別*/
      .background-color:#00deff\9; /*IE六、七、8識別*/
      +background-color:#a200ff;/*IE六、7識別*/
      _background-color:#1e0bd1;/*IE6識別*/ 
      } 

*  IE下,能夠使用獲取常規屬性的方法來獲取自定義屬性,
   也能夠使用getAttribute()獲取自定義屬性;
   Firefox下,只能使用getAttribute()獲取自定義屬性. 
   解決方法:統一經過getAttribute()獲取自定義屬性.

* IE下,event對象有x,y屬性,可是沒有pageX,pageY屬性; 
  Firefox下,event對象有pageX,pageY屬性,可是沒有x,y屬性.

* 解決方法：（條件註釋）缺點是在IE瀏覽器下可能會增長額外的HTTP請求數。

* Chrome 中文界面下默認會將小於 12px 的文本強制按照 12px 顯示, 
  可經過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.

* 超連接訪問事後hover樣式就不出現了 被點擊訪問過的超連接樣式不在具備hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A :  a:link {} a:visited {} a:hover {} a:active {}

* 怪異模式問題：漏寫DTD聲明，Firefox仍然會按照標準模式來解析網頁，但在IE中會觸發怪異模式。爲避免怪異模式給咱們帶來沒必要要的麻煩，最好養成書寫DTD聲明的好習慣。如今能夠使用[html5](http://www.w3.org/TR/html5/single-page.html)推薦的寫法：`<doctype html>`

* 上下margin重合問題
ie和ff都存在，相鄰的兩個div的margin-left和margin-right不會重合，可是margin-top和margin-bottom卻會發生重合。
解決方法，養成良好的代碼編寫習慣，同時採用margin-top或者同時採用margin-bottom。
* ie6對png圖片格式支持很差(引用一段腳本處理)

解釋下浮動和它的工做原理？清除浮動的技巧

浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。

1.使用空標籤清除浮動。
   這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
   給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
   該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；

浮動元素引發的問題和解決辦法？

浮動元素引發的問題：
（1）父元素的高度沒法被撐開，影響與父元素同級的元素
（2）與浮動元素同級的非浮動元素會跟隨其後
（3）若非第一個元素浮動，則該元素以前的元素也須要浮動，不然會影響頁面顯示的結構

解決方法： 使用CSS中的clear:both;屬性來清除元素的浮動可解決二、3問題，對於問題1，添加以下樣式，給父元素添加clearfix樣式：

.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */

清除浮動的幾種方法：

1，額外標籤法，<div style="clear:both;"></div>（缺點：不過這個辦法會增長額外的標籤使HTML結構看起來不夠簡潔。）
2，使用after僞類

#parent:after{
    content:".";
    height:0;
    visibility:hidden;
    display:block;
    clear:both;
    }

3,浮動外部元素
4,設置`overflow`爲`hidden`或者auto

IE 8如下版本的瀏覽器中的盒模型有什麼不一樣

IE8如下瀏覽器的盒模型中定義的元素的寬高不包括內邊距和邊框

DOM操做——怎樣添加、移除、移動、複製、建立和查找節點。

（1）建立新節點

      createDocumentFragment()    //建立一個DOM片斷

      createElement()   //建立一個具體的元素

      createTextNode()   //建立一個文本節點

（2）添加、移除、替換、插入

      appendChild()

      removeChild()

      replaceChild()

      insertBefore() //在已有的子節點前插入一個新的子節點

（3）查找

      getElementsByTagName()    //經過標籤名稱

      getElementsByName()    //經過元素的Name屬性的值(IE容錯能力較強，會獲得一個數組，其中包括id等於name值的)

      getElementById()    //經過元素Id，惟一性

html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

* HTML5 如今已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增長。

* 拖拽釋放(Drag and drop) API 
  語義化更好的內容標籤（header,nav,footer,aside,article,section）
  音頻、視頻API(audio,video)
  畫布(Canvas) API
  地理(Geolocation) API
  本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
  sessionStorage 的數據在瀏覽器關閉後自動刪除

  表單控件，calendar、date、time、email、url、search  
  新的技術webworker, websocket, Geolocation

* 移除的元素

純表現的元素：basefont，big，center，font, s，strike，tt，u；

對可用性產生負面影響的元素：frame，frameset，noframes；

支持HTML5新標籤：

* IE8/IE7/IE6支持經過document.createElement方法產生的標籤，
  能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，

  瀏覽器支持新標籤後，還須要添加標籤默認的樣式：

* 固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
   <!--[if lt IE 9]> 
   <script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script> 
   <![endif]--> 
如何區分： DOCTYPE聲明\新增的結構元素\功能元素

iframe的優缺點？

1.<iframe>優勢：

    解決加載緩慢的第三方內容如圖標和廣告等的加載問題
    Security sandbox
    並行加載腳本

2.<iframe>的缺點：


    *iframe會阻塞主頁面的Onload事件；

    *即時內容爲空，加載也須要時間
    *沒有語意

如何實現瀏覽器內多個標籤頁之間的通訊?

調用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器？

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基於 multipart 編碼發送 XHR 、 基於長輪詢的 XHR

線程與進程的區別

一個程序至少有一個進程,一個進程至少有一個線程. 
線程的劃分尺度小於進程，使得多線程程序的併發性高。 
另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。 
線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。 
從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。

你如何對網站的文件和資源進行優化？

期待的解決方案包括：
 文件合併
 文件最小化/文件壓縮
 使用 CDN 託管
 緩存的使用（多個域名來提供緩存）
 其餘

請說出三種減小頁面加載時間的方法。

1.優化圖片 
 2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方） 
 3.優化CSS（壓縮合並css，如margin-top,margin-left...) 
 4.網址後加斜槓（如www.campr.com/目錄，會判斷這個「目錄是什麼文件類型，或者是目錄。） 
 5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。 
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。） 

6.減小http請求（合併文件，合併圖片）。

你都使用哪些工具來測試代碼的性能？

Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo

什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？

FOUC - Flash Of Unstyled Content 文檔樣式閃爍
 <style type="text/css" media="all">@import "../fouc.css";</style> 
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
 解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script>元素就能夠了。

null和undefined的區別？

null是一個表示"無"的對象，轉爲數值時爲0；undefined是一個表示"無"的原始值，轉爲數值時爲NaN。

當聲明的變量還未被初始化時，變量的默認值爲undefined。 null用來表示還沒有存在的對象，經常使用來表示函數企圖返回一個不存在的對象。

undefined表示"缺乏值"，就是此處應該有一個值，可是尚未定義。典型用法是：

（1）變量被聲明瞭，但沒有賦值時，就等於undefined。

（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。

（3）對象沒有賦值的屬性，該屬性的值爲undefined。

（4）函數沒有返回值時，默認返回undefined。

null表示"沒有對象"，即該處不該該有值。典型用法是：

（1） 做爲函數的參數，表示該函數的參數不是對象。

（2） 做爲對象原型鏈的終點。

new操做符具體幹了什麼呢?

一、建立一個空對象，而且 this 變量引用該對象，同時還繼承了該函數的原型。
   二、屬性和方法被加入到 this 引用的對象中。
   三、新建立的對象由 this 所引用，而且最後隱式的返回 this 。

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

JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。
它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小
{'age':'12', 'name':'back'}

js延遲加載的方式有哪些？

defer和async、動態建立DOM方式（建立script，插入到DOM中，加載完畢後callBack）、按需異步載入js

如何解決跨域問題?

jsonp、 document.domain+iframe、window.name、window.postMessage、服務器上設置代理頁面

jsonp的原理是動態插入script標籤

具體參見：詳解js跨域問題

documen.write和 innerHTML的區別

document.write只能重繪整個頁面

innerHTML能夠重繪頁面的一部分

.call() 和 .apply() 的區別和做用？

做用：動態改變某個類的某個方法的運行環境。 區別參見：JavaScript學習總結（四）function函數部分

哪些操做會形成內存泄漏？

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。

setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包、控制檯日誌、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）

詳見：詳解js變量、做用域及內存

JavaScript中的做用域與變量聲明提高？

詳見：詳解JavaScript函數模式

如何判斷當前腳本運行在瀏覽器仍是node環境中？

經過判斷Global對象是否爲window，若是不爲window，當前腳本沒有運行在瀏覽器中

其餘問題？

你遇到過比較難的技術問題是？你是如何解決的？

常使用的庫有哪些？經常使用的前端開發工具？開發過什麼應用或組件？

列舉IE 與其餘瀏覽器不同的特性？

99%的網站都須要被重構是那本書上寫的？

* 網站重構：應用web標準進行設計（第2版）

什麼叫優雅降級和漸進加強？

優雅降級：Web站點在全部新式瀏覽器中都能正常工做，若是用戶使用的是老式瀏覽器，則代碼會檢查以確認它們是否能正常工做。因爲IE獨特的盒模型佈局問題，針對不一樣版本的IE的hack實踐過優雅降級了,爲那些沒法支持功能的瀏覽器增長候選方案，使之在舊式瀏覽器上以某種形式降級體驗卻不至於徹底失效.

漸進加強：從被全部瀏覽器支持的基本功能開始，逐步地添加那些只有新式瀏覽器才支持的功能,向頁面增長無害於基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來併發揮做用。

詳見：css學習概括總結（一）

WEB應用從服務器主動推送Data到客戶端有那些方式？

對Node的優勢和缺點提出了本身的見解？

*（優勢）由於Node是基於事件驅動和無阻塞的，因此很是適合處理併發請求，
  所以構建在Node上的代理服務器相比其餘技術實現（如Ruby）的服務器表現要好得多。
  此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，
  所以客戶端和服務器端都用同一種語言編寫，這是很是美妙的事情。

*（缺點）Node是一個相對新的開源項目，因此不太穩定，它老是一直在變，
  並且缺乏足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。

除了前端之外還了解什麼其它技術麼？你最最厲害的技能是什麼？

你經常使用的開發工具是什麼，爲何？

對前端界面工程師這個職位是怎麼樣理解的？它的前景會怎麼樣？

前端是最貼近用戶的程序員，比後端、數據庫、產品經理、運營、安全都近。
    一、實現界面交互
    二、提高用戶體驗
    三、有了Node.js，前端能夠實現服務端的一些事情


前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，

 參與項目，快速高質量完成實現效果圖，精確到1px；

 與團隊成員，UI設計，產品經理的溝通；

 作好的頁面結構，頁面重構和用戶體驗；

 處理hack，兼容、寫出優美的代碼格式；

 針對服務器的優化、擁抱最新前端技術。

你在如今的團隊處於什麼樣的角色，起到了什麼明顯的做用？

你認爲怎樣纔是全端工程師（Full Stack developer）？

介紹一個你最得意的做品吧？

項目中遇到什麼問題？如何解決？

你的優勢是什麼？缺點是什麼？

如何管理前端團隊?

最近在學什麼？能談談你將來3，5年給本身的規劃嗎？

你有哪些性能優化的方法？

（詳情請看雅虎14條性能優化原則）。

（1） 減小http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN託管，data緩存 ，圖片服務器。

  （2） 前端模板 JS+數據，減小因爲HTML標籤致使的帶寬浪費，前端用變量保存AJAX請求結果，每次操做本地變量，不用請求，減小請求次數

  （3） 用innerHTML代替DOM操做，減小DOM操做次數，優化javascript性能。

  （4） 當須要設置的樣式不少時設置className而不是直接操做style。

  （5） 少用全局變量、緩存DOM節點查找的結果。減小IO讀取操做。

  （6） 避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。

  （7） 圖片預加載，將樣式表放在頂部，將腳本放在底部  加上時間戳。

http狀態碼有那些？分別表明是什麼意思？

100-199 用於指定客戶端應相應的某些動做。 
200-299 用於表示請求成功。 
300-399 用於已經移動的文件而且常被包含在定位頭信息中指定新的地址信息。 
400-499 用於指出客戶端的錯誤。400    一、語義有誤，當前請求沒法被服務器理解。401   當前請求須要用戶驗證 403  服務器已經理解請求，可是拒絕執行它。
500-599 用於支持服務器錯誤。 503 – 服務不可用

詳情：http://segmentfault.com/blog/trigkit4/1190000000691919

一個頁面從輸入 URL 到頁面加載顯示完成，這個過程當中都發生了什麼？

分爲4個步驟：
    （1），當發送一個URL請求時，無論這個URL是Web頁面的URL仍是Web頁面上每一個資源的URL，瀏覽器都會開啓一個線程來處理這個請求，同時在遠程DNS服務器上啓動一個DNS查詢。這能使瀏覽器得到請求對應的IP地址。
    （2）， 瀏覽器與遠程Web服務器經過TCP三次握手協商來創建一個TCP/IP鏈接。該握手包括一個同步報文，一個同步-應答報文和一個應答報文，這三個報文在 瀏覽器和服務器之間傳遞。該握手首先由客戶端嘗試創建起通訊，然後服務器應答並接受客戶端的請求，最後由客戶端發出該請求已經被接受的報文。
    （3），一旦TCP/IP鏈接創建，瀏覽器會經過該鏈接向遠程服務器發送HTTP的GET請求。遠程服務器找到資源並使用HTTP響應返回該資源，值爲200的HTTP響應狀態表示一個正確的響應。
    （4），此時，Web服務器提供資源服務，客戶端開始下載資源。

請求返回後，便進入了咱們關注的前端模塊
簡單來講，瀏覽器會解析HTML生成DOM Tree，其次會根據CSS生成CSS Rule Tree，而javascript又能夠根據DOM API操做DOM

詳情：從輸入 URL 到瀏覽器接收的過程當中發生了什麼事情？

平時如何管理你的項目？

先期團隊必須肯定好全局樣式（globe.css），編碼模式(utf-8) 等；

        編寫習慣必須一致（例如都是採用繼承式的寫法，單樣式都寫成一行）；

        標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）；

        頁面進行標註（例如 頁面 模塊 開始和結束）；

        CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；

        JS 分文件夾存放 命名以該JS功能爲準的英文翻譯。

        圖片採用整合的 images.png png8 格式文件使用 儘可能整合在一塊兒使用方便未來的管理

說說最近最流行的一些東西吧？常去哪些網站？

Node.js、Mongodb、npm、MVVM、MEAN、three.js,React 。
網站：w3cfuns,sf,hacknews,CSDN,慕課，博客園，InfoQ,w3cplus等

javascript對象的幾種建立方式

1，工廠模式
2，構造函數模式
3，原型模式
4，混合構造函數和原型模式
5，動態原型模式
6，寄生構造函數模式
7，穩妥構造函數模式

javascript繼承的6種方法

1，原型鏈繼承
2，借用構造函數繼承
3，組合繼承(原型+借用構造)
4，原型式繼承
5，寄生式繼承
6，寄生組合式繼承

詳情：JavaScript繼承方式詳解

ajax過程

(1)建立XMLHttpRequest對象,也就是建立一個異步調用對象.

(2)建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及驗證信息.

(3)設置響應HTTP請求狀態變化的函數.

(4)發送HTTP請求.

(5)獲取異步調用返回的數據.

(6)使用JavaScript和DOM實現局部刷新.

詳情：JavaScript學習總結（七）Ajax和Http狀態字

異步加載和延遲加載

1.異步加載的方案： 動態插入script標籤
2.經過ajax去獲取js代碼，而後經過eval執行
3.script標籤上添加defer或者async屬性
4.建立並插入iframe，讓它異步執行js
5.延遲加載：有些 js 代碼並非頁面初始化的時候就馬上須要的，而稍後的某些狀況才須要的。

前端安全問題？

（XSS，sql注入，CSRF）
CSRF：是跨站請求僞造，很明顯根據剛剛的解釋，他的核心也就是請求僞造，經過僞造身份提交POST和GET請求來進行跨域的攻擊。

**完成CSRF須要兩個步驟：**

1.登錄受信任的網站A，在本地生成COOKIE

2.在不登出A的狀況下，或者本地COOKIE沒有過時的狀況下，訪問危險網站B。

ie各版本和chrome能夠並行下載多少個資源

IE6 兩個併發，iE7升級以後的6個併發，以後版本也是6個

Firefox，chrome也是6個

javascript裏面的繼承怎麼實現，如何避免原型鏈上面的對象共享

用構造函數和原型鏈的混合模式去實現繼承，避免對象共享能夠參考經典的extend()函數，不少前端框架都有封裝的，就是用一個空函數當作中間變量

grunt， YUI compressor 和 google clojure用來進行代碼壓縮的用法。

YUI Compressor 是一個用來壓縮 JS 和 CSS 文件的工具，採用Java開發。

使用方法：

//壓縮JS
java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -v src.js > packed.js
//壓縮CSS
java -jar yuicompressor-2.4.2.jar --type css --charset utf-8 -v src.css > packed.css

詳情請見：你須要掌握的前端代碼性能優化工具

Flash、Ajax各自的優缺點，在使用中如何取捨？

一、Flash ajax對比
Flash適合處理多媒體、矢量圖形、訪問機器；對CSS、處理文本上不足，不容易被搜索。
Ajax對CSS、文本支持很好，支持搜索；多媒體、矢量圖形、機器訪問不足。
共同點：與服務器的無刷新傳遞消息、用戶離線和在線狀態、操做DOM

請解釋一下 JavaScript 的同源策略。

概念:同源策略是客戶端腳本（尤爲是Javascript）的重要的安全度量標準。它最先出自Netscape Navigator2.0，其目的是防止某個文檔或腳本從多個不一樣源裝載。

這裏的同源策略指的是：協議，域名，端口相同，同源策略是一種安全協議。 指一段腳本只能讀取來自同一來源的窗口和文檔的屬性。

爲何要有同源限制？

咱們舉例說明：好比一個黑客程序，他利用Iframe把真正的銀行登陸頁面嵌到他的頁面上，當你使用真實的用戶名，密碼登陸時，他的頁面就能夠經過Javascript讀取到你的表單中input中的內容，這樣用戶名，密碼就輕鬆到手了。

什麼是 "use strict"; ? 使用它的好處和壞處分別是什麼？

ECMAscript 5添加了第二種運行模式："嚴格模式"（strict mode）。顧名思義，這種模式使得Javascript在更嚴格的條件下運行。

設立"嚴格模式"的目的，主要有如下幾個：

- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
- 消除代碼運行的一些不安全之處，保證代碼運行的安全；
- 提升編譯器效率，增長運行速度；
- 爲將來新版本的Javascript作好鋪墊。

注：通過測試IE6,7,8,9均不支持嚴格模式。

缺點： 如今網站的JS 都會進行壓縮，一些文件用了嚴格模式，而另外一些沒有。這時這些原本是嚴格模式的文件，被merge 後，這個串就到了文件的中間，不只沒有指示嚴格模式，反而在壓縮後浪費了字節。

GET和POST的區別，什麼時候使用POST？

GET：通常用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，通常在2000個字符
    POST：通常用於修改服務器上的資源，對所發送的信息沒有限制。

    GET方式須要使用Request.QueryString來取得變量的值，而POST方式經過Request.Form來獲取變量的值，
    也就是說Get是經過地址欄來傳值，而Post是經過提交表單來傳值。

然而，在如下狀況中，請使用 POST 請求：
沒法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

哪些地方會出現css阻塞，哪些地方會出現js阻塞？

js的阻塞特性：全部瀏覽器在下載JS的時候，會阻止一切其餘活動，好比其餘資源的下載，內容的呈現等等。直到JS下載、解析、執行完畢後纔開始繼續並行下載其餘資源並呈現內容。爲了提升用戶體驗，新一代瀏覽器都支持並行下載JS，可是JS下載仍然會阻塞其它資源的下載（例如.圖片，css文件等）。

因爲瀏覽器爲了防止出現JS修改DOM樹，須要從新構建DOM樹的狀況，因此就會阻塞其餘的下載和呈現。

嵌入JS會阻塞全部內容的呈現，而外部JS只會阻塞其後內容的顯示，2種方式都會阻塞其後資源的下載。也就是說外部樣式不會阻塞外部腳本的加載，但會阻塞外部腳本的執行。

CSS怎麼會阻塞加載了？CSS原本是能夠並行下載的，在什麼狀況下會出現阻塞加載了(在測試觀察中，IE6下CSS都是阻塞加載）

當CSS後面跟着嵌入的JS的時候，該CSS就會出現阻塞後面資源下載的狀況。而當把嵌入JS放到CSS前面，就不會出現阻塞的狀況了。

根本緣由：由於瀏覽器會維持html中css和js的順序，樣式表必須在嵌入的JS執行前先加載、解析完。而嵌入的JS會阻塞後面的資源加載，因此就會出現上面CSS阻塞下載的狀況。

嵌入JS應該放在什麼位置？

一、放在底部，雖然放在底部照樣會阻塞全部呈現，但不會阻塞資源下載。

   二、若是嵌入JS放在head中，請把嵌入JS放在CSS頭部。

   三、使用defer（只支持IE）

   四、不要在嵌入的JS中調用運行時間較長的函數，若是必定要用，能夠用`setTimeout`來調用

Javascript無阻塞加載具體方式

  • 將腳本放在底部。<link>仍是放在head中，用以保證在js加載前，能加載出正常顯示的頁面。<script>標籤放在</body>前。

  • 成組腳本：因爲每一個<script>標籤下載時阻塞頁面解析過程，因此限制頁面的<script>總數也能夠改善性能。適用於內聯腳本和外部腳本。

  • 非阻塞腳本：等頁面完成加載後，再加載js代碼。也就是，在window.onload事件發出後開始下載代碼。 （1）defer屬性：支持IE4和fierfox3.5更高版本瀏覽器 （2）動態腳本元素：文檔對象模型（DOM）容許你使用js動態建立HTML的幾乎所有文檔內容。代碼以下：

 

<script>
var script=document.createElement("script");
script.type="text/javascript";
script.src="file.js";
document.getElementsByTagName("head")[0].appendChild(script);
</script>

此技術的重點在於：不管在何處啓動下載，文件額下載和運行都不會阻塞其餘頁面處理過程。即便在head裏（除了用於下載文件的http連接）。

閉包相關問題？

詳情請見：詳解js閉包

js事件處理程序問題？

詳情請見：JavaScript學習總結（九）事件詳解

eval是作什麼的？

它的功能是把對應的字符串解析成JS代碼並運行；
應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

寫一個通用的事件偵聽器函數?

// event(事件)工具集，來源：github.com/markyun
    markyun.Event = {
        // 頁面加載完成後
        readyEvent : function(fn) {
            if (fn==null) {
                fn=document;
            }
            var oldonload = window.onload;
            if (typeof window.onload != 'function') {
                window.onload = fn;
            } else {
                window.onload = function() {
                    oldonload();
                    fn();
                };
            }
        },
        // 視能力分別使用dom0||dom2||IE方式 來綁定事件
        // 參數： 操做的元素,事件名稱 ,事件處理程序
        addEvent : function(element, type, handler) {
            if (element.addEventListener) {
                //事件類型、須要執行的函數、是否捕捉
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent('on' + type, function() {
                    handler.call(element);
                });
            } else {
                element['on' + type] = handler;
            }
        },
        // 移除事件
        removeEvent : function(element, type, handler) {
            if (element.removeEnentListener) {
                element.removeEnentListener(type, handler, false);
            } else if (element.datachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }, 
        // 阻止事件 (主要是事件冒泡，由於IE不支持事件捕獲)
        stopPropagation : function(ev) {
            if (ev.stopPropagation) {
                ev.stopPropagation();
            } else {
                ev.cancelBubble = true;
            }
        },
        // 取消事件的默認行爲
        preventDefault : function(event) {
            if (event.preventDefault) {
                event.preventDefault();
            } else {
                event.returnValue = false;
            }
        },
        // 獲取事件目標
        getTarget : function(event) {
            return event.target || event.srcElement;
        },
        // 獲取event對象的引用，取到事件的全部信息，確保隨時能使用event；
        getEvent : function(e) {
            var ev = e || window.event;
            if (!ev) {
                var c = this.getEvent.caller;
                while (c) {
                    ev = c.arguments[0];
                    if (ev && Event == ev.constructor) {
                        break;
                    }
                    c = c.caller;
                }
            }
            return ev;
        }
    };

Node.js的適用場景？

高併發、聊天、實時消息推送

JavaScript原型，原型鏈 ? 有什麼特色？

*  原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。
*  原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。

頁面重構怎麼操做？

編寫 CSS、讓頁面結構更合理化，提高用戶體驗，實現良好的頁面效果和提高性能。

WEB應用從服務器主動推送Data到客戶端有那些方式？

html5 websoket
    WebSocket經過Flash
    XHR長時間鏈接
    XHR Multipart Streaming
    不可見的Iframe
    <script>標籤的長時間鏈接(可跨域)

事件、IE與火狐的事件機制有什麼區別？ 如何阻止冒泡？

1. 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。  
 2. 事件處理機制：IE是事件冒泡、firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件。；
 3.  ev.stopPropagation();注意舊ie的方法 ev.cancelBubble = true;

ajax 是什麼?ajax 的交互模型?同步和異步的區別?如何解決跨域問題?

詳情請見：JavaScript學習總結（七）Ajax和Http狀態字

1. 經過異步模式，提高了用戶體驗

  2. 優化了瀏覽器和服務器之間的傳輸，減小沒必要要的數據往返，減小了帶寬佔用

  3. Ajax在客戶端運行，承擔了一部分原本由服務器承擔的工做，減小了大用戶量下的服務器負載。

  2. Ajax的最大的特色是什麼。

  Ajax能夠實現動態不刷新（局部刷新）
  readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=啓動 2=發送，3=接收，4=完成

ajax的缺點

  一、ajax不支持瀏覽器back按鈕。

  二、安全問題 AJAX暴露了與服務器交互的細節。

  三、對搜索引擎的支持比較弱。

  四、破壞了程序的異常機制。

  五、不容易調試。

跨域： jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面

js對象的深度克隆

function clone(Obj) {   
        var buf;   
        if (Obj instanceof Array) {   
            buf = [];  //建立一個空的數組 
            var i = Obj.length;   
            while (i--) {   
                buf[i] = clone(Obj[i]);   
            }   
            return buf;   
        }else if (Obj instanceof Object){   
            buf = {};  //建立一個空對象 
            for (var k in Obj) {  //爲這個對象添加新的屬性 
                buf[k] = clone(Obj[k]);   
            }   
            return buf;   
        }else{   
            return Obj;   
        }   
    }

AMD和CMD 規範的區別？

詳情請見：詳解JavaScript模塊化開發

網站重構的理解？

網站重構：在不改變外部行爲的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行爲。也就是說是在不改變UI的狀況下，對網站進行優化，在擴展的同時保持一致的UI。

對於傳統的網站來講重構一般是：

表格(table)佈局改成DIV+CSS
使網站前端兼容於現代瀏覽器(針對於不合規範的CSS、如對IE6有效的)
對於移動平臺的優化
針對於SEO進行優化
深層次的網站重構應該考慮的方面

減小代碼間的耦合
讓代碼保持彈性
嚴格按規範編寫代碼
設計可擴展的API
代替舊有的框架、語言(如VB)
加強用戶體驗
一般來講對於速度的優化也包含在重構中

壓縮JS、CSS、image等前端資源(一般是由服務器來解決)
程序的性能優化(如數據讀寫)
採用CDN來加速資源加載
對於JS DOM的優化
HTTP服務器的文件緩存

如何獲取UA？

<script> 
    function whatBrowser() {  
        document.Browser.Name.value=navigator.appName;  
        document.Browser.Version.value=navigator.appVersion;  
        document.Browser.Code.value=navigator.appCodeName;  
        document.Browser.Agent.value=navigator.userAgent;  
    }  
</script>

js數組去重

如下是數組去重的三種方法：

Array.prototype.unique1 = function () {
  var n = []; //一個新的臨時數組
  for (var i = 0; i < this.length; i++) //遍歷當前數組
  {
    //若是當前數組的第i已經保存進了臨時數組，那麼跳過，
    //不然把當前項push到臨時數組裏面
    if (n.indexOf(this[i]) == -1) n.push(this[i]);
  }
  return n;
}

Array.prototype.unique2 = function()
{
    var n = {},r=[]; //n爲hash表，r爲臨時數組
    for(var i = 0; i < this.length; i++) //遍歷當前數組
    {
        if (!n[this[i]]) //若是hash表中沒有當前項
        {
            n[this[i]] = true; //存入hash表
            r.push(this[i]); //把當前數組的當前項push到臨時數組裏面
        }
    }
    return r;
}

Array.prototype.unique3 = function()
{
    var n = [this[0]]; //結果數組
    for(var i = 1; i < this.length; i++) //從第二項開始遍歷
    {
        //若是當前數組的第i項在當前數組中第一次出現的位置不是i，
        //那麼表示第i項是重複的，忽略掉。不然存入結果數組
        if (this.indexOf(this[i]) == i) n.push(this[i]);
    }
    return n;
}

HTTP狀態碼

100  Continue  繼續，通常在發送post請求時，已發送了http header以後服務端將返回此信息，表示確認，以後發送具體參數信息
200  OK   正常返回信息
201  Created  請求成功而且服務器建立了新的資源
202  Accepted  服務器已接受請求，但還沒有處理
301  Moved Permanently  請求的網頁已永久移動到新位置。
302 Found  臨時性重定向。
303 See Other  臨時性重定向，且老是使用 GET 請求新的 URI。
304  Not Modified  自從上次請求後，請求的網頁未修改過。

400 Bad Request  服務器沒法理解請求的格式，客戶端不該當嘗試再次使用相同的內容發起請求。
401 Unauthorized  請求未受權。
403 Forbidden  禁止訪問。
404 Not Found  找不到如何與 URI 相匹配的資源。

500 Internal Server Error  最多見的服務器端錯誤。
503 Service Unavailable 服務器端暫時沒法處理請求（多是過載或維護）。

cache-control

網頁的緩存是由HTTP消息頭中的「Cache-control」來控制的，常見的取值有private、no-cache、max-age、must-revalidate等，默認爲private。

Expires 頭部字段提供一個日期和時間，響應在該日期和時間後被認爲失效。容許客戶端在這個時間以前不去檢查（發請求），等同max-age的效果。可是若是同時存在，則被Cache-Control的max-age覆蓋。

Expires = "Expires" ":" HTTP-date

例如

Expires: Thu, 01 Dec 1994 16:00:00 GMT （必須是GMT格式）

若是把它設置爲-1，則表示當即過時

Expires和max-age均可以用來指定文檔的過時時間，可是兩者有一些細微差異

1.Expires在HTTP/1.0中已經定義，Cache-Control:max-age在HTTP/1.1中才有定義，爲了向下兼容，僅使用max-age不夠；
2.Expires指定一個絕對的過時時間(GMT格式),這麼作會致使至少2個問題：1)客戶端和服務器時間不一樣步致使Expires的配置出現問題。 2）很容易在配置後忘記具體的過時時間，致使過時來臨出現浪涌現象；

3.max-age 指定的是從文檔被訪問後的存活時間，這個時間是個相對值(好比:3600s),相對的是文檔第一次被請求時服務器記錄的Request_time(請求時間)

4.Expires指定的時間能夠是相對文件的最後訪問時間(Atime)或者修改時間(MTime),而max-age相對對的是文檔的請求時間(Atime)

若是值爲no-cache,那麼每次都會訪問服務器。若是值爲max-age,則在過時以前不會重複訪問服務器。

js操做獲取和設置cookie

//建立cookie
function setCookie(name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if (expires instanceof Date) {
        cookieText += '; expires=' + expires;
    }
    if (path) {
        cookieText += '; expires=' + expires;
    }
    if (domain) {
        cookieText += '; domain=' + domain;
    }
    if (secure) {
        cookieText += '; secure';
    }
    document.cookie = cookieText;
}

//獲取cookie
function getCookie(name) {
    var cookieName = encodeURIComponent(name) + '=';
    var cookieStart = document.cookie.indexOf(cookieName);
    var cookieValue = null;
    if (cookieStart > -1) {
        var cookieEnd = document.cookie.indexOf(';', cookieStart);
        if (cookieEnd == -1) {
            cookieEnd = document.cookie.length;
        }
        cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
    }
    return cookieValue;
}

//刪除cookie
function unsetCookie(name) {
    document.cookie = name + "= ; expires=" + new Date(0);
}

原文地址：https://github.com/hawx1993/Front-end-Interview-questions 

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程