撩課-Web大前端每天5道面試題-Day25

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。