[雜談]瞭解一些額外知識，讓前端開發錦上添花
勸了別人無數次，讓別人喝了雞湯，幫別人填坑，本身卻掉了坑css
1.前言
在前端學習裏面，不少人都是注重學習代碼（html，css，js）。或者是一些框架，庫（jquery，vue，react）,或者是各類工具（webpack，gulp）。在以往的文章裏面，或者本身和別人交談，都有建議過別人多練，不要悶頭就寫代碼，多深刻了解當中的原理，學習其中的思想。可是除了代碼方面的知識以外，還有哪一些是做爲一個前端，應該擴展學習的呢？下面簡單羅列和整理了一下最近學習的資源。若是你們還有其它的推薦，歡迎在評論區留言。html
下面的知識，可能不須要太過於深刻，詳細的掌握，可是必需要有所瞭解，這樣在開發上遇到問題，解決問題的時候即便不是如虎添翼，也是錦上添花。前端
2.http，https
前端而言，不可避免的要和接口打交道。除了和後臺對接口，請求數據，渲染頁面，以外。對http的請求，也是要有一個瞭解，好比http協議，請求方式，請求過程，結果狀態碼等。瞭解這些，對開發的時候可能遇到的問題，就能夠大概知道問題是怎麼產生的，更快的知道怎麼解決，避免。vue
2-1.請求
首先一個請求，包含有請求頭，請求行，請求正文。具體是怎樣境，看下面的代碼html5
axios({
method: 'post',
url: '/user/12345',
headers:{
'Content-Type':'application/x-www-form-urlencoded'
},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
複製代碼
如上所述node
method和url就是這個請求的請求行（這裏是請求行部分信息，其實請求行還包括http協議的版本等信息）。headers中的屬性就是請求頭，裏面的屬性，所有包含在請求的header裏面，是服務端獲取客戶端版本，緩存等信息的一個途徑。data對應的就是請求正文，也就是日常所說的參數。react
2-2.響應
在請求發出去，而且響應已經回來的時候，就時候信息可分爲響應行，響應頭，響應正文。jquery
響應行webpack
引用看雲的一個請求做爲實例，以下代碼就是這個請求的響應行，返回請求的http協議及版本，狀態碼，請求狀態等描述信息。ios
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就簡單說到這裏，詳細的推薦看下下面的資料。
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.解決方案
網上的針對跨域的解決方案有不少，你們參考着看就好。雖然羅列這麼多，可是我只用過兩種。
一、 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.小結
之因此要發這麼一片，總結這一些概念，是由於我和別人交談的時候，遇到這些老是有一個是是而非的概念。因此最近就抽空看了下這些概念，也和你們分享下這一些知識。這些概念知識，可能只是瞭解一下，大概知道就好，有些可能要深刻了解下，這個就看我的所需了。最後，若是你們還有什麼要推薦的概念知識是比較重要，須要瞭解的，歡迎在評論區留言。
-------------------------華麗的分割線--------------------
想了解更多，關注關注個人微信公衆號：守候書閣