1. 用通俗的語言解釋冷更新和熱更新。
熱更新是指軟體不通過運營商店的軟體版本更新審核，直接通過應用自行下載的軟體數據更新的行為。簡單來說，就是在用戶下載安裝APP之後，打開App時遇到的即時更新。熱更新是一種各大手游等眾多App常用的更新方式。
冷更新差不多就是重裝的意思，用戶主動從網路、存儲介質（光碟機、u盤等）來獲取安裝包，進行安裝的過程。而熱更新，是程序自主從安裝渠道（一般是網路）進行更新升級的過程。
工作原理
熱更新就是動態下發代碼，它可以使開發者在不發布新版本的情況下，修復 BUG 和發布功能，讓開發者得以繞開蘋果的審核機制，避免長時間的審核等待以及多次被拒造成的成本。
技術特點
在iOS中有兩種App更新方式：一種是在AppStore內進行更新，更新時重新下載全部安裝包；另一種就是熱更新，用戶只有在打開App時才會發現熱更新包，更新時只需下載安裝更新部分的代碼，再次打開時即可。熱更新最大的優點就是快，它可以繞過蘋果方面的審核，更新通常只需一個晚上即可上線，另一大優點就是更新包較小，一般都在1M左右，用戶不連接WiFi也可隨意下載。
2. vue插件怎麼修改store狀態
vue有自己的腳手架構建工具vue-cli,使用起來非常方便，使用webpack來集成各種開發便捷工具，比如：
代碼熱更新，修改代碼之後網頁無刷新改變，對前端開發來說非常的方便
PostCss，再也不用去管兼容性的問題了，只針對chrome寫css代碼，會自動編譯生成支持多款瀏覽器的css代碼
Eslint，統一代碼風格，規避低級錯誤，對於有代碼潔癖的人來說是絕對的好東西，不過有些地方的代碼校驗有時候也挺麻煩的-.-
bable，ES2015出來已經有一段時間了，但是不少瀏覽器還沒有兼容ES6.有了bable，放心使用ES6語法，它會自動轉義成ES5語法。
Stylus，類似於SASS/SCSS，但是可以不寫{}和「：」，使用起來還是很方便的
…
除此之外，vue-cli已經使用node配置了一套本地伺服器和安裝命令等，本地運行和打包只需要一個命令就可以搞定，非常的方便
開發
vue非常好的融合了react的組件化思想和angular的指令思想。 一個vue的組件將HTML、CSS、JS代碼寫在一個文件裡面，這樣既方便編寫，也方便管理和修改
Axios
在vue1.x的時候，vue的官方HTTP請求工具是vue-resource，但是在vue2.0的時候將工具改成了axios。
使用方式都差不多，但需要注意的是：介面返回的res並不直接是返回的數據，而是經過axios本身處理過的json對象。真正的數據在res.data里：
axios.get(url).then((res)=>{
this.data = res.data
})
Vuex
vue提供了一個數據管理工具vuex，有點類似於angular中factory和service，可以進行數據上的通信。 比如存儲一些公共變數或者是不同組件間的數據處理等。
這個有一些高級用法在這里不細說，想要了解的可以去官方文檔看，有中文版本。
復制代碼
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
axios.get(url).then((res)=>{
this.data = res.data
})
復制代碼
Vue-Router
vue-router是vue的路由系統，可以用來創建單頁應用。基本思想是在主頁面中引入標簽，然後定義路由，把router掛在到app上，然後把各個子頁面渲染到view裡面。使用起來還是很方便的， 跳轉頁面只需要
router.push('test')
獲取元素節點
vue2.0廢除了v-el指令，所有的節點指令修改為ref，然後通過ref來獲取元素節點，如
<div ref="testHook">test</div> js code this.$ref.testHook
組件間的通信
一。如果是和子組件通信，則使用ref就可以實現，如：
<test ref="testHook"></test>
js code
this.$ref.testHook.add() //調用test子組件的add方法
二。使用emit來發送廣播
vue2提供了一套廣播機制，即一邊發送廣播，一邊接收廣播來執行相應操作。使用方法如下：
比如想要給test組件發送一個「相加」廣播:
復制代碼
export default {
method:{
click(){
Vue.$emit('add',{}) //第二個參數可作為傳遞數據傳送到監聽埠，不需要則傳空對象
}
}
}
復制代碼
那麼test組件中就需要監聽，在created方法里寫
復制代碼
export default {
created(){
Vue.$on('add',this.add)
},
method:{
add(){
this.count++
}
}
}
3. 什麼是熱更新熱更新是什麼意思
熱更新是一種各大手游等眾多App常用的更新方式。
熱更新就是動態下發代碼，它可以使開發者在不發布新版本的情況下，修復 BUG 和發布功能，讓開發者得以繞開蘋果的審核機制，避免長時間的審核等待以及多次被拒造成的成本。
2017年6月，AppStore審核團隊針對AppStore中熱更新的App開發者發送郵件，要求移除所有相關的代碼、框架或SDK，並重新提交審核，否則就會在AppStore中下架該軟體。
(3)前端代碼修改需要發版熱更嗎擴展閱讀：
在iOS中有兩種App更新方式：一種是在AppStore內進行更新，更新時重新下載全部安裝包；另一種就是熱更新。
用戶只有在打開App時才會發現熱更新包，更新時只需下載安裝更新部分的代碼，再次打開時即可。
熱更新最大的優點就是快，它可以繞過蘋果方面的審核，更新通常只需一個晚上即可上線，另一大優點就是更新包較小，一般都在1M左右，用戶不連接WiFi也可隨意下載。
4. 最近在伺服器端修改了網站代碼更新之後，用域名瀏覽發現還是之前的內容，在伺服器上查看內容是修改了的。
有的伺服器是有CDN加速帶緩存的。需要讓CDN進行清理。
檢查一下代碼文件，是否修改了另外一個同名稱的同內容的文件。
有的網站前台是帶緩存的。比如html，需要重新生成html。動態頁面，有時候也需要在後台清理緩存。
瀏覽器的問題，可以試試其它電腦的瀏覽器。或自帶的IE瀏覽器。360極速瀏覽器。
針對以上四點去處理。基本不會出現你這種情況。
5. 地址庫變化 怎麼更新前端編碼文件
這個是組內一位同學在平時開發中，發現調試不便，為團隊開發的熱更新工具。很厲害，文章中的技術實現內容也是我了解了他的具體實現思路後，整理出來的。
工具源碼 EHU(esl-hot-update)
熱更新是什麼
熱更新就是當你在開發環境修改代碼後，不用刷新整個頁面即可看到修改後的效果。
如果你的項目中使用了webpack的話，你會很幸運，藉助webpack-dev-server插件可以實現項目的熱更新。
解決的問題
對於大型的系統級別項目會有下面幾個特點
模塊化（AMD）模式的廣泛使用後，開發環境散文件特別多，很容易上百，一不小心還能上千
初始化的內容特別多，各種底層庫，ui庫等等
這兩個特點直接導致每次調試後，刷新會很慢。如果初始化的js達到上千的數量級，每一次重新刷新都是5s，10s，甚至20s的等待。
而熱更新的目的就是為了在一定程度上減少這5s，10s，甚20s的浪費。
遇到的問題
我們使用的是網路自己的開發環境工具edp，首先他不支持熱更新
我們使用的AMD實踐也是網路自己的esl，而且即使是requirejs也暫時沒有找到對應的熱更新策略，假如requirejs有對應的，我們也無法直接使用
所以最終的結論是我們自己去實現一個基於我們自己業務的。這樣我們考慮的面不用太廣，並且解決方案的更有針對性，即面向我們現有的業務框架。最重要的是可以嘗試修改底層框架做配合。
等待路踩通了，我們再去考慮普適性。
解決的思路
從ehu/package.json 這個文件中，我們就可以看出一些具體的思路
需要一個watch功能，即能夠監聽到文件的修改
socket.io通知瀏覽器處理文件的改變
修改esl這個文件，達到能夠實時更新的效果
當時最簡單的考慮，就是文件改變了後，能夠通知瀏覽器，瀏覽器去重新load這個文件並且執行一次。這個時候再重新去打開這個模塊或者功能後，會發現新load的代碼在執行後會覆蓋上一次的。
所以當時的我的第一直覺是，esl重復require時，如果後面一次會覆蓋前面的，那麼可以通過簡單的覆蓋思路去嘗試，結果發現覆蓋不了。經過驗證，發現是esl內部維護了一個map，即require過的模塊會存起來。我們如果希望更新這個模塊，只能將map中的對應模塊名刪除。（後面會詳細講述esl的改造）
對於工具的要求
對應這個工具，我當時也提出了幾個要求
esl必然是需要修改的，但是如何對開發人員透明？首先是不能讓大家都做這種修改。
頁面中也必須加入socket.io支持，那麼我們如何在不影響其他人員開發的情況下加入？
我們做的屬於beta版本，如何選擇性的使用？ehu工具和以前的開發模式隨意切換？
安裝方便，能否只是作為一個工具，即插即用，不需要繁瑣的配置？
如何使用
npm install -g ehu（mac下需要sudo，windows下需要管理員許可權）
在原來執行edp webserver start命令的路徑 執行 ehu（不再需要執行 edp webserver start）
原來埠號8848修改為8844（原8848依舊可以使用，但不支持熱更新）
首先使用的方式很簡單，為此特意將工具打包到npm上，以後就算有升級，僅僅需要大家update即可。
另外從使用角度，也盡量集成化（一句命令行即可），避免為了這個工具的使用而做太多額外的事情。
依賴的框架 "dependencies": { "async": "^1.5.0", "commander": "^2.9.0", "express": "^4.13.3", "express-http-proxy": "^0.6.0", "lodash": "^3.10.1", "socket.io": "^1.3.7", "watch": "^0.16.0" }
幾個必要的
watch ——監聽文件變化
socket.io ——和瀏覽器的實時通訊
express ——搭建一個服務
express-http-proxy ——代理
commander ——便於自己寫node命令
工具類：
async 和 lodash
框架的思想
先看看昨天對於這個工具提出的幾個要求
esl必然是需要修改的，但是如何對開發人員透明？首先是不能讓大家都做這種修改。
頁面中也必須加入socket.io支持，那麼我們如何在不影響其他人員開發的情況下加入？
我們做的屬於beta版本，如何選擇性的使用？ehu工具和以前的開發模式隨意切換？
安裝方便，能否只是作為一個工具，即插即用，不需要繁瑣的配置？
對於1和2，我們其實是需要修改/添加一些代碼的，但是代碼都不希望提交到項目的開發環境，因為這些代碼生成環境完全不需要。
所以我們的解決方案是：攔截，改寫（偷梁換柱）
舉個例子，當我們需要對esl做一些改造時，我們處理方式是當路由指向esl.js時，我們換成另外一個esl-ehu.js(esl-ehu.js是對esl.js改造後的)返回去，這樣就對開發環境的代碼透明了。
socket.io的支持也是同理，我們可以在返回html時，改寫html的代碼，加入對於socket.io的引入。
上面的思路其實來源於之前項目構建打包。
對於3，我們希望在使用工具時，任然能很快切換到以前模式，這樣做兼容的目的是希望工具更有競爭力，能吸引大家使用。
我們的解決方案是：內部實現一個子線程，埠號依然是以前的，而且訪問這個埠，就繞過了這個工具。
對於子線程child_process，我們還遇到一個問題，就是子線程跑系統的時候，經常掛掉，今天剛剛找到一個解決方案，後面會單開一個文章講這個坑。
對於4，其實就是使用npm方式
技術細節
第一步：搭建一個新服務作為底層，去託管住我們現在edp服務，新服務上有一個路由配置，對於我們需要處理的，攔截。對於不用處理的直接代理給edp
代碼參考
var mid = express(); mid.all('*', httpProxy(config.defaultServer, { // 先走特殊規則，否則就代理到默認web server filter: function(req, res) { return !ruleRoute(req, res); }, forwardPath: function(req, res) { return URL.parse(req.url).path; } })); // 由express-http-proxy託管路由 app.use('/', mid);
ruleRoute 就是一些攔截處理
在此之前，啟動下子進程
var child = require('child_process'); var cli = child.exec(defaultServerCLI); cli.stdout.on('data', function (log) { !isServerStarted && (cb(null, log)); isServerStarted && console.log(log); });
此處有坑，後面單開文章描述
第二步： 因為上面攔截後的返回的文件已經支持socket.io，esl等底層已經修改了，所以下面是需要去監聽文件通知瀏覽器做對應處理。
// 啟動socket.io服務 io = require('socket.io')(server); io.on('connection', function (socket) { socket.emit('hello'); }); // 監視文件改動 initWatch();
第三步： 做一些集成工作
program .version('0.0.6') .usage('[options]') .option('-p, --port <n>', 'Set the port', setPort) .option('-n, --noServerCLI', '...', noServerCLI) .parse(process.argv);
集成到node命令中
第四步： 默認配置
mole.exports = { // 默認的伺服器 defaultServer: 'http://127.0.0.1:8848', // 默認的伺服器啟動命令 defaultServerCLI: 'edp webserver start', // 從伺服器根目錄到需要監控的文件夾中間path baseDir: 'nirvana-workspace', // hot update 需要watch的文件夾（不包括baseDir） watchDirs: 'src', // 入口文件（不包括baseDir） indexHTML: 'main.html', // ehu啟動埠號（不可與默認的伺服器埠號沖突） port: 8844 };
源碼中有很多邏輯是處理配置的
瀏覽器依賴
socket.io ——瀏覽器端僅僅依賴socket這個去和服務端通信
通信邏輯
// 建立連接 socket.on('hello', function () { log(getLogMsgPrefix(), 'HotUpdate已啟動！'); }); // 檢測到文件改動 socket.on('hotUpdate', function (file) { // log(getLogMsgPrefix(), '檢測到文件改動', file); // ....處理文件修改後對應熱更新邏輯 }); 對css/less更新的處理
這個原理比較簡單，頁面監聽到樣式的修改，重新載入一次樣式即可，簡單的覆蓋。
但是存在一個潛在問題，因為樣式是簡單的覆蓋，所以，如果修改是刪除了樣式，是無法生效的。
舉例：修改前：
display: none; overflow: hidden; position: relative; background: #FFFFFF; border: 1px solid #E8E8E8; margin-top: 20px;
修改後：
display: none; overflow: hidden; position: relative; background: #FFFFFF;
刪除的 border 和 margin-top 其實是沒有生效的
這個也是後期需要解決的一個問題。
對模板更新的處理
目前項目中使用的是tpl的模板引擎。
現在就遇到一個問題，在熱更新時，模板引擎其實是重復載入模板的，那麼就涉及到重復載入是否後面的會覆蓋前面問題。
查看載入模板的源碼後，發現根據配置有三個選擇， 覆蓋 ， 忽略 和 報錯 ， 我們業務中使用的配置是遇到重復後會報錯處理，所以我們需要在不修改業務默認屬性的情況下，添加一些邏輯。
// [esl-hot-update] 重新載入需要覆蓋 window.EHU_HOT_UPDATE_OPTIONS && window.EHU_HOT_UPDATE_OPTIONS.etpl.isOverride && (namingConflict = 'override'); switch (namingConflict) { /* jshint ignore:start */ case 'override': engine.targets[name] = target; context.targets.push(name); case 'ignore': break; /* jshint ignore:end */ default: throw new Error('Target exists: ' + name); }
window.EHU_HOT_UPDATE_OPTIONS.etpl.isOverride 這個是修改後自己實現的控制配置修改的邏輯。
然後這個文件加入到服務端的路由中，請求時替換。
對js更新的處理
這里邏輯比較復雜，因為需要修改底層的AMD模塊載入的邏輯。
js沒有模板那麼簡單，不是直接覆蓋，因為在AMD模式中，每一個文件，都是被上一個文件調用執行的結果。
所以我們處理的邏輯是不僅需要重新載入修改的文件，並且遞歸所有直接或者間接調用他的文件，全部重新載入。
所以從上面的特點可以看出，這個工具目前階段主要適用於業務模塊的開發，因為業務的依賴不會特別深，對於dep中的核心文件修改，就不是很合適，一旦文件比較底層，熱跟新是重新載入的模塊也會非常多。
另外也有很多其他的坑，還在不斷優化中。
總結
這次實踐其實就是業務中遇到的問題（系統太龐大，調試太麻煩），如何解決問題，如何把解決的思路變成一個解決方案，分享給團隊。
因為自己解決了，和形成一個解決方案還是有非常大的差別的，例如我們在形成方案的過程中，就嘗試了很多新東西，踩了很多坑。
目前還有個坑就是chrome瀏覽器，調試的Source資源時，如果一個資源重復載入，內存中會更新，但是對應的資源沒有更新，導致斷點時，映射不對（斷點失效），目前暫時的解決方案是，每次請求時添加時間戳，讓Source映射的資源強制更新。這個可以正常斷點，但是斷點沒有記憶功能（坑啊，因為文件變了）。
6. 前後端分離方案以及技術選型
作者：關開發
一.什麼是前後端分離？
理解前後端分離大概可以從3個方面理解：
1. 交互形式
2. 代碼組織形式
3. 開發模式與流程
1.1 交互形式
前後端不分離
後端將數據和頁面組裝、渲染好了之後，向瀏覽器輸出最終的html；瀏覽器接收到後會解析html，解析引入的css、執行js腳本，完成最終的頁面展示。
前後端分離
後端只需要和前端約定好接收以及返回的數據格式（一般用JSON格式），向前端提供API介面。前端就可以通過HTTP請求調用API的方式進行交互。前端獲取到數據後，進行頁面組裝、渲染，最終在瀏覽器呈現。
1.2 代碼組織形式
前後端不分離
在web應用早期的時候，前端頁面以及後台業務數據處理的代碼都放在一個工程下，甚至放在同一目錄下，前端頁面夾雜著後端代碼。前、後端開發工程師都需要把整套代碼導入開發工具才能開發。此階段下前後端代碼以及工作耦合度太高，前端不能獨立開發和測試，後端人員也要依賴前端完成頁面後才能完成開發。最糟糕的情況是前端工程師需要會後端模板技術（jsp），後端工程師還要會點前端技術，需要口頭說明頁面數據介面，才能配合完成開發。否則前端只能當一個「切圖仔」，只輸出HTML、CSS、以及很少量與業務邏輯無關的js；然後由後端轉化為後端jsp，並且還要寫業務的js代碼。
前後端分離
前後端代碼放在不同的工程下，前端代碼可以獨立開發，通過mock/easy-mock技術模擬後端API服務可以獨立運行、測試；後端代碼也可以獨立開發，運行、測試，通過swagger技術能自動生成API文檔供前端閱讀，還可以進行自動化介面測試，保證API的可用性，降低集成風險。
1.3 開發模式與流程
前後端不分離
在項目開發階段，前端根據原型和UI設計稿，編寫HTML、CSS以及少量與業務無關的js（純效果那些），完成後交給後台人員，後台人員將HTML轉為jsp，並通過JSP的模板語法進行數據綁定以及一些邏輯操作。後台完成後，將全部代碼打包，包含前端代碼、後端代碼打成一個war，然後部署到同一台伺服器運行。頂多做一下動靜分離，也就是把圖片、css、js分開部署到nginx。
具體開發流程如下：圖略
前後端分離
實現前後端分離之後，前端根據原型和UI設計稿編寫HTML、CSS以及少量與業務無關的js（純效果那些），後端也同時根據原型進行API設計，並與前端協定API數據規范。等到後台API完成，或僅僅是API數據規范設定完成之後。前端即可通過HTTP調用API，或通過mock數據完成數據組裝以及業務邏輯編寫。前後端可以並行，或者前端先行於後端開發了。
具體開發流程如下：圖略
二、前後端分離的好處與壞處。
從上面3個方面對比了之後，前後端分離架構和傳統的web架構相比，有很大的變化，看起來好處多多。到底是分還是不分，我們還是要理性分析是否值得才去做。
從目前應用軟體開發的發展趨勢來看，主要有兩方面需要注意：
· 越來越注重用戶體驗，隨著互聯網的發展，開始多終端化。
· 大型應用架構模式正在向雲化、微服務化發展。
我們主要通過前後端分離架構，為我們帶來以下四個方面的提升：
· 為優質產品打造精益團隊
通過將開發團隊前後端分離化，讓前後端工程師只需要專注於前端或後端的開發工作，是的前後端工程師實現自治，培養其獨特的技術特性，然後構建出一個全棧式的精益開發團隊。
· 提升開發效率
前後端分離以後，可以實現前後端代碼的解耦，只要前後端溝通約定好應用所需介面以及介面參數，便可以開始並行開發，無需等待對方的開發工作結束。與此同時，即使需求發生變更，只要介面與數據格式不變，後端開發人員就不需要修改代碼，只要前端進行變動即可。如此一來整個應用的開發效率必然會有質的提升。
· 完美應對復雜多變的前端需求
如果開發團隊能完成前後端分離的轉型，打造優秀的前後端團隊，開發獨立化，讓開發人員做到專注專精，開發能力必然會有所提升，能夠完美應對各種復雜多變的前端需求。
· 增強代碼可維護性
前後端分離後，應用的代碼不再是前後端混合，只有在運行期才會有調用依賴關系。應用代碼將會變得整潔清晰，不論是代碼閱讀還是代碼維護都會比以前輕松。
那麼前後端分離有什麼不好的地方嗎？我目前是沒有想到，除非你說會增加前端團隊的配備，後端工程師會變的不全能。。。
二、前後端分離架構方案。
實現前後端分離，主要是前端的技術架構變化較大，後端主要變為restfull 風格API，然後加上Swagger技術自動生成在線介面文檔就差不多了。
對於目前用於前後端分離方案的前端技術架構主要有兩種：
· 傳統SPA
· 服務端渲染SSR
2.1 傳統SPA
傳統SPA指的是單頁面應用，也就是整個網站只有一個頁面，所有功能都通過這一個頁面來呈現。因為一個人的肉眼，某一個時間點看一個頁面，既然如此何必要不同功能做多個頁面呢？只保留一個頁面作為模板，然後通過路由跳轉來更新這個模板頁面的內容不就可以了嗎？確實如此，現在通過reac全家桶、tvue全家桶，模塊化、路由、wabpack等技術輕而易舉就能實現一個單頁面應用。
單頁面應用的運行流程
1.用戶通過瀏覽器訪問網站url
2.單頁面的html文件（index.html）被下載到瀏覽器，接著下載html裡面引用的css，js。
3.css，js下載到瀏覽器完成之後，瀏覽器開始解析執行js向後端服務非同步請求數據。
4.請求數據完成後，進行數據綁定、渲染，最終在用戶瀏覽器呈現完整的頁面。
2.2 服務端渲染
服務端渲染的方案指的是數據綁定，渲染等工作都放在服務端完成，服務端向瀏覽器輸出最終的html。大家看完這個是不是有個疑問，這不是又回到了前後端不分離的時代了嗎？答案是否定的，因為這里的服務端是用來執行前端數據綁定、渲染的，也就是把瀏覽器的一部分工作分擔到了服務端。而目前具備這只種能力的服務端是NodeJs服務端。
它的原理其實就是在瀏覽器與前端代碼中間插入了一個NodeJs服務端。瀏覽器請求前端頁面時，會先經過NodeJS服務端，由NodeJs去讀取前端頁面，並執行非同步後端API，獲取到數據後進行頁面數據綁定，渲染等工作，完成一個最終的html然後返回瀏覽器，最後瀏覽器進行展示。
服務端渲染應用的運行流程：
1.用戶通過瀏覽器訪問網站url
2.NodeJS服務端接收到請求，讀取到對應的前端html，css，js。
3.NodeJS解析執行js向後端API非同步請求數據。
4.NodeJs請求數據完成之後，進行數據綁定、渲染，得到一個最終的html。
5.NodeJs向瀏覽器輸出html，瀏覽器進行展示。
PS：其實本質就是把前端編寫成一個nodeJs的服務端web應用。實施服務端渲染後，我們最終運行的是一個Nodejs服務端應用。而單頁面應用是把靜態頁面部署到靜態資源伺服器進行運行。
看到這里，你是否又有疑問，為什麼要這么麻煩搞服務端渲染呢？
2.3 SPA與服務端渲染方案對比
SPA的優點是開發簡單，部署簡單；缺點是首次載入較慢，需要較好的網路，不友好的SEO。
so，以下就是使用服務端渲染的理由了（摘取vue官方說法）：
與傳統 SPA (單頁應用程序 (Single-Page Application)) 相比，伺服器端渲染 (SSR) 的優勢主要在於：
· 更好的 SEO，由於搜索引擎爬蟲抓取工具可以直接查看完全渲染的頁面。
請注意，截至目前，Google 和 Bing 可以很好對同步 JavaScript 應用程序進行索引。在這里，同步是關鍵。如果你的應用程序初始展示 loading 菊花圖，然後通過 Ajax 獲取內容，抓取工具並不會等待非同步完成後再行抓取頁面內容。也就是說，如果 SEO 對你的站點至關重要，而你的頁面又是非同步獲取內容，則你可能需要伺服器端渲染(SSR)解決此問題。
· 更快的內容到達時間 (time-to-content)，特別是對於緩慢的網路情況或運行緩慢的設備。
無需等待所有的 JavaScript 都完成下載並執行，才顯示伺服器渲染的標記，所以你的用戶將會更快速地看到完整渲染的頁面。通常可以產生更好的用戶體驗，並且對於那些「內容到達時間(time-to-content) 與轉化率直接相關」的應用程序而言，伺服器端渲染 (SSR) 至關重要。
使用伺服器端渲染 (SSR) 時還需要有一些權衡之處：
· 開發條件所限。瀏覽器特定的代碼，只能在某些生命周期鉤子函數 (lifecycle hook) 中使用；一些外部擴展庫 (external library) 可能需要特殊處理，才能在伺服器渲染應用程序中運行。
· 涉及構建設置和部署的更多要求。與可以部署在任何靜態文件伺服器上的完全靜態單頁面應用程序 (SPA) 不同，伺服器渲染應用程序，需要處於 Node.js server 運行環境。
· 更多的伺服器端負載。在 Node.js 中渲染完整的應用程序，顯然會比僅僅提供靜態文件的 server 更加大量佔用 CPU 資源 (CPU-intensive - CPU 密集)，因此如果你預料在高流量環境 (high traffic) 下使用，請准備相應的伺服器負載，並明智地採用緩存策略。
以vue為例，實施服務端渲染可以查看官方指南： https://ssr.vuejs.org ，或選擇Nuxt.js
2.4 預渲染技術
如果你調研伺服器端渲染 (SSR) 只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能需要預渲染。無需使用 web 伺服器實時動態編譯 HTML，而是使用預渲染方式，在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 文件。優點是設置預渲染更簡單，並可以將你的前端作為一個完全靜態的站點。
如果你使用 webpack，你可以使用 prerender-spa-plugin 輕松地添加預渲染。它已經被 Vue 應用程序廣泛測試 - 事實上，作者是 Vue 核心團隊的成員。
prerender-spa-plugin: https://github.com/chrisvfritz/prerender-spa-plugin
三、前後端分離技術選型
- artTemplate + bootstrap（不推薦， 不算完全前後端分離）
- vue全家桶（推薦）
- react全家桶 （推薦，生態全）
7. cocos2dx-js可以熱更新嗎
工作需要，在空閑時間看了下Cocos2d-JS的熱更新。對其進行了一個簡單的實現，這里總結分享一下。
Cocos2d-JS 熱更新
Cocos2d-JS 熱更新是啥？Cocos2d-JS終歸還是一個游戲引擎，就以游戲的過程來理解吧。傳統游戲需要更新人物動畫、地圖場景、游戲邏輯、背景音樂怎麼辦？新出一個APP放到應用商店等用戶，或者好一點游戲內提示又升級並自行完整的新版本APP。
使用Cocos2d-JS的熱更新，那就大不一樣了。它可以做到進入游戲後需要更新的資源甚至是腳本本身，而且更新過程不需要退出遊戲。只要用戶聯網，就能夠保證使用到最新的資源。
這些場景就非常適合使用Hot Fix
想在游戲中對春節開放新活動，不能保證應用商店能准時過審核上線
發現一個嚴重的Bug，需要立即修復
需要經常換游戲資源，提升新鮮感
先放一個中規中矩的版本過市場審核，然後繞過審核自己直接推新內容，哈哈
對於游戲來說，這個特性是比較重量級的。不過因為JavaScript的語言特性能支持這一功能，所以Cocos2d-JS能用此特性，而Cocos2d-x無法使用。
8. web前端代碼 小白求教，web前端開發的代碼，是運行在哪裡，是在web伺服器上運行嗎還是運行在瀏覽器端
運行在瀏覽器端，如果只是HTML5和js，直接在瀏覽器可以。
如果有後台代碼，就得需要web伺服器，目前主流的是Tomcat伺服器。
9. 前端開發還要會UI設計嗎
本質上講兩者沒有關系，但是實際上是有一些重疊的，以下詳細說明：
1、UI設計師具備一定的前端代碼編寫能力，能夠在一定程度上提升自身的崗位競爭力，未來的發展空間也會更大。
2、UI設計師在互聯網時代，尤其是移動互聯網時代得到了廣泛的關注，一個重要的原因是互聯網產品對於用戶的使用體驗越來越關注，所以目前整個IT行業有大量的UI設計師，尤其是互聯網公司更是釋放出了大量的UI設計崗位。
3、UI設計師主要的崗位任務包括交互設計和視覺設計兩部分，通常在產品經理和策劃完成方案設計之後，UI設計師就需要完成產品原型的構建，包括交互原型和視覺方案。
4、UI設計師在反復與產品經理溝通並修改之後，最終把設計原型交由開發團隊進行開發，以後在每次版本迭代的時候，都離不開UI設計師的參與，以保障產品的使用體驗度不斷提升。所以，在崗位職責方面，UI設計師通常並不需要參與代碼的編寫。
5、但是，客戶需要通過直觀操作理解ui
，此時需要與前端進行合作，而合作的交流成本在設計期不可忽視，如果ui自己可以做出原型，無疑更具有競爭力。
10. react native能解決熱更新問題嗎
上一篇和大家分享了如何在Android 現有App中集成React Native。本篇博客同樣是react Native中比較經典的內容：熱更新部署。
android原生App中我們實現熱修復有很多種選擇：Tinker、hotFix、Qzone的熱更新等等。基本的思路都是大同小異的。React Native中的熱更新有點像App的版本更新，也就是根據查詢server端的版本和手機端目前App的版本進行對比，然後來執行是否更新的操作。根本原因在於react native的載入啟動機制：React Native會將一系列資源打包成js bundle文件，系統載入js bundle文件，解析並渲染。所以，React Native熱更新的根本原理就是更換js bundle文件，並重新載入，新的內容就完美的展示出來了。微軟為我們提供了CodePush來簡化熱更新的操作，但是由於速度等原因在國內並沒有備受青睞。本篇內容就以自己伺服器來更新的方式實現。