撩課-Web大前端天天5道面試題-Day31

1.web storage和cookie的區別?

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

複製代碼

2.描述 cookies、sessionStorage 和 localStorage 的區別？

與服務器交互：
cookie 是網站爲了標示用戶身份而儲存在用戶本地終端上的數據（一般通過加密）
cookie 始終會在同源 http 請求頭中攜帶（即便不須要），在瀏覽器和服務器間來回傳遞
sessionStorage 和 localStorage 不會自動把數據發給服務器，僅在本地保存

存儲大小：
cookie 數據根據不一樣瀏覽器限制，大小通常不能超過 4k
sessionStorage 和 localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大

有期時間：
localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據
sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除
cookie 設置的cookie過時時間以前一直有效，與瀏覽器是否關閉無關

複製代碼

3.前端須要注意哪些SEO?

合理的title、description、keywords：
搜索對着三項的權重逐個減少，
title值強調重點便可，
重要關鍵詞出現不要超過2次，
並且要靠前，不一樣頁面title要有所不一樣；
description把頁面內容高度歸納，
長度合適，不可過度堆砌關鍵詞，
不一樣頁面description有所不一樣；
keywords列舉出重要關鍵詞便可
語義化的HTML代碼，
符合W3C規範：
語義化代碼讓搜索引擎容易理解網頁
重要內容HTML代碼放在最前：
搜索引擎抓取HTML順序是從上到下，
有的搜索引擎對抓取長度有限制，
保證重要內容必定會被抓取
重要內容不要用js輸出：
爬蟲不會執行js獲取內容
少用iframe：
搜索引擎不會抓取iframe中的內容
非裝飾性圖片必須加alt.

提升網站速度：
網站速度是搜索引擎排序的一個重要指標

複製代碼

4.如何作SEO優化?

標題與關鍵詞
設置有吸引力切合實際的標題，標題中要包含所作的關鍵詞

網站結構目錄
最好不要超過三級，每級有「麪包屑導航」，使網站成樹狀結構分佈

頁面元素
給圖片標註"Alt"可讓搜索引擎更友好的收錄

網站內容
每月天天有規律的更新網站的內容，會使搜索引擎更加喜歡

友情連接
對方必定要是正規網站，天天有專業的團隊或者我的維護更新

內鏈的佈置
使網站造成相似蜘蛛網的結構，不會出現單獨鏈接的頁面或連接

流量分析
經過統計工具(百度統計，CNZZ)分析流量來源，指導下一步的SEO

複製代碼

5.Class、extends是什麼，有什麼做用？

ES6 的class能夠看做只是一個ES5生成實例對象的構造函數的語法糖。
它參考了java語言，定義了一個類的概念，
讓對象原型寫法更加清晰，
對象實例化更像是一種面向對象編程。
Class類能夠經過extends實現繼承。
它和ES5構造函數的不一樣點

類的內部定義的全部方法，都是不可枚舉的

///ES5
function ES5Fun (x, y) {
	this.x = x;
	this.y = y;
}

ES5Fun.prototype.toString = function () {
	 return '(' + this.x + ', ' + this.y + ')';
}
var p = new ES5Fun(1, 3);
p.toString();
Object.keys(ES5Fun.prototype); //['toString']

//ES6
class ES6Fun {
	constructor (x, y) {
		this.x = x;
		this.y = y;
	}
	toString () {
		return '(' + this.x + ', ' + this.y + ')';
	}
}

Object.keys(ES6Fun.prototype); //[]
ES6的class類必須用new命令操做，
而ES5的構造函數不用new也能夠執行。
ES6的class類不存在變量提高，
必須先定義class以後才能實例化，
不像ES5中能夠將構造函數寫在實例化以後。
ES5 的繼承，實質是先創造子類的實例對象this，
而後再將父類的方法添加到this上面。
ES6 的繼承機制徹底不一樣，
實質是先將父類實例對象的屬性和方法，
加到this上面（因此必須先調用super方法），
而後再用子類的構造函數修改this。

複製代碼