今天有朋友問了我?guī)讉€問題怜浅，稍微總結(jié)了一下：
1.靜態(tài)資源緩存
緩存是為了減輕服務(wù)端壓力袁波，但是會伴隨著什么時候同步人断、什么時候更新緩存的問題耻蛇。整體有兩種思路踪蹬，一種是根據(jù)最后修改時間，一種是根據(jù)文件內(nèi)容臣咖。
最初的方式是服務(wù)器單向的控制跃捣，響應(yīng)頭中加上Expires，告訴瀏覽器一個固定的時間點夺蛇，在這個時間點之前都拿緩存疚漆。后來又有了更靈活一些的方式，Cache-Control:max-age=多長時間蚊惯，不再指定一個時間點愿卸，而是每次根據(jù)響應(yīng)的時間點和返回的max-age的緩存時間，計算出一個過期時間截型，以后每次響應(yīng)會更新這個時間趴荸，過期時間可以不斷的更新。
上面兩種都是服務(wù)器單向控制宦焦，沒有協(xié)商的過程发钝，除非更新時間特別固定，否則不是很適用〔郑現(xiàn)在更多的是用服務(wù)端和瀏覽器協(xié)商的方案酝豪，根據(jù)兩份文件的最后修改時間和文件內(nèi)容的數(shù)據(jù)指紋。因為是雙向的溝通精堕，自然就有兩個頭孵淘，一個請求一個響應(yīng)：Last-Modified/If-modified-since，Etag/If-none-match歹篓。
如果不想走緩存瘫证，除了通過上面的機制修改內(nèi)容揉阎，以更新最后修改時間或者文件內(nèi)容的方式外，還可以修改文件名字背捌。因為瀏覽器就是通過文件名來查找緩存的毙籽，名字變了，自然就找不到對應(yīng)緩存資源了毡庆，修改名字的方式通過加時間戳或者hash都可以坑赡。
2.mock server
前后端分離的項目，前端開發(fā)的時候并不依賴后端的接口么抗，只要起一個mock server就可以自己模擬接口數(shù)據(jù)毅否。但是開發(fā)服務(wù)器和mock服務(wù)器的端口不一致，可以結(jié)合webpack-dev-server做一層轉(zhuǎn)發(fā)蝇刀。
devServer: {
contentBase: '',
proxy: {
"/api": {
target: 'http://localhost:7001/xxx',
pathRewrite: {"^/api" : "/abc"}
}
}
}
mock服務(wù)器可以通過json-server+ mockjs來做搀突，
//mockjs
module.export = {
'/abc' : Mock.mock({
name: 'aaa',
"list|4": [
{
"id|+1": 1,
name: '@word(5)'
}
]
});
}
//jsonServer
const jsonServer = require('json-server');
const routesConfig = require('./routes-config');
const server = jsonServer.create();
const router = jsonServer.router(routesConfig);
server.use(router);
const port = 7001;
server.listen(port, () => {
console.log('mock server started at localhost:' + port);
});
3.對架構(gòu)的理解
現(xiàn)在主流的是組件化的架構(gòu)，把頁面分成各種可以復用的ui單元熊泵，通過組合組件的方式來搭建頁面仰迁。
react和vue都是做組件化的，整體思路類似顽分，但細節(jié)有很多不同徐许，主要是數(shù)據(jù)驅(qū)動一個是響應(yīng)式，一個是全局數(shù)據(jù)對比卒蘸，同時關(guān)于有些功能的內(nèi)置還是交給社區(qū)去做的思路也不同雌隅。具體的區(qū)別可以見我之前的一篇文章：
從2張運行流程圖看vue和react區(qū)別
開發(fā)過程中會涉及到很多資源的處理，比如html的模板引擎缸沃、css相關(guān)的less恰起、sass、postcss趾牧，js的typescript检盼、babel等，還有js模塊的打包翘单。這些東西都需要一個構(gòu)建的工具去統(tǒng)一處理吨枉，進行資源的處理以及打包，同時可以加入一些優(yōu)化性能的處理哄芜，比如小圖片轉(zhuǎn)base64貌亭、異步模塊code spliting、js的treeshaking等认臊。
4.移動端和pc端的區(qū)別
移動端的瀏覽器兼容性更好一些圃庭，可以適用flex來寫一些布局，pc端有時候要考慮兼容性，還得用float和定位的方案剧腻。移動端只有touch事件斟薇，會涉及到復雜的手勢處理，而pc端有鼠標恕酸、鍵盤事件。
此外胯陋，移動端網(wǎng)絡(luò)不穩(wěn)定蕊温，對于加載性能的優(yōu)化要求更嚴格。
5.SEO的方案
爬蟲抓取到的頁面是靜態(tài)的html遏乔，我們平時開發(fā)的單頁應(yīng)用是動態(tài)生成html的义矛，搜索引擎抓不到動態(tài)的內(nèi)容，針對這種情況需要在服務(wù)端做渲染盟萨。
vue本身支持的方案nuxt只支持node凉翻，如果服務(wù)端用的時java、php等語言捻激，想做前后端分離制轰，可以使用百度的fis方案，支持前端寫服務(wù)端的模板引擎胞谭，本地起fis的開發(fā)服務(wù)器來解析這些模板引擎垃杖。
6.如何推廣新的技術(shù)棧
不同技術(shù)棧之間的差別不是功能的差別，而是對不同代碼封裝形式的差別丈屹，比如react中使用js來操作html调俘，而在vue中使用模板，需要學習指令旺垒、過濾器等彩库，雖然頁面結(jié)構(gòu)還是一樣，但是需要換一種方式來組織代碼先蒋。
為了讓成員了解這種技術(shù)的思想骇钦，可以寫一些demo和文檔，結(jié)合一些宣講來讓他們熟悉這種新的開發(fā)思路竞漾，并且和之前的封裝方式司忱、代碼組織方式找到對應(yīng)的部分，進而完成思路的轉(zhuǎn)換畴蹭。
7.安全性問題
安全性問題主要是用戶輸入一段惡意代碼坦仍，比如xss攻擊，應(yīng)用沒有做轉(zhuǎn)義等處理叨襟，利用動態(tài)的解析繞過一些環(huán)節(jié)或者達到一些特殊的目的繁扎，避免的思路就是對用戶的在存儲之前做處理，或者在顯示之前做轉(zhuǎn)義，總之梳玫，不能信任用戶輸入的內(nèi)容爹梁。
總結(jié)
整體，我們聊的比較分散提澎，聊到了前端架構(gòu)姚垃、mock server、支持seo的渲染方案盼忌、xss等安全問題积糯、靜態(tài)資源緩存、pc和移動端區(qū)別谦纱、以及如何在團隊中推新的技術(shù)棧等看成，各方面都涉及到了一些，料到很多平時沒有深入思考的東西給了我不少的觸動跨嘉。因此川慌，簡單總結(jié)一下，方便以后可以繼續(xù)深入祠乃。
聊天的內(nèi)容和架構(gòu)圖的對應(yīng)關(guān)系（見圖中數(shù)字）
