上海面試題總結

客戶端渲染和服務端渲染介紹與區別

• 客戶端渲染：
  在服務端放了一個html 頁面，裏面有<script>//發請求，拿數據，模版引擎渲染等，$.ajax ,</script>
  客戶端發起請求，服務端把頁面（響應的是字符串）發送過去，客戶端從上到下依次解析，如果在解析的過程中，發現ajax請求，再次像服務器發送新的請求，客戶端拿到ajax 響應結果，模板引擎渲染。過程至少和服務端發起兩次請求

• 服務端渲染：
  sever 端頁面+數據，服務端過程：1.讀取index.html 2.模版進行渲染，在發送給客戶端之前，在服務端已經把index.html 渲染處理了。var 渲染結果 = tempeter.render(模板字符串，｛解析替換對象｝) response.end(渲染結果)，服務端響應的就是最總的結果
  服務端只請求一次,多數網站既有服務端渲染又有客戶端渲染.

• 服務端渲染和客戶端渲染的區別
  客戶端渲染不利於 SEO 搜索引擎優化
  服務端渲染是可以被爬蟲抓取到的，客戶端異步渲染是很難被爬蟲抓取到的
  所以你會發現真正的網站既不是純異步也不是純服務端渲染出來的,而是兩者結合來做的
  例如京東的商品列表就採用的是服務端渲染，目的了爲了 SEO 搜索引擎優化
  而它的商品評論列表爲了用戶體驗，而且也不需要 SEO 優化，所以採用是客戶端渲染

原文: https://blog.csdn.net/qq593249106/article/details/83240805

Vue首頁加載過慢 解決方案

一、什麼導致了首頁初步加載過慢：app.js文件體積過大
二、解決方法：

1. Vue-router懶加載
   vue-router懶加載可以解決首次加載資源過多導致的速度緩慢問題：vue-router支持WebPack內置的異步模塊加載系統。所以，那些使用較少的路由組件不必打包進bundles裏，只需要在路由被訪問時按需加載。
2. 在webpack打包的過程中，將多餘文件去掉
   在webpack打包的過程中，將多餘文件去掉，如map文件，即在config/index.js中將productionSourceMap的值修改爲false，就可以在編譯時不生成.map文件了
3. 第三方庫使用CDN引入
   在項目開發中，我們會用到很多第三方庫，如果可以按需引入，我們可以只引入自己需要的組件，來減少所佔空間，但也會有一些不能按需引入，我們可以採用CDN外部加載，在index.html中從CDN引入組件，去掉其他頁面的組件import，修改webpack.base.config.js，在externals中加入該組件，這是爲了避免編譯時找不到組件報錯。
   注意：刪掉項目中import的這幾個相關的，以及Vue.use()。eslint插件報錯not defined的話，前面加個window，如window.VueRouter。
4. vue-cli開啓打包壓縮和後臺配置gzip訪問
   首先安裝插件：compression-webpack-plugin
   在 config/index.js中將productionGzip 改爲 true

原文：https://www.cnblogs.com/annie211/p/10825568.html

v-for和v-if不應該一起使用。

原因：v-for比v-if優先，即每一次都需要遍歷整個數組，影響速度。

1. 必要情況下應該替換成computed屬性。
2. 把 v-if 改成 v-show

從輸入URL到頁面加載完成期間經歷了什麼？

1. DNS域名解析
2. 發起TCP連接（三次握手）
3. 發送HTTP請求，接受HTTP響應
4. 斷開TCP連接（四次揮手）
5. 瀏覽器解析HTML代碼，請求js，css等資源，最後進行頁面渲染，呈現給用戶