前端面試題2

談談之前端角度出發作好SEO須要考慮什麼

一、瞭解搜索引擎如何抓取網頁和如何索引網頁 
  你須要知道一些搜索引擎的基本工做原理，各個搜索引擎之間的區別，搜索機器人（SE robot 或叫 web cra何進行工做，搜索引擎如何對搜索結果進行排序等等。  

 二、Meta標籤優化 
  主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字好比Au者），Category（目錄），Language（編碼語種）等。  

 三、如何選取關鍵詞並在網頁中放置關鍵詞 
  搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工做之一。首先要給網站肯定主關鍵詞（通常在5個上後針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。

  四、瞭解主要的搜索引擎 
  雖然搜索引擎有不少，可是對網站流量起決定做用的就那麼幾個。好比英文的主要有Google，Yahoo，Bing等有百度，搜狗，有道等。不一樣的搜索引擎對頁面的抓取和索引、排序的規則都不同。還要了解各搜索門戶和搜索的關係，好比AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。  

 五、主要的互聯網目錄   Open Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。  

 六、按點擊付費的搜索引擎 
  搜索引擎也須要生存，隨着互聯網商務的愈來愈成熟，收費的搜索引擎也開始大行其道。最典型的有Overture固然也包括Google的廣告項目Google Adwords。愈來愈多的人經過搜索引擎的點擊廣告來定位商業網站，這裏面化和排名的學問，你得學會用最少的廣告投入得到最多的點擊。  

 七、搜索引擎登陸 
  網站作完了之後，別躺在那裏等着客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）擎。若是你的是商業網站，主要的搜索引擎和目錄都會要求你付費來得到收錄（好比Yahoo要299美圓），可是好消少到目前爲止）最大的搜索引擎Google目前仍是免費，並且它主宰着60％以上的搜索市場。

   八、連接交換和連接普遍度（Link Popularity） 
  網頁內容都是以超文本（Hypertext）的方式來互相連接的，網站之間也是如此。除了搜索引擎之外，人們也不一樣網站之間的連接來Surfing（「衝浪」）。其它網站到你的網站的連接越多，你也就會得到更多的訪問量。更重你的網站的外部連接數越多，會被搜索引擎認爲它的重要性越大，從而給你更高的排名

 

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

網頁分紅三個層次，即：結構層、表示層、行爲層。

網頁的結構層（structurallayer）由HTML 或XHTML 之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出

這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：「這是一個文本段。」

網頁的表示層（presentationlayer）由CSS 負責建立。CSS 對「如何顯示有關內容」的問題作出了回答。

網頁的行爲層（behaviorlayer）負責回答「內容應該如何對事件作出反應」這一問題。這是Javascript 語言和DOM 主宰的領域

 

有沒有關注HTML5和CSS3?若有請簡單說一些您對它們的瞭解狀況！ 
HTML5標籤的改變：<header>,<footer>, <dialog>, <aside>, <figure>, <section> 等 IE9以上開始支持 
CSS3實現圓角，陰影，對文字加特效，增長了更多的CSS選擇器

 

以CSS3標準定義一個webkit內核瀏覽器識別的圓角（尺寸隨意）

-moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius:10px;。

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

Doctype聲明位於文檔中的最前面的位置，處於標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。該標籤可聲明三種DTD 類型。

 

  HTTP協議的狀態消息都有哪些?(如200、302對應的描述)

成功（2字頭）這一類型的狀態碼，表明請求已成功被服務器接收、理解、並接受

重定向（3字頭）這類狀態碼錶明須要客戶端採起進一步的操做才能完成請求。一般，這些狀態碼用來重定向，後續的請求地址（重定向目標）在本次響應的 Location 域中指明。

請求錯誤（4字頭） 這類的狀態碼錶明瞭客戶端看起來可能發生了錯誤，妨礙了服務器的處理。

服務器錯誤（五、6字頭） 這類狀態碼錶明瞭服務器在處理請求的過程當中有錯誤或者異常狀態發生，也有多是服務器意識到以當前的軟硬件資源沒法完成對請求的處理。

 

Javascript繼承兩種形式

 Js的繼承在不少書裏面細緻的分了不少種類型和實現方式，大致上就是兩種：對象冒充、原型方式。這兩種方式各有優勢和缺陷

 

 cookie的屬性有哪些

name字段爲一個cookie的名稱。

value字段爲一個cookie的值。    

domain字段爲能夠訪問此cookie的域名。

path字段爲能夠訪問此cookie的頁面路徑。 好比domain是abc.com,path是/test，那麼只有/test路徑下的頁面能夠讀取此cookie。

expires/Max-Age 字段爲此cookie超時時間。若設置其值爲一個時間，那麼當到達此時間後，此cookie失效。不設置的話默認值是Session，意思是cookie會和session一塊兒失效。當瀏覽器關閉(不是瀏覽器標籤頁，而是整個瀏覽器) 後，此cookie失效。

