面試題目總結（前端）

css3裏面動畫的元素叫啥( 就是設置動畫的對象 好比給div設置一個動畫寬度從0到100 這個div就是動畫元素)

 

怎麼把字符串變成json  

JSON.stringify()

 

typeof返回一個對象   怎麼判斷對象是否是空，怎麼知道對象裏的值

判斷是否爲空

 

一、if   (typeOf(x)   ==   "undefined")

 

二、if   (typeOf(x)   !=   "object")

獲取對象的值 

用[] for in循環取出對象值

test=new a(1,2);
for(var key in test){
alert(test[key]);
break;
}

直接經過對象.屬性的方式

var obj={a:1};//定義一個對象

alert(obj.a); //訪問屬性a

alert(obj[ 'a' ]); //訪問屬性a

 

 

psraeint和number區別，

int類型是number類型的一個子集

int類型只能存儲整數;
number能夠存儲浮點數，也能夠存儲整數；
number(8,1)存儲小數位爲1位，總長度爲8的浮點數，若是小數位數不足，則用0補全；
number(8)存儲總長度爲8的整數；
int至關於number(22),存儲總長度爲22的整數。

2016面試題目

 

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

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

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

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

 　（4）、DOCTYPE不存在或格式不正確會致使文檔以混雜模式呈現,若是存在就默認以標準的模式運行。

 

 　二、行內元素有哪些？塊級元素有哪些？ 

 　（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  

 

 　三、link 和@import 的區別是？

  引入CSS的方法有兩種，一種是@import，一種是link 

@import url('地址');
<link href="地址" rel="stylesheet" type="text/css" />
如今絕大部分的網站都採用後一種link方式，緣由在於
@import先加載HTML，後加載CSS
link先加載CSS，後加載HTML。

因此前者加載網頁會出現令瀏覽者之外的格式，後者則是帶格式的加載網頁。

 （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；

 

 　五、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

 

 六、對語義化如何理解？

 　用正確的標籤作正確的事情！

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

 

 　7、HTML5的離線儲存有幾種方式？

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

 

 　8、iframe有那些缺點？

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

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

 

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

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

 

 

 

     最新前端開發工程師面試題——CSS部分

 

1、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 比 內聯優先級高

 

  　2、CSS3新增僞類舉例：

  　　p:first-of-type 選擇屬於其父元素的首個元素的每一個元素。

  　p:last-of-type  選擇屬於其父元素的最後元素的每一個元素。

  　p:only-of-type  選擇屬於其父元素惟一的元素的每一個元素。

  　p:only-child    選擇屬於其父元素的惟一子元素的每一個元素。

  p:nth-child(2)  選擇屬於其父元素的第二個子元素的每一個元素。

  　:enabled  :disabled 控制表單控件的禁用態。

  :checked單選框或複選框被選中。

 

  　3、如何居中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;相對定  位  //方便看效果  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 屬性的值。

 

4、爲何要初始化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; } 

 

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

 

一個 block-level element ('display' 屬性值爲 'block', 'list-item' 或是 ‘table’) 會生成一個 block-level box，這樣的盒子會參與到 block-formatting context (一種佈局的方式) 中。
block formatting context
在這種佈局方式下，盒子們自所在的 containing block 頂部起一個接一個垂直排列，水平方向上撐滿整個寬度 (除非內部的盒子本身內部創建了新的 BFC)。
containing block
通常來講，盒子自己就爲其子孫創建了 containing block，用來計算內部盒子的位置、大小，而對內部的盒子，具體採用哪一個 containing block 來計算，須要分狀況來討論：

若此元素爲 inline 元素，則 containing block 爲可以包含這個元素生成的第一個和最後一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
不然則由這個祖先元素的 padding box 構成。
根元素所在的 containing block 被稱爲 initial containing block，在咱們經常使用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形；
對於 position 爲 static 或 relative 的元素，其 containing block 爲祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區域)；
對於 position:fixed 的元素，其 containing block 由 viewport 創建；
對於 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，而後判斷：
若是都找不到，則爲 initial containing block。

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

 

