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總是辦好事，
例如IE7、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。