三、link 和@import 的區別是?
(1)link屬于XHTML標簽,而@import是CSS提供的;(2)頁面被加載的時,link會同時被加載,而@import引用的CSS會等到頁面被加載完再加載;(3)import只在IE5以上才能識別,而link是XHTML標簽,無兼容問題;(4)link方式的樣式的權重 高于@import的權重.四、瀏覽器的內核分別是什么? * IE瀏覽器的內核Trident、Mozilla的Gecko、Chrome的Blink(WebKit的分支)、Opera內核原為Presto,現為Blink; / 28
2015前端面試題2015-02
五、常見兼容性問題?
* png24位的圖片在iE6瀏覽器上出現背景,解決方案是做成PNG8.* 瀏覽器默認的margin和padding不同。解決方案是加一個全局的*{margin:0;padding:0;}來統一。* IE6雙邊距bug:塊屬性標簽float后,又有橫行的margin情況下,在ie6顯示margin比設置的大。浮動ie產生的雙倍距離 #box{ float:left;width:10px;margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離,解決方案是在float的標簽樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)漸進識別的方式,從總體中逐漸排除局部。
首先,巧妙的使用“9”這一標記,將IE游覽器從所有情況中分離出來。接著,再次使用“+”將IE8和IE7、IE6分離開來,這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff9;/*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,也可以使用getAttribute()獲取自定義屬性;Firefox下,只能使用getAttribute()獲取自定義屬性.解決方法:統一通過getAttribute()獲取自定義屬性.* IE下,even對象有x,y屬性,但是沒有pageX,pageY屬性;Firefox下,event對象有pageX,pageY屬性,但是沒有x,y屬性.* 解決方法:(條件注釋)缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。/ 28
2015前端面試題
2015-02 * Chrome 中文界面下默認會將小于 12px 的文本強制按照 12px 顯示, 可通過加入 CSS 屬性-webkit-text-size-adjust: none;解決.超鏈接訪問過后hover樣式就不出現了 被點擊訪問過的超鏈接樣式不在具有hover和active了解決方法是改變CSS屬性的排列順序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
六、html5有哪些新特性、移除了那些元素?如何處理HTML5新標簽的瀏覽器兼容問題?如何區分 HTML 和 HTML5?
* HTML5 現在已經不是 SGML 的子集,主要是關于圖像,位置,存儲,多任務等功能的增加。* 繪畫 canvas
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據,瀏覽器關閉后數據不丟失;
sessionStorage 的數據在瀏覽器關閉后自動刪除
語意化更好的內容元素,比如 article、footer、header、nav、section
表單控件,calendar、date、time、email、url、search
新的技術webworker, websockt, Geolocation * 移除的元素-純表現的元素:basefont,big,center,font, s,strike,tt,u; 對可用性產生負面影響的元素:frame,frameset,noframes;
七、支持HTML5新標簽:
* IE8/IE7/IE6支持通過document.createElement方法產生的標簽,可以利用這一特性讓這些瀏覽器支持HTML5新標簽,瀏覽器支持新標簽后,還需要添加標簽默認的樣式:
* 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
八、如何區分: DOCTYPE聲明新增的結構元素功能元素,語義化的理解?
用正確的標簽做正確的事情!
html語義化就是讓頁面的內容結構化,便于對瀏覽器、搜索引擎解析; 在沒有樣式CCS情況下也以一種文檔格式顯示,并且是容易閱讀的。搜索引擎的爬蟲依賴于標記來確定上下文和各個關鍵字的權重,利于 SEO。使閱讀源代碼的人對網站更容易將網站分塊,便于閱讀維護理解。
九、HTML5的離線儲存?
localStorage
長期存儲數據,瀏覽器關閉后數據不丟失; sessionStorage 數據在瀏覽器關閉后自動刪除。
十、(寫)描述一段語義的html代碼吧。
(HTML5中新增加的很多標簽(如:、
< div id=“header”> < h1>標題< /h1> < h2>專注Web前端技術< /h2> < /div>
十一、iframe有那些缺點?
*iframe會阻塞主頁面的Onload事件;
*iframe和主頁面共享連接池,而瀏覽器對相同域的連接有限制,所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe,最好是通過javascript 動態給iframe添加src屬性值,這樣可以可以繞開以上兩個問題。/ 28
2015前端面試題
2015-02
十二、請描述一下 cookies,sessionStorage 和 localStorage 的區別?
cookie在瀏覽器和服務器間來回傳遞。sessionStorage和localStorage不會 sessionStorage和localStorage的存儲空間更大; sessionStorage和localStorage有更多豐富易用的接口; sessionStorage和localStorage各自獨立的存儲空間;
十三、如何實現瀏覽器內多個標簽頁之間的通信?(阿里)調用localstorge、cookies等本地存儲方式
十四、webSocket如何兼容低瀏覽器?(阿里)Adobe Flash Socket、ActiveX HTMLFile(IE)、基于 multipart 編碼發送 XHR、7 / 28
基于長輪詢的 XHR
2015前端面試題2015-02
CSS
一、介紹一下CSS的盒子模型?
(1)有兩種,IE 盒子模型、標準 W3C 盒子模型;IE的content部分包含了 border 和 pading;(2)盒模型: 內容(content)、填充(padding)、邊界(margin)、邊框(border).二、CSS 選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算? CSS3新增偽類有那些?
*
1.id選擇器(# myid)
2.類選擇器(.myclassname)
3.標簽選擇器(div, h1, p)
4.相鄰選擇器(h1 + p)
5.子選擇器(ul > li)
6.后代選擇器(li a)
7.通配符選擇器(*)
8.屬性選擇器(a[rel = “external”])
9.偽類選擇器(a: hover, li: nth-child)
*
可繼承的樣式: font-size font-family color, UL LI DL DD DT;*
不可繼承的樣式:border padding margin width height;*
優先級就近原則,同權重情況下樣式定義最近者為準;*
載入樣式以最后載入的定位為準;/ 28
2015前端面試題
2015-02 優先級為:
!important > id > class > tag
important 比 內聯優先級高
三、CSS3新增偽類舉例:
p:first-of-type 選擇屬于其父元素的首個
元素的每個
元素。p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。p:only-child
選擇屬于其父元素的唯一子元素的每個
元素。p:nth-child(2)選擇屬于其父元素的第二個子元素的每個
元素。:enabled :disabled 控制表單控件的禁用狀態。:checked
單選框或復選框被選中。
四、如何居中div?如何居中一個浮動元素?
給div設置一個寬度,然后添加margin:0 auto屬性 div{width:200px;margin:0 auto;}
五、居中一個浮動元素
確定容器的寬高 寬500 高 300 的層
設置層的外邊距
.div { Width:500px;height:300px;//高度可以不設
Margin:-150px 0 0-250px;
position:relative;相對定位
background-color:pink;//方便看效果 / 28
2015前端面試題2015-02
left:50%;top:50%;}
六、列出display的值,說明他們的作用。position的值,relative和absolute定位原點是?
1.block 象塊類型元素一樣顯示。
none 缺省值。象行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示,但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示,并添加樣式列表標記。
2.*absolute 生成絕對定位的元素,相對于 static 定位以外的第一個父元素進行定位。*fixed(老IE不支持)生成絕對定位的元素,相對于瀏覽器窗口進行定位。*relative生成相對定位的元素,相對于其正常位置進行定位。* static 默認值。沒有定位,元素出現在正常的流中 *(忽略 top, bottom, left, right z-index 聲明)* inherit 規定從父元素繼承 position 屬性的值。
七、CSS3有哪些新特性?
CSS3實現圓角(border-radius:8px),陰影(box-shadow:10px),對文字加特效(text-shadow、),線性漸變(gradient),旋轉(transform)
transform:rotate(9deg)scale(0.85,0.90)translate(0px,-30px)skew(-9deg,0deg);//旋轉,縮放,定位,傾斜
增加了更多的CSS選擇器
多背景 rgba八、九、一個滿屏 品 字布局 如何設計? 經常遇到的CSS的兼容性有哪些?原因,解決方法是什么? / 28
2015前端面試題
2015-02
十、為什么要初始化CSS樣式。
因為瀏覽器的兼容問題,不同瀏覽器對有些標簽的默認值是不同的,如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。
當然,初始化樣式會對SEO有一定的影響,但魚和熊掌不可兼得,但力求影響最小的情況下初始化。*最簡單的初始化方法就是: * {padding: 0;margin: 0;}(不建議)淘寶的樣式初始化:
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0;padding:0;} body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53;} h1, h2, h3, h4, h5, h6{ font-size:100%;} address, cite, dfn, em, var { font-style:normal;} code, kbd, pre, samp { font-family:couriernew, courier, monospace;} small{ font-size:12px;} ul, ol { list-style:none;} a { text-decoration:none;} a:hover { text-decoration:underline;} sup { vertical-align:text-top;} sub{ vertical-align:text-bottom;} legend { color:#000;} fieldset, img { border:0;} button, input, select, textarea { font-size:100%;} table { border-collapse:collapse;border-spacing:0;} / 28
2015前端面試題2015-02
十一、absolute的containing block計算方式跟正常流有什么不同?
十二、position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣?
十三、對BFC規范的理解?
(W3C CSS 2.1 規范中的一個概念,它決定了元素如何對其內容進行定位,以及與其他元素的關 系和相互作用。)
十四、css定義的權重
以下是權重的規則:標簽的權重為1,class的權重為10,id的權重為100,以下例子是演示各種定義的權重值: /*權重為1*/ div{} /*權重為10*/.class1{} /*權重為100*/ #id1{} /*權重為100+1=101*/ #id1 div{} /*權重為10+1=11*/.class1 div{} /*權重為10+10+1=21*/.class1.class2 div{}
如果權重相同,則最后定義的樣式會起作用,但是應該避免這種情況出現 / 28
2015前端面試題
2015-02
十五、解釋下浮動和它的工作原理?清除浮動的技巧
十六、用過媒體查詢,針對移動端的布局嗎?
十七、使用 CSS 預處理器嗎?喜歡那個?
SASS
十八、如果需要手動寫動畫,你認為最小時間間隔是多久,為什么?(阿里)
多數顯示器默認頻率是60Hz,即1秒刷新60次,所以理論上最小間隔為1/60*1000ms = 16.7ms
十九、display:inline-block 什么時候會顯示間隙?(攜程)移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing / 28
2015前端面試題2015-02
JavaScript一、二、JavaScript原型,原型鏈 ? 有什么特點? eval是做什么的?
它的功能是把對應的字符串解析成JS代碼并運行;應該避免使用eval,不安全,非常耗性能(2次,一次解析成js語句,一次執行)。
三、四、null,undefined 的區別? 寫一個通用的事件偵聽器函數。
// event(事件)工具集,來源:github.com/markyun
markyun.Event = {
// 頁面加載完成后
readyEvent : function(fn){
if(fn==null){
fn=document;
}
var oldonload = window.onload;
if(typeof window.onload!= 'function'){
window.onload = fn;
} else {
window.onload = function(){ / 28
2015前端面試題
2015-02
oldonload();
fn();
};
}
},// 視能力分別使用dom0||dom2||IE方式 來綁定事件
// 參數: 操作的元素,事件名稱 ,事件處理程序
addEvent : function(element, type, handler){
if(element.addEventListener){
//事件類型、需要執行的函數、是否捕捉
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent('on' + type, function(){
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},// 移除事件
removeEvent : function(element, type, handler){
if(element.removeEnentListener){ / 28
2015前端面試題2015-02
element.removeEnentListener(type, handler, false);
} else if(element.datachEvent){
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},// 阻止事件(主要是事件冒泡,因為IE不支持事件捕獲)
stopPropagation : function(ev){
if(ev.stopPropagation){
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},// 取消事件的默認行為
preventDefault : function(event){
if(event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
} / 28
2015前端面試題
2015-02
},// 獲取事件目標
getTarget : function(event){
return event.target || event.srcElement;
},// 獲取event對象的引用,取到事件的所有信息,確保隨時能使用event;
getEvent : function(e){
var ev = e || window.event;
if(!ev){
var c = this.getEvent.caller;
while(c){
ev = c.arguments[0];
if(ev && Event == ev.constructor){
break;
}
c = c.caller;
}
}
return ev;
}
};
五、Node.js的適用場景? / 28
2015前端面試題2015-02 高并發、聊天、實時消息推送
六、介紹js的基本數據類型。
number,string,boolean,object,undefined
七、Javascript如何實現繼承?
通過原型和構造器
八、[“1”, “2”, “3”].map(parseInt)答案是多少?
[1, NaN, NaN] 因為 parseInt 需要兩個參數(val, radix),其中 radix 表示解析時用的基數。map 傳了 3 個(element, index, array),對應的 radix 不合法導致解析失敗。
九、如何創建一個對象?(畫出此對象的內存圖)
function Person(name, age){
this.name = name;
this.age = age;
this.sing = function(){ alert(this.name)}
}
十、談談This對象的理解。
this是js的一個關鍵字,隨著函數使用場合不同,this的值會發生變化。但是有一個總原則,那就是this指的是調用函數的那個對象。this一般情況下:是全局對象Global。作為方法調用,那么this就是指這個對象
十一、事件是?IE與火狐的事件機制有什么區別? 如何阻止冒泡?
1.我們在網頁中的某個操作(有的操作對應多個事件)。例如:當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。
2.事件處理機制:IE是事件冒泡、火狐是 事件捕獲; / 28
2015前端面試題
2015-02 3.ev.stopPropagation();
十二、什么是閉包(closure),為什么要用它?
執行say667()后,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在.使得Javascript的垃圾回收機制GC不會收回say667()所占用的資源,因為say667()的內部函數的執行需要依賴say667()中的變量。這是對閉包作用的非常直白的描述.function say667(){
// Local variable that ends up within closure
var num = 666;
var sayAlert = function(){ alert(num);}
num++;
return sayAlert;} var sayAlert = say667();sayAlert()//執行結果應該彈出的667
十三、“use strict”;是什么意思 ? 使用它的好處和壞處分別是什么?
十四、如何判斷一個對象是否屬于某個類?
使用instanceof(待完善)
if(a instanceof Person){
alert('yes');
}
十五、new操作符具體干了什么呢? / 28
2015前端面試題2015-02
1、創建一個空對象,并且 this 變量引用該對象,同時還繼承了該函數的原型。
2、屬性和方法被加入到 this 引用的對象中。
3、新創建的對象由 this 所引用,并且最后隱式的返回 this。
var obj = {};obj.__proto__ = Base.prototype;Base.call(obj);
十六、Javascript中,有一個函數,執行時對象查找時,永遠不會去查找原型,這個函數是?
hasOwnProperty
十七、JSON 的了解?
JSON(JavaScript Object Notation)是一種輕量級的數據交換格式。它是基于JavaScript的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小 {'age':'12', 'name':'back'}
十八、js延遲加載的方式有哪些?
defer和async、動態創建DOM方式(用得最多)、按需異步載入js
十九、ajax 是什么?
二十、同步和異步的區別? 二
十一、如何解決跨域問題? jsonp、iframe、window.name、window.postMessage、服務器上設置代理頁面
二十二、模塊化怎么做?立即執行函數,不暴露私有成員 / 28
2015前端面試題
2015-02
var module1 =(function(){
var _count = 0;
var m1 = function(){
//...};
var m2 = function(){
//...};
return {
m1 : m1,m2 : m2
};
})();
二十三、AMD(Modules/Asynchronous-Definition)、CMD(Common Module Definition)規范區別?
AMD 是 RequireJS 在推廣過程中對模塊定義的規范化產出。CMD 是 SeaJS 在推廣過程中對模塊定義的規范化產出。
對于依賴的模塊,AMD 是提前執行,CMD 是延遲執行。不過 RequireJS 從 2.0 開始,也改成可以延遲執行(根據寫法不同,處理方式不同)。CMD 推崇 as lazy as possible.CMD 推崇依賴就近,AMD 推崇依賴前置 / 28
2015前端面試題2015-02 二
十四、異步加載的方式有哪些?
(1)defer,只支持IE
(2)async:
(3)創建script,插入到DOM中,加載完畢后callBack 二
十五、documen.write和 innerHTML的區別
document.write只能重繪整個頁面 innerHTML可以重繪頁面的一部分
二十六、.call()和.apply()的區別?
例子中用 add 來替換 sub,add.call(sub,3,1)== add(3,1),所以運行結果為:alert(4);
注意:js 中的函數其實是對象,函數名是對 Function 對象的引用。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
二十七、Jquery與jQuery UI 有啥區別?
*jQuery是一個js庫,主要提供的功能是選擇器,屬性修改和事件綁定等等。/ 28
2015前端面試題
2015-02 *jQuery UI則是在jQuery的基礎上,利用jQuery的擴展性,設計的插件。
提供了一些常用的界面元素,諸如對話框、拖動行為、改變大小行為等等
二十八、JQuery的源碼看過嗎?能不能簡單說一下它的實現原理? 二
十九、jquery 中如何將數組轉化為json字符串,然后再轉化回來?
jQuery中沒有提供這個功能,所以你需要先編寫兩個jQuery的擴展:
$.fn.stringifyArray = function(array){
return JSON.stringify(array)
}
$.fn.parseArray = function(array){
return JSON.parse(array)
}
然后調用:
$(“").stringifyArray(array)三
十、針對 jQuery 的優化方法?
*基于Class的選擇性的性能相對于Id選擇器開銷很大,因為需遍歷所有DOM元素。*頻繁操作的DOM,先緩存起來再操作。用Jquery的鏈式調用更好。
比如:var str=$(”a“).attr(”href");*for(var i = size;i < arr.length;i++){} for 循環每一次循環都查找了數組(arr)的.length 屬性,在開始循環的時候設置一個變量來存儲這個數字,可以讓循環跑得更快:
for(var i = size, length = arr.length;i < length;i++){} / 28
2015前端面試題2015-02 三
十一、JavaScript中的作用域與變量聲明提升? 三
十二、如何編寫高性能的Javascript? 三
十三、那些操作會造成內存泄漏?
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象,并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0(沒有其他對象引用過該對象),或對該對象的惟一引用是循環的,那么該對象的內存即可回收。setTimeout 的第一個參數使用字符串而非函數的話,會引發內存泄漏。
閉包、控制臺日志、循環(在兩個對象彼此引用且彼此保留時,就會產生一個循環)
三
十四、JQuery一個對象可以同時綁定多個事件,這是如何實現的? 三
十五、如何判斷當前腳本運行在瀏覽器還是node環境中?(阿里)
通過判斷Global對象是否為window,如果不為window,當前腳本沒有運行在瀏覽器中
三
十六、對Node的優點和缺點提出了自己的看法?
*(優點)因為Node是基于事件驅動和無阻塞的,所以非常適合處理并發請求,因此構建在Node上的代理服務器相比其他技術實現(如Ruby)的服務器表現要好得多。
此外,與Node代理服務器交互的客戶端代碼是由javascript語言編寫的,因此客戶端和服務器端都用同一種語言編寫,這是非常美妙的事情。
*(缺點)Node是一個相對新的開源項目,所以不太穩定,它總是一直在變,而且缺少足夠多的第三方庫支持??雌饋?,就像是Ruby/Rails當年的樣子。/ 28
2015前端面試題
2015-02
其它問題
一、你有哪些性能優化的方法?
(看雅虎14條性能優化原則)。
(1)減少http請求次數:CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適;網頁Gzip,CDN托管,data緩存,圖片服務器。
(2)前端模板 JS+數據,減少由于HTML標簽導致的帶寬浪費,前端用變量保存AJAX請求結果,每次操作本地變量,不用請求,減少請求次數
(3)用innerHTML代替DOM操作,減少DOM操作次數,優化javascript性能。
(4)當需要設置的樣式很多時設置className而不是直接操作style。
(5)少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。
(6)避免使用CSS Expression(css表達式)又稱Dynamic properties(動態屬性)。
(7)圖片預加載,將樣式表放在頂部,將腳本放在底部
加上時間戳。
(8)避免在頁面的主體布局中使用table,table要等其中的內容完全下載之后才會顯示出來,顯示比div+css布局慢。
二、http狀態碼有那些?分別代表是什么意思?
100-199 用于指定客戶端應相應的某些動作。200-299 用于表示請求成功。
300-399 用于已經移動的文件并且常被包含在定位頭信息中指定新的地址信息。400-499 用于指出客戶端的錯誤。
400
語義有誤,當前請求無法被服務器理解。401
當前請求需要用戶驗證 / 28
2015前端面試題2015-02 403 服務器已經理解請求,但是拒絕執行它。500-599 用于支持服務器錯誤。503 – 服務不可用三、一個頁面從輸入 URL 到頁面加載顯示完成,這個過程中都發生了什么?(流程說的越詳細越好)
查找瀏覽器緩存
DNS解析、查找該域名對應的IP地址、重定向(301)、發出第二個GET請求
進行HTTP協議會話
客戶端發送報頭(請求報頭)
服務器回饋報頭(響應報頭)
html文檔開始下載
文檔樹建立,根據標記請求所需指定MIME類型的文件
文件顯示
[
瀏覽器這邊做的工作大致分為以下幾步:
加載:根據請求的URL進行域名解析,向服務器發起請求,接收文件(HTML、JS、CSS、圖象等)。
解析:對加載到的資源(HTML、JS、CSS等)進行語法解析,建議相應的內部數據結構(比如HTML的DOM樹,JS的(對象)屬性表,CSS的樣式規則等等)
}
四、平時如何管理你的項目?
先期團隊必須確定好全局樣式(globe.css),編碼模式(utf-8)等;
編寫習慣必須一致(例如都是采用繼承式的寫法,單樣式都寫成一行); / 28
2015前端面試題
2015-02
標注樣式編寫人,各模塊都及時標注(標注關鍵樣式調用的地方);
頁面進行標注(例如 頁面 模塊 開始和結束);
CSS跟HTML 分文件夾并行存放,命名都得統一(例如style.css);
JS 分文件夾存放 命名以該JS功能為準的英文翻譯。
圖片采用整合的 images.png png8 格式文件使用 盡量整合在一起使用方便將來的管理
五、說說最近最流行的一些東西吧?常去哪些網站?
Node.js、Mongodb、npm、MVVM、MEAN、three.js
六、移動端(Android IOS)怎么做好用戶體驗?
清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標簽及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、七、想問公司的問題?
目前關注哪些最新的Web前端技術(未來的發展方向)?
前端團隊如何工作的(實現一個產品的流程)?
公司的薪資結構是什么樣子的?
八、優質網站推薦
極客標簽: http://www.tmdps.cn/ 碼農周刊: http://weekly.manong.io/issues/ 前端周刊: http://www.tmdps.cn/issues 極客頭條: http://geek.csdn.net/ Startup News:http://news.dbanotes.net/ / 28
2015前端面試題2015-02 Hacker News: https://news.ycombinator.com/news InfoQ: http://www.tmdps.cn/ w3cplus: http://www.tmdps.cn/ Stack Overflow: http://stackoverflow.com/ Atp: http://atp-posts.b0.upaiyun.com/posts/ / 28
想要應聘前端開發的求職者,要做好完成面試題的準備。下面是由小編分享的前端開發面試題及答案,希望對你有用。
前端開發面試題及答案
1、對Web標準以及W3C的理解與認識?
答:標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外鏈CSS和JS腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件、容易維護、改版方便,不需要變動頁面內容、提供打印版本而水需要復制內容、提高網站易用性。
2、XHTML和HTML有什么區別?
答:HTML是一種基本的WEB網頁設計語言,XHTML是一個基于XML的置標語言 最主要的不同:
XHTML元素必須被正確地嵌套;
XHTML元素必須被關閉;
標簽名必須用小寫字母;
XHTML文檔必須擁有根元素。
3、Doctype?嚴格模式與混雜模式-如何觸發這兩種模式,區分它們有何意義? 答:Doctype用于聲明文檔使用哪種規范(HTML/XHTML)
該標簽可聲明三種DTD類型,分別為嚴格版本、過度版本以及基于框架的HTML文檔。
加入XML聲明可觸發,解析方式更改為IE5.5擁有IE5.5的bug。
4、行內元素有哪些?塊級元素有哪些?CSS的盒模型?
答:行內元素:a b br i span input select
塊級元素:div p h1 h2 h3 h4 form ul
CSS盒模型:內容,border margin padding5、CSS引入的方式有哪些?link和@import的區別是?
答:方式:內聯 內嵌 外鏈 導入
區別:同時加載
前者無兼容性,后者CSS2.1以下瀏覽器不支持
Link支持使用javascript 改變樣式,后者不可。
6.CSS選擇符有哪些?哪些屬性可以繼承?優先級算法如何計算?內聯和important哪個優先級高?
答:標簽選擇符、類選擇符、id選擇符
繼承不如指定 id>class>標簽選擇
后者優先級高
7、前端頁面有哪三層構成,分別是什么?作用是什么?
答:結構層HTML 表示層CSS 行為層JS8、你做的頁面在哪些瀏覽器測試過?這些瀏覽器的內核分別是什么? 答:Ie(Ie內核)
火狐(Gecko)
谷歌(webkit)
opear(Presto)
9、img標簽上title與 alt屬性的區別是什么?
答:Alt當圖片不顯示時,用文字代表
Title為該屬性提供信息。
10、描述CSS Reset的作用和用途
答:Reset重置瀏覽器的CSS默認屬性 瀏覽器的品種不同,樣式不同,然后重
置,讓他們統一。
11、http狀態碼有那些?分別代表是什么意思?
100-199 用于指定客戶端應響應的某些動作。
200-299 用于表示請求成功。
300-399 用于已經移動的文件并且常被包含在定位頭信息中指定新的地址信息。400-499 用于指出客戶端的錯誤。
400 語義有誤,當前請求無法被服務器理解。
401 當前請求需要用戶驗證
403 服務器已經理解請求,但是拒絕執行它。
500-599 用于支持服務器錯誤。
503 – 服務不可用
13.解釋css sprites,如何使用。
Css 精靈 把一堆小的圖片整合到一張大的圖片上,減輕服務器對圖片的請求數量
14.瀏覽器標準模式和怪異模式之間的區別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
15.你如何對網站的文件和資源進行優化?期待的解決方案包括:
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
16.什么是語義化的HTML?
直觀的認識標簽 對于搜索引擎的抓取有好處
17.清除浮動的幾種方式,各自的優缺點
1.使用空標簽清除浮動 clear:both(理論上能清楚任何標簽,增加無意義的標簽)
2.使用overflow:auto(空標簽元素清除浮動而不得不增加無意代碼的弊端,使用zoom:1用于兼容IE)
3.是用afert偽元素清除浮動(用于非IE瀏覽器)
18.css hack
_marging IE 6
+margin IE 7
Marging:0 auto 9 所有Ie
Margin
主站蜘蛛池模板:
亚洲精品无码久久久久av老牛|
免费无码又爽又刺激高潮视频|
国产成人精品视频ⅴa片软件竹菊|
国产麻豆精品一区二区三区v视界|
青娱乐91|
中国凸偷窥xxxx自由视频|
欧洲美妇乱人伦视频网站|
国产高清-国产av|
国产亚洲精品自在久久|
久久国产福利国产秒拍飘飘网|
亚洲精品久久久久中文字幕m男|
日韩精品人妻av一区二区三区|
少妇无套内谢久久久久|
欧美极品少妇×xxxbbb|
丰满老熟妇好大bbbbb|
国产女人水真多18毛片18精品|
无套内射视频囯产|
99热精品国自产拍天天拍|
激情综合色综合啪啪五月丁香|
色综合欧美在线视频区|
国产一精品一av一免费|
天天色影网|
天天天做夜夜夜做无码|
国产丝袜一区视频在线观看|
国产亚洲欧美精品一区|
国产在线码观看超清无码视频|
少妇太爽了在线观看|
亚洲成av人在线观看天堂无码|
中文字幕乱码熟妇五十中出|
香蕉伊蕉伊中文视频在线|
亚洲欧美va在线播放|
伊人久久精品一区二区三区|
亚洲国产精品无码中文在线|
精品久久久久久国产潘金莲|
欧美亚洲高清国产|
亚洲熟妇中文字幕曰产无码|
在线观看国产亚洲视频免费|
小13箩利洗澡无码视频免费网站|
亚洲国产精品悠悠久久琪琪|
拍摄av现场失控高潮数次|
亚洲国产高清在线观看视频|