總的來講，能夠把它看做是一個相似優先級的機制， "position:absolute" 和 "position:fixed" 優先級最高，有它存在的時候，浮動不起做用，'display' 的值也須要調整； 其次，元素的 'float' 特性的值不是 "none" 的時候或者它是根元素的時候，調整 'display' 的值； 最後，非根元素，而且非浮動元素，而且非絕對定位的元素，'display' 特性值同設置值。

這從另外一個側面說明了一個問題：浮動或絕對定位的元素，只能是塊元素或表格。

1. 'display' 的值爲 'none'

若是 'display' 的值爲 'none'，那麼 'position' 和 'float' 不起做用。在這種狀況下，元素不產生框。所以浮動和定位無效。

2. 'position' 的值是 'absolute' 或 'fixed'

不然，若是 'position' 的值是 'absolute' 或 'fixed'，框就是絕對定位的，'float' 計算後的值應該是 'none'，而且，'display' 會被按照上表設置。 框的位置將由 'top'，'right'，'bottom' 和 'left' 屬性和該框的包含塊肯定。

也就是說，當元素是絕對定位時，浮動失效，'display' 會被按規則重置。

 2、position跟display、overflow、float下的margin collapse。

margin collapse我以爲這裏的意思應該是Collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 (margin) 會合併成一個外邊距。

其中所說的 margin 毗鄰，能夠歸結爲如下兩點：

• 這兩個或多個外邊距沒有被非空內容、padding、border 或 clear 分隔開。
• 這些 margin 都處於普通流中。

1.兩個或多個毗鄰的普通流中的塊元素垂直方向上的 margin 會摺疊。

注意一點，在沒有被分隔開的狀況下，一個元素的 margin-top 會和它普通流中的第一個子元素(非浮動元素等)的 margin-top 相鄰； 只有在一個元素的 height 是 "auto" 的狀況下，它的 margin-bottom 纔會和它普通流中的最後一個子元素(非浮動元素等)的 margin-bottom 相鄰。

示例代碼：

 

 

7、對BFC規範的理解？

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

 

　8、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{} 若是權重相同，則最後定義的樣式會起做用，可是應該避免這種狀況出現

 

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

 浮動的定義

使元素脫離文檔流 按照指定方向發生位移 遇到父級邊界或者相鄰的浮動元素聽了下來

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣

 清除浮動：1.加一個div 設置css爲clear:both  或者 2.直接給須要清除浮動的元素設置css overflow:hidden  (通常推薦第一種方式)

 

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

   用過 好比說在jquerymobbile中使用表單時就須要使用媒體查詢來讓 label標籤中的內容與input標籤中的內容顯示在一行 而且不一樣分辨率下面他們所佔的寬度也有所不一樣

 

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

 三種預處理器

1.SASS  是2007年誕生，最先也是最成熟的CSS預處理器，擁有ruby社區的支持和compass這一最強大的css框架，目前受LESS影響，已經進化到了全面兼容CSS的SCSS。

2.LESS2009年出現，受SASS的影響較大，但又使用CSS的語法，讓大部分開發者和設計師更容易上手，在ruby社區以外支持者遠超過SASS，其缺點是比起SASS來，可編程功能不夠，不過優勢是簡單和兼容CSS，反過來也影響了SASS演變到了SCSS的時代，著名的Twitter Bootstrap就是採用LESS作底層語言的。
3.Stylus，2010年產生，來自Node.js社區，主要用來給Node項目進行CSS預處理支持，在此社區以內有必定支持者，在普遍的意義上人氣還徹底不如SASS和LESS。

    目前選擇的是LESS，有不少開源項目都使用他，能夠閱讀學習。他沒有SASS要求那麼嚴謹，好比要mixin（中文不知道怎麼翻譯）時，SASS要求被mixin樣式須要     添加聲明，調用時也要求調用。

 

　　12、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 

 

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

 

 14、介紹一下CSS的盒子模型？

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

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

 

1.對WEB標準以及W3C的理解與認識？

 標籤閉合、標籤小寫、不亂嵌套、提升搜索機器人搜索概率、使用外鏈css和js腳本、結構行爲表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件，容易維護、改版方便，不須要變更頁面內容、提供打印版本而不須要複製內容、提升網站易用性;

 

 　2.XHTML和HTML有什麼區別？

 　HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言

