前端理論知識總結（面試題）

1. 語義化的理解？

用正確而標籤作正確的事，不只便於機器理解，也便於人理解。

    2. HTML5的離線儲存？

• localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

• sessionStorage 數據在瀏覽器關閉後自動刪除。

    3. iframe缺點

• 頁面資源須要額外鏈入，會增長請求。

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

• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。

    4. css3 新增僞類

• :root (匹配文檔的根元素。在HTML中，根元素永遠是HTML)

• :empty (匹配沒有任何子元素的元素)

• :first-child (第一個元素)

• :last-child (最後一個元素)

• :only-child (匹配屬於其父元素的惟一子元素的每一個元素)

• :nth-child(n) (匹配屬於其父元素的第 N 個子元素)

• :nth-last-child(n) (匹配屬於其元素的第 N 個子元素的每一個元素,從最後一個子元素開始計數)

• :first-of-type (匹配屬於其父元素的特定類型的首個子元素的每一個元素)

• :last-of-type (匹配屬於其父元素的特定類型的最後一個子元素的每一個元素)

• :only-of-type (匹配父級元素下的爲一個一個E元素)

• :nth-of-type(n) (匹配屬於父元素的特定類型的第 N 個子元素的每一個元素.)

• :nth-last-of-type(n) (選擇器匹配屬於父元素的特定類型的第 N 個子元素的每一個元素，從最後一個子元素開始計數)

    5. cookies，sessionStorage 和 localStorage 的區別？

• cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage不會

• sessionStorage和localStorage的存儲空間更大，有更多豐富易用的接口；各自獨立的存儲空間；

    6. css 選擇器

• id選擇器（ # myid）

• 類選擇器（.myclassname）

• 標籤選擇器（div, h1, p

• 子選擇器（ul < li）

• 後代選擇器（li a）

• 屬性選擇器

• 僞類選擇器

• 相鄰選擇器（h1 + p）

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

　　<!DOCTYPE> 位於文檔中的最前面  聲明文檔的類型，告訴瀏覽器以什麼樣的規範來解析這個文檔。

 

    8.  瀏覽器的內核分別是什麼?  常常遇到的瀏覽器的兼容性有哪些？ 

         IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；

 

     ie6 png透明bug  使用 png8 git

     浮動雙邊界bug  浮動元素設置爲display:inline 

     fixed定位bug  使用absolute

    chorme 最小文字不能小於 12px  設置 text-size-adjust:none;

    

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

• HTML5 如今已經不是 SGML( 標準通用標記語言 ) 的子集，主要是關於圖像，視頻音頻，位置，存儲，多任務等功能的增長。

• 繪畫 canvas

• 用於媒介回放的 video 和 audio 元素

• 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；

• localStorrage 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；

  IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式.

  固然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

    10.  簡單比較 i b em strong 說出他們的相同點和差異

     em   語義的強調  表示內容的着重點（stress emphasis）

     strong 內容的強調 表示內容的重要性、嚴肅性和 緊迫性（emphasized text ） 

 

　　< b > < i > 是視覺要素（presentationl elements），單純樣式/風格  無感情色彩

 

　　b和i，一個是加粗，一個是斜體，都是視覺上的效果，而em和strong有情感色彩增強

 

    11.  介紹一下CSS的盒子模型？

行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
    span b i em strong a input button select
    div p table ul dl li 
    meta link img hr br input

13. link 和@import 的區別是？
IE 盒子模型、 標準盒子模型；  IE 的寬高部分包含了 border 和 pading margin;
     盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border). 寬高只指代內容區的寬高。

12. 

如何居中div？
     左右margin  auto inline-block 居中   定位 + 負邊框 （1）、link屬於XHTML標籤，而@import徹底是CSS提供的一種方式;

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

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

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

14. 

 
15. 爲何要初始化CSS樣式。
    考慮到瀏覽器兼容性問題 每不一樣瀏覽器對每一個便籤的默認樣式是不一樣的， 爲了保證頁面內容在不一樣瀏覽器中擁有一致性的表現，因此要作重置。
16.頁面重構怎麼操做？

根據原有頁面內容和結構的基礎上，經過當前主流的html + css版本，寫出符合web標準的頁面結構。

具體包括：

1. 結構完整，可經過標準驗證

2. 標籤 語義化，結構合理

3. 充分考慮到頁面在站點中的「做用和重要性」，並對其進行有針對性的優化

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

 block inline inling-block none table table-cell 

  2.2 CSS3有哪些新特性？

   邊框的 圓角 邊框背景 邊框陰影

   陰影 文字陰影 

  線性漸變

  2d動畫  transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜

  過渡 transtion 

     

transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。默認是 0。	3
transition-timing-function	規定過渡效果的時間曲線。默認是 "ease"。	3
transition-delay	規定過渡效果什麼時候開始。默認是 0。

  動畫： animation 

    @keyframes

    

 

  背景： background-size 屬性規定背景圖片的尺寸。

           background-origin 屬性規定背景圖片的定位區域。

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

   只使用過 less 

4. 對BFC規範的理解？

    塊級格式化上下文： 是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。

    1.經過邊緣不和浮動元素重疊的特性，實現兩欄結構。

    2.清除元素內部浮動

    3.解決合併外邊距的問題

Javascript 

  3.1. js延遲加載的方式有哪些

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

   2. 函數表達式和函數聲明

    一個函數表達式產生一個值(一個函數). 一個函數聲明將一個匿名函數賦值給一個變量.

   解析器會率先讀取函數聲明，並使其在執行任何代碼以前可用；而函數表達式，則必須等到解析器執行到它所在的代碼行，纔會真正被解釋執行。 函數表達式能夠被當即調用。

    3.3  eval是作什麼的？

　　　　將字符串轉化爲解釋成Javascript代碼，而且執行.

           應該避免使用eval，不安全，很是耗性能（2次，一次解析成js語句，一次執行）。

  3.4   null，undefined 的區別？

    null是一個表示"無"的對象，轉爲數值時爲0；undefined是什麼都沒有。

    通常定義了變量或屬性 但未賦值時 爲 undefined;

   3.5 談一下node.js

 

     其特色爲：它是一個Javascript運行環境 ,依賴於Chrome V8引擎進行代碼解釋

     事件驅動 非阻塞I/O 輕量、可伸縮，適於實時數據交互應用 單進程，單線程.

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

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

    number string boolean   array object  null undefined;

3.7 Javascript如何實現繼承？

    經過原型和構造器

3.8 談談This對象的理解。

  指向當前的做用域，使用場合不一樣，this的值會發生變化。

  全局做用域  函數中的this  方法調用  apply式的調用 。

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

     事件是能夠被 JavaScript 偵測到的行爲。 常見的事件包括 鼠標事件 鍵盤事件 頁面相關事件 表單事件

    ie低版本只有冒泡 標準瀏覽器的事件包括 捕獲和冒泡兩個階段 e.stopPropagation()  e.preventDefault();  

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

   函數經過做用域相互關聯起來， 函數內部的函數在做用域外存在引用，就造成了一個閉包。

    它保存了函數所在做用域的做用域鏈 ， 能夠在函數外部讀取函數內部的變量，並讓這些變量的值始終保持在內存中。

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

        嚴格模式

     - 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;

　　- 消除代碼運行的一些不安全之處，保證代碼運行的安全；

　　- 提升編譯器效率，增長運行速度；

　　- 爲將來新版本的Javascript作好鋪墊。

     壞處是低版本瀏覽器不支持。

 

     全局變量顯式聲明，  靜態綁定， 加強的安全措施  重名錯誤   函數必須聲明在頂層

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

    instanceof 

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

   1. 建立一個新的對象

   2. 把函數的原型，賦值給新對象的原型

   3. 以新對像的this 爲指向，調用構造函數 返回這個新的對象。

3.14    刪選 過濾掉原型屬性和方法

    hasOwnProperty

3.15 JSON 的瞭解？

    一種輕量級的數據交換格式，它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小

 

3.16 如何解決跨域問題

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

 

3.17 模塊化怎麼作？

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

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

　　更改對象的this指向，apply第二個參數爲數組， call 須要依次傳入參數。

其餘：

1. 你認爲前端應該如何高質量完成工做? 

精確地實現效果圖；
與設計師，產品經理，和交互的的充分溝通；
優化頁面結構和用戶體驗；
作hack，處理兼容、寫出優美的代碼格式；

針對服務器的優化、擁抱 HTML5。

 

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

     github 獲取學習開源資源

　　stackoverflow  解決和查詢一些工做中遇到的問題和疑惑

     博客園  總結和交流一些前端的知識

     w3cfuns  交流學習

 

    淘寶ued  百度 fex 前端研發團隊   騰訊isux研究院 allowyTeam;

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

    jquery yui kissy    chorme developer tools   Fiddler   jshint

    backbone angular ember knockout 

    slide  tab dialog  accordion scrollspy

4. 什麼是面向對象，有什麼特色？

    把具體事務抽象化，歸結爲類，具備該類問題的屬性 和解決處理問題的方法。

    基本特徵是 封裝、繼承、和多態   javascript中經過原型實現繼承 之前主流的方式是 構造函數+ 原型繼承

    如今 Object.create();  

5. W3C標準的理解

    萬維網聯盟 w3c 標準不是某一個標準，而是一系列標準的集合。網頁主要由三部分組成：結構（Structure）、表現（Presentation）和行爲（Behavior）。 

    對應的標準也分三方面  結構化標準語言html XML標準  表現化標準 css  行爲標準DOM ecmascript