[雜談]瞭解一些額外知識，讓前端開發錦上添花

勸了別人無數次，讓別人喝了雞湯，幫別人填坑，本身卻掉了坑

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=1
Request Method:GET
Status Code:200 OK
Remote Address:117.23.61.221:443
複製代碼

響應頭

響應頭和請求頭格式一致，返回版本，緩存等信息。

響應正文

日常接觸最多的就是響應正文，也就是平常開發須要用到的數據。開發者拿到這些數據以後，再進行相應的處理。

2-3.關於https

關於 https 。下面能夠先了解下 http 的缺點，https就是http基礎上作的加密處理。

1.通訊使用明文不加密，內容可能被竊聽 2.不驗證通訊方身份，可能遭到假裝 3.沒法驗證報文完整性，可能被篡改

2-4.相關資料

關於http與https就簡單說到這裏，詳細的推薦看下下面的資料。

HTTP教程

HTTP協議【詳解】——經典面試題

一個故事講完https

3.響應狀態碼

上面提到響應狀態碼，在這裏也簡單寫下。在前端方面，請求接口可能會接觸到各類狀況，常見的有下面幾個，應該怎麼解決，就是具體問題，具體分析。

狀態碼	意義
200	請求成功
400	參數錯誤
403	拒絕或者禁止訪問（無權限訪問）
404	地址不存在
405	客戶端請求中的方法被禁止（通常是請求方式錯誤）
500	服務器報錯
502	請求超時，無效網關
503	服務器超載或者維護，沒法響應

3-1.參考資料

詳細的狀態碼請參考下面內容。

HTTP狀態碼

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.解決方案

網上的針對跨域的解決方案有不少，你們參考着看就好。雖然羅列這麼多，可是我只用過兩種。

一、 jsonp

二、 document.domain + iframe

三、 location.hash + iframe

四、 window.name + iframe

五、 postMessage

六、 跨域資源共享（CORS）

七、 nginx代理

八、 nodejs中間件代理

九、 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.小結

之因此要發這麼一片，總結這一些概念，是由於我和別人交談的時候，遇到這些老是有一個是是而非的概念。因此最近就抽空看了下這些概念，也和你們分享下這一些知識。這些概念知識，可能只是瞭解一下，大概知道就好，有些可能要深刻了解下，這個就看我的所需了。最後，若是你們還有什麼要推薦的概念知識是比較重要，須要瞭解的，歡迎在評論區留言。

-------------------------華麗的分割線--------------------

想了解更多，關注關注個人微信公衆號：守候書閣