前端小白麵試之旅二

liying-abc發表於2019-03-07
前端

問題一：vue頁面如何優化提升頁面的載入速度

通過 coding split（程式碼分割） 結合 Vue 的非同步元件和 Webpack 的程式碼分割功能，輕鬆實現路由元件的懶載入。把不同路由對應的元件分割成不同的程式碼模組，當路由被訪問的時候去載入對應的模組即可，也就是說元件在引入的時候是以一個函式的形式引入

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

export default new Router({
  routes:[
    {path:'/',redirect:"/home"},
    {path:'/home',component:()=>import('../components/Home.vue'),meta:{keepAlive:true,title:'首頁'}},
    {path:'/list',component:()=>import('../components/List.vue'),meta:{title:'列表'},},
    {path:'/collect',component:()=>import('../components/Collect.vue'),  meta:{title:'新增'},},
    //detail/1 {bid:1} 路徑引數 必須有但是可以隨機
    {
      path:'/detail/:bid',
      component:()=>import('../components/Detail.vue'),
      meta:{title:'詳情'},
      name:"detail"
    },
    {path:'/add',component:()=>import('../components/Add.vue')},
    {path:'*',redirect:'/home'}
  ]

})
複製程式碼

問題二：路由元件如何傳參

  • 布林模式
  • 物件模式
  • 函式模式

問題三：路由如何傳參

  • 通過params
  • 通過query
  • 通過hash

問題三：flex常用屬性

  • flex-direction:row/colunm 預設是行還是列
  • jsuttify-content:center 垂直居中
  • align-content:center 水平居中
  • flex:1 平均幾等分

問題四： 頁面載入慢如何優化？

  • 減少HTTP請求

例如在進行刪除時頁面會重新整理一下資料，此時不要去直接呼叫介面，而是從新寫一遍刪除方法即可

  • 將樣式表放在頭部

可以減少頁面的請求時間，使內容逐步呈現，提升使用者體驗，防止‘白屏’

  • 將指令碼放在底部

js的下載和執行會阻斷DOM樹的構建，甚至是中斷

  • 避免CSS表示式
  • 一些小圖示進來採用雪碧圖的形式引入

引入雪碧圖是將所有的小圖片都放在一張大圖上，因此我們只需要請求一次，接下來每次都是通過位置去獲取到相應的圖示

  • 精簡JavaScript

問題五：CSS3有哪些新特性

  • 新增各種css選擇器
  • 圓角border-radius -多列布局
  • 陰影和反射
  • 文字特效 text-shaow
  • 線性漸變
  • 旋轉transtorm

問題六:HTML5有哪些新特性？

  • 繪畫canvas
  • 媒介回放 videodio和audiovideo
  • 本地儲存localStora 和 seesitionStorage
  • 語義化內容標籤 article,footer,header,nav,section
  • 表單控制元件 calendar,email,time,url,search
  • 新的技術 webworker,webSocket,Geoloaction

問題七：常見的相容問題如何處理

  • 瀏覽器相容問題一：不同瀏覽器的標籤預設的外補丁和內補丁不同

利用萬用字元設定*{margin：0;padding:0;}

  • 瀏覽器相容問題二：塊屬性標籤float後，又有橫行的margin情況下，在IE6顯示margin比設定的大

利用萬用字元設定*{margin：0;padding:0;}

  • 瀏覽器相容問題三：設定較小高度標籤（一般小於10px），在IE6，IE7，遨遊中高度超出自己設定高度

給超出高度的標籤設定overflow:hidden;或者設定行高line-height 小於你設定的高度。

  • 瀏覽器相容問題四：行內屬性標籤，設定display:block後採用float佈局，又有橫行的margin的情況，IE6間距bug

在display:block;後面加入display:inline;display:table;

  • 瀏覽器相容問題五：圖片預設有間距

使用float屬性為img佈局

  • 標籤最低高度設定min-height不相容

如果我們要設定一個標籤的最小高度200px，需要進行的設定為：{min-height:200px; height:auto !important; height:200px; overflow:visible;}

  • 瀏覽器相容問題七：透明度的相容CSS設定

CSS hack 解決

  • 元素水平居中問題

FF:margin:0 auto; IE: text-align:center

問題八：vue宣告周期函式

  • beforeCreated 在例項初始化之後，資料觀測 (data observer) 和 event/watcher 事件配置之前被呼叫。
  • created 在例項建立完成後被立即呼叫。
  • beforeMounted 在掛載開始之前被呼叫
  • mounted el 被新建立的 vm.$el 替換，並掛載到例項上去之後呼叫該鉤子。
  • beforeUpdata 資料更新時呼叫，發生在虛擬 DOM 打補丁之前。
  • updata 由於資料更改導致的虛擬 DOM 重新渲染和打補丁，在這之後會呼叫該鉤子。
  • active keep-alive 元件啟用時呼叫
  • deactivated keep-alive 元件停用時呼叫。
  • beforeDestroy 例項銷燬之前呼叫
  • destory 例項銷燬之後呼叫
  • errorCaptured 當捕獲一個來自子孫元件的錯誤時被呼叫

問題九：vue-router的鉤子函式

  • 全域性鉤子 beforeEach afterEach
  • 單個路由裡面的鉤子 beforeEnter beforeLeave
  • 元件路由 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave

相關文章