勸了別人無數次，讓別人喝了雞湯，幫別人填坑，自己卻掉了坑
1.前言
在前端學習裡面，很多人都是注重學習程式碼（html，css，js）。或者是一些框架，庫（jquery，vue，react）,或者是各種工具（webpack，gulp）。在以往的文章裡面，或者自己和別人交談，都有建議過別人多練，不要悶頭就寫程式碼，多深入瞭解當中的原理，學習其中的思想。但是除了程式碼方面的知識之外，還有哪一些是作為一個前端，應該擴充套件學習的呢？下面簡單羅列和整理了一下最近學習的資源。如果大家還有其它的推薦，歡迎在評論區留言。
下面的知識，可能不需要太過於深入，詳細的掌握，但是必須要有所瞭解，這樣在開發上遇到問題，解決問題的時候即使不是如虎添翼，也是錦上添花。
2.http，https
前端而言，不可避免的要和介面打交道。除了和後臺對介面，請求資料，渲染頁面，之外。對http的請求，也是要有一個瞭解，比如http協議，請求方式，請求過程，結果狀態碼等。瞭解這些，對開發的時候可能遇到的問題，就可以大概知道問題是怎麼產生的，更快的知道怎麼解決，避免。
2-1.請求
首先一個請求，包含有請求頭，請求行，請求正文。具體是怎樣境，看下面的程式碼
axios({
method: 'post', url: '/user/12345', headers:{
'Content-Type':'application/x-www-form-urlencoded'
}, data: {
firstName: 'Fred', lastName: 'Flintstone'
}
});
複製程式碼如上所述
method和url就是這個請求的請求行（這裡是請求行部分資訊，其實請求行還包括http協議的版本等資訊）。headers中的屬性就是請求頭，裡面的屬性，全部包含在請求的header裡面，是服務端獲取客戶端版本，快取等資訊的一個途徑。data對應的就是請求正文，也就是平常所說的引數。
2-2.響應
在請求發出去，並且響應已經回來的時候，就時候資訊可分為響應行，響應頭，響應正文。
響應行
引用看雲的一個請求作為例項，如下程式碼就是這個請求的響應行，返回請求的http協議及版本，狀態碼，請求狀態等描述資訊。
Request URL:https://www.kancloud.cn/yunye/axios/comment?article_id=234845&
page=1Request Method:GETStatus Code:200 OKRemote Address:117.23.61.221:443複製程式碼響應頭
響應頭和請求頭格式一致，返回版本，快取等資訊。
響應正文
平常接觸最多的就是響應正文，也就是日常開發需要用到的資料。開發者拿到這些資料之後，再進行相應的處理。
2-3.關於https
關於 https 。下面可以先了解下 http 的缺點，https就是http基礎上做的加密處理。
1.通訊使用明文不加密，內容可能被竊聽2.不驗證通訊方身份，可能遭到偽裝3.無法驗證報文完整性，可能被篡改
2-4.相關資料
關於http與https就簡單說到這裡，詳細的推薦看下下面的資料。
3.響應狀態碼
上面提到響應狀態碼，在這裡也簡單寫下。在前端方面，請求介面可能會接觸到各種情況，常見的有下面幾個，應該怎麼解決，就是具體問題，具體分析。
| 狀態碼 | 意義 |
|---|---|
| 200 | 請求成功 |
| 400 | 引數錯誤 |
| 403 | 拒絕或者禁止訪問（無許可權訪問） |
| 404 | 地址不存在 |
| 405 | 客戶端請求中的方法被禁止（一般是請求方式錯誤） |
| 500 | 伺服器報錯 |
| 502 | 請求超時，無效閘道器 |
| 503 | 伺服器超載或者維護，無法響應 |
3-1.參考資料
詳細的狀態碼請參考下面內容。
4.前端方面的安全性
4-1.XSS
XSS(Cross Site Scripting)是跨站指令碼攻擊，為了區分CSS，所以縮寫為XSS。XSS攻擊方式是往Web頁面插入惡意的 JavaScript 程式碼，當使用者瀏覽網頁的時候，插入的程式碼就是被執行，從而達到攻擊的目的。
其中應用比較多的一個就是，在網頁一些公用的互動區域。比如搜尋的文字框，除了可以輸入一些關鍵字，還可以輸入一些 JavaScript 程式碼，一旦程式碼點選搜尋，程式碼就會被執行，達到攻擊的目的。如下例子
<
script>
alert(document.cookie);
<
/script>
複製程式碼在文字框中輸入以上程式碼，然後點選提交，就會把使用者的cookie彈出來。
XSS防範
1.將重要的cookies標記為HTTP ONLY，讓JavaScript程式碼無法呼叫，只有http能呼叫。或者將重要的資訊儲存在session裡面。
2.只允許使用者輸入我們期望的資料。如消費金額框只能輸入數字和小數點。
3.對資料進行加密處理。
4.過濾或者移除特殊的HTML標籤，過濾JavaScript程式碼等。
4-2.CSRF
CSRF（Cross-site request forgery）是跨站請求偽造。XSS利用站點內的信任使用者，與XSS不同，CSRF是通過偽裝來自受信任使用者，在受信任的網站進行請求，盜取資訊。其實就是攻擊者盜用了受害者的身份，以受害者的名義向網站傳送惡意請求。
CSRF攻擊的思想
引用CSRF攻擊原理及防禦的一張圖進行解釋。
圖片來自：CSRF攻擊原理及防禦
根據步驟，看了圖，相信不難理解，就是在一個網站裡面保留了cookie，然後訪問了一些危險網站，然後被危險網站盜用了使用者資訊。
CSRF的防禦
1.在表單裡增加Hash值，以認證這確實是使用者傳送的請求，然後在伺服器端進行Hash值驗證。
2.驗證碼：每次的使用者提交都需要使用者在表單中填寫一個圖片上的隨機字串。
3.修改，增加重要資訊，比如密碼，個人資訊的操作，儘量使用post。避免使用get把資訊暴露在url上面。
4-3.反爬蟲
和之前的防護XSS和CSRF攻擊目的不一樣，反爬蟲是為了防止網站重要的資料被別人拿走，比如電商的交易額，電影網站的票房統計，音樂網站的評論等。
5.渲染過程，原理
1.瀏覽器通過DNS對URL進行解析，找出對應的IP地址；
2.向IP地址發起網路請求，進行http協議會話：客戶端傳送報頭（請求報頭），服務端回饋報頭（響應報頭）
3.伺服器根據請求，交給後臺處理，處理完成後返回檔案資料，瀏覽器接收檔案資料（HTML、JS、CSS、圖象等）；返回一個頁面（根據頁面上的外鏈的URL重新傳送請求獲取）
4.瀏覽器接收檔案完畢，對載入到的資源進行語法解析，以及相應的內部資料結構（網頁渲染）
6.跨域
跨域這方面，平常接觸的不多，我們這邊遇到也是讓後臺允許跨域（跨域資源共享），但是這個跨域，也是一個繞不開的話題，受限於篇幅，下面簡單進行講解。
6-1.情形分析
| URL | 說明 | 是否允許通訊 |
|---|---|---|
| http://www.example.com/a.js，http://www.example.com/lab/b.js | 同一域名，不同檔案或路徑 | 允許 |
| http://www.example.com:8000/a.js，http://www.example.com/b.js | 同一域名，不同埠 | 不允許 |
| http://www.example.com/a.js，https://www.example.com/b.js | 同一域名，不同協議 | 不允許 |
| http://www.example.com/a.js，http://192.168.2xx.2x/b.js | 域名和域名對應相同ip | 不允許 |
| http://www.example.com/a.js，http://x.example.com/b.js，http://domain.com/c.js | 主域相同，子域不同 | 不允許 |
| http://www.example.com/a.js，http://www.demo.com/b.js | 不同域名 | 不允許 |
6-2.解決方案
網上的針對跨域的解決方案有很多，大家參考著看就好。雖然羅列這麼多，但是我只用過兩種。
1、 jsonp
2、 document.domain + iframe
3、 location.hash + iframe
4、 window.name + iframe
5、 postMessage
6、 跨域資源共享（CORS）
7、 nginx代理
8、 nodejs中介軟體代理
9、 WebSocket協議
6-3.參考資料
7.效能優化
這裡只講個大概，具體操作得靠自己自行問搜尋引擎。
7-1.首屏優化
按需載入，非首屏圖片使用預載入或懶載入，DNS，壓縮程式碼，合併圖片，減少請求等。
7-2.演算法優化
減少沉餘的程式碼，控制迴圈的次數，避免巨大函式等。
8.SEO
作為前端開發者，在SEO方面接觸得應該不少。前端方面，注意SEO的點也不少。下面簡單寫下，在我開發的專案裡面，也有幾個專案是需要做SEO的，個人的建議如下幾點：
8-1.meta標籤
可定義關鍵詞、網站描述
<
meta name="keywords" content="關鍵詞1，關鍵詞2" />
<
meta name="description" content="描述詞1，描述詞2" />
複製程式碼8-2.語義化html標籤
一方面是，利用html標籤，達到語義化的目的，比如列表使用ul，ol。表格使用table等，不建議什麼元素都使用div。
另一方面是儘可能使用html5提供的具有語義化的標籤。
以前寫法
<
div class="header">
<
/div>
<
div class="main">
<
/div>
<
div class="footer">
<
/div>
複製程式碼建議寫法
<
header>
<
/header>
<
main>
<
/main>
<
footer>
<
/footer>
複製程式碼8-3.html巢狀級別不宜過多
這一點就是儘量使html做到扁平化，避免巢狀過多，但是這點相對而言，難度比較大。
8-4.img標籤四大屬性不能省
<
img src="" alt="圖片描述" width="" height=""/>
複製程式碼alt屬性是為了讓圖片因網速慢、src引用錯誤、瀏覽器禁用影像、使用者使用螢幕閱讀器等情況，未成功顯示時候，仍可以顯示文字，讓使用者可大概知道這張圖片大概是什麼。
width和height是為了防止因為圖片無法顯示，造成頁面重新渲染，或者佈局錯亂。
8-5.h1-h6標籤的使用
1.一個頁面建議只出現一個h1標籤，而且一般是放在網頁log上面使用。
2.h2標籤一般用於詳情頁的主標題。詳情頁沒有logo，標題使用h1。如有副標題，使用h3。
3.h1-h6標籤自帶權重，如果只為了設定字型大小，或者區分樣式，不適合使用h1-h6。
8-6.其它方面
關於SEO的其他方式，在網上看到有這樣的方法，但是我自己在開發上面沒嘗試過這樣做，這裡就簡單羅列下，大家參考下。
避免 iframe 標籤
重要內容謹慎使用 display:none;
a標籤儘量新增title屬性
利用佈局，把重要內容HTML程式碼放在最前
使用”rel=nofollow”屬性，集中網站權重
最近一段時間很流行前後分離，以及單頁應用。但關於前後分離和單頁應用這個怎麼做SEO現在不清楚（目前我瞭解的是沒法做）。我們現在的做法就是需要做SEO的專案，前端只負責切圖，然後後臺鋪資料，服務端渲染，不是前端渲染。
9.堆、棧？
棧(stack)會自動分配記憶體空間，會自動釋放。堆(heap)動態分配的記憶體，大小不定也不會自動釋放。
基本型別：Undefined、Null、Boolean、Number 和 String，這5中基本資料型別可以直接訪問，他們是按照值進行分配的，存放在棧(stack)記憶體中的簡單資料段，資料大小確定，記憶體空間大小可以分配。
如下例子
let a=1;
let b=a;
複製程式碼如果修改了b
b=2;
複製程式碼雖然b一開始是通過a賦值，但是a和b是獨立的儲存在棧記憶體裡面，修改其中一個，不會對另一個有任何影響。
引用型別：即存放在堆(heap)記憶體中的物件，變數實際儲存的是一個指標，這個指標指向另一個位置。
如下例子
let a={name:'守候'
};
let b=a;
複製程式碼如果修改了b
b.name='sh';
複製程式碼b通過a賦值，a和b就共用了一個堆記憶體，修改了a或者b，都直接修改了堆記憶體的值，就會對另一個產生影響。
10.響應式和自適應
關於這兩個的概念，現在沒怎麼聽說了。可能是因為現在主流的就是PC和手機是分開兩個專案的原因，也可能是因為這兩個概念更應該是設計圖的工作。上一次和別人談論這個問題，還是在一年前，那個時候我還是切圖仔。
但是關於這兩個概念的區別，大家知道一下就好，下面看兩張圖片估計就差不多懂了。
圖片來自：響應式和自適應有什麼區別?（這篇文章估計也是抄襲的，但是由於圖片我也找不到出處了，就宣告這個了）
簡單來說：
自適應：一個網頁，根據螢幕寬度的改變而改變。程式碼只有一套。在個別的螢幕上，排版這個比較醜，但是設計，開發成本低。
響應式：一個網頁，根據螢幕的寬度的改變而展示不同的效果，程式碼基本是兩套以上。在所有螢幕上都展示很好的效果，但是設計，開發成本高。
自適應例項：攜程
響應式例項：segmentfault
11.小結
之所以要發這麼一片，總結這一些概念，是因為我和別人交談的時候，遇到這些總是有一個是是而非的概念。所以最近就抽空看了下這些概念，也和大家分享下這一些知識。這些概念知識，可能只是瞭解一下，大概知道就好，有些可能要深入瞭解下，這個就看個人所需了。最後，如果大家還有什麼要推薦的概念知識是比較重要，需要了解的，歡迎在評論區留言。
————————-華麗的分割線——————–
想了解更多，關注關注我的微信公眾號：守候書閣