Size字段 此cookie大小。

http字段  cookie的httponly屬性。若此屬性爲true，則只有在http請求頭中會帶有此cookie的信息，而不能經過document.cookie來訪問此cookie。

secure 字段 設置是否只能經過https來傳遞此條cookie

 

一次完整的HTTP事務是怎樣的一個過程？

基本流程：  

a. 域名解析  
b. 發起TCP的3次握手  
c. 創建TCP鏈接後發起http請求  
d. 服務器端響應http請求，瀏覽器獲得html代碼

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

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

 

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

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

繪畫 canvas   用於媒介回放的 video 和 audio 元素

 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；   sessionStorage 的數據在瀏覽器關閉後自動刪除 
  語意化更好的內容元素，好比 article、footer、header、nav、section 

（<article> 標籤訂義外部的內容。）

表單控件，calendar、date、time、email、url、search 

 新的技術webworker, websockt, Geolocation

移除的元素-純表現的元素：basefont，big，center，font, s，strike，tt，u，對可用性產生負面影響的元素：frame，frameset，noframes；

 

如何區分： DOCTYPE聲明\新增的結構元素\功能元素，語義化的理解？

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

 

HTML5的離線儲存？ 

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

 

介紹一下CSS的盒子模型

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

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

 

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定義的權重

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

 

Node.js的適用場景？

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

 

Javascript如何實現繼承

經過原型和構造器

 

事件是？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 

 

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

使用instanceof （待完善）  

 if(a instanceof Person){

       alert('yes');    

}

 

 JSON 的瞭解？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。

它是基於JavaScript的一個子集。數據格式簡單, 易於讀寫, 佔用帶寬小 {'age':'12', 'name':'back'}

 

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

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

 

如何解決跨域問題?

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

 

異步加載的方式有哪些？

 (1) defer，只支持IE  

 (2) async： 

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

 

Jquery與jQuery UI 有啥區別？

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

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

 

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

內存泄漏指任何對象在您再也不擁有或須要它以後仍然存在

垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用數量爲 0（沒有其餘對象引用過該對象），或對該對象的唯一引用是循環的，那麼該對象的內存便可回收。 setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。

 

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

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

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

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

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

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

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

 

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

IE: trident內核 
Firefox：gecko內核

Safari：webkit內核 

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

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

 

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

1）建立新節點 
createDocumentFragment() //建立一個DOM片斷 

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

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

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

appendChild() //添加

removeChild() //移除

 replaceChild() //替換

 insertBefore() //插入  

3）查找 
getElementsByTagName() //經過標籤名稱 
getElementsByName() //經過元素的Name屬性的值 getElementById() //經過元素Id，惟一性 

 

請描述一下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僅僅是爲了在本地「存儲」數據而生。

 

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

漸進加強 progressive enhancement： 
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。  
優雅降級 graceful degradation： 
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。  區別：  
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給  
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要  
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶  

 

px和em的區別

px和em都是長度單位，區別是，px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。 
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em

 

簡述同步和異步的區別

同步是阻塞模式，異步是非阻塞模式。 
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去； 異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。 

 

什麼是CSS Hack? 

通常來講是針對不一樣的瀏覽器寫不一樣的CSS,就是 CSS Hack。 
IE瀏覽器Hack通常又分爲三種，條件Hack、屬性級Hack、選擇符Hack

 

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

原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有本身的原型，若是一個原型對象的原型不爲null的話，咱們就稱之爲原型鏈。

原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈

JavaScript的數據對象有那些屬性值？

writable：這個屬性的值是否能夠改。 　　configurable：這個屬性的配置是否能夠刪除，修改。 　　enumerable：這個屬性是否能在for…in循環中遍歷出來或在Object.keys中列舉出來。 　　value：屬性值。

頁面重構怎麼操做？
* 當咱們須要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性， 若是沒有的話，就會查找他的Prototype對象是否有這個屬性。 function clone(proto) { 　　function Dummy() { } 　　Dummy.prototype = proto; 　　Dummy.prototype.constructor = Dummy; 　　return new Dummy(); //等價於Object.create(Person); } function object(old) {     function F() {};     F.prototype = old;     return new F(); } var newObj = object(oldObject);

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

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

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

eval是作什麼的？

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

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

WEB應用從服務器主動推送Data到客戶端有那些方式？
網站重構：應用web標準進行設計（第2版）

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

js的幾種數據類型：number,string,boolean,object,undefined js的常見內置對象類：Date,Array,Math、Number、Boolean、String、Array、RegExp、Function...

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

以

CSS3

標準定義一個

webkit

內核瀏覽器識別的圓角（尺寸隨意）