　　最主要的不一樣：
　　XHTML 元素必須被正確地嵌套。
　　XHTML 元素必須被關閉。
　　標籤名必須用小寫字母。

  　XHTML 文檔必須擁有根元素。

 

 　3.Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?

 用於聲明文檔使用那種規範(HTML/XHTML)通常爲 嚴格 過分 基於框架的html文檔

 加入XMl聲明可觸發，解析方式更改成IE5.5 擁有IE5.5的bug

 

  　4.行內元素有哪些?塊級元素有哪些?CSS的盒模型?

  　塊級元素：div p h1 h2 h3 h4 form ul

　　行內元素: a b br i span input select

  　Css盒模型:內容，border ,margin，padding

 

  　5.CSS引入的方式有哪些? link和@import的區別是?

  內聯內嵌外鏈導入

　　區別 ：同時加載
　　前者無兼容性，後者CSS2.1如下瀏覽器不支持

  　Link 支持使用javascript改變樣式，後者不可

 

  6.CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先級高?

  標籤選擇符類選擇符 id選擇符

　　繼承不如指定 Id>class>標籤選擇

  　後者優先級高

 

  7.前端頁面有哪三層構成，分別是什麼?做用是什麼?

  　結構層 HTML 表示層 CSS 行爲層 js

 

  　8.CSS的基本語句構成是?

  　選擇器{屬性1:值1;屬性2:值2;……}

 

 9.你作的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什麼?

  　Ie(Ie內核) 火狐(Gecko) 谷歌(webkit) opear(Presto)

 

  　10.寫出幾種IE6 BUG的解決方法

  　1.雙邊距BUG float引發的 使用display

　　2.3像素問題 使用float引發的 使用dislpay:inline -3px
　　3.超連接hover 點擊後失效 使用正確的書寫順序 link visited hover active
　　4.Ie z-index問題 給父級添加position:relative
　　5.Png 透明 使用js代碼 改
　　6.Min-height 最小高度 !Important 解決’
　　7.select 在ie6下遮蓋 使用iframe嵌套
　　8.爲何沒有辦法定義1px左右的寬度容器(IE6默認的行高形成的，使用over:hidden,zoom:0.08 line-height:1px)

  　9.ie 6 不支持!important

 

  　11.img標籤上title與alt屬性的區別是什麼?

  　Alt 當圖片不顯示是 用文字表明。

  　Title 爲該屬性提供信息

 

  　12.描述css reset的做用和用途。

  　Reset重置瀏覽器的css默認屬性 瀏覽器的品種不一樣，樣式不一樣，而後重置，讓他們統一

 

  13.解釋css sprites，如何使用。

  Css 精靈 把一堆小的圖片整合到一張大的圖片上，減輕服務器對圖片的請求數量

 

  14.瀏覽器標準模式和怪異模式之間的區別是什麼?

  　盒子模型渲染模式的不一樣

  使用 window.top.document.compatMode 可顯示爲何模式

 

 　15.你如何對網站的文件和資源進行優化?期待的解決方案包括：

     文件合併

　　文件最小化/文件壓縮
　　使用CDN託管

  　緩存的使用

 

  16.什麼是語義化的HTML?

  　直觀的認識標籤對於搜索引擎的抓取有好處

 

  　17.清除浮動的幾種方式，各自的優缺點

  　1.使用空標籤清除浮動 clear:both(理論上能清楚任何標籤，增長無心義的標籤)

　　2.使用overflow:auto(空標籤元素清除浮動而不得不增長無心代碼的弊端,,使用zoom:1用於兼容IE)

    3.是用afert僞元素清除浮動(用於非IE瀏覽器)

 

    18.css hack

   　_marging \\IE 6

　　+margin \\IE 7
　　Marging:0 auto \9 全部Ie

    Margin \0 \\IE 8

 

  Javascript部分

  　1.javascript的typeof返回哪些數據類型

    Object number function boolean underfind

 

 　2.例舉3種強制類型轉換和2種隱式類型轉換?

   強制（parseInt,parseFloat,number）

  隱式（== – ===）

 　3.split() join() 的區別

   前者是切割成數組的形式，後者是將數組轉換成字符串

 　4.數組方法pop() push() unshift() shift()

  　Push()尾部添加 pop()尾部刪除

  　Unshift()頭部添加 shift()頭部刪除

 　5.事件綁定和普通事件有什麼區別

  總結：普通事件中的onclick是DOM0級事件只支持單個事件，會被其餘onclick事件覆蓋，而事件綁定中的addEventListener是DOM2級事件能夠添加多個事件而     不    用擔憂被覆蓋

