31-撩課大前端-面試寶典-第三十一篇
阿新 • • 發佈:2019-01-05
1.web storage和cookie的區別?
Web Storage的概念和cookie相似, 區別是它是為了更大容量儲存設計的。 Cookie的大小是受限的, 並且每次你請求一個新的頁面的時候Cookie都會被髮送過去, 這樣無形中浪費了頻寬, 另外cookie還需要指定作用域, 不可以跨域呼叫 除此之外, WebStorage擁有setItem,getItem,removeItem,clear等方法, 不像cookie需要前端開發者自己封裝setCookie,getCookie 但是cookie也是不可以或缺的: cookie的作用是與伺服器進行互動, 作為HTTP規範的一部分而存在 , 而Web Storage僅僅是為了在本地“儲存”資料而生 瀏覽器的支援除了IE7及以下不支援外, 其他標準瀏覽器都完全支援(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。