HTML+CSS+JS（面試題）
1、 你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什麽?
IE: trident內核
Firefox：gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基於webkit，Google與Opera Software共同開發)
2、你能描述一下漸進增強和優雅降級之間的不同嗎?
漸進增強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，然後再針對低版本瀏覽器進行兼容。
3、請描述一下cookies，sessionStorage和localStorage的區別？
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規範的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生。
4、一個頁面上有大量的圖片（大型電商網站），加載很慢，你有哪些方法優化這些圖片的加載，給用戶更好的體驗。
圖片懶加載，在頁面上的未可視區域可以添加一個滾動條事件，判斷圖片位置與瀏覽器頂端的距離與頁面的距離，如果前者小於後者，優先加載。
如果為幻燈片、相冊等，可以使用圖片預加載技術，將當前展示圖片的前一張和後一張優先下載。
如果圖片為css圖片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技術。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮的特別厲害的縮略圖，以提高用戶體驗。
如果圖片展示區域小於圖片的真實大小，則因在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮後大小與展示一致。
5、什麽是Css Hack？ie6,7,8的hack分別是什麽？
針對不同的瀏覽器寫不同的CSS code的過程，就是CSS hack。
|
|
#test{ width:300px; height:300px; /*firefox*/ background-color:red\9; /*all ie*/ /*ie8*/ +background-color:pink; /*ie7*/ _ /*ie6*/ } :root #test { background-color:purple\9; } /*ie9*/ @media all and (min-width:0px){ #test {} } /*opera*/ @media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} } /*chrome and safari*/ |
6、Sass、LESS是什麽？大家為什麽要使用他們？
他們是CSS預處理器。他是CSS上的一種抽象層。他們是一種特殊的語法/語言編譯成CSS。
例如Less是一種動態樣式語言. 將CSS賦予了動態語言的特性，如變量，繼承，運算， 函數. LESS 既可以在客戶端上運行 (支持IE 6+, Webkit, Firefox)，也可一在服務端運行 (借助 Node.js)。
為什麽要使用它們？
結構清晰，便於擴展。
可以方便地屏蔽瀏覽器私有語法差異。這個不用多說，封裝對瀏覽器語法差異的重復處理，減少無意義的機械勞動。
可以輕松實現多重繼承。
完全兼容 CSS 代碼，可以方便地應用到老項目中。LESS 只是在 CSS 語法上做了擴展，所以老的 CSS 代碼也可以與 LESS 代碼一同編譯。
7、html常見兼容性問題？
1.雙邊距BUG float引起的 使用display
2.3像素問題 使用float引起的 使用dislpay:inline -3px
3.超鏈接hover 點擊後失效 使用正確的書寫順序 link visited hover active
4.Ie z-index問題 給父級添加position:relative
5.Png 透明 使用js代碼 改
6.Min-height 最小高度 ！Important 解決’
7.select 在ie6下遮蓋 使用iframe嵌套
8.為什麽沒有辦法定義1px左右的寬度容器（IE6默認的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
9.IE5-8不支持opacity，解決辦法：
.opacity {
opacity: 0.4
filter: alpha(opacity=60); /* for IE5-7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* for IE 8*/
}
- IE6不支持PNG透明背景，解決辦法: IE6下使用gif圖片
8、描述一個”reset”的CSS文件並如何使用它。知道normalize.css嗎？你了解他們的不同 之處？
因為瀏覽器的品種很多，每個瀏覽器的默認樣式也是不同的，比如<button>標簽，在IE瀏覽器、Firefox瀏覽器以及Safari瀏覽器中的樣式都是不同的，所以，通過重置button標簽的CSS屬性，然後再將它統一定義，就可以產生相同的顯示效果。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
9、一邊寬度固定，另一邊自適應？
1）第一種：float 單一層浮動法
例如：左側固定成100px; 則核心代碼 左側：width:100px;float:left;
右側 width:auto;margin-left:100px;
2）第二種：定位 ，在固定元素上加入絕對定位，自適應元素設置成margin-left:固定元素的寬度
3）通過BFC規則實現
例如：.left{float:left;width:200px;height:200px;}
.right{width:100%;overflow:hidden;height:200px}
10、什麽是聖杯布局？
左右兩邊的內容保持不變，中間的內容可以根據屏幕的大小的改變而改變。
1 .content {
2 padding: 0 200px;
3 height: 200px;
4 min-width: 200px;
5 }
.left {
6 width: 200px;
7 height: 200px;
8 background: red;
9 float: left;
10 margin-left: -200px;
11 }
12 .right {
13 width: 200px;
14 height: 200px;
15 background: yellow;
16 float: right;
17 margin-right: -200px;
18 }
19 .center {
20 width: 100%;
21 min-width: 200px;
22 height: 200px;
23 background: green;
24 float: left;
25 }
26 </style>
27 </head>
28 <body>
29 <div class="content">
30 <div class="left"></div>
31 <div class="center"></div>
32 <div class="right"></div>
33 </div>
11、div中子元素居中的三種方式？
首先div設置為相對定位relative,子元素設置為絕對定位absolute
第一種#div.img{position:absolute;left:0;top:0;bottom:0;right:0;margin:auto}
第二種
#div.img{position:absoulute;left:50%;top:50%;margin-left:img的1/2width；margin-top:-img的1/2height;}
HTML5+CSS3
1、html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？
新特性：
1. 拖拽釋放(Drag and drop) API
2. 語義化更好的內容標簽（header,nav,footer,aside,article,section）
3. 音頻、視頻API(audio,video)
4. 畫布(Canvas) API
5. 地理(Geolocation) API
6. 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
7. sessionStorage 的數據在瀏覽器關閉後自動刪除
8. 表單控件，calendar、date、time、email、url、search
9. 新的技術webworker, websocket, Geolocation
移除的元素：
1. 純表現的元素：basefont，big，center，font, s，strike，tt，u；
2. 對可用性產生負面影響的元素：frame，frameset，noframes；
HTML5兼容性解決方案
1. IE8/IE7/IE6支持通過 document.createElement 方法產生的標簽，可以利用這一特性讓這些瀏覽器支持 HTML5 新標簽，瀏覽器支持新標簽後，還需要添加標簽默認的樣式（當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架）：
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
2你如何對網站的文件和資源進行優化？
文件合並
文件最小化/文件壓縮
使用CDN托管
緩存的使用
3 CSS3新增偽類有那些？
p:first-of-type 選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。
p:last-of-type 選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。
p:only-of-type 選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。
p:only-child 選擇屬於其父元素的唯一子元素的每個 <p> 元素。
p:nth-child(2) 選擇屬於其父元素的第二個子元素的每個 <p> 元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。
4 H5+CSS3兼容性解決的方案
1 htmlshiv.js框架 HTML5shiv通過JavaScript 來創建HTML5元素(如 main, header, footer等)
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
2 selectivizr.js
selectivizr是一個JavaScript工具，使IE瀏覽器也可以支持CSS3偽類以及屬性選擇器
使用很簡單，只要把js include到頁面上，然後你就可以
<script type="text/javascript" src="[JS library]"></script>
<!- -[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]- ->
3 條件註釋
5 CSS3有哪些新特性？
1. CSS3實現圓角（border-radius），陰影（box-shadow），
2. 對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform）
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
4. 增加了更多的CSS選擇器 多背景 rgba
5. 在CSS3中唯一引入的偽元素是 ::selection.
6. 媒體查詢，多欄布局
7. border-image
JS+JQuery部分內容
1 數組和字符串中常用的方法
1）數組中常用的方法
Push()向數組的末尾增加一項 unshift()向數組開頭增加一項
pop()刪除數組的末尾項 shift()刪除數組開頭項
Splice() 刪除數組中的任意項 concat拼接
Join() 把數組中的每一項 按照指定的分隔符拼接成字符串
reverse:倒序數組 返回值倒序數組 原有數組改變
sort:根據匿名函數進行冒泡排序 b-a倒序 a-b升序
兼容性不好：
indexOf:返回獲取項在數組中的索引
lastIndexOf:返回獲取項在數組中出現的最後一次索引
forEach: 循環遍歷數組 參數是一個匿名函數 默認返回為undefined
map：循環遍歷數組 參數是一個匿名函數
2）字符串中常用的方法
substring方法返回位於String對象中指定位置的子字符串。
substr方法返回一個從指定位置開始的指定長度的子字符串。
slice方法返回字符串的片段。
split將一個字符串分割為子字符串，然後將結果作為字符串數組返回。
2 js兼容性問題
1 獲取,設置標簽的內容 iE和chrome瀏覽器支持innerText 火狐瀏覽器支持 textContent
2獲取指定元素的第一個元素和最後一個元素 element.firstElementChild
IE679只能獲取firstChild獲取第一個字節點，然後通過判斷的節點的類型區的第一個子元素
3event.x 與 event.y，在IE中，event 對象有x,y屬性，現代瀏覽器中中，與 event.x 等效的是 event.pageX ，但event.pageX IE中沒有
4問題說明：IE下，可以使用獲取常規屬性的方法來獲取自定義屬性，也可以使用 getAttribute() 獲取自定義屬性；Firefox下，只能使用 getAttribute() 獲取自定義屬性。
解決方法：統一通過 getAttribute() 獲取自定義屬性。
3說說你對閉包的理解
可以把閉包簡單理解成 “定義在一個函數內部的函數”
閉包有三個特性：
1.函數嵌套函數
2.函數內部可以引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收
由於閉包會使得函數中的變量都被保存在內存中，內存消耗很大，所以不能濫用閉包，否則會造成網頁的性能問題
4、javascript裏面的繼承怎麽實現，如何避免原型鏈上面的對象共享
用構造函數和原型鏈的混合模式去實現繼承，避免對象共享可以參考經典的extend()函數，很多前端框架都有封裝的，就是用一個空函數當做中間變量
5、JavaScript原型，原型鏈 ? 有什麽特點？
原型對象也是普通的對象，是對象一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型對象的原型不為null的話，我們就稱之為原型鏈。*
原型鏈是由一些用來繼承和共享屬性的對象組成的（有限的）對象鏈。
6請說出三種減少頁面加載時間的方法。
1.優化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合並css，如margin-top,margin-left...)
4.網址後加斜杠（如www.campr.com/目錄，會判斷這個“目錄是什麽文件類型，或者是目錄。）
5.標明高度和寬度（如果瀏覽器沒有找到這兩個參數，它需要一邊下載圖片一邊計算大小，如果圖片很多，瀏覽器需要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）
6.減少http請求（合並文件，合並圖片）
7.你有哪些性能優化的方法？
（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(動態屬性)。
圖片預加載，將樣式表放在頂部，將腳本放在底部 ?加上時間戳。
8、 平時如何管理你的項目？
1)先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；
2) 編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）
3)標註樣式編寫人，各模塊都及時標註（標註關鍵樣式調用的地方）
4)頁面進行標註（例如 頁面 模塊 開始和結束）
5)CSS跟HTML 分文件夾並行存放，命名都得統一（例如style.css）；
6)JS 分文件夾存放 命名以該JS功能為準的英文翻譯。
9、call和apply的區別
call和apply相同點：改變函數中this的指向
不同點：函數參數的傳遞形式
call將函數參數依次傳入
apply將函數參數用一個數組的形式傳入
10、原生JS的window.onload與Jquery 的$(document).ready(function() {})，$(function() {})有什麽不同？
1)執行時間
window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。 $(document).ready()是DOM結構繪制完畢後就執行，不必等到加載完畢。
2)編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個 $(document).ready()可以同時編寫多個，並且都可以得到執行
3)簡化寫法 window.onload沒有簡化寫法 $(document).ready(function(){})可以簡寫成$(function(){})；
11、split(),join()的區別？
split() 方法通過把字符串分割成子字符串來把一個 String 對象分割成一個字符串數組。
join() 方法將數組中的所有元素連接成一個字符串。
12、談一下Jquery中的bind(),live(),delegate(),on()的區別？
bind： 綁定事件，對新添加的事件不起作用，方法用於將一個處理程序附加到每個匹配元素的事件上並返回jQuery對象。
live： 方法將一個事件處理程序附加到與當前選擇器匹配的所有元素（包含現有的或將來添加的）的指定事件上並返回jQuery對象。
delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。
On:支持直接在目標元素上綁定事件，也支持在目標元素的祖輩元素上委托綁定。在事件委托綁定模式下，即使是執行on()函數之後新添加的元素，只要它符合條件，綁定的事件處理函數也對其有效。
Ajax的面試題
1、解釋jsonp的原理
動態創建script標簽，回調函數
2、請盡可能詳盡的解釋ajax的工作原理
思路：先解釋異步，再解釋ajax如何使用
Ajax的原理簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然後用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對 XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支持異步請求的技術。簡單的說，也就是javascript可以及時向服務器提出請求和處理響應，而不阻塞用戶。達到無刷新的效果。
3、Ajax的最大的特點是什麽。
Ajax可以實現動態不刷新（局部刷新）
readyState屬性 狀態 有5個可取值： 0=未初始化 ，1=啟動 2=發送，3=接收，4=完成
4、ajax的缺點
1） ajax不支持瀏覽器back按鈕。
2)安全問題 AJAX暴露了與服務器交互的細節。
3)對搜索引擎的支持比較弱。
4)破壞了程序的異常機制。
5)不容易調試。
5、get和post的區別？
GET：一般用於信息獲取，使用URL傳遞參數，對所發送信息的數量也有限制，一般在2000個字符;
POST：一般用於修改服務器上的資源，對所發送的信息沒有限制。
也就是說Get是通過地址欄來傳值，而Post是通過提交表單來傳值。
6、如何解決跨域問題?
理解跨域的概念：協議、域名、端口都相同才同域，否則都是跨域
1.Get方式請求的跨域可以通過jsonp來解決。
http://www.tuicool.com/articles/QBbuiaR
2.Post方式的請求 cors解決跨域
Cors解釋
http://www.cnblogs.com/Darren_code/p/cors.html
JSONP實現跨域
常用的jquery實現跨域調用
$.ajax({
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php",
dataType: "jsonp",
jsonp: "callback",
context: document.body,
success: function(data) {
console.log(data);
}
});
這個調用實際上的實現原理是
在網頁中構造一個script標簽，將src設置為對應的url，並增加上相應的callback參數，形如如下格式：
<script src="http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/index.php?callback=jQuery211018970995225637144_1465350372062&_=1465350372063"></script>
請求的服務端代碼如下：
$data = json_encode(array("id" => "1", "name" => "tom"));
$callback = $_GET["callback"];
echo $callback . "(" . $data . ")";
實際上最後返回的內容就是一段js代碼：
jQuery211018970995225637144_1465350372062({"id":"1","name":"tom"})
當瀏覽器獲取到該段js代碼後就會執行這個函數，從而實現回調ajax請求時設置的success方法。
jsonp實現的缺點
了解了原理後，就知道jsonp實現的跨域方式不支持post請求，只能支持get請求。但是如果需要支持post請求該怎麽辦呢？下面談下服務器端設置的方式。
服務端設置支持跨域
主要是Access-Control-Allow-Origin頭參數，該參數用來指定允許哪個來源的域請求。服務端代碼如下：
// 表示支持所有來源的域進行請求
// 實際在操作過程中可以設置為指定域
header(‘Access-Control-Allow-Origin:*‘);
$data = json_encode(array("id" => "1", "name" => "tom"));
echo $data;
對應的js代碼：
$.ajax({
type: "POST",
url: "http://127.0.0.1/~chenjiebin/mycode/php/crossdomain/header.php",
dataType: "json",
success: function(data) {
console.log(data);
}
});
可以支持post請求
移動web開發
1、px，em，rem的區別？
1）px像素（Pixel） 。絕對單位。像素px是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換算成物理長度，需要指定精度DPI。
2）em是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此並不是一個固定的值。
3）rem是CSS3新增的一個相對單位（rootem，根em） ，使用rem為元素設定字體大小時，仍然是相對大小，
但相對的只是HTML根元素。
2、jQuery和Zepto的區別？各自的使用場景？Zepto比jQuery輕量的原因？
jQuery主要用於PC端開發，Zepto比jQuery更加小巧，主要用於移動端，Zepto是不兼容低版本的瀏覽器
原因：
1）Zepto輕量的原因是沒有像jQuery一樣處理移動端的兼容性問題，
2）Zepto的模塊是放到不同的模塊中，根據業務需要引入模塊，減少代碼量，提高網頁的加載速度
3、bootstrap框架中的柵格系統的本質是什麽？以及bootstrap框架的優缺點？
bootstrap的柵格系統的本質是通過css3的媒體查詢實現的
優點:bootstrap框架便於快速布局，而且添加了更加靈活的柵格系統，增加了響應式
計，來適配不同的設備
缺點:對ie678的兼容性可能不太好，而且bootstrap是依賴於jQuery，代碼的體積大，會影響網頁的加載速度，不適合移動端。
4、如何解決移動端的click事件的延遲響應？
移動端click屏幕產生200-300 ms的延遲響應，往往會造成按鈕點擊延遲甚至是點擊失效。
解決方案
1) github上有一個叫做fastclick的庫，它也能規避移動設備上click事件的延遲響應，https://github.com/ftlabs/fastclick
2)zepto的touch模塊，tap事件也是為了解決在click的延遲問題
5、什麽是mvc開發模式?
Mvc是一中組織代碼結構的方式，便於代碼的管理和維護。
HTML+CSS+JS（面試題）