　　6.IE和DOM事件流的區別

     1.執行順序不同、

     2.參數不同

  　3.事件加不加on

  　4.this指向問題

 

 7.IE和標準下有哪些兼容性的寫法

  　Var ev = ev || window.event

    document.documentElement.clientWidth || document.body.clientWidth

  　Var target = ev.srcElement||ev.target

 　8.ajax請求的時候get 和post方式的區別
  　一個在url後面 一個放在虛擬載體裏面

  　有大小限制

   　安全問題

   　應用不一樣一個是論壇等只須要請求的，一個是相似修改密碼的

 　9.call和apply的區別
   Object.call(this,obj1,obj2,obj3)

 　Object.apply(this,arguments)

   10.ajax請求時，如何解釋json數據
    使用eval parse 鑑於安全性考慮 使用parse更靠譜（也就是把JSON數據轉化爲數組或對象）

 

      11.b繼承a的方法

　　12.JavaScript this指針、閉包、做用域


　　13.事件委託是什麼
    讓利用事件冒泡的原理，讓本身的所觸發的事件，讓他的父元素代替執行！

　　14.閉包是什麼，有什麼特性，對頁面有什麼影響

 　閉包就是可以讀取其餘函數內部變量的函數。

　15.如何阻止事件冒泡和默認事件
　canceBubble return false

　16.添加 刪除 替換 插入到某個接點的方法
　obj.appendChidl()

　obj.replaceChild

　obj.removeChild

　17.解釋jsonp的原理，以及爲何不是真正的ajax

　動態建立script標籤，回調函數

　Ajax是頁面無刷新請求數據操做

　18.javascript的本地對象，內置對象和宿主對象
　本地對象爲array obj regexp等能夠new實例化

　內置對象爲gload Math 等不能夠實例化的

宿主爲瀏覽器自帶的document,window 等

　　19.document load 和document ready的區別
　  Document.onload 是在結構和樣式加載完才執行js

　　Document.ready原生種沒有這個方法，jquery中有 $().ready(function)

　　20.」==」和「===」的不一樣
  　前者會自動轉換類型

    後者不會

　　21.javascript的同源策略
　一段腳本只能讀取來自於同一來源的窗口和文檔的屬性，這裏的同一來源指的是主機名、協議和端口號的組合

　　22.編寫一個數組去重的方法

   function oSort(arr)

　　{
　　var result ={};
　　var newArr=[];
　　for(var i=0;i<arr.length;i++)
　　{
　　if(!result[arr])
　　{
　　newArr.push(arr)
　　result[arr]=1
　　}
　　}
　　return newArr
　　}
</arr.length;i++)

1.自我評價一下HTML/CSS/JS的掌握狀況

 

 

2.簡述HTML常用的標籤和做用。

 　Div/a/p/span/li/ul/ol/table/tr/td

 

　3.你認爲最常遇到的兼容Bug有哪些?有哪些問題是你認爲解決起來最麻煩的?

 　IE6 PNG

  IE6 Fixed

 

　4.塊級元素和行內元素都有哪些? 行內元素有哪些特色?


　　5.介紹所知道的CSS hack技巧(如：_， *， +， \9， !important 之類)


　　6.CSS定位方式有哪些?position屬性的值有哪些?他們之間的區別是什麼?


　　在CSS中關於定位的內容是：position:relative | absolute | static | fixed


　　•    static 沒有特別的設定，遵循基本的定位規定，不能經過z-index進行層次分級。


　　•    relative 不脫離文檔流，參考自身靜態位置經過 top,bottom,left,right 定位，而且能夠經過z-index進行層次分級。


　　•    absolute 脫離文檔流，經過 top,bottom,left,right 定位。選53D6其最近的父級定位元素，當父級 position 爲 static 時，absolute元素將以body座標原點進行定位，能夠經過z-index進行層次分級。


