撩課-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.前端開發中，如何優化圖像？圖像格式的區別？

優化圖像：

一、不用圖片，儘可能用css3代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用CSS達成。

二、 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持SVG了，因此可放心使用！

3.、使用恰當的圖片格式。咱們常見的圖片格式有JPEG、GIF、PNG。

基本上，內容圖片多爲照片之類的，適用於JPEG。

而修飾圖片一般更適合用無損壓縮的PNG。

GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。

四、按照HTTP協議設置合理的緩存。

五、使用字體圖標webfont、CSS Sprites等。

六、用CSS或JavaScript實現預加載。

七、WebP圖片格式能給前端帶來的優化。
   WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，很是適合用於網絡等圖片傳輸。

圖像格式的區別：

矢量圖：圖標字體，如 font-awesome；svg 位圖：gif,jpg(jpeg),png

區別：

  一、gif:是是一種無損，8位圖片格式。
      具備支持動畫，索引透明，壓縮等特性。適用於作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

  二、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於容許輕微失真的色彩豐富的照片，
      不適  合作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。

  三、png:PNG能夠細分爲三種格式:PNG8，PNG24，PNG32。後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。

關於透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增長了8位（256階）的alpha通道透明;

優缺點：

  一、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。

  二、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。 

複製代碼

3.Vue的雙向數據綁定原理是什麼？

vue.js 是採用數據劫持結合發佈者-訂閱者模式的方式，
經過Object.defineProperty()來劫持各個屬性的setter，
getter，在數據變更時發佈消息給訂閱者，觸發相應的監聽回調。
具體步驟：

第一步：須要observe的數據對象進行遞歸遍歷，
包括子屬性對象的屬性，都加上 setter和getter
這樣的話，給這個對象的某個值賦值，
就會觸發setter，那麼就能監聽到了數據變化

第二步：compile解析模板指令，將模板中的變量替換成數據，
而後初始化渲染頁面視圖，並將每一個指令對應的節點綁定更新函數，
添加監聽數據的訂閱者，一旦數據有變更，收到通知，更新視圖

第三步：Watcher訂閱者是Observer和Compile之間通訊的橋樑，主要作的事情是:
一、在自身實例化時往屬性訂閱器(dep)裏面添加本身
二、自身必須有一個update()方法
三、待屬性變更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。

複製代碼