前端面試題專題(一)
一、談談你對 Web 標準以及 W3C 的理解和認識。
參考解答:
標簽小寫、閉合、具有語義化
外鏈CSS和JS腳本
結構、樣式、行為分離
代碼精簡,組件化開發(fā)
代碼易維護,可復用
二、CSS有哪些基本選擇器?他們的權重是如何表示的?
參考解答:
類選擇器 0.0.1.0
屬性選擇器 0.0.1.0
ID選擇器 0.1.0.0
!important > 內聯(lián)(1.0.0.0) > id(0.1.0.0) > 類、屬性、偽類(0.0.1.0) > 元素、偽元素(0.0.0.1) > 通配符(0.0.0.0)
三、HTML5有哪些新特性?移除了哪些元素?
參考解答:
新特性:
拖放API (drag, drop)
語義化更好的標簽內容(header, nav, footer, aside, article, section)
音頻視頻API (audio, video)
畫布API (canvas)
地理位置API (Geolocation)
本地離線存儲 (localStorage)
會話存儲 (sessionStorage)
表單控件 (calendar, date, time, email, url, search)
新技術 (webworker, websocket)
移除元素:
1. basefont, big, center, font, s, strike, tt, u
2. frame, frameset, Noframes
四、CSS3有哪些新特性?
參考解答:
圓角 (border-radius)
陰影 (box-shadow)
文字特效 (text-shadow)
線性漸變 (gradient)
變換: 旋轉、縮放、定位、傾斜 (tranform)
更多CSS選擇器 (子串匹配屬性選擇器Ele[attr^="value"]、普通兄弟選擇器~)
多背景圖 (multiple background images)
色彩模式 (rgba)
偽元素 (::after, ::before)
媒體查詢 (@media)
多欄布局 (multi-columns 、 flexible box 與 grid layouts)
圖片邊框 (border-image)
五、在Bootstrap中,下面柵格系統(tǒng)的標準用法中哪個是錯誤的?
<div class="container"><div class="row"></div></div>
<div class="row"><div class="col-md-1"></div></div>
<div class="row"><div class="container"></div></div>
<div class="col-md-1"><div class="row"></div></div>
參考解答:C
.row必須包含在.container容器中,A對C錯
.row中可以添加.column列,B對
同a
.column中可以嵌套.row行,D對
六、Javascript有哪些垃圾回收機制?
參考解答:
標記清除:函數(shù)中申明變量(進入環(huán)境), 函數(shù)執(zhí)行結束(離開環(huán)境),垃圾回收器會刪除沒有引用的變量。
引用計數(shù):引用計數(shù)的策略是跟蹤記錄每個值被使用的次數(shù)。變量引用次數(shù)為0的空間會被清理。
七、你覺得jQuery或Zepto源碼有哪些地方寫得好?
參考解答:
jQuery源碼封裝在匿名自執(zhí)行函數(shù)中,防止變量對全局環(huán)境的污染
傳入?yún)?shù)window可更快訪問window對象,傳入undefined避免被重定義
原型屬性和方法封裝在jQuery.prototype中并賦值給jQuery.fn方便訪問
常用數(shù)組和對象方法保存為局部變量,提高訪問速度
鏈式調用,節(jié)約代碼,提高開發(fā)效率
八、在移動端,單擊穿透是什么?
參考解答:
單擊穿透現(xiàn)象有三種:蒙層單擊穿透、頁面單擊穿透、跨頁面單擊穿透
點擊某個位置按鈕,觸發(fā)下層元素事件。
九、如何解決不同瀏覽器的標簽默認的margin值和padding值得不同?
參考解答:
重置默認樣式
body,h1,h2,h3,ul,li,input,div,span,a,form .... {margin: 0;padding: 0;}// 或者使用通配符** {margin: 0;padding: 0;}
十、JavaScript是怎么樣實現(xiàn)繼承的?請舉例說明。
參考解答:
JavaScript通過prototype屬性實現(xiàn)繼承,繼承的屬性方法是共享的,例如Child子類繼承Parent父類:
Child.prototype = new Parent()function Child() {Parent.apply(this, arguments)}