　　•    fixed 固定定位，這裏他所固定的對像是可視窗口而並不是是body或是父級元素。可經過z-index進行層次分級。


　　7.函數的幾種定義方法？

　function a(){},
　var a = function(){}


　　8.對象的定義方法？

　a = new Object(), a = {}


　　9.類的定義方法（prototype）（繼承）

　Var a = function(){}
a.prototype = {}
　new a();


　　10.this 關鍵字的指向
obj.foo() == obj        //方法調用模式,this指向obj
　foo() == window;         //函數調用模式,this指向window
new obj.foo() == obj    //構造器調用模式, this指向新創建對象
　foo.call(obj) == obj;//APPLY調用模式,this指向obj


　　11.什麼是閉包，及其做用是什麼？

 

　　12.事件綁定的幾種方法，事件冒泡？


　　13.Ajax/json/json0070？


　　14.異步ajax的優缺點都有什麼？


　　優勢：


　　•    相對於同步ajax：不會形成UI卡死，用戶體驗好。


　　•    相對於刷新頁面，省流量


　　缺點：

　•    後退按鈕無效；
•    多個請求同時觸發時，因爲回調時間不肯定，會形成混亂，避免這種混亂須要複雜的判斷機制。
　•    搜索引擎不友好
　•    數據安全


　　15.經常使用JS框架都有什麼？是否使用過jQuery，以及jQuery的優勢是什麼？


　　16.JS用了多久，介紹一下本身作過的JS項目？


　　17.開發調試工具和方法都有什麼（編輯器、瀏覽器）


　　18.類、函數、對象（代碼表達）


　　19.閉包（setTimeout）（產生兩個首尾相連的計時器）（使用for循環產生10個計時器）||


　　20.Jquery Mobile 相關


　　21.HTML5/CSS3的掌握狀況


　　22.是否據說過和理解webapp？


　　23.我的擅長的語言，優缺點都是什麼？


　　24.介紹一下曾經參與過的項目經驗，合做開發、獨立開發


　　25.編程的重要知識？


　　26.開發過程當中遇到困難，如何解決？


　　27.有沒有我的/開源項目

 

　　28.前端開發（HTML/CSS/）

 

 

 

最新前端開發工程師面試題——JavaScript部分

 

　　1、eval是作什麼的？

 

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

 

　　2、Node.js的適用場景？

 

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

 

　　3、介紹js的基本數據類型。

 　number,string,boolean,object,undefined

 

　　4、Javascript如何實現繼承？

 

　　經過原型和構造器

 

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

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

 

　6、談談This對象的理解。

 　this是js的一個關鍵字，隨着函數使用場合不一樣，this的值會發生變化。可是有一個總原則，那就是this指的是當前調用函數的那個對象。this通常狀況下：是全局對象Global。 做爲方法調用，那麼this就是指這個對象 

 

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

（1） 咱們在網頁中的某個操做（有的操做對應多個事件）。例如：當咱們點擊一個按鈕就會產生一個事件。是能夠被 JavaScript 偵測到的行爲。   

 （2） 事件處理機制：IE是事件冒泡、火狐是 事件捕獲； 

　（3） ev.stopPropagation();

 

　8、什麼是閉包（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  

 

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

 　使用instanceof （待完善）   if(a instanceof Person){       alert('yes');   }

 

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

 　hasOwnProperty

 

 11、對JSON 的瞭解？

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

 

2016年Web前端面試題目彙總

如下是收集一些面試中常常會遇到的經典面試題以及本身面試過程當中沒法解決的問題，經過對知識的整理以及經驗的總結，從新鞏固自身的前端基礎知識，若有錯誤或更好的答案，歡迎指正。:）

 

HTML/CSS部分

 

1、什麼是盒子模型？

在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。

 

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

行內元素：a、b、span、img、input、strong、select、label、em、button、textarea

塊級元素：div、ul、li、dl、dt、dd、p、h1-h6、blockquote

空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img

 

3、CSS實現垂直水平居中

 一道經典的問題，實現方法有不少種，如下是其中一種實現：

HTML結構：

<div class="wrapper">

 <div class="content"></div>

 </div>

 

