《前端面試江湖》讀書筆記

時間 2019-11-06

原文原文鏈接

看到有人說這本書漏洞百出，主要是我也沒認真看，一些簡單的我直接跳過的。下面這些內容也通過我認真上網搜了如下，能保證準確率。若是還有錯誤的地方請指出javascript

原本好久之前就該把前端面試系列的文章更新完，可是本身懶，加上發現網上有些文章確實寫的不錯，就一直拖着沒寫。可是有次去圖書館，看到一本書叫《前端面試江湖》，索性找了一個時間，把所有內容整合到一塊兒。這裏面確定有你不瞭解的東西，那些東西可以很大程度上提升你的開發效率。這本書2016年5月出的，卻還在講JQuery。因此有些地方我對其進行了補充css

如何處理IE和Firefox若是處理事件兼容性

獲取事件：html

function et(e) {
    let event = window.event || e
}
複製代碼

鍵盤值的獲取： Firfox下event.which和IE的event.keyCode至關前端

let key = event.keyCode || event.which
複製代碼

事件源的獲取：java

let target = event.srcElement || event.target
複製代碼

事件監聽:git

IE: element.attacthEvent('on' + eventName, function(){})
Firfox: element.addEventListener(eventName, handler, false)
複製代碼

鼠標位置：在IE下，event對象有x、y屬性，在Firfox下，event有PageX, PageY屬性全部獲取鼠標位置時：github

x = event.x || event.pageX
複製代碼

阻止默認瀏覽器行爲：面試

e.preventDefault() || event.returnValue = false
複製代碼

阻止冒泡事件：數據庫

e.stopPropagation() || event.cancelBubble = true
複製代碼

獲取下拉框中選中項的內容

<select id="test" name="">
    <option value="1">text 1</option>
    <option value="2">text 2</option>
</select>
複製代碼

拿到選中項的索引：編程

let index = document.getElementById('test').selectedIndex.
複製代碼

selectIndex表示選中項的index

在Form表單中get和post方式提交的區別

這個問題一直在爭論，我就以爲明明一句話解決的問題，非要弄得這麼複雜。這是書上的答案：
一、get是從服務器上獲取數據，post是向服務器提交數據
二、get是把參數數據提交到表單的action屬性所指的URL中，值和表單各個字段一一對應。post是經過HTTP post機制，將表單內各個字段和其內容放置在HTML HEADER內一塊兒傳到action屬性所指的URL地址。
三、get傳送的數據不能大於2kb，post傳送的數據更大，但也有限制。
四、get安全性能很是低，post安全性較高
五、get限制Form表單的數據集的值必須爲ASCII字符，而post支持整個ISO10646字符集。

AJAX的簡單實現

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) {
		if ((xhr.status >= 200 && xhr.status < 300 || xhr.status == 304)) {
			alert(xhr.responseText)
		} else {
			alert('unsuccessful:' + xhr.status)
		}
	}
}
xhr.open('get', 'example.txt', true)
xhr.send(null)
複製代碼

HTTP協議狀態碼

具體內容看看MDN，這裏就懶的寫了 1xx: 信息 2xx: 成功 3xx：重定向 4xx：客戶端錯誤 5xx：服務器錯誤

JavaScript如何獲得HTTP的請求頭信息和返回的信息

getResponseHeader從響應信息中返回指定的http信息 getAllResonponseHeaders 獲取響應的全部HTTP頭信息

JSONP的簡單實現

var Jsonp = document.createElement('script')
// Firfox: onload, IE: onreadyStatechange
Jsonp.onload = Jsonp.onreadyStatechange = function () {
    if (!this.readyState || this.readyState === 'loaded'
        || this.readyState === 'complete') {
        alert($('#demo').html())
        // 清理防止IE內存泄露
        Jsonp.onload = Jsonp.onreadyStatechange = null
    }
}
Jsonp.type = 'text/javascript'
Jsonp.src = 'http://www.xxx.com/JS/JQuery.js'
// 往header裏邊添加
document.getElementByTagName('head')[0].appendChild(Jsonp)
複製代碼

HTML5和CSS3的瞭解

一、更多的描述性標籤
二、良好的媒體支持
三、更強大的Web應用
四、跨文檔信息通訊
五、Web Sockets
六、客戶端存儲
七、更加精美的頁面
八、更強大的表單
九、提高可訪問性
十、先進的選擇器
十一、視覺效果

如何觸發頁面的reflow, repaint

除了頁面在首次加載時必然要經歷該過程以外，還有如下行爲會觸發這個行爲：１、dom元素的添加、修改、刪除。(這就是爲何避免dom元素的修改，由於reflow和repaint最耗性能)
二、僅修改DOM元素的字體顏色（只有repaint,由於不須要調整佈局）
三、應用新的樣式或者修改任何影響元素外觀的屬性
四、resize瀏覽器窗口，滾動頁面
五、讀取元素的某些屬性

localStorage對象的經常使用方法

