1.web前端開發，如何提高頁面效能優化？
內容方面：
1.減少 HTTP 請求 (Make Fewer HTTP Requests)
2.減少 DOM 元素數量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可快取 (Make Ajax Cacheable)
針對CSS：
1.把 CSS 放到內碼表上端 (Put Stylesheets at the Top)
2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4.避免 CSS 表示式 (Avoid CSS Expressions)
針對JavaScript ：
1. 指令碼放到 HTML 內碼表底部 (Put Scripts at the Bottom)
2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4. 移除重複指令碼 (Remove Duplicate Scripts)
面向圖片(Image)：
1.優化圖片
2 不要在 HTML 中使用縮放圖片
3 使用恰當的圖片格式
4 使用 CSS Sprites 技巧對圖片優化
複製程式碼
2.前端開發中，如何優化影像？影像格式的區別？
優化影像：
1、不用圖片，儘量用css3代替。 比如說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中都可以用CSS達成。
2、 使用向量圖SVG替代點陣圖。對於絕大多數圖案、圖示等，向量圖更小，且可縮放而無需生成多套圖。現在主流瀏覽器都支援SVG了，所以可放心使用！
3.、使用恰當的圖片格式。我們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多為照片之類的，適用於JPEG。
而修飾圖片通常更適合用無失真壓縮的PNG。
GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視訊格式，或用SVG動畫取代。
4、按照HTTP協議設定合理的快取。
5、使用字型圖示webfont、CSS Sprites等。
6、用CSS或JavaScript實現預載入。
7、WebP圖片格式能給前端帶來的優化。
WebP支援無損、有失真壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，非常適合用於網路等圖片傳輸。
影像格式的區別：
向量圖：圖示字型，如 font-awesome；svg 點陣圖：gif,jpg(jpeg),png
區別：
  1、gif:是是一種無損，8點陣圖片格式。
具有支援動畫，索引透明，壓縮等特性。適用於做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。
  2、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於允許輕微失真的色彩豐富的照片，
不適 合做色彩簡單(色調少)的圖片，如logo,各種小圖示icons等。
  3、png:PNG可以細分為三種格式:PNG8，PNG24，PNG32。後面的數字代表這種PNG格式最多可以索引和儲存的顏色值。
關於透明：PNG8支援索引透明和alpha透明;PNG24不支援透明;而PNG32在24位的PNG基礎上增加了8位（256階）的alpha通道透明;
優缺點：
  1、能在保證最不失真的情況下儘可能壓縮影像檔案的大小。
  2、對於需要高保真的較複雜的影像，PNG雖然能無失真壓縮，但圖片檔案較大，不適合應用在Web頁面上。
複製程式碼
3.Vue的雙向資料繫結原理是什麼？
vue.js 是採用資料劫持結合釋出者-訂閱者模式的方式，
通過Object.defineProperty()來劫持各個屬性的setter，
getter，在資料變動時釋出訊息給訂閱者，觸發相應的監聽回撥。
具體步驟：
第一步：需要observe的資料物件進行遞迴遍歷，
包括子屬性物件的屬性，都加上 setter和getter
這樣的話，給這個物件的某個值賦值，
就會觸發setter，那麼就能監聽到了資料變化
第二步：compile解析模板指令，將模板中的變數替換成資料，
然後初始化渲染頁面檢視，並將每個指令對應的節點繫結更新函式，
新增監聽資料的訂閱者，一旦資料有變動，收到通知，更新檢視
第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要做的事情是:
1、在自身例項化時往屬性訂閱器(dep)裡面新增自己
2、自身必須有一個update()方法
3、待屬性變動dep.notice()通知時，能呼叫自身的update()方法，
並觸發Compile中繫結的回撥，則功成身退。
第四步：MVVM作為資料繫結的入口，整合Observer、Compile和Watcher三者，
通過Observer來監聽自己的model資料變化，通過Compile來解析編譯模板指令，
最終利用Watcher搭起Observer和Compile之間的通訊橋樑，
達到資料變化 -> 檢視更新；檢視互動變化(input) -> 資料model變更的雙向繫結效果。
複製程式碼
4.請說下封裝 vue 元件的過程？
首先，元件可以提升整個專案的開發效率。
能夠把頁面抽象成多個相對獨立的模組，
解決了我們傳統專案開發：效率低、難維護、複用性等問題。
然後，使用Vue.extend方法建立一個元件，然後使用Vue.component方法註冊元件。
子元件需要資料，可以在props中接受定義。
而子元件修改好資料後，想把資料傳遞給父元件。可以採用emit方法。
複製程式碼
5.vue.cli中怎樣使用自定義的元件？有遇到過哪些問題嗎？
第一步：在components目錄新建你的元件檔案（smithButton.vue），script一定要export default {
第二步：在需要用的頁面（元件）中匯入：import smithButton from ‘../components/smithButton.vue’
第三步：注入到vue的子元件的components屬性上面,components:{smithButton}
第四步：在template檢視view中使用，<smith-button> </smith-button>
問題有：smithButton命名，使用的時候則smith-button。
複製程式碼