1. 程式人生 > >撩課-Web大前端每天5道面試題-Day31

撩課-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僅僅是為了在本地“儲存”資料而生
瀏覽器的支援除了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。