資訊專欄INFORMATION COLUMN
摘要：背景前端這個(gè)職位的誕生也有短短的十年。工程化最終由婦人住到的這個(gè)項(xiàng)目的代碼變成了這樣期間經(jīng)歷了手寫前端代碼消除緩存影響合并網(wǎng)絡(luò)請(qǐng)求壓縮靜態(tài)資源前端婦人們不再只管寫，和，還要考慮性能。前端開(kāi)發(fā)已然成為一個(gè)工程化問(wèn)題。
背景
前端這個(gè)職位的誕生也有短短的十年。而在十年之前，我不認(rèn)識(shí)你，那會(huì)還叫網(wǎng)頁(yè)制作，用著一個(gè)Adobe非常牛逼的軟件叫Dreamweaver。這是一個(gè)神奇的軟件，絢麗多彩的網(wǎng)頁(yè)通過(guò)它，拖拖拽拽，就這么夢(mèng)幻般的生成了。網(wǎng)頁(yè)制作師們，像一群織夢(mèng)的婦人，心靈手巧，耐苦耐勞，從不抱怨。
直到有一天。
有位婦人（第一位婦人）站出來(lái)說(shuō)：
我不用Dreamweaver了，它生成的網(wǎng)頁(yè)垃圾代碼太多，而且兼容性問(wèn)題很多，特別是IE下，制作出來(lái)和實(shí)際展示完全不一樣，修改還麻煩，好坑爹。
第二位婦人也站了出來(lái)：
對(duì)！
第三位婦人站了出來(lái)：
說(shuō)得好！
第四位婦人站了出來(lái)：
我要手寫代碼！
自此，前端工程師誕生了！
最初的前端開(kāi)發(fā)網(wǎng)頁(yè)開(kāi)始逐步由拖拽生成轉(zhuǎn)變?yōu)槭謱懘a，從此，手寫HTML，CSS，Javascript，會(huì)點(diǎn)PS掌握切圖，成為了前端婦人們長(zhǎng)期賴以生存的技能。
手寫的代碼什么樣呢？最簡(jiǎn)單的就是下面這樣。
demo.htmlhtml... ...a.cssWish you happy everyday!
css.foo{
color: red;
}
這便是最初的前端開(kāi)發(fā)。
緩存如上的「最簡(jiǎn)單的手寫代碼」上線后。
第一次訪問(wèn)： 第二次訪問(wèn)：會(huì)發(fā)現(xiàn)，兩次css文件的請(qǐng)求有明顯區(qū)別，不斷是大?。⊿ize）、時(shí)間（Timeline）和狀態(tài)（Status）。這便是緩存在作祟。
用戶在非首次訪問(wèn)時(shí)，速度會(huì)更快，花費(fèi)時(shí)間也少。這么看來(lái)：
緩存太好了，不用每次都去服務(wù)器下載靜態(tài)資源，真想把什么都給緩存下來(lái)。
直到有一天。
有位婦人（第一位婦人，婦人A）要更新a.css：
css.foo{
color: blue;
}
更新完上線，老板去訪問(wèn)時(shí)，發(fā)現(xiàn).foo的color還是red：
婦人A你確定更新了么？我這怎么沒(méi)生效！
婦人A驚呆了：
老板，要清除緩存，每次更新都得清除緩存呀！不信你問(wèn)QA。
老板：
....
QA：
....
這時(shí)候第二位婦人（婦人B）站了出來(lái)：
你上線時(shí)把a.css換個(gè)名字不就行了。改成a1.css，瀏覽器不就用不到緩存了嘛~ ╮(￣▽￣")╭
婦人B的機(jī)智和賣萌徹底征服了婦人A。
合并網(wǎng)絡(luò)請(qǐng)求婦人A慢慢開(kāi)始接觸大項(xiàng)目，CSS和JS文件越來(lái)越多：
html... ...
老板又來(lái)了，找婦人A：
能不能把你引入的這些css和js合并起來(lái)啊，看著上面的網(wǎng)絡(luò)請(qǐng)求一大坨心里難受啊。
身為處女座的老板，還是懂很多的。
婦人A：
有啥好處咩~ ヾ(≧▽≦*)o
婦人A被婦人B影響，也開(kāi)始賣萌起來(lái)。
老板：
好處多多啊，合并靜態(tài)文件，減少網(wǎng)絡(luò)請(qǐng)求，大大加快了網(wǎng)頁(yè)請(qǐng)求速度啊！
于是，婦人A按照老板的要求，把a.css、b.css和c.css合并成all.css，把a.js、b.js和c.js合并成all.js。
壓縮靜態(tài)文件過(guò)了幾天，婦人B也找到了婦人A：
既然你都合并CSS和JS，順便把它們都?jí)嚎s下吧?？梢詼p少文件大小，減少網(wǎng)絡(luò)請(qǐng)求的Size。好事做到底。
婦人A不解：
為熟么捏~
婦人B：
因?yàn)槲颐劝 （￣ c￣）
聽(tīng)了婦人B的解釋，婦人A似乎明白了什么，趕緊去網(wǎng)上找了些壓縮工具，把all.css壓縮成min.all.css，把all.js壓縮成了min.all.js。
工程化最終由婦人A住到的這個(gè)項(xiàng)目的代碼變成了這樣：
html
期間經(jīng)歷了
手寫前端代碼
消除緩存影響
合并網(wǎng)絡(luò)請(qǐng)求
壓縮靜態(tài)資源
前端婦人們不再只管寫HTML，CSS和JS，還要考慮性能。
前端開(kāi)發(fā)已然成為一個(gè)工程化問(wèn)題。經(jīng)歷了這么多，婦人A也慢慢覺(jué)得自己牛逼起來(lái)，卻不知道，他的進(jìn)化之旅才剛剛開(kāi)始。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85493.html
摘要：我從沒(méi)有聽(tīng)到有人問(wèn)如何做一名優(yōu)秀甚至卓越的前端工程師。作為一個(gè)優(yōu)秀的前端工程師還需要深入了解以及學(xué)會(huì)處理的這些缺陷。再者，優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求。 我所遇到的前端程序員分兩種： 第一種一直在問(wèn)：如何學(xué)習(xí)前端？ 第二種總說(shuō)：前端很簡(jiǎn)單，就那么一點(diǎn)東西。 我從沒(méi)有聽(tīng)到有人問(wèn)：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師...
摘要：我從沒(méi)有聽(tīng)到有人問(wèn)如何做一名優(yōu)秀甚至卓越的前端工程師。作為一個(gè)優(yōu)秀的前端工程師還需要深入了解以及學(xué)會(huì)處理的這些缺陷。再者，優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求。 我所遇到的前端程序員分兩種： 第一種一直在問(wèn)：如何學(xué)習(xí)前端？ 第二種總說(shuō)：前端很簡(jiǎn)單，就那么一點(diǎn)東西。 我從沒(méi)有聽(tīng)到有人問(wèn)：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師...
摘要：我從沒(méi)有聽(tīng)到有人問(wèn)如何做一名優(yōu)秀甚至卓越的前端工程師。作為一個(gè)優(yōu)秀的前端工程師還需要深入了解以及學(xué)會(huì)處理的這些缺陷。再者，優(yōu)秀的前端工程師需要具備良好的溝通能力，因?yàn)榍岸斯こ處熤辽俣家獫M足四類客戶的需求。 我所遇到的前端程序員分兩種： 第一種一直在問(wèn)：如何學(xué)習(xí)前端？ 第二種總說(shuō)：前端很簡(jiǎn)單，就那么一點(diǎn)東西。 我從沒(méi)有聽(tīng)到有人問(wèn)：如何做一名優(yōu)秀、甚至卓越的WEB前端工程師...
摘要：進(jìn)階的知識(shí)的話就是響應(yīng)式這一塊了，一套代碼能適配手機(jī)是初級(jí)前端工程師的進(jìn)階，在北京工資一般在左右。進(jìn)階的知識(shí)應(yīng)該是這一塊了，當(dāng)然并不難，了解怎么與后臺(tái)交互是學(xué)習(xí)的關(guān)鍵點(diǎn)，在北京的工資一般在左右。 web前端？如果你是一名web前端工程師，那么你將感到幸運(yùn)，從之前的默默無(wú)聞，到后來(lái)的給后臺(tái)工程師打下手，再到巔峰一時(shí)。web前端可謂是當(dāng)下最火的職位之一。 showImg(https://s...
摘要：進(jìn)階的知識(shí)的話就是響應(yīng)式這一塊了，一套代碼能適配手機(jī)是初級(jí)前端工程師的進(jìn)階，在北京工資一般在左右。進(jìn)階的知識(shí)應(yīng)該是這一塊了，當(dāng)然并不難，了解怎么與后臺(tái)交互是學(xué)習(xí)的關(guān)鍵點(diǎn)，在北京的工資一般在左右。 web前端？如果你是一名web前端工程師，那么你將感到幸運(yùn)，從之前的默默無(wú)聞，到后來(lái)的給后臺(tái)工程師打下手，再到巔峰一時(shí)。web前端可謂是當(dāng)下最火的職位之一。 showImg(https://s...
閱讀 2938·2021-10-14 09:43
閱讀 2883·2021-10-14 09:42
閱讀 4663·2021-09-22 15:56
閱讀 2371·2019-08-30 10:49
閱讀 1594·2019-08-26 13:34
閱讀 2385·2019-08-26 10:35
閱讀 605·2019-08-23 17:57
閱讀 2029·2019-08-23 17:15
