Web前端經典面試試題（一）

本篇收錄了一些面試中常常會遇到的經典面試題，而且都給出了我在網上收集的答案。眼看新的一年立刻就要開始了，相信不少的前端開發者會有一些跳槽的悸動，經過對本篇知識的整理以及經驗的總結，但願能幫到更多的前端面試者。（若有錯誤或更好的答案，歡迎指正，水平有限，望各位不吝指教。）

一. 什麼是語義化的HTML?有何意義？爲何要作到語義化？（高頻率考題）

a.什麼是語義化的HTML？

語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標籤
（代碼語義化），可以便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器
很好地解析。

b、爲何要作到語義化？

1.有利於SEO，有利於搜索引擎爬蟲更好的理解咱們的網頁，從而獲取更多的有效信息，提高網頁
的權重。
2.在沒有CSS的時候可以清晰的看出網頁的結構，加強可讀性。
3.便於團隊開發和維護，語義化的HTML可讓開發者更容易的看明白，從而提升團隊的效率和協
調能力。
4.支持多終端設備的瀏覽器渲染。

二. 行內元素和塊元素分別有哪些？（高頻率）

塊級元素：div  , p  , form,   ul,  li ,  ol, dl,    form,   address, fieldset,  hr,
         menu,  table
行內元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea, cite

三. iframe有那些缺點？

1.frame會阻塞主頁面的Onload事件；
2.iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
3.SEO不利，對爬蟲不友好。

四. CSS的優先級？內聯和important哪一個優先級高？（高頻率）

id選擇器 值：100
類選擇器 值：10
標籤選擇器： 1

五. 盒子垂直居中方法（高頻率）

position: absolute;
left:50%;
top:50%; 
width:400px;
height:400px;
margin-left:-200px;
margin-top:-200px;

六. 浮動元素清除浮動方法（高頻率）

四種方法：
一、使用空標籤清除浮動
二、使用overflow屬性。（overflow:auto；zoom:1″用於兼容IE6）
三、使用after僞對象清除浮動。 該方法只適用於非IE瀏覽器
四、浮動外部元素，float-in-float。這種方法很簡單，就是把「#outer」元素也進行浮動（向左
   或者向右）。

七. Diplay:none與visibility：hidden的區別（高頻率）

visibility:hidden隱藏，但在瀏覽時保留位置；
display:none視爲不存在，且不加載！

八. CSS中em和px的關係和區別

1. em的值並非固定的； 
2. em會繼承父級元素的字體大小。
    12px = 1.2em

九. 閉包的理解，javascript的做用域（高頻率）

a、閉包就是可以讀取其餘函數內部變量的函數。
b、在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。
閉包的用途
閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另
一個就是讓這些變量的值始終保持在內存中。 

實例以下：
根據做用域鏈的規則，底層做用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一
直找，直到window的變量，沒有就返回undefined。這裏明顯count 是函數內部的flag2 的那
個count 。

var count=10;   //全局做用域 標記爲flag1
    function add(){
    var count=0;    //函數全局做用域 標記爲flag2
    return function(){
        count+=1;   //函數的內部做用域
        alert(count);
    }
    }
    var s = add()
    s();//輸出1
    s();//輸出2

JS中做用域的概念：
表示變量或函數起做用的區域，指代了它們在什麼樣的上下文中執行，亦即上下
執行環境。Javascript的做用域只有兩種：全局做用域和本地做用域，本地做用
是按照函數來區分的。

十. SetTimeout與setInterval區別

由於setTimeout(表達式,延時時間)在執行時,是在載入後延遲指定時間後,去執行一次表達式,記
住,次數是一次 
而setInterval(表達式,交互時間)則不同,它從載入後,每隔指定的時間就執行一次表達式

十一. 網站性能優化的方法（高頻率）

1）將css和js文件放在獨立外部文件中引用
2) 使用gzip壓縮網頁內容
3）將CSS放在頁面頂端，JS文件放在頁面底端
4）使JS文件內容最小化
5）儘可能減小外部腳本的使用，減小DNS查詢時間
（ 文件合併
   文件最小化/文件壓縮
   使用 CDN 託管
   緩存的使用（多個域名來提供緩存））

十二. 前端由哪些部分組成（高頻率）

a、網頁的結構層（structural layer）由 HTML 或 XHTML 之類的標記語言負責建立。標籤，也
就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關
於如何顯示有關內容的信息。例如，P 標籤表達了這樣一種語義：「這是一個文本段。」
b、網頁的表示層（presentation layer） 由 CSS 負責建立。 CSS 對「如何顯示有關內容」的問
題作出了回答。
c、網頁的行爲層（behavior layer）負責回答「內容應該如何對事件作出反應」這一問題。這是 
Javascript 語言和 DOM 主宰的領域。

十三. Jpeg、gif、png格式的優缺點，應用場景

jpg高畫質（圖片）
gif 色質單一（圖標）
png 透明