Web前端開發2020最新高頻面試題全解析-開課吧Web前端

2020Web前端面試題及答案

問題一：png、jpg、gif 這些圖片格式解釋一下，分別什麼時候用。有沒有了解過 webp？

解析：（1）BMP，是無損的、既支持索引色也支持直接色的、點陣圖。這種圖片格式幾乎沒有對數據進行壓縮，所以BMP格式的圖片通常具有較大的文件大小。

（2）GIF是無損的、採用索引色的、點陣圖。採用LZW壓縮算法進行編碼。文件小，是GIF格式的優點，同時，GIF格式還具有支持動畫以及透明的優點。但，GIF格式僅支持8bit的索引色，所以GIF格式適用於對色彩要求不高同時需要文件體積較小的場景。

（3）JPEG是有損的、採用直接色的、點陣圖。JPEG的圖片的優點，是採用了直接色，得益於更豐富的色彩，JPEG非常適合用來存儲照片，與GIF相比，JPEG不適合用來存儲企業Logo、線框類的圖。因為有損壓縮會導致圖片模糊，而直接色的選用，又會導致圖片文件較GIF更大。

（4）PNG-8是無損的、使用索引色的、點陣圖。PNG是一種比較新的圖片格式，PNG-8是非常好的GIF格式替代者，在可能的情況下，應該儘可能的使用PNG-8而不是GIF，因為在相同的圖片效果下，PNG-8

具有更小的文件體積。除此之外，PNG-8還支持透明度的調節，而GIF並不支持。現在，除非需要動畫的支持，否則我們沒有理由使用GIF而不是PNG-8。

（5）PNG-24是無損的、使用直接色的、點陣圖。PNG-24的優點在於，它壓縮了圖片的數據，使得同樣效果的圖片，PNG-24格式的文件大小要比BMP小得多。當然，PNG24的圖片還是要比JPEG、GIF、

PNG-8大得多。

（6）SVG是無損的、矢量圖。SVG是矢量圖。這意味著SVG圖片由直線和曲線以及繪製它們的方法組成。當你放大一個SVG圖片的時候，你看到的還是線和曲線，而不會出現像素點。這意味著SVG圖片在放大時，不會失真，所以它非常適合用來繪製企業Logo、Icon等。

（7）WebP是谷歌開發的一種新圖片格式，WebP是同時支持有損和無損壓縮的、使用直接色的、點陣圖。使用webp格式的最大的優點是，在相同質量的文件下，它擁有更小的文件體積。因此它非常適合於網絡圖片的傳輸，因為圖片體積的減少，意味著請求時間的減小，這樣會提高用戶的體驗。這是谷歌開發的一種新的圖片格式，目前在兼容性上還不是太好。

問題二：如果需要手動寫動畫，你認為最小時間間隔是多久，為什麼？

解析：多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60*1000ms＝16.7ms

問題三：什麼叫優雅降級和漸進增強？

解析：漸進增強( progressive enhancement)：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。

優雅降級(graceful degradation) ：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。

區別：

(1) 優雅降級是從複雜的現狀開始，並試圖減少用戶體驗的供給

(2) 漸進增強則是從一個非常基礎的，能夠起作用的版本開始，並不斷擴充，以適應未來環境的需要

(3) 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處於安全地帶

以上就是酷仔今天整理提供的Web前端開發面試題，希望為Web前端同學提供了有用的面試素材，以後酷仔每日均會提供Python及Web相關的習題。