原文鏈接 :https://segmentfault.com/a/1190000015374552
圖片上傳不上 , 建議大家閱讀原文
1.前言
在前端學(xué)習(xí)里面赛糟，很多人都是注重學(xué)習(xí)代碼（html淤刃，css睁搭，js）赶诊。或者是一些框架园骆，庫（jquery舔痪，vue，react）,或者是各種工具（webpack锌唾，gulp）锄码。在以往的文章里面，或者自己和別人交談晌涕，都有建議過別人多練滋捶，不要悶頭就寫代碼，多深入了解當(dāng)中的原理渐排，學(xué)習(xí)其中的思想炬太。但是除了代碼方面的知識(shí)之外，還有哪一些是作為一個(gè)前端驯耻，應(yīng)該擴(kuò)展學(xué)習(xí)的呢亲族？下面簡(jiǎn)單羅列和整理了一下最近學(xué)習(xí)的資源。如果大家還有其它的推薦可缚，歡迎在評(píng)論區(qū)留言霎迫。
下面的知識(shí)，可能不需要太過于深入帘靡，詳細(xì)的掌握知给，但是必須要有所了解，這樣在開發(fā)上遇到問題，解決問題的時(shí)候即使不是如虎添翼涩赢，也是錦上添花戈次。
2.http，https
前端而言筒扒，不可避免的要和接口打交道怯邪。除了和后臺(tái)對(duì)接口，請(qǐng)求數(shù)據(jù)花墩，渲染頁面悬秉，之外。對(duì)http的請(qǐng)求冰蘑，也是要有一個(gè)了解和泌，比如http協(xié)議，請(qǐng)求方式祠肥，請(qǐng)求過程武氓，結(jié)果狀態(tài)碼等。了解這些搪柑，對(duì)開發(fā)的時(shí)候可能遇到的問題聋丝，就可以大概知道問題是怎么產(chǎn)生的，更快的知道怎么解決工碾，避免弱睦。
2-1.請(qǐng)求
首先一個(gè)請(qǐng)求，包含有請(qǐng)求頭渊额，請(qǐng)求行况木，請(qǐng)求正文。具體是怎樣境旬迹，看下面的代碼
axios({method:'post',? url:'/user/12345',? headers:{'Content-Type':'application/x-www-form-urlencoded'},data: {firstName:'Fred',? ? lastName:'Flintstone'}});
如上所述
method和url就是這個(gè)請(qǐng)求的請(qǐng)求行（這里是請(qǐng)求行部分信息火惊，其實(shí)請(qǐng)求行還包括http協(xié)議的版本等信息）。headers中的屬性就是請(qǐng)求頭奔垦，里面的屬性屹耐，全部包含在請(qǐng)求的header里面，是服務(wù)端獲取客戶端版本椿猎，緩存等信息的一個(gè)途徑惶岭。data對(duì)應(yīng)的就是請(qǐng)求正文，也就是平常所說的參數(shù)犯眠。
2-2.響應(yīng)
在請(qǐng)求發(fā)出去按灶，并且響應(yīng)已經(jīng)回來的時(shí)候，就時(shí)候信息可分為響應(yīng)行筐咧，響應(yīng)頭鸯旁，響應(yīng)正文噪矛。
響應(yīng)行
引用看云的一個(gè)請(qǐng)求作為實(shí)例，如下代碼就是這個(gè)請(qǐng)求的響應(yīng)行铺罢，返回請(qǐng)求的http協(xié)議及版本艇挨，狀態(tài)碼，請(qǐng)求狀態(tài)等描述信息畏铆。
Request URL:https://www.kancloud.cn/yunye/axios/comment?article_id=234845&page=1RequestMethod:GETStatus Code:200OKRemote Address:117.23.61.221:443
響應(yīng)頭
響應(yīng)頭和請(qǐng)求頭格式一致雷袋，返回版本，緩存等信息辞居。
響應(yīng)正文
平常接觸最多的就是響應(yīng)正文，也就是日常開發(fā)需要用到的數(shù)據(jù)蛋勺。開發(fā)者拿到這些數(shù)據(jù)之后瓦灶，再進(jìn)行相應(yīng)的處理。
2-3.關(guān)于https
關(guān)于 https 抱完。下面可以先了解下 http 的缺點(diǎn)贼陶，https就是http基礎(chǔ)上做的加密處理。
1.通信使用明文不加密巧娱，內(nèi)容可能被竊聽
2.不驗(yàn)證通信方身份碉怔，可能遭到偽裝
3.無法驗(yàn)證報(bào)文完整性，可能被篡改
2-4.相關(guān)資料
關(guān)于http與https就簡(jiǎn)單說到這里禁添，詳細(xì)的推薦看下下面的資料撮胧。
3.響應(yīng)狀態(tài)碼
上面提到響應(yīng)狀態(tài)碼，在這里也簡(jiǎn)單寫下老翘。在前端方面芹啥，請(qǐng)求接口可能會(huì)接觸到各種情況，常見的有下面幾個(gè)铺峭，應(yīng)該怎么解決墓怀，就是具體問題，具體分析卫键。
狀態(tài)碼意義
200請(qǐng)求成功
400參數(shù)錯(cuò)誤
403拒絕或者禁止訪問（無權(quán)限訪問）
404地址不存在
405客戶端請(qǐng)求中的方法被禁止（一般是請(qǐng)求方式錯(cuò)誤）
500服務(wù)器報(bào)錯(cuò)
502請(qǐng)求超時(shí)傀履，無效網(wǎng)關(guān)
503服務(wù)器超載或者維護(hù)，無法響應(yīng)
3-1.參考資料
詳細(xì)的狀態(tài)碼請(qǐng)參考下面內(nèi)容莉炉。
4.前端方面的安全性
4-1.XSS
XSS(Cross Site Scripting)是跨站腳本攻擊钓账，為了區(qū)分CSS，所以縮寫為XSS呢袱。XSS攻擊方式是往Web頁面插入惡意的 JavaScript 代碼官扣，當(dāng)用戶瀏覽網(wǎng)頁的時(shí)候，插入的代碼就是被執(zhí)行羞福，從而達(dá)到攻擊的目的惕蹄。
其中應(yīng)用比較多的一個(gè)就是，在網(wǎng)頁一些公用的交互區(qū)域。比如搜索的文本框卖陵，除了可以輸入一些關(guān)鍵字遭顶，還可以輸入一些 JavaScript 代碼，一旦代碼點(diǎn)擊搜索泪蔫，代碼就會(huì)被執(zhí)行棒旗，達(dá)到攻擊的目的。如下例子
alert(document.cookie);
在文本框中輸入以上代碼撩荣，然后點(diǎn)擊提交铣揉，就會(huì)把用戶的cookie彈出來。
XSS防范
1.將重要的cookies標(biāo)記為HTTP ONLY餐曹，讓JavaScript代碼無法調(diào)用逛拱，只有http能調(diào)用√ê铮或者將重要的信息保存在session里面朽合。
2.只允許用戶輸入我們期望的數(shù)據(jù)。如消費(fèi)金額框只能輸入數(shù)字和小數(shù)點(diǎn)饱狂。
3.對(duì)數(shù)據(jù)進(jìn)行加密處理曹步。
4.過濾或者移除特殊的HTML標(biāo)簽，過濾JavaScript代碼等休讳。
4-2.CSRF
CSRF（Cross-site request forgery）是跨站請(qǐng)求偽造讲婚。XSS利用站點(diǎn)內(nèi)的信任用戶，與XSS不同衍腥，CSRF是通過偽裝來自受信任用戶磺樱，在受信任的網(wǎng)站進(jìn)行請(qǐng)求，盜取信息婆咸。其實(shí)就是攻擊者盜用了受害者的身份竹捉，以受害者的名義向網(wǎng)站發(fā)送惡意請(qǐng)求。
CSRF攻擊的思想
引用CSRF攻擊原理及防御的一張圖進(jìn)行解釋尚骄。
圖片來自：CSRF攻擊原理及防御
根據(jù)步驟块差，看了圖，相信不難理解倔丈，就是在一個(gè)網(wǎng)站里面保留了cookie憨闰，然后訪問了一些危險(xiǎn)網(wǎng)站，然后被危險(xiǎn)網(wǎng)站盜用了用戶信息需五。
CSRF的防御
1.在表單里增加Hash值鹉动，以認(rèn)證這確實(shí)是用戶發(fā)送的請(qǐng)求，然后在服務(wù)器端進(jìn)行Hash值驗(yàn)證宏邮。
2.驗(yàn)證碼：每次的用戶提交都需要用戶在表單中填寫一個(gè)圖片上的隨機(jī)字符串泽示。
3.修改缸血，增加重要信息，比如密碼械筛，個(gè)人信息的操作捎泻，盡量使用post。避免使用get把信息暴露在url上面埋哟。
4-3.反爬蟲
和之前的防護(hù)XSS和CSRF攻擊目的不一樣笆豁，反爬蟲是為了防止網(wǎng)站重要的數(shù)據(jù)被別人拿走，比如電商的交易額赤赊，電影網(wǎng)站的票房統(tǒng)計(jì)闯狱，音樂網(wǎng)站的評(píng)論等。
5.渲染過程，原理
1.瀏覽器通過DNS對(duì)URL進(jìn)行解析爷辱，找出對(duì)應(yīng)的IP地址；
2.向IP地址發(fā)起網(wǎng)絡(luò)請(qǐng)求朦肘，進(jìn)行http協(xié)議會(huì)話：客戶端發(fā)送報(bào)頭（請(qǐng)求報(bào)頭）饭弓，服務(wù)端回饋報(bào)頭（響應(yīng)報(bào)頭）
3.服務(wù)器根據(jù)請(qǐng)求，交給后臺(tái)處理媒抠，處理完成后返回文件數(shù)據(jù)弟断，瀏覽器接收文件數(shù)據(jù)（HTML、JS趴生、CSS阀趴、圖象等）；返回一個(gè)頁面（根據(jù)頁面上的外鏈的URL重新發(fā)送請(qǐng)求獲炔源摇）
4.瀏覽器接收文件完畢刘急，對(duì)加載到的資源進(jìn)行語法解析，以及相應(yīng)的內(nèi)部數(shù)據(jù)結(jié)構(gòu)（網(wǎng)頁渲染）
6.跨域
跨域這方面浸踩，平常接觸的不多叔汁，我們這邊遇到也是讓后臺(tái)允許跨域（跨域資源共享），但是這個(gè)跨域检碗，也是一個(gè)繞不開的話題据块，受限于篇幅，下面簡(jiǎn)單進(jìn)行講解折剃。
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同一域名，不同協(xié)議不允許
http://www.example.com/a.js苟耻，http://192.168.2xx.2x/b.js域名和域名對(duì)應(yīng)相同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.解決方案
網(wǎng)上的針對(duì)跨域的解決方案有很多，大家參考著看就好智蝠。雖然羅列這么多腾么，但是我只用過兩種。
1杈湾、 jsonp
2解虱、 document.domain + iframe
3、 location.hash + iframe
4漆撞、 window.name + iframe
5殴泰、 postMessage
6、 跨域資源共享（CORS）
7浮驳、 nginx代理
8悍汛、 nodejs中間件代理
9、 WebSocket協(xié)議
6-3.參考資料
7.性能優(yōu)化
這里只講個(gè)大概至会，具體操作得靠自己自行問搜索引擎离咐。
7-1.首屏優(yōu)化
按需加載，非首屏圖片使用預(yù)加載或懶加載奉件，DNS宵蛀，壓縮代碼，合并圖片县貌，減少請(qǐng)求等术陶。
7-2.算法優(yōu)化
減少沉余的代碼，控制循環(huán)的次數(shù)窃这，避免巨大函數(shù)等瞳别。
8.SEO
作為前端開發(fā)者，在SEO方面接觸得應(yīng)該不少杭攻。前端方面祟敛，注意SEO的點(diǎn)也不少。下面簡(jiǎn)單寫下兆解，在我開發(fā)的項(xiàng)目里面馆铁，也有幾個(gè)項(xiàng)目是需要做SEO的，個(gè)人的建議如下幾點(diǎn)：
8-1.meta標(biāo)簽
可定義關(guān)鍵詞锅睛、網(wǎng)站描述
< metaname="keywords"content="關(guān)鍵詞1埠巨，關(guān)鍵詞2"/>< metaname="description"content="描述詞1历谍，描述詞2"/>
8-2.語義化html標(biāo)簽
一方面是，利用html標(biāo)簽辣垒，達(dá)到語義化的目的望侈，比如列表使用ul，ol勋桶。表格使用table等脱衙，不建議什么元素都使用div。
另一方面是盡可能使用html5提供的具有語義化的標(biāo)簽例驹。
以前寫法
建議寫法
8-3.html嵌套級(jí)別不宜過多
這一點(diǎn)就是盡量使html做到扁平化捐韩，避免嵌套過多，但是這點(diǎn)相對(duì)而言鹃锈，難度比較大荤胁。
8-4.img標(biāo)簽四大屬性不能省
alt屬性是為了讓圖片因網(wǎng)速慢、src引用錯(cuò)誤屎债、瀏覽器禁用圖像仅政、用戶使用屏幕閱讀器等情況，未成功顯示時(shí)候盆驹，仍可以顯示文本已旧，讓用戶可大概知道這張圖片大概是什么。
width和height是為了防止因?yàn)閳D片無法顯示召娜，造成頁面重新渲染，或者布局錯(cuò)亂惊楼。
8-5.h1-h6標(biāo)簽的使用
1.一個(gè)頁面建議只出現(xiàn)一個(gè)h1標(biāo)簽玖瘸，而且一般是放在網(wǎng)頁log上面使用。
2.h2標(biāo)簽一般用于詳情頁的主標(biāo)題檀咙。詳情頁沒有l(wèi)ogo雅倒，標(biāo)題使用h1。如有副標(biāo)題弧可，使用h3蔑匣。
3.h1-h6標(biāo)簽自帶權(quán)重，如果只為了設(shè)置字體大小棕诵，或者區(qū)分樣式裁良，不適合使用h1-h6。
8-6.其它方面
關(guān)于SEO的其他方式校套，在網(wǎng)上看到有這樣的方法择克，但是我自己在開發(fā)上面沒嘗試過這樣做几迄，這里就簡(jiǎn)單羅列下，大家參考下沫勿。
避免 iframe 標(biāo)簽
重要內(nèi)容謹(jǐn)慎使用 display:none;
a標(biāo)簽盡量添加title屬性
利用布局，把重要內(nèi)容HTML代碼放在最前
使用”rel=nofollow”屬性梯找，集中網(wǎng)站權(quán)重
最近一段時(shí)間很流行前后分離，以及單頁應(yīng)用。但關(guān)于前后分離和單頁應(yīng)用這個(gè)怎么做SEO現(xiàn)在不清楚（目前我了解的是沒法做）获枝。我們現(xiàn)在的做法就是需要做SEO的項(xiàng)目，前端只負(fù)責(zé)切圖骇笔，然后后臺(tái)鋪數(shù)據(jù)省店，服務(wù)端渲染，不是前端渲染蜘拉。
9.堆萨西、棧？
棧(stack)會(huì)自動(dòng)分配內(nèi)存空間旭旭，會(huì)自動(dòng)釋放谎脯。堆(heap)動(dòng)態(tài)分配的內(nèi)存，大小不定也不會(huì)自動(dòng)釋放持寄。
基本類型：Undefined源梭、Null、Boolean稍味、Number 和 String废麻，這5中基本數(shù)據(jù)類型可以直接訪問，他們是按照值進(jìn)行分配的模庐，存放在棧(stack)內(nèi)存中的簡(jiǎn)單數(shù)據(jù)段烛愧，數(shù)據(jù)大小確定，內(nèi)存空間大小可以分配掂碱。
如下例子
let a=1;let b=a;
如果修改了b
b=2;
雖然b一開始是通過a賦值怜姿，但是a和b是獨(dú)立的儲(chǔ)存在棧內(nèi)存里面，修改其中一個(gè)疼燥，不會(huì)對(duì)另一個(gè)有任何影響沧卢。
引用類型：即存放在堆(heap)內(nèi)存中的對(duì)象，變量實(shí)際保存的是一個(gè)指針醉者，這個(gè)指針指向另一個(gè)位置但狭。
如下例子
let a={name:'守候'};let b=a;
如果修改了b
b.name='sh';
b通過a賦值，a和b就共用了一個(gè)堆內(nèi)存撬即，修改了a或者b立磁，都直接修改了堆內(nèi)存的值，就會(huì)對(duì)另一個(gè)產(chǎn)生影響搞莺。
10.響應(yīng)式和自適應(yīng)
關(guān)于這兩個(gè)的概念息罗，現(xiàn)在沒怎么聽說了〔挪祝可能是因?yàn)楝F(xiàn)在主流的就是PC和手機(jī)是分開兩個(gè)項(xiàng)目的原因迈喉，也可能是因?yàn)檫@兩個(gè)概念更應(yīng)該是設(shè)計(jì)圖的工作绍刮。上一次和別人談?wù)撨@個(gè)問題，還是在一年前挨摸，那個(gè)時(shí)候我還是切圖仔孩革。
但是關(guān)于這兩個(gè)概念的區(qū)別，大家知道一下就好得运，下面看兩張圖片估計(jì)就差不多懂了膝蜈。
圖片來自：響應(yīng)式和自適應(yīng)有什么區(qū)別?（這篇文章估計(jì)也是抄襲的，但是由于圖片我也找不到出處了熔掺，就聲明這個(gè)了）
簡(jiǎn)單來說：
自適應(yīng)：一個(gè)網(wǎng)頁饱搏，根據(jù)屏幕寬度的改變而改變。代碼只有一套置逻。在個(gè)別的屏幕上推沸，排版這個(gè)比較丑，但是設(shè)計(jì)券坞，開發(fā)成本低鬓催。
響應(yīng)式：一個(gè)網(wǎng)頁，根據(jù)屏幕的寬度的改變而展示不同的效果恨锚，代碼基本是兩套以上宇驾。在所有屏幕上都展示很好的效果，但是設(shè)計(jì)猴伶，開發(fā)成本高课舍。
自適應(yīng)實(shí)例：攜程
響應(yīng)式實(shí)例：segmentfault