CSS：

.wrapper{position:relative;}

  .content{

   width:200px;

    height:200px;

  position: absolute;        //父元素須要相對定位

   top: 50%;

   left: 50%;

  margin-top:-100px ;   //二分之一的height，width

  margin-left: -100px;

  }

 

4、簡述一下src與href的區別

href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。

src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。

 

5、什麼是CSS Hack?

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。

IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack（詳細參考CSS文檔：css文檔）。例如：

// 1、條件Hack

  <!--[if IE]>

   <style>

      .test{color:red;}

   </style>

   <![endif]-->

  // 2、屬性Hack

  .test{

  color:#0909; /* For IE8+ */

  *color:#f00;  /* For IE7 and earlier */

  _color:#ff0;  /* For IE6 and earlier */

   }

 

   // 3、選擇符Hack

  * html .test{color:#090;}       /* For IE6 and earlier */

  * + html .test{color:#ff0;}     /* For IE7 */

 

6、簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。

同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；

異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。

 

7、px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。

瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

 

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

漸進加強 progressive enhancement：

針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

 優雅降級 graceful degradation：

一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。

 區別：

a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給

b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要

c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶

 

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

IE: trident內核

Firefox：gecko內核

Safari：webkit內核

Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核

Chrome：Blink(基於webkit，Google與Opera Software共同開發)

 

JavaScript部分

1、怎樣添加、移除、移動、複製、建立和查找節點？

1）建立新節點

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

 

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

 

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

 

 

 

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

 

 

 

appendChild() //添加

 

removeChild() //移除

 

replaceChild() //替換

 

insertBefore() //插入

 

 

 

3）查找

 

 

 

getElementsByTagName() //經過標籤名稱

 

getElementsByName() //經過元素的Name屬性的值

 

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

 

 

 

2、實現一個函數clone，能夠對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值複製。

 

 

 

  /**

 

 * 對象克隆

 

 * 支持基本數據類型及對象

 

 * 遞歸方法

 

 */

 

function clone(obj) {

 

    var o;

 

    switch (typeof obj) {

 

        case "undefined":

 

            break;

 

        case "string":

 

            o = obj + "";

 

            break;

 

        case "number":

 

            o = obj - 0;

 

            break;

 

        case "boolean":

 

            o = obj;

 

            break;

 

        case "object": // object 分爲兩種狀況 對象（Object）或數組（Array）

 

            if (obj === null) {

 

                o = null;

 

            } else {

 

                if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {

 

                    o = [];

 

                    for (var i = 0; i  obj.length; i++) {

 

                        o.push(clone(obj[i]));

 

                    }

 

                } else {

 

                    o = {};

 

                    for (var k in obj) {

 

                        o[k] = clone(obj[k]);

 

                    }

 

                }

 

            }

 

            break;

 

        default:

 

            o = obj;

 

            break;

 

    }

 

    return o;

 

}

 

 

 

3、如何消除一個數組裏面重復的元素？

 

 

 

// 方法一：

 

var arr1 =[1,2,2,2,3,3,3,4,5,6],

 

    arr2 = [];

 

for(var i = 0,len = arr1.length; i< len; i++){

 

    if(arr2.indexOf(arr1[i]) < 0){

 

        arr2.push(arr1[i]);

 

    }

 

}

 

document.write(arr2); // 1,2,3,4,5,6

 

 

 

4、想實現一個對頁面某個節點的拖曳？如何作？（使用原生JS）。

 

 

 

5、在Javascript中什麼是僞數組？如何將僞數組轉化爲標準數組？

 

 

 

僞數組（類數組）：沒法直接調用數組方法或指望length屬性有什麼特殊的行爲，但仍能夠對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬於僞數組。可使用Array.prototype.slice.call(fakeArray)將數組轉化爲真正的Array對象。

 

 

 

function log(){

 

      var args = Array.prototype.slice.call(arguments);  

 

//爲了使用unshift數組方法，將argument轉化爲真正的數組

 

      args.unshift('(app)');

 

 

 

      console.log.apply(console, args);

 

};

 

 

 

6、Javascript中callee和caller的做用？

 

 

 

caller是返回一個對函數的引用，該函數調用了當前函數；

 

 

 

callee是返回正在被執行的function函數，也就是所指定的function對象的正文。

 

 

 

7、請描述一下cookies，sessionStorage和localStorage的區別

 

 

 

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

 

 

 

web storage和cookie的區別

 

 

 

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

 

除此以外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。可是Cookie也是不能夠或缺的：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

 

 

 

8、手寫數組快速排序

 

 

 

關於快排算法的詳細說明，能夠參考阮一峯老師的文章快速排序

 

「快速排序」的思想很簡單，整個排序過程只須要三步：

 

（1）在數據集之中，選擇一個元素做爲」基準」（pivot）。

 

（2）全部小於」基準」的元素，都移到」基準」的左邊；全部大於」基準」的元素，都移到」基準」的右邊。

 

（3）對」基準」左邊和右邊的兩個子集，不斷重複第一步和第二步，直到全部子集只剩下一個元素爲止。

 

 

 

9、統計字符串」aaaabbbccccddfgh」中字母個數或統計最多字母數。

 

 

 

var str = "aaaabbbccccddfgh";

 

var obj  = {};

 

for(var i=0;istr.length;i++){

 

    var v = str.charAt(i);

 

    if(obj[v] & obj[v].value == v){

 

        obj[v].count = ++ obj[v].count;

 

    }else{

 

        obj[v] = {};

 

        obj[v].count = 1;

 

        obj[v].value = v;

 

    }

 

}

 

for(key in obj){

 

    document.write(obj[key].value +'='+obj[key].count+' '); // a=4  b=3  c=4  d=2  f=1  g=1  h=1

 

}

 

 

 

10、寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）

 

 

 

function trim(str) {

 

    if (str & typeof str === "string") {

 

        return str.replace(/(^s*)|(s*)$/g,""); //去除先後空白符

 

    }

 

}

 

 

 

其餘

 

 

 

1、一次完整的HTTP請求是怎樣的一個過程？

 

 

 

基本流程：

 

 

 

a. 域名解析

 

 

 

b. 發起TCP的3次握手

 

 

 

c. 創建TCP鏈接後發起http請求

 

 

 

d. 服務器端響應http請求，瀏覽器獲得html代碼

 

 

 

e. 瀏覽器解析html代碼，並請求html代碼中的資源

 

 

 

f. 瀏覽器對頁面進行渲染呈現給用戶

 

 

 

2、對前端工程師這個職位你是怎麼樣理解的？

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

 

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

 

 

1,   js的幾中數據類型？

3中基本的數據類型： 布爾型 字符串 數字

兩種引用型：對象 數組；

2中特殊型：underfine  null

2,js基本的內置對象 ？

date   XHTML  

String（）、Number（）、Boolean（）、RegExp（）、Date（）、Error()、Array（）、

Function（）、Object（）、symbol（）;相似於對象的構造函數

 

3.如何判段一個對象屬於哪一種類型？

instance of  

判斷爲array   console.log(instance of array) 是的話返回true

4.對json數據的理解；

json數據是先後端數據交互的語言 ，ajax請求的數據就是以json的格式 在數據傳輸過程當中json是以文本也就是字符串的形式傳遞的因此json數據的解析，與序列化很重要

 json數據的解析（json對象轉換爲js字符串或數組）

eval()

JSON.parse()

 json數據的序列化（js字符串或數組轉化爲json對象）

stringgify()

 

5.js延遲加載的方法有哪些？

     1.頁面初始化 window.onload();

　　2.把javascrip 或csst放在底部加載 （先讓頁面加載出來再加載js/css）

　　3.用ajax下載代碼放在eval()中執行；

　　4， 在引用javascript時添加defer=defer

　　<script type="text/javascript"  defer="defer">

6.ajax是什麼？ 交互模型？同步和異步的區別？如何解決？


什麼是面向過程什麼是面向對象
面向過程就是分析出解決問題所須要的步驟，而後用函數把這些步驟一步一步實現，使用的時候一個一個依次調用就能夠了。 
面向對象是把構成問題事務分解成各個對象，創建對象的目的不是爲了完成一個步驟，而是爲了描敘某個事物在整個解決問題的步驟中的行爲。