存儲：localStorage.setItem(key, value) 獲取：localStorage.getItem(key) 刪除：localStorage.removeItem(key) 所有刪除：localStorage.clear()

cookie、sessionStorage和localStorage的區別

cookie數據始終在同源的HTTP請求中攜帶。而sessionStorage和localStorage不會自動把數據發送給服務器，僅在本地保存。cookie數據還有路徑(path)的概念，能夠限制cookie只屬於某個路徑下。

存儲大小限制不一樣，cookie數據不能超過4KB,同時由於每次HTTP請求都會攜帶cookie,因此cookie只適合保存很小的數據。sessionStorage和localStorage也有存儲限制，可是要大的多

數據有效期不一樣: sessionStorage:僅在當前瀏覽器窗口關閉前有效。localStorage:始終有效，窗口或瀏覽器關閉也一直保存。cookie:只要在設置的cookie過時時間以前一直有效做用域不一樣：sessionStorage不在不一樣的瀏覽器窗口中共享(咱們能夠不能夠經過使用sessionStorage實現跨域).localStorage在全部同源串口都是共享的。cookie在全部同源窗口都是共享的。

前端角度作好SEO

一、CSS Sprites: 通俗來說就是圖片合併，能夠把網站中一些比較通用的小圖，合併到一張大圖上
二、啓用keep-alive屬性：Keep-Alive能夠理解爲長鏈接。啓用connection的Keep-Alive屬性以外，這個鏈接能保持一段時間，從而提升頁面加載的速度
三、啓用瀏覽器緩存，能夠用緩存技術來提升頁面的加載速度
四、啓用GZIP壓縮

提升前端性能

一、用Web Storage替換cookie
二、使用css動畫代替JavaScript動畫
三、使用客戶端數據庫
四、使用JavaScript的新功能
五、使用硬件加速

若是瀏覽器沒有安裝網頁上所設置的文字，能夠怎麼作

@font-face {font-family: name; src: url(url); sRules}
複製代碼

sRules樣式表定義

談談對前端安全的理解，有什麼，怎麼防範

前端安全問題主要有XSS、CSRF攻擊
XSS：跨站腳本攻擊
它容許用戶將惡意代碼植入到提供給其餘用戶使用的頁面中，能夠簡單的理解爲一種javascript代碼注入。
XSS的防護措施：過濾轉義輸入輸出
避免使用eval、new Function等執行字符串的方法，除非肯定字符串和用戶輸入無關
使用cookie的httpOnly屬性，加上了這個屬性的cookie字段，js是沒法進行讀寫的
使用innerHTML、document.write的時候，若是數據是用戶輸入的，那麼須要對象關鍵字符進行過濾與轉義
CSRF：跨站請求僞造
其實就是網站中的一些提交行爲，被黑客利用，在你訪問黑客的網站的時候進行操做，會被操做到其餘網站上
CSRF防護措施：
檢測http referer是不是同域名
避免登陸的session長時間存儲在客戶端中
關鍵請求使用驗證碼或者token機制其餘的一些攻擊方法還有HTTP劫持、界面操做劫持

實現繼承的方法

使用prototype的方法並非很好，很容易出錯，建議使用ES6的class。但這裏不講，由於有些老項目沒用ES6，因此瞭解prototype還有有必要的借用構造函數實現繼承：

function Parent1(){
    this.name = "parent1"
}
function Child1(){
    Parent1.call(this);
    this.type = "child1";
}
複製代碼

借用原型鏈實現繼承：

function Parent2(){
    this.name = "parent2";
    this.play = [1,2,3];
}
function Child2(){
    this.type = "child2";
}
Child2.prototype = new Parent2();
複製代碼

組合式繼承：

function Parent3(){
    this.name = "parent3";
    this.play = [1,2,3];
}
function Child3(){
    Parent3.call(this);
    this.type = "child3";
}
Child3.prototype = Object.create(Parent3.prototype);
Child3.prototype.constructor = Child3;
複製代碼

建立對象的方法(摘自《高級程序設計》)：

工廠模式：

function cratePerson (name, age, job) {
    var o = new Object(
    o.name = name 
    o.age = age 
    o.job = job 
    o.sayName = function () {
        alert(this.name)
    }
    return o 
}

var person1 = cratePerson('Greg', 27, 'Doctor')
複製代碼

構造函數：

function Person (name, age, job) {
    this.name = name 
    this.age = age 
    this.job = job 
    this.sayName = function () {
        alert(this.name )
    }
}

var person1 = cratePerson('Greg', 27, 'Doctor')
複製代碼

原型模式：

function Person () {
}

Person.prototype.name = 'Greg'
Person.prototype.age = 18
Person.prototype.job = 'Doctor'
Person.prototype.sayName = function () {
    alert(this.name)
}
var person1 = new Person()
person1.sayName()   // Greg
複製代碼

本文只講了一些理論性的知識，不多涉及編程。編程的部分我決定使用leetcode習題的方式進行講解 o)由於這個不太好單獨寫一篇博客來進行講解。請關注個人github瞭解實時的進度