前端面试题
前端面試題匯總
一、HTML和CSS 21
58、描述一個"reset"的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？ 42
二、JS基礎 46
第2題： 131
第3題： 132
第4題： 132
第5題： 132
第6題： 133
第7題： 133
第8題： 133
第9題： 134
第10題： 134
第11題：考點：函數聲明提前 134
第12題： 135
第13題： 135
第14題： 135
第15題 136
第16題：以下執行會有什么輸出 136
三、HTML5 CSS3 137
CDN緩存更方便? 141
? 143
? 143
四、移動web開發 146
1、移動端常用類庫及優缺點 146
2、Zepto庫和JQ區別 146
五、Ajax 146
1、Ajax 是什么? 如何創建一個Ajax？ 146
}else{ 146
2、同步和異步的區別? 147
3、如何解決跨域問題? 147
4、頁面編碼和被請求的資源編碼如果不一致如何處理？ 147
5、簡述ajax 的過程。 147
6、闡述一下異步加載。 148
7、請解釋一下 JavaScript 的同源策略。 148
8、GET和POST的區別，何時使用POST？ 148
POST：一般用于修改服務器上的資源，對所發送的信息沒有限制 148
9、ajax 是什么?ajax 的交互模型?同步和異步的區別?如何解決跨域問題? 148
10、 Ajax的最大的特點是什么。 149
11、ajax的缺點 149
12、ajax請求的時候get 和post方式的區別 149
13、解釋jsonp的原理，以及為什么不是真正的ajax 149
14、什么是Ajax和JSON，它們的優缺點。 149
15、http常見的狀態碼有那些？分別代表是什么意思？ 149
16、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？ 150
17、ajax請求的時候get 和post方式的區別 150
18、ajax請求時，如何解釋json數據 150
19、.javascript的本地對象，內置對象和宿主對象 150
20、為什么利用多個域名來存儲網站資源會更有效？ 151
21、請說出三種減低頁面加載時間的方法 151
22、HTTP狀態碼都有那些。 151
六、JS高級 151
1、 JQuery一個對象可以同時綁定多個事件，這是如何實現的？ 151
2、 知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調試和debug代碼么? 151
3、 如何測試前端代碼? 知道BDD, TDD, Unit Test么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit…)? 152
5、 簡述一下 Handlebars 的基本用法？ 152
6、 簡述一下 Handlerbars 的對模板的基本處理流程， 如何編譯的？如何緩存的？ 152
7、 用js實現千位分隔符? 152
8、 檢測瀏覽器版本版本有哪些方式？ 152
9、 我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡，你來說下會執行幾次事件，然后會先執行冒泡還是捕獲 152
10、實現一個函數clone，可以對JavaScript中的5種主要的數據類型（包括Number、String、Object、Array、Boolean）進行值復制 152
11、如何消除一個數組里面重復的元素？ 154
12、小賢是一條可愛的小狗(Dog)，它的叫聲很好聽(wow)，每次看到主人的時候就會乖乖叫一聲(yelp)。從這段描述可以得到以下對象： 154
13、下面這個ul，如何點擊每一列的時候alert其index?（閉包） 155
14、編寫一個JavaScript函數，輸入指定類型的選擇器(僅需支持id，class，tagName三種簡單CSS選擇器，無需兼容組合選擇器)可以返回匹配的DOM節點，需考慮瀏覽器兼容性和性能。 156
15、請評價以下代碼并給出改進意見。 158
16、給String對象添加一個方法，傳入一個string類型的參數，然后將string的每個字符間價格空格返回，例如： 158
17、定義一個log方法，讓它可以代理console.log的方法。 159
18、在Javascript中什么是偽數組？如何將偽數組轉化為標準數組？ 159
19、對作用域上下文和this的理解，看下列代碼： 160
20、原生JS的window.onload與Jquery的$(document).ready(function(){})有什么不同？如何用原生JS實現Jq的ready方法？ 161
21、（設計題）想實現一個對頁面某個節點的拖曳？如何做？（使用原生JS） 163
22、請實現如下功能 163
23、說出以下函數的作用是？空白區域應該填寫什么？ 164
24、 Javascript作用鏈域? 165
25、 談談This對象的理解。 165
26、 eval是做什么的？ 165
27、 關于事件，IE與火狐的事件機制有什么區別？ 如何阻止冒泡？ 165
28、 什么是閉包（closure），為什么要用它？ 166
29、javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？ 166
30、如何判斷一個對象是否屬于某個類？ 166
31、new操作符具體干了什么呢? 166
32、用原生JavaScript的實現過什么功能嗎？ 166
33、Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？ 166
HasOwnProperty 167
34、對JSON的了解？ 167
35、js延遲加載的方式有哪些？ 167
36、模塊化開發怎么做？ 167
37、AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規范區別？ 167
38、requireJS的核心原理是什么？（如何動態加載的？如何避免多次加載的？如何 緩存的？） 167
39、讓你自己設計實現一個requireJS，你會怎么做？ 168
40、談一談你對ECMAScript6的了解？ 168
ES6新的語法糖，類，模塊化等新特性 168
41、ECMAScript6 怎么寫class么，為什么會出現class這種東西? 168
42、異步加載的方式有哪些？ 168
43、documen.write和 innerHTML的區別? 168
44、DOM操作——怎樣添加、移除、移動、復制、創建和查找節點? 169
45、call() 和 .apply() 的含義和區別？ 169
46、數組和對象有哪些原生方法，列舉一下？ 169
Array.concat( ) 連接數組 169
Object.hasOwnProperty( ) 檢查屬性是否被繼承 170
47、JS 怎么實現一個類。怎么實例化這個類 170
48、JavaScript中的作用域與變量聲明提升？ 170
49、如何編寫高性能的Javascript？ 170
50、那些操作會造成內存泄漏？ 171
51、javascript對象的幾種創建方式？ 171
52、javascript繼承的 6 種方法？ 171
53、eval是做什么的？ 171
54、JavaScript 原型，原型鏈 ? 有什么特點？ 171
55、事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？ 172
56、簡述一下Sass、Less，且說明區別？ 172
57、關于javascript中apply()和call()方法的區別？ 172
58、簡述一下JS中的閉包？ 172
59、說說你對this的理解？ 172
60、分別闡述split(),slice(),splice(),join()？ 173
61、事件委托是什么？ 173
62、如何阻止事件冒泡和默認事件？ 173
63、添加 刪除 替換 插入到某個接點的方法？ 173
64、你用過require.js嗎？它有什么特性？ 174
65、談一下JS中的遞歸函數，并且用遞歸簡單實現階乘？ 174
66、請用正則表達式寫一個簡單的郵箱驗證。 174
67、簡述一下你對web性能優化的方案？ 174
68、在JS中有哪些會被隱式轉換為false 174
Undefined、null、關鍵字false、NaN、零、空字符串 174
69、定時器setInterval有一個有名函數fn1，setInterval（fn1,500）與setInterval（fn1(),500）有什么區別？ 174
70、外部JS文件出現中文字符，會出現什么問題，怎么解決？ 174
71、談談瀏覽器的內核，并且說一下什么是內核？ 175
72、JavaScript原型，原型鏈 ? 有什么特點？ 175
73、寫一個通用的事件偵聽器函數 175
74、事件、IE與火狐的事件機制有什么區別？ 如何阻止冒泡？ 178
75、什么是閉包（closure），為什么要用？ 178
76、如何判斷一個對象是否屬于某個類？ 178
77、new操作符具體干了什么呢? 178
78、JSON 的了解 179
79、js延遲加載的方式有哪些 179
80、模塊化怎么做？ 179
81、異步加載的方式 179
82、告訴我答案是多少？ 180
83、JS中的call()和apply()方法的區別？ 180
84、Jquery與jQuery UI 有啥區別？ 180
85、jquery 中如何將數組轉化為json字符串，然后再轉化回來？ 180
$.fn.stringifyArray = function(array) { 180
86、JavaScript中的作用域與變量聲明提升？ 181
87、前端開發的優化問題（看雅虎14條性能優化原則）。 181
88、http狀態碼有那些？分別代表是什么意思？ 181
89、一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？（流程說的越詳細越好） 182
七、流行框架 182
1、JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？ 182
2、jQuery.fn的init方法返回的this指的是什么對象？為什么要返回this？ 182
3、 jquery中如何將數組轉化為json字符串，然后再轉化回來？ 182
4、 jQuery 的屬性拷貝(extend)的實現原理是什么，如何實現深拷貝？ 182
5、 jquery.extend 與 jquery.fn.extend的區別？ 182
Jquery.extend用來擴展jQuery對象本身；jquery.fn.extend用來擴展jQuery實例 182
6、談一下Jquery中的bind(),live(),delegate(),on()的區別？ 182
7、JQuery一個對象可以同時綁定多個事件，這是如何實現的？ 182
10、 Jquery與jQuery UI有啥區別？ 182
11、 jQuery和Zepto的區別？各自的使用場景？ 183
12、 針對 jQuery 的優化方法？ 183
13、 Zepto的點透問題如何解決？ 183
14、知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能講出他們各自的優點和缺點么? 183
15、Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？ 184
Underscore的熟悉程度 184
16、使用過angular嗎？angular中的過濾器是干什么用的 184
八、移動APP開發 184
1、移動端最小觸控區域是多大？ 184
九、NodeJs 184
Nodejs相關概念的理解程度 185
十、前端概括性問題 186
Node.js、Mongodb、npm、MVVM、MEAN、react、angularjs 187
一、HTML和CSS
1.你做的頁面在哪些流覽器測試過？這些瀏覽器的內核分別是什么?
IE:?trident內核
Firefox：gecko內核
Safari:webkit內核
Opera:以前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome:Blink(基于webkit，Google與Opera Software共同開發)
2.每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
3.Quirks模式是什么 ？它和Standards模式有什么區別
從IE6開始，引入了Standards模式，標準模式中，瀏覽器嘗試給符合標準的文檔在規范上的正確處理達到在指定瀏覽器中的程度。
在IE6之前CSS還不夠成熟，所以IE5等之前的瀏覽器對CSS的支持很差，?IE6將對CSS提供更好的支持，然而這時的問題就來了，因為有很多頁面是基于舊的布局方式寫的，而如果IE6?支持CSS則將令這些頁面顯示不正常，如何在即保證不破壞現有頁面，又提供新的渲染機制呢？
在寫程序時我們也會經常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。遇到這種問題時的一個常見做法是增加參數和分支，即當某個參數為真時，我們就使用新功能，而如果這個參數?不為真時，就使用舊功能，這樣就能不破壞原有的程序，又提供新功能。IE6也是類似這樣做的，它將DTD當成了這個“參數”，因為以前的頁面大家都不會去寫DTD，所以IE6就假定?如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。
區別：
總體會有布局、樣式解析和腳本執行三個方面的區別。
盒模型：在W3C標準中，如果設置一個元素的寬度和高度，指的是元素內容的寬度和高度，而在Quirks?模式下，IE的寬度和高度還包含了padding和border。
設置行內元素的高寬：在Standards模式下，給等行內元素設置wdith和height都不會生效，而在quirks模式下，則會生效。
設置百分比的高度：在standards模式下，一個元素的高度是由其包含的內容來決定的，如果父元素沒有設置百分比的高度，子元素設置一個百分比的高度是無效的用margin:0?auto設置水平居中：使用margin:0?auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。
（還有很多，答出什么不重要，關鍵是看他答出的這些是不是自己經驗遇到的，還是說都是看文章看的，甚至完全不知道。）
4.div+css的布局較table布局有什么優點？
改版的時候更方便?只要改css文件。
頁面加載速度更快、結構化清晰、頁面顯示簡潔。
表現與結構相分離。
易于優化（seo）搜索引擎更友好，排名更容易靠前。
5.img的alt與title有何異同？ strong與em的異同？
a:alt(alt?text):為不能顯示圖像、窗體或applets的用戶代理（UA），alt屬性用來指定替換文字。替換文字的語言由lang屬性指定。(在IE瀏覽器下會在沒有title時把alt當成?tool?tip顯示)
title(tool?tip):該屬性為設置該屬性的元素提供建議性的信息。
strong:粗體強調標簽，強調，表示內容的重要性
em:斜體強調標簽，更強烈強調，表示內容的強調點
6.你能描述一下漸進增強和優雅降級之間的不同嗎?
漸進增強?progressive?enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級?graceful?degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非?；A的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶。
“優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如?IE、Mozilla?等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨?(poor,?but?passable)”?的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被?Yahoo!?所采納并用以構建其“分級式瀏覽器支持?(Graded?Browser?Support)”策略的原因所在。
那么問題來了。現在產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？
7.為什么利用多個域名來存儲網站資源會更有效？
CDN緩存更方便（Content Delivery Network，即內容分發網絡）
突破瀏覽器并發限制
節約cookie帶寬
節約主域名的連接數，優化頁面響應速度
防止不必要的安全問題
8.請談一下你對網頁標準和標準制定機構重要性的理解。
網頁標準和標準制定機構都是為了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用代碼導致各種BUG、安全問題，最終提高網站易用性。
9.請描述一下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僅僅是為了在本地“存儲”數據而生。
1.cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬于某個路徑下。
2.存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。存儲大小：localStorage=sessionStorage>cookie
3.數據有效期不同，sessionStorage：僅在當前瀏覽器窗口關閉前有效，自然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉。數據持久：localStorage>cookie>sessionStorage
4.作用域不同，sessionStorage不在不同的瀏覽器窗口中共享，即使是同一個頁面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。作用域：localStorage=cookie>sessionStorage
10.簡述一下src與href的區別。
1.src 是指向物件的來源地址，是引入。在 img、script、iframe 等元素上使用。
2.href 是超文本引用，指向需要連結的地方，是與該頁面有關聯的，是引用。在 link和a 等元素上使用。
使用區別：
src通常用作“拿取”（引入），href 用作 “連結前往”（引用）。
src用于替換當前元素，href用于在當前文檔和引用資源之間確立聯系。
src是source的縮寫，指向外部資源的位置，指向的內容將會嵌入到文檔中當前標簽所在位置；在請求src資源時會將其指向的資源下載并應用到文檔內，例如js腳本，img圖片和frame等元素。
當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，類似于將所指向資源嵌入當前標簽內。這也是為什么將js腳本放在底部而不是頭部。
href是Hypertext?Reference的縮寫，指向網絡資源所在位置，建立和當前元素（錨點）或當前文檔（鏈接）之間的鏈接，如果我們在文檔中添加
是粗體，字體大小2em，加粗；是加粗的，不要認為這是html的表現，這些其實html默認的css樣式在起作用，所以去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是語義化的HTML結構的優點，但是瀏覽器都有有默認樣式，默認樣式的目的也是為了更好的表達html的語義，可以說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。 屏幕閱讀器（如果訪客有視障）會完全根據你的標記來“讀”你的網頁. 例如,如果你使用的含語義的標記,屏幕閱讀器就會“逐個拼出”你的單詞,而不是試著去對它完整發音. PDA、手機等設備可能無法像普通電腦的瀏覽器一樣來渲染網頁（通常是因為這些設備對CSS的支持較弱） 使用語義標記可以確保這些設備以一種有意義的方式來渲染網頁.理想情況下,觀看設備的任務是符合設備本身的條件來渲染網頁. 語義標記為設備提供了所需的相關信息,就省去了你自己去考慮所有可能的顯示情況（包括現有的或者將來新的設備）.例如,一部手機可以選擇使一段標記了標題的文字以粗體顯示.而掌上電腦可能會以比較大的字體來顯示.無論哪種方式一旦你對文本標記為標題,您就可以確信讀取設備將根據其自身的條件來合適地顯示頁面. 搜索引擎的爬蟲也依賴于標記來確定上下文和各個關鍵字的權重 過去你可能還沒有考慮搜索引擎的爬蟲也是網站的“訪客”,但現在它們他們實際上是極其寶貴的用戶.沒有他們的話,搜索引擎將無法索引你的網站,然后一般用戶將很難過來訪問. 你的頁面是否對爬蟲容易理解非常重要,因為爬蟲很大程度上會忽略用于表現的標記,而只注重語義標記. 因此,如果頁面文件的標題被標記,而不是,那么這個頁面在搜索結果的位置可能會比較靠后.除了提升易用性外,語義標記有利于正確使用CSS和JavaScript,因為其本身提供了許多“鉤鉤”來應用頁面的樣式與行為. SEO主要還是靠你網站的內容和外部鏈接的。 便于團隊開發和維護 W3C給我們定了一個很好的標準，在團隊中大家都遵循這個標準，可以減少很多差異化的東西，方便開發和維護，提高開發效率，甚至實現模塊化開發。 16.談談以前端角度出發做好SEO需要考慮什么？ 了解搜索引擎如何抓取網頁和如何索引網頁 你需要知道一些搜索引擎的基本工作原理，各個搜索引擎之間的區別，搜索機器人（SE?robot?或叫?web?crawler）如何進行工作，搜索引擎如何對搜索結果進行排序等等。 Meta標簽優化 主要包括主題（Title)，網站描述(Description)，和關鍵詞（Keywords）。還有一些其它的隱藏文字比如Author（作者），Category（目錄），Language（編碼語種）等。 如何選取關鍵詞并在網頁中放置關鍵詞 搜索就得用關鍵詞。關鍵詞分析和選擇是SEO最重要的工作之一。首先要給網站確定主關鍵詞（一般在5個上下），然后針對這些關鍵詞進行優化，包括關鍵詞密度（Density），相關度（Relavancy），突出性（Prominency）等等。 了解主要的搜索引擎 雖然搜索引擎有很多，但是對網站流量起決定作用的就那么幾個。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎對頁面的抓取和索引、排序的規則都不一樣。還要了解各搜索門戶和搜索引擎之間的關系，比如AOL網頁搜索用的是Google的搜索技術，MSN用的是Bing的技術。 主要的互聯網目錄 Open?Directory自身不是搜索引擎，而是一個大型的網站目錄，他和搜索引擎的主要區別是網站內容的收集方式不同。目錄是人工編輯的，主要收錄網站主頁；搜索引擎是自動收集的，除了主頁外還抓取大量的內容頁面。 按點擊付費的搜索引擎 搜索引擎也需要生存，隨著互聯網商務的越來越成熟，收費的搜索引擎也開始大行其道。最典型的有Overture和百度，當然也包括Google的廣告項目Google?Adwords。越來越多的人通過搜索引擎的點擊廣告來定位商業網站，這里面也大有優化和排名的學問，你得學會用最少的廣告投入獲得最多的點擊。 搜索引擎登錄 網站做完了以后，別躺在那里等著客人從天而降。要讓別人找到你，最簡單的辦法就是將網站提交（submit）到搜索引擎。如果你的是商業網站，主要的搜索引擎和目錄都會要求你付費來獲得收錄（比如Yahoo要299美元），但是好消息是（至少到目前為止）最大的搜索引擎Google目前還是免費，而且它主宰著60％以上的搜索市場。 鏈接交換和鏈接廣泛度（Link?Popularity） 網頁內容都是以超文本（Hypertext）的方式來互相鏈接的，網站之間也是如此。除了搜索引擎以外，人們也每天通過不同網站之間的鏈接來Surfing（“沖浪”）。其它網站到你的網站的鏈接越多，你也就會獲得更多的訪問量。更重要的是，你的網站的外部鏈接數越多，會被搜索引擎認為它的重要性越大，從而給你更高的排名。 合理的標簽使用 17.有哪項方式可以對一個DOM設置它的CSS樣式？ DOM文檔對象模型(Document Object model,DOM)， BOM瀏覽器對象模型(Browser Object model,BOM) 外部樣式表，引入一個外部css文件 內部樣式表，將css代碼放在??標簽內部 內聯樣式，將css樣式直接定義在?HTML?元素內部 18.CSS都有哪些選擇器？ 派生選擇器（用HTML標簽申明） id選擇器（用DOM的ID申明） 類選擇器（用一個樣式類名申明） 屬性選擇器（用DOM的屬性申明，屬于CSS2，IE6不支持，不常用，不知道就算了） 除了前3種基本選擇器，還有一些擴展選擇器，包括 后代選擇器（利用空格間隔，比如div?.a{??}） 群組選擇器（利用逗號間隔，比如p,div,#a{??}） 那么問題來了，CSS選擇器的優先級是怎么樣定義的？ 基本原則： 一般而言，選擇器越特殊，它的優先級越高。也就是選擇器指向的越準確，它的優先級就越高。 復雜的計算方法： 用1表示派生選擇器的優先級 用10表示類選擇器的優先級 用100標示ID選擇器的優先級 div.test1?.span?var?優先級?1+10?+10?+1 span#xxx?.songs?li?優先級1+100?+?10?+?1 #xxx?li?優先級?100?+1 那么問題來了，看下列代碼，標簽內的文字是什么顏色的？
123
答案：red。與樣式定義在文件中的先后順序有關，即是后面的覆蓋前面的，與在
33.為什么要初始化樣式？
由于瀏覽器兼容的問題，不同的瀏覽器對標簽的默認樣式值不同，若不初始化會造成不同瀏覽器之間的顯示差異，但是初始化CSS會對搜索引擎優化造成小影響
34.BFC是什么?
BFC（塊級格式化上下文），一個創建了新的BFC的盒子是獨立布局的，盒子內元素的布局不會影響盒子外面的元素。在同一個BFC中的兩個相鄰的盒子在垂直方向發生margin重疊的問題
BFC是指瀏覽器中創建了一個獨立的渲染區域，該區域內所有元素的布局不會影響到區域外元素的布局，這個渲染區域只對塊級元素起作用
35.html語義化是什么？
當頁面樣式加載失敗的時候能夠讓頁面呈現出清晰的結構
有利于seo優化，利于被搜索引擎收錄（更便于搜索引擎的爬蟲程序來識別）
便于項目的開發及維護，使html代碼更具有可讀性，便于其他設備解析。
36.Doctype的作用？嚴格模式與混雜模式的區別？
嚴格模式下：頁面排版及JS解析是以該瀏覽器支持的最高標準來執行
混雜模式：不嚴格按照標準執行，主要用來兼容舊的瀏覽器，向后兼容
37.IE的雙邊距BUG：塊級元素float后設置橫向margin，ie6顯示的margin比設置的較大。
38.HTML與XHTML——二者有什么區別？
39.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*/
}
40.對WEB標準以及W3C的理解與認識
答：標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性。
41.行內元素有哪些?塊級元素有哪些?CSS的盒模型?
答：塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
42.前端頁面有哪三層構成，分別是什么?作用是什么?
答：結構層 Html 表示層 CSS 行為層 js。
43.Doctype作用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
（1）、<!DOCTYPE> 聲明位于文檔中的最前面，處于 標簽之前。告知瀏覽器的解析器，用什么文檔類型 規范來解析這個文檔。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支持的最高標準運行。
（3）、在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文檔以混雜模式呈現。
44.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
（1）CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，比如div默認display屬性值為“block”，成為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。
（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素：
鮮為人知的是：
45.CSS的盒子模型？
（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的content部分包含了 border 和 pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
46.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 ;
- 優先級就近原則，樣式定義最近者為準;
- 載入樣式以最后載入的定位為準;
優先級為:
!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，單選框或復選框被選中。
47.如何居中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;//方便看效果
left:50%;
top:50%;
}
48.瀏覽器的內核分別是什么?經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧 ？ - IE瀏覽器的內核Trident、 Mozilla的Gecko、google的WebKit、Opera內核Presto；
- 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:#00deff\9; /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請求數。
- 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 {}
49.列出display的值，說明他們的作用。position的值， relative和absolute定位原點是？
none 缺省值。向行內元素類型一樣顯示。
inline-block 象行內元素一樣顯示，但其內容象塊類型元素一樣顯示。
list-item 象塊類型元素一樣顯示，并添加樣式列表標記。
*absolute
生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。
*fixed （老IE不支持）
生成絕對定位的元素，相對于瀏覽器窗口進行定位。
- relative
生成相對定位的元素，相對于其正常位置進行定位。 - static 默認值。沒有定位，元素出現在正常的流中
*（忽略 top, bottom, left, right z-index 聲明）。 - inherit 規定從父元素繼承 position 屬性的值。
50.absolute的containing block計算方式跟正常流有什么不同？
lock-level boxes
一個 block-level element (‘display’ 屬性值為 ‘block’, ‘list-item’ 或是 ‘table’) 會生成一個 block-level box，這樣的盒子會參與到 block-formatting context (一種布局的方式) 中。
block formatting context
在這種布局方式下，盒子們自所在的 containing block 頂部起一個接一個垂直排列，水平方向上撐滿整個寬度 (除非內部的盒子自己內部建立了新的 BFC)。
containing block
一般來說，盒子本身就為其子孫建立了 containing block，用來計算內部盒子的位置、大小，而對內部的盒子，具體采用哪個 containing block 來計算，需要分情況來討論：
若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形；
否則則由這個祖先元素的 padding box 構成。
根元素所在的 containing block 被稱為 initial containing block，在我們常用的瀏覽器環境下，指的是原點與 canvas 重合，大小和 viewport 相同的矩形；
對于 position 為 static 或 relative 的元素，其 containing block 為祖先元素中最近的 block container box 的 content box (除 margin, border, padding 外的區域)；
對于 position:fixed 的元素，其 containing block 由 viewport 建立；
對于 position:absolute 的元素，則是先找到其祖先元素中最近的 position 屬性非 static 的元素，然后判斷：
如果都找不到，則為 initial containing block。
51.對WEB標準以及W3C的理解與認識
標簽閉合、標簽小寫、不亂嵌套、提高搜索機器人搜索幾率、使用外 鏈css和js腳本、結構行為表現的分離、文件下載與頁面速度更快、內容能被更多的用戶所訪問、內容能被更廣泛的設備所訪問、更少的代碼和組件，容易維 護、改版方便，不需要變動頁面內容、提供打印版本而不需要復制內容、提高網站易用性；
52.css的基本語句構成是?
選擇器{屬性1:值1;屬性2:值2;……}
53.瀏覽器標準模式和怪異模式之間的區別是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可顯示為什么模式
54.CSS中可以通過哪些屬性定義，使得一個DOM元素不顯示在瀏覽器可視范圍內？
1.Display:none; 不占位
2.Visibility:hidden; 占位
3.設置寬高為0，設置透明度為0，設置z-index位置在-1000
55.行內元素和塊級元素的具體區別是什么？行內元素的padding和margin可設置嗎？
塊級元素(block)特性：
總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示;
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制;
內聯元素(inline)特性：
和相鄰的內聯元素在同一行;
寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變（也就是padding和margin的left和right是可以設置的），就是里面文字或圖片的大小。
那么問題來了，瀏覽器還有默認的天生inline-block元素（擁有內在尺寸，可設置高寬，但不會自動換行），有哪些？
答案： 、 、 、 、
56.什么是外邊距重疊？重疊的結果是什么？
答案：外邊距重疊就是margin-collapse。
在CSS當中，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距。
折疊結果遵循下列計算規則：
1.兩個相鄰的外邊距都是正數時，折疊結果是它們兩者之間較大的值。
2.兩個相鄰的外邊距都是負數時，折疊結果是兩者絕對值的較大值。
3.兩個外邊距一正一負時，折疊結果是兩者的相加的和。
58、描述一個"reset"的CSS文件并如何使用它。知道normalize.css嗎？你了解他們的不同之處？
重置樣式非常多，凡是一個前端開發人員肯定有一個常用的重置CSS文件并知道如何使用它們。他們是盲目的在做還是知道為什么這么做呢？原因是不同的瀏覽器對一些元素有不同的默認樣式，如果你不處理，在不同的瀏覽器下會存在必要的風險，或者更有戲劇性的性發生。
你可能會用Normalize來代替你的重置樣式文件。它沒有重置所有的樣式風格，但僅提供了一套合理的默認樣式值。既能讓眾多瀏覽器達到一致和合理，但又不擾亂其他的東西（如粗體的標題）。
在這一方面，無法做每一個復位重置。它也確實有些超過一個重置，它處理了你永遠都不用考慮的怪癖，像HTML的audio元素不一致或line-height不一致。
57.說display屬性有哪些？可以做什么？
display:block行內元素轉換為塊級元素
display:inline塊級元素轉換為行內元素
display:inline-block轉為內聯元素
58.哪些css屬性可以繼承？
可繼承： 字體系列屬性 文本系列屬性 元素可見性：visibility
font-size font-family color, ul li dl dd dt;
不可繼承 ：
display 盒子模型的屬性:寬度、高度、內外邊距、邊框等
背景屬性：背景圖片、顏色、位置等
定位屬性：浮動、清除浮動、定位position等
59.css優先級算法如何計算？
!important > id > class > 標簽
!important 比 內聯優先級高
*優先級就近原則，樣式定義最近者為準;
*以最后載入的樣式為準;
60.b標簽和strong標簽,i標簽和em標簽的區別？
后者有語義，前者則無。
61.有那些行內元素、有哪些塊級元素、盒模型？
1.內聯元素(inline element)
a – 錨點
abbr – 縮寫
acronym – 首字
b – 粗體(不推薦)
big – 大字體
br – 換行
em – 強調
font – 字體設定(不推薦)
i – 斜體
img – 圖片
input – 輸入框
label – 表格標簽
s – 中劃線(不推薦)
select – 項目選擇
small – 小字體文本
span – 常用內聯容器，定義文本內區塊
strike – 中劃線
strong – 粗體強調
sub – 下標
sup – 上標
textarea – 多行文本輸入框
tt – 電傳文本
u – 下劃線
var – 定義變量
2、塊級元素
address – 地址
blockquote – 塊引用
center – 舉中對齊塊
dir – 目錄列表
div – 常用塊級容易，也是css layout的主要標簽
dl – 定義列表
fieldset – form控制組
form – 交互表單
h1 – 大標題
h2 – 副標題
h3 – 3級標題
h4 – 4級標題
h5 – 5級標題
h6 – 6級標題
hr – 水平分隔線
isindex – input prompt
menu – 菜單列表
noframes – frames可選內容，（對于不支持frame的瀏覽器顯示此區塊內容）
noscript – ）可選腳本內容（對于不支持script的瀏覽器顯示此內容）
ol – 排序表單
p – 段落
pre – 格式化文本
table – 表格
ul – 非排序列表
3.CSS盒子模型包含四個部分組成：
內容、填充（padding）、邊框（border）、外邊界（margin）。
62.我想讓行內元素跟上面的元素距離10px，加margin-top和padding-top可以嗎？
margin-top,padding-top無效
63.CSS的盒模型由什么組成？
內容，border ,margin，padding
二、JS基礎
javascript的typeof返回哪些數據類型
?alert(typeof?[1,?2]);?//object
????alert(typeof?‘leipeng’);?//string
????var?i?=?true;?
????alert(typeof?i);?//boolean
????alert(typeof?1);?//number
????var?a;?
????alert(typeof?a);?//undefined
????function?a(){;};
????alert(typeof?a)?//function
例舉3種強制類型轉換和2種隱式類型轉換?
強制（parseInt(),parseFloat(),Number()）
隱式（== ,!!）
split() 、join() 的區別
前者是切割成數組的形式，后者是將數組轉換成字符串
數組方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部刪除
Unshift()頭部添加 shift()頭部刪除
事件綁定和普通事件有什么區別
普通添加事件的方法：
var btn = document.getElementById(“hello”);
btn.onclick = function(){
alert(1);
}
btn.onclick = function(){
alert(2);
}
執行上面的代碼只會alert 2
事件綁定方式添加事件：
var btn = document.getElementById(“hello”);
btn.addEventListener(“click”,function(){
alert(1);
},false);
btn.addEventListener(“click”,function(){
alert(2);
},false);
執行上面的代碼會先alert 1 再 alert 2
普通添加事件的方法不支持添加多個事件，最下面的事件會覆蓋上面的，而事件綁定（addEventListener）方式添加事件可以添加多個。
addEventListener不兼容低版本IE
普通事件無法取消
addEventLisntener還支持事件冒泡+事件捕獲
IE和DOM事件流的區別
1.執行順序不一樣、
2.參數不一樣
3.事件加不加on
4.this指向問題
IE和標準下有哪些兼容性的寫法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
call和apply的區別
call方法:?
語法：call(thisObj，Object1,Object2…)
定義：調用一個對象的一個方法，以另一個對象替換當前對象。
說明：
call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變為由 thisObj 指定的新對象。?
如果沒有提供 thisObj 參數，那么 Global 對象被用作 thisObj。
apply方法：?
語法：apply(thisObj，[argArray])
定義：應用某一對象的一個方法，用另一個對象替換當前對象。?
說明：?
如果 argArray 不是一個有效的數組或者不是 arguments 對象，那么將導致一個 TypeError。?
如果沒有提供 argArray 和 thisObj 任何一個參數，那么 Global 對象將被用作 thisObj， 并且無法被傳遞任何參數。
b繼承a的方法
function A( age, name ){
this.age = age;
this.name = name;
}
A.prototype.show = function(){
alert(‘父級方法’);
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
}
B.prototype = new A();
var b = new A(14,‘俠客行’);
var a = new B(15,‘狼俠’,‘俠客’);
如何阻止事件冒泡和默認事件
canceBubble()只支持IE,return false,stopPropagation()
添加 刪除 替換 插入到某個接點的方法
obj.appendChid()
obj.insertBefore()
obj.replaceChild()
obj.removeChild()
javascript的本地對象，內置對象和宿主對象
本地對象為array obj regexp等可以new實例化
內置對象為gload Math 等不可以實例化的
宿主為瀏覽器自帶的document,window 等
window.onload 和document ready的區別
window.onload 是在dom文檔樹加載完和所有文件加載完之后執行一個函數Document.ready原生種沒有這個方法，jquery中有 $().ready(function),在dom文檔樹加載完之后執行一個函數（注意，這里面的文檔樹加載完不代表全部文件加載完）。
(document).ready要比window.onload先執行window.onload只能出來一次，(document).ready要比window.onload先執行 window.onload只能出來一次，(document).ready要比window.onload先執行window.onload只能出來一次，(document).ready可以出現多次
””和“=”的不同
前者會自動轉換類型
后者不會
javascript的同源策略
一段腳本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、議和端口號的組合
JavaScript是一門什么樣的語言，它有哪些特點？
沒有標準答案。
javaScript一種直譯式腳本語言，是一種動態類型、弱類型、基于原型的語言，內置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML網頁上使用，用來給HTML網頁增加動態功能。JavaScript兼容于ECMA標準，因此也稱為ECMAScript。
基本特點
1．是一種解釋性腳本語言（代碼不進行預編譯）。
2．主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。
3．可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。
4．跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
JavaScript的數據類型都有什么？
基本數據類型：String,boolean,Number,Undefined,?Null
引用數據類型：Object(Array,Date,RegExp,Function)
那么問題來了，如何判斷某變量是否為數組數據類型？
方法一.判斷其是否具有“數組性質”，如slice()方法?？勺约航o該變量定義slice方法，故有時會失效
方法二.obj instanceof Array 在某些IE版本中不正確
方法三.方法一二皆有漏洞，在ECMA Script5中定義了新方法Array.isArray(), 保證其兼容性，最好的方法如下：
{
??Array.isArray = function(arg){
????????return Object.prototype.toString.call(arg)==="[object Array]"
????};?
}
已知ID的Input輸入框，希望獲取這個輸入框的輸入值，怎么做？(不使用第三方框架)
document.getElementById(“ID”).value
希望獲取到頁面中所有的checkbox怎么做？(不使用第三方框架)
var checkBoxList = [];
var len = domList.length; //緩存到局部變量
while (len–) { //使用while的效率會比for循環更高
if (domList[len].type == ‘checkbox’) {
???? checkBoxList.push(domList[len]);
}
}
設置一個已知ID的DIV的html內容為xxxx，字體顏色設置為黑色(不使用第三方框架)
dom.innerHTML = “xxxx”
dom.style.color = “#000”
當一個DOM節點被點擊時候，我們希望能夠執行一個函數，應該怎么做？
直接在DOM里綁定事件：
在JS里通過onclick綁定：xxx.onclick?=?test
通過事件添加進行綁定：addEventListener(xxx,?‘click’,?test)
那么問題來了，Javascript的事件流模型都有什么？
“事件冒泡”：事件開始由最具體的元素接受，然后逐級向上傳播
“事件捕捉”：事件由最不具體的節點先接收，然后逐級向下，一直到最具體的
“DOM事件流”：三個階段：事件捕捉，目標階段，事件冒泡
看下列代碼輸出為何？解釋原因。 var a;
alert(typeof a); // undefined
alert(b); // 報錯
解釋：Undefined是一個只有一個值的數據類型，這個值就是“undefined”，在使用var聲明變量但并未對其賦值進行初始化時，這個變量的值就是undefined。而b由于未聲明將報錯。注意未申明的變量和聲明了未賦值的是不一樣的。
看下列代碼,輸出什么？解釋原因。
alert(typeof a); //object
解釋：null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，所以用typeof檢測會返回”object”。
看下列代碼,輸出什么？解釋原因。
undefined == null; // true
1 == true;?? // true
2 == true;?? // false
0 == false;? // true
0 == ‘’;???? // true
NaN == NaN;? // false
[] == false; // true
[] == ![];?? // true
?undefined與null相等，但不恒等（=）
一個是number一個是string時，會嘗試將string轉換為number
嘗試將boolean轉換為number，0或1
嘗試將Object轉換成number或string，取決于另外一個對比量的類型
所以，對于0、空字符串的判斷，建議使用?“=”??！?#61;==”會先判斷兩邊的值類型，類型不匹配時為false。
那么問題來了，看下面的代碼，輸出什么，foo的值為什么？
console.log(foo);
console.log(typeof foo);
執行完后foo的值為111，foo的類型為String。
看代碼給答案。
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
答案：2（考察引用數據類型細節）
已知數組var?stringArray?=?[“This”,?“is”,?“Baidu”,?“Campus”]，Alert出”This?is?Baidu?Campus”。
答案：alert(stringArray.join(“”))
已知有字符串foo=”get-element-by-id”,寫一個function將其轉化成駝峰表示法”getElementById”。
var arr=msg.split("-");
????for(var i=1;i<arr.length;i++){
????????arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
????}
????msg=arr.join("");
????return msg;
}
(考察基礎API)
var?numberArray?=?[3,6,2,4,1,5]; （考察基礎API）
1)?實現對該數組的倒排，輸出[5,1,4,2,6,3]
numberArray.reverse()
2)?實現對該數組的降序排列，輸出[6,5,4,3,2,1]
numberArray.sort(function(a,b){return b-a})
輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，則輸出2014-09-26
// 獲取年，getFullYear()返回4位的數字
var year = d.getFullYear();
// 獲取月，月份比較特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 變成兩位
month = month < 10 ? ‘0’ + month : month;
// 獲取日
var day = d.getDate();
day = day < 10 ? ‘0’ + day : day;
alert(year + ‘-’ + month + ‘-’ + day);
將字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}?</td><td>{name}”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}?替換成10，{name}替換成Tony （使用正則表達式）
答案："{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}?</td><td>{id}_{$name}".replace(/{$id}/g,?‘10’).replace(/{$name}/g,?‘Tony’);
為了保證頁面輸出安全，我們經常需要對一些特殊的字符進行轉義，請寫一個函數escapeHtml，將<,?>,?&,?“進行轉義
return str.replace(/[<>”&]/g, function(match) {
????switch (match) {
???????????????????case “<”:
??????????????????????return “<”;
???????????????????case “>”:
??????????????????????return “>”;
???????????????????case “&”:
??????????????????????return “&”;
???????????????????case “\””:
??????????????????????return “"”;
??????}
??});
}
foo = foo||bar ，這行代碼是什么意思？為什么要這樣寫？
答案：if(!foo)?foo?=?bar;?//如果foo存在，值不變，否則把bar的值賦給foo。
短路表達式：作為”&&”和”||”操作符的操作數表達式，這些表達式在進行求值時，只要最終的結果已經可以確定是真或假，求值過程便告終止，這稱之為短路求值。
看下列代碼，將會輸出什么?(變量聲明提升)
(function(){
????console.log(foo);
????var foo = 2;
????console.log(foo);
})()
答案：輸出undefined 和 2。上面代碼相當于：
(function(){
????var foo;
????console.log(foo); //undefined
????foo = 2;
????console.log(foo); // 2;??
})()
函數聲明與變量聲明會被JavaScript引擎隱式地提升到當前作用域的頂部，但是只提升名稱不會提升賦值部分。
用js實現隨機選取10–100之間的10個數字，存入一個數組，并排序。
var arr=[];
randomNub(arr,10,10,100);
把兩個數組合并，并刪除第二個元素。
var bArray = [‘d’,‘e’,‘f’];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
怎樣添加、移除、移動、復制、創建和查找節點（原生JS，實在基礎，沒細寫每一步）
1）創建新節點
createDocumentFragment()????//創建一個DOM片段
createElement()???//創建一個具體的元素
createTextNode()???//創建一個文本節點
2）添加、移除、替換、插入
appendChild()??????//添加
removeChild()??????//移除
replaceChild()??????//替換
insertBefore()??????//插入
3）查找
getElementsByTagName()????//通過標簽名稱
getElementsByName()?????//通過元素的Name屬性的值
getElementById()????????//通過元素Id，唯一性
有這樣一個URL：http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e，請寫一段JS程序提取URL中的各個GET參數(參數名和參數個數不確定)，將其按key-value形式返回到一個json結構中，如{a:’1′,?b:’2′,?c:”,?d:’xxx’,?e:undefined}。
答案：
}
正則表達式構造函數var reg=new RegExp(“xxx”)與正則表達字面量var reg=//有什么不同？匹配郵箱的正則表達式？
答案：當使用RegExp()構造函數的時候，不僅需要轉義引號（即\”表示”），并且還需要雙反斜杠（即\表示一個\）。使用正則表達字面量的效率更高。?
郵箱的正則匹配：
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;
看下面代碼，給出輸出結果。
setTimeout(function(){
??????console.log(i);???
??},0);?
};
答案：4 4 4。
原因：Javascript事件處理器在線程空閑之前不會運行。追問，如何讓上述代碼輸出1 2 3？
setTimeout((function(a){? //改成立即執行函數
???????console.log(a);???
???})(i),0);?
};
?
1?????????? //輸出
2
3
寫一個function，清除字符串前后的空格。（兼容所有瀏覽器）
使用自帶接口trim()，考慮兼容性：
String.prototype.trim = function() {
?return this.replace(/^\s+/, “”).replace(/\s+$/,"");
?}
}
?
// test the function
var str = " \t\n test string ".trim();
alert(str == “test string”); // alerts “true”
Javascript中callee和caller的作用？
caller是返回一個對函數的引用，該函數調用了當前函數；
callee是返回正在被執行的function函數，也就是所指定的function對象的正文。
那么問題來了？如果一對兔子每月生一對兔子；一對新生兔，從第二個月起就開始生兔子；假定每對兔子都是一雌一雄，試問一對兔子，第n個月能繁殖成多少對兔子？（使用callee完成）
function fn(n){? //典型的斐波那契數列
???if(n1){
????????return 1;
???}else if(n2){
???????????return 1;
???}else{
????????if(result[n]){
????????????????return result[n];
????????}else{
????????????????//argument.callee()表示fn()
????????????????result[n]=arguments.callee(n-1)+arguments.callee(n-2);
????????????????return result[n];
????????}
???}
}
Javascript中, 以下哪條語句一定會產生運行錯誤？ 答案( B C )
var _變量=NaN; B、var 0bj = []; C、var obj = //; D、var obj = {};
以下兩個變量a和b，a+b的哪個結果是NaN？ 答案( AC )
A、var a=undefined; b=NaN
B、var a= ‘123’; b=NaN
C、var a =undefined , b =NaN
var a=NaN , b=‘undefined’
var a=10; b=20; c=4; ++b+c+a++ 以下哪個結果是正確的？答案( B )
A、34 B、35 C、36 D、37
下面的JavaScript語句中，（ D ）實現檢索當前頁面中的表單元素中的所有文本框，并將它們全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
要將頁面的狀態欄中顯示“已經選中該文本框”，下列JavaScript語句正確的是（ A ）
A. window.status=”已經選中該文本框”
B. document.status=”已經選中該文本框”
C. window.screen=”已經選中該文本框”
D. document.screen=”已經選中該文本框”
以下哪條語句會產生運行錯誤：（AD）
A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;
以下哪個單詞不屬于javascript保留字：（B）
A.with
B.parent
C.class
D.void
請選擇結果為真的表達式：（C）
A.null instanceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN
Javascript中, 如果已知HTML頁面中的某標簽對象的id=”username”，用____document.getElementById(‘username’)___ 方法獲得該標簽對象。
typeof運算符返回值中有一個跟javascript數據類型不一致，它是_______”function”_________。
定義了一個變量，但沒有為該變量賦值，如果alert該變量，javascript彈出的對話框中顯示___undefined______ 。
分析代碼，得出正確的結果。
var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);
彈出提示對話框：77
寫出函數DateDemo的返回結果，系統時間假定為今天
function DateDemo(){
var d, s=“今天日期是：”;
d = new Date();
s += d.getMonth() +1+ “/”;
s += d.getDate() + “/”;
s += d.getFullYear();
return s;}
結果：今天日期是：7/17/2010
寫出程序運行的結果？
for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;}
結果：10
閱讀以下代碼，請分析出結果：
var arr = new Array(1 ,3 ,5);
arr[4]=‘z’;
arr2 = arr.reverse();
arr3 = arr.concat(arr2);
alert(arr3);
彈出提示對話框：z,5,3,1,z,5,3,1
補充按鈕事件的函數，確認用戶是否退出當前頁面，確認之后關閉窗?
城市生活 都市早報 青山綠水 截取字符串abcdefg的efg alert('abcdefg'.substring(4)); 列舉瀏覽器對象模型BOM里常用的至少4個對象，并列舉window對象的常用方法至少5個 對象：window, document, location, screen, history, navigator 方法：alert(), confirm(), prompt(), open(), close() 簡述列舉文檔對象模型DOM里document的常用的查找訪問節點的方法并做簡單說明 Document.getElementById 根據元素id查找元素 Document.getElementByName 根據元素name查找元素 Document.getElementTagName 根據指定的元素名查找元素 希望獲取到頁面中所有的checkbox怎么做？(不使用第三方框架) var domList = document.getElementsByTagName(‘input’) var checkBoxList = []; var len = domList.length; //緩存到局部變量 while (len--) { //使用while的效率會比for循環更高 if (domList[len].type == ‘checkbox’) { checkBoxList.push(domList[len]); } } 簡述創建函數的幾種方式 第一種（函數聲明）：? function sum1(num1,num2){ ? ?return num1+num2; } 第二種（函數表達式）： var sum2 = function(num1,num2){ ? ?return num1+num2; } 第三種（函數對象方式）： var sum3 = new Function("num1","num2","return num1+num2");
Javascript如何實現繼承？
1.構造繼承法
2.原型繼承法
3.實例繼承法
Javascript創建對象的幾種方式？
1、var obj = {};（使用json創建對象）
如：obj.name = ‘張三’;?
obj.action = function ()
{
alert(‘吃飯’);
}?;
2、var obj = new Object();（使用Object創建對象）
如：obj.name = ‘張三’;?
obj.action = function ()
{
alert(‘吃飯’);
}?;
3、?通過函數創建對象。
(1)、使用this關鍵字?
如：var obj = function (){
this.name =‘張三’;
this.age = 19;
this.action = function ()
{
alert(‘吃飯’);
}?;
}?
(2)、使用prototype關鍵字
如：function obj (){}
? obj.prototype.name =‘張三’;
?obj.prototype.action=function ()
{
alert(‘吃飯’);
}?;
4、通過Window創建對象。
如：window.name = '‘張三’;
window.age = 19;
window.action= function()
{
alert(‘吃飯’);
};
5、使用內置對象創建對象。
如：var str = new String(“實例初始化String”);
var str1 = “直接賦值的String”;
var func = new Function(“x”,“alert(x)”);//示例初始化func
var obj = new Object();//示例初始化一個Object
iframe的優缺點？
優點：
缺點：
請你談談Cookie的弊端？
缺點：
1.Cookie數量和長度的限制。每個domain最多只能有20條cookie，每個cookie長度不能超過4KB，否則會被截掉。
2.安全性問題。如果cookie被人攔截了，那人就可以取得所有的session信息。即使加密也與事無補，因為攔截者并不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
3.有些狀態不可能保存在客戶端。例如，為了防止重復提交表單，我們需要在服務器端保存一個計數器。如果我們把這個計數器保存在客戶端，那么它起不到任何作用。
js延遲加載的方式有哪些？
documen.write和 innerHTML 的區別？
document.write 只能重繪整個頁面
innerHTML 可以重繪頁面的一部分
哪些操作會造成內存泄漏？
內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。
垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。
判斷一個字符串中出現次數最多的字符，統計這個次數
答：var str = ‘asdfssaaasasasasaa’;
var json = {};
for (var i = 0; i < str.length; i++) {
? ? ? ? if(!json[str.charAt(i)]){
? ? ? ? ? ? ? ? json[str.charAt(i)] = 1;
? ? ? ? }else{
? ? ? ? ? ? ? ? json[str.charAt(i)]++;
? ? ? ? }
};
var iMax = 0;
var iIndex = ‘’;
for(var i in json){
? ? ? ? if(json[i]>iMax){
? ? ? ? ? ? ? ? iMax = json[i];
? ? ? ? ? ? ? ? iIndex = i;
? ? ? ? }
}
alert(‘出現次數最多的是:’+iIndex+‘出現’+iMax+‘次’);
寫一個獲取非行間樣式的函數
function getStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr);
}
else{
obj.getComputedStyle(attr,false);
}
}
else
{
obj.style[attr] = value;
}
}
事件委托是什么
讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！
閉包是什么，有什么特性，對頁面有什么影響
????答：我的理解是，閉包就是能夠讀取其他函數內部變量的函數。在本質上，閉包就是將函數內部和函數外部連接起來的一座橋梁。
function?outer(){
????var?num?=?1;
????function?inner(){
????????var?n?=?2;
????????alert(n?+?num);
????}
????return?inner;
}
outer()();
http://blog.csdn.net/gaoshanwudi/article/details/7355794 此鏈接可查看（問這個問題的不是一個公司）
解釋jsonp的原理，以及為什么不是真正的ajax
動態創建script標簽，回調函數
Ajax是頁面無刷新請求數據操作
javascript的本地對象，內置對象和宿主對象
本地對象為array obj regexp等可以new實例化
內置對象為gload Math 等不可以實例化的
宿主為瀏覽器自帶的document,window 等
字符串反轉，如將 ‘12345678’ 變成 ‘87654321’
//大牛做法；
//思路：先將字符串轉換為數組?split()，利用數組的反序函數?reverse()顛倒數組，再利用?jion()?轉換為字符串
var?str?=?‘12345678’;
str?=?str.split(’’).reverse().join(’’);
將數字 12345678 轉化成 RMB形式 如： 12,345,678?
//個人方法；
//思路：先將數字轉為字符，?str=?str?+?‘’?;
//利用反轉函數，每三位字符加一個?','最后一位不加；?re()是自定義的反轉函數，最后再反轉回去！
function re(str) {
str += ‘’;
return str.split("").reverse().join("");
}
function toRMB(num) {
var tmp=’’;
for (var? i? = ?1;? i? <= ?re(num).length;? i++) {????
tmp? += ?re(num)[i? - ?1];????
if (i? % ?3? == ?0? && ?i? != ?re(num).length) {????????
tmp? += ?‘,’;????
}
}
return re(tmp);
}
生成5個不同的隨機數；
//思路：5個不同的數，每生成一次就和前面的所有數字相比較，如果有相同的，則放棄當前生成的數字！
var?num1?=?[];
for(var?i?=?0;?i?<?5;?i++){
????num1[i]?=?Math.floor(Math.random()*10)?+?1;?//范圍是?[1,?10]
????for(var?j?=?0;?j?<?i;?j++){
????????if(num1[i]?==?num1[j]){
????????????i–;
????????}
????}
}
去掉數組中重復的數字 方法一；
//這里用的原型?個人做法；
Array.prototype.unique?=?function(){
????var?len?=?this.length,
????????newArr?=?[],
????????flag?=?1;
????for(var?i?=?0;?i?<?len;?i++,?flag?=?1){
????????for(var?j?=?0;?j?<?i;?j++){
????????????if(this[i]?==?this[j]){
????????????????flag?=?0;????????//找到相同的數字后，不執行添加數據
????????????}
????????}
????????flag???newArr.push(this[i])?:?‘’;
????}
????return?newArr;
}
????方法二：
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
Array.prototype.unique2 = function()
{
var n = []; //一個新的臨時數組
for(var i = 0; i < this.length; i++) //遍歷當前數組
{
//如果當前數組的第i已經保存進了臨時數組，那么跳過，
//否則把當前項push到臨時數組里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
var newArr2=arr.unique2(arr);
alert(newArr2); //輸出1,2,3,4,5,6,9,25
階乘函數；
//原型方法
Number.prototype.N?=?function(){
????var?re?=?1;
????for(var?i?=?1;?i?<=?this;?i++){
????????re?*=?i;
????}
????return?re;
}
var?num?=?5;
alert(num.N());
window.location.search() 返回的是什么？
????答：查詢(參數)部分。除了給動態語言賦值以外，我們同樣可以給靜態頁面,并使用javascript來獲得相信應的參數值
????????返回值：?ver=1.0&id=timlq 也就是問號后面的！
window.location.hash?返回的是什么？
????答：錨點 ，?返回值：#love ；
window.location.reload() 作用？
????答：刷新當前頁面。
、javascript 中的垃圾回收機制？
????答：在Javascript中，如果一個對象不再被引用，那么這個對象就會被GC回收。如果兩個對象互相引用，而不再 ?被第3者所引用，那么這兩個互相引用的對象也會被回收。因為函數a被b引用，b又被a外的c引用，這就是為什么 ?函數a執行后不會被回收的原因。
看題做答：
function?f1(){
????var?tmp?=?1;
????this.x?=?3;
????console.log(tmp);????//A
????console.log(this.x)；?????//B
}
var?obj?=?new?f1();?//1
console.log(obj.x)?????//2
console.log(f1());????????//3
????分析：? ??
????????這道題讓我重新認識了對象和函數，首先看代碼（1），這里實例話化了 f1這個類。相當于執行了 f1函數。所以這個時候 A 會輸出 1， 而 B 這個時候的 this 代表的是 實例化的當前對象 obj B 輸出 3.。 代碼（2）毋庸置疑會輸出 3， 重點 代碼（3）首先這里將不再是一個類，它只是一個函數。那么 A輸出 1， B呢？這里的this 代表的其實就是window對象，那么this.x 就是一個全局變量 相當于在外部 的一個全局變量。所以 B 輸出 3。最后代碼由于f沒有返回值那么一個函數如果沒返回值的話，將會返回 underfined ，所以答案就是 ： 1， 3， 3， 1， 3， underfined 。
下面輸出多少？
var?o1?=?new?Object();
var?o2?=?o1;
o2.name?=?“CSSer”;
console.log(o1.name);
? 如果不看答案，你回答真確了的話，那么說明你對javascript的數據類型了解的還是比較清楚了。js中有兩種數據類型，分別是：基本數據類型和引用數據類型（object Array）。對于保存基本類型值的變量，變量是按值訪問的，因為我們操作的是變量實際保存的值。對于保存引用類型值的變量，變量是按引用訪問的，我們操作的是變量值所引用（指向）的對象。答案就清楚了： ?//CSSer;
再來一個
function?changeObjectProperty?(o)?{
????o.siteUrl?=?“http://www.csser.com/”;
????o?=?new?Object();
????o.siteUrl?=?“http://www.popcg.com/”;
}
var?CSSer?=?new?Object();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl);?//
????如果CSSer參數是按引用傳遞的，那么結果應該是"http://www.popcg.com/"，但實際結果卻仍是"http://www.csser.com/"。事實是這樣的：在函數內部修改了引用類型值的參數，該參數值的原始引用保持不變。我們可以把參數想象成局部變量，當參數被重寫時，這個變量引用的就是一個局部變量，局部變量的生存期僅限于函數執行的過程中，函數執行完畢，局部變量即被銷毀以釋放內存。????
????（補充：內部環境可以通過作用域鏈訪問所有的外部環境中的變量對象，但外部環境無法訪問內部環境。每個環境都可以向上搜索作用域鏈，以查詢變量和函數名，反之向下則不能。）
a輸出多少？
var?a?=?6;
setTimeout(function?()?{????
????var?a?=?666;
????alert(a);??????//?輸出666，
},?1000);
因為var a = 666;定義了局部變量a，并且賦值為666，根據變量作用域鏈，
全局變量處在作用域末端，優先訪問了局部變量，從而覆蓋了全局變量 。
var?a?=?6;
setTimeout(function?()?{????
????alert(a);??????//?輸出undefined?
????var?a?=?666;
},?1000);
因為var a = 666;定義了局部變量a，同樣覆蓋了全局變量，但是在alert(a);之前
a并未賦值，所以輸出undefined。
setTimeout(function(){
????alert(a);
????var?a?=?66;?
},?1000);
a?=?666;?
alert(a);?
//?666,?undefined;
記住： 異步處理，一切OK 聲明提前
看程序，寫結果
function?setN(obj){
????obj.name=‘屌絲’;
????obj?=?new?Object();?
????obj.name?=?‘腐女’;
};
var?per?=?new?Object();
setN(per);
alert(per.name);??//屌絲?內部
JS的繼承性
window.color?=?‘red’;
var?o?=?{color:?‘blue’};
function?sayColor(){
????alert(this.color);
}
sayColor();?//red
sayColor.call(this);?//red?this-window對象
sayColor.call(window);?//red
sayColor.call(o);?//blue
精度問題: JS 精度不能精確到 0.1 所以 ?。。。。同時存在于值和差值中
var?n?=?0.3,m?=?0.2,?i?=?0.2,?j?=?0.1;
alert((n?-?m)?==?(i?-?j));?//false
alert((n-m)?==?0.1);?//false
alert((i-j)==0.1);?//true
加減運算
alert(‘5’+3);?//53?string
alert(‘5’+‘3’);?//53?string
alert(‘5’-3);?//2?number
alert(‘5’-‘3’);?//2?number
什么是同源策略？
????指： 同協議、端口、域名的安全策略，由王景公司提出來的安全協議！
為什么不能定義1px左右的div容器？? ?
IE6下這個問題是因為默認的行高造成的，解決的方法也有很多，例如：
overflow:hidden?|?zoom:0.08?|?line-height:1px
結果是什么？
function?foo(){
????foo.a?=?function(){alert(1)};?
????this.a?=?function(){alert(2)};
????a?=?function(){alert(3)};
????var?a?=?function(){alert(4)};
};?
foo.prototype.a?=?function(){alert(5)};
foo.a?=?function(){alert(6)};
foo.a();?//6
var?obj?=?new?foo();
obj.a();?//2
foo.a();?//1
輸出結果
var?a?=?5;?
function?test(){
????a?=?0;?
????alert(a);?
????alert(this.a);?//沒有定義?a這個屬性
????var?a;?
????alert(a)
}
test();?//?0,?5,?0
new?test();?//?0,?undefined,?0?//由于類它自身沒有屬性a，?所以是undefined
計算字符串字節數：
new?function(s){?
?????if(!arguments.length||!s)?return?null;??
?????if(""==s)?return?0;?????
?????var?l=0;
?????for(var?i=0;i<s.length;i++){????????
?????????if(s.charCodeAt(i)>255)?l+=2;?else?l+=1;??//charCodeAt()得到的是unCode碼???
?????}?????//漢字的unCode碼大于?255bit?就是兩個字節
?????alert(l);?
}(“hello?world!”);
結果是：
var?bool?=?!!2;?alert(bool)；//true;
雙向非操作可以把字符串和數字轉換為布爾值。
聲明對象，添加屬性，輸出屬性
????var?obj?=?{
????????name:?‘leipeng’,
????????showName:?function(){
????????????alert(this.name);
????????}
????}
obj.showName();
匹配輸入的字符：第一個必須是字母或下劃線開頭，長度5-20
var?reg?=?/1[a-zA-Z0-9_]{5,20}/,
????????????name1?=?‘leipeng’,
????????????name2?=?‘0leipeng’,
????????????name3?=?‘你好leipeng’,
????????????name4?=?‘hi’;
?????
????????alert(reg.test(name1));
????????alert(reg.test(name2));
????????alert(reg.test(name3));
????????alert(reg.test(name4));
檢測變量類型
function checkStr(str){
return str ==‘string’;
}
console.log(checkStr(“aaa”));
如何在HTML中添加事件，幾種方法？
? ? 1、標簽之中直接添加 οnclick=“fun()”;
? ? 2、JS添加 Eobj.onclick = method;
? ? 3、現代事件 ?IE： obj.attachEvent(‘onclick’, method)；
? ? ? ? ? ? ? ? FF: obj.addEventListener(‘click’, method, false);
BOM對象有哪些，列舉window對象？
? ? 1、window對象 ，是JS的最頂層對象，其他的BOM對象都是window對象的屬性；
? ? 2、document對象，文檔對象；
? ? 3、location對象，瀏覽器當前URL信息；
? ? 4、navigator對象，瀏覽器本身信息；
? ? 5、screen對象，客戶端屏幕信息；
? ? 6、history對象，瀏覽器訪問歷史信息；
請問代碼實現 outerHTML
? ? //說明：outerHTML其實就是innerHTML再加上本身；
Object.prototype.outerHTML?=?function(){
????????var?innerCon?=?this.innerHTML,?//獲得里面的內容
????????????outerCon?=?this.appendChild(innerCon);?//添加到里面
????????alert(outerCon);?
????}
? ? 演示代碼：
? ? ?
?<!doctype?html>
?
??
????
????Document
??
??
????
???????hello
????
??
?
?
JS中的簡單繼承 call方法！
//頂一個父母類，注意：類名都是首字母大寫的哦！
??function?Parent(name,?money){
???????????? this.name?=?name;
????????????this.money?=?money;
???????????? this.info?=?function(){
????????????????alert('姓名：?‘+this.name+’?錢：?'+?this.money);
????????????}
????????}
????????//定義孩子類
????????function?Children(name){
????????????Parent.call(this,?name);?//繼承?姓名屬性，不要錢。??
???????????? this.info?=?function(){
????????????????alert('姓名：?'+ this.name);
????????????}
????????}
????????//實例化類
????????var?per?=?new?Parent(‘parent’,?800000000000);
????????var?chi?=?new?Children(‘child’);
???????? per.info();
???????? chi.info();
bind(), live(), delegate()的區別
? ? bind： 綁定事件，對新添加的事件不起作用，方法用于將一個處理程序附加到每個匹配元素的事件上并返回jQuery對象。
? ? live： 方法將一個事件處理程序附加到與當前選擇器匹配的所有元素（包含現有的或將來添加的）的指定事件上并返回jQuery對象。
? ? delegate： 方法基于一組特定的根元素將處理程序附加到匹配選擇器的所有元素（現有的或將來的）的一個或多個事件上。 ?
看下列代碼輸出什么？
var foo = “11”+2-“1”;
console.log(foo);
console.log(typeof foo);
執行完后foo的值為111，foo的類型為Number。
看下列代碼,輸出什么？
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
執行完后輸出結果為2
你如何優化自己的代碼？
代碼重用
避免全局變量（命名空間，封閉空間，模塊化mvc…）
拆分函數避免函數過于臃腫
注釋
請描述出下列代碼運行的結果
function d(){
console.log(this);
}
d();//輸出window對象
怎樣實現兩欄等高？ Title 內容
內容
內容
內容
內容
內容
內容
使用js實現這樣的效果：在文本域里輸入文字時，當按下enter鍵時不換行，而是替換成“{{enter}}”,(只需要考慮在行尾按下enter鍵的情況).
以下代碼中end字符串什么時候輸出
var t=true;
setTimeout(function(){
console.log(123);
t=false;
},1000);
while(t){}
console.log(‘end’);
永遠不輸出
specify(‘hello,world’)//=>’h,e,l,l,o,w,o,r,l,d’實現specify函數
function specify(str){
var tempArray = Array.prototype.filter.call(str,function(value,index,array){
return value >= ‘A’ && value <= ‘z’ && value != “_”;
});
return tempArray.join(",");
}
console.log(specify(“hedd____df*(%$#a !!!))))))llo,Wo@@@r ld”)); //h,e,l,l,o,W,o,r,l,d
請將一個URL的search部分參數與值轉換成一個json對象
請用原生js實現jquery的get\post功能，以及跨域情況下
請簡要描述web前端性能需要考慮哪方面，你的優化思路是什么？
、簡述readyonly與disabled的區別
ReadOnly和Disabled的作用是使用戶不能夠更改表單域中的內容.
但是二者還是有著一些區別的：
1、Readonly只針對input(text/password)和textarea有效，而disabled對于所有的表單元素有效，包括select,radio,checkbox,button等。
2、在表單元素使用了disabled后，我們將表單以POST或者GET的方式提交的話，這個元素的值不會被傳遞出去，而readonly會將該值傳遞出去
寫出3個使用this的典型應用
請盡可能詳盡的解釋ajax的工作原理
Ajax的工作原理相當于在用戶和服務器之間加了—個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。
簡單來說通過XmlHttpRequest對象來向服務器發異步請求，從服務器獲得數據，然后用javascript來操作DOM而更新頁面。這其中最關鍵的一步就是從服務器獲得請求數據。要清楚這個過程和原理，我們必須對?XMLHttpRequest有所了解。
、為什么擴展javascript內置對象不是好的做法？
因為你不知道哪一天瀏覽器或javascript本身就會實現這個方法，而且和你擴展的實現有不一致的表現。到時候你的javascript代碼可能已經在無數個頁面中執行了數年，而瀏覽器的實現導致所有使用擴展原型的代碼都崩潰了。。。
什么是三元表達式？“三元”表示什么意思？
三元運算符:
三元如名字表示的三元運算符需要三個操作數。
語法是?條件 ? 結果1 : 結果2;. 這里你把條件寫在問號(?)的前面后面跟著用冒號(:)分隔的結果1和結果2。滿足條件時結果1否則結果2。
瀏覽器標準模式和怪異模式之間的區別是什么？
所謂的標準模式是指，瀏覽器按W3C標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式
modulo(12,5)//2 實現滿足這個結果的modulo函數
HTTP協議中，GET和POST有什么區別？分別適用什么場景 ？
HTTP狀態消息200 302 304 403 404 500分別表示什么
HTTP協議中，header信息里面，怎么控制頁面失效時間（last-modified,cache-control,Expires分別代表什么）
HTTP雷鋒議目前常用的有哪幾個？KEEPALIVE從哪個版本開始出現的？
業界常用的優化WEB頁面加載速度的方法（可以分別從頁面元素展現，請求連接，css,js,服務器等方面介紹）
列舉常用的web頁面開發，調試以及優化工具
解釋什么是sql注入，xss漏洞
如何判斷一個js變量是數組類型
請列舉js數組類型中的常用方法
FF與IE中如何阻止事件冒泡，如何獲取事件對象，以及如何獲取觸發事件的元素
function?stopPropagation(e)?{??
????e?=?e?||?window.event;??
????if(e.stopPropagation)?{?//W3C阻止冒泡方法??
????????e.stopPropagation();??
????}?else?{??
????????e.cancelBubble?=?true;?//IE阻止冒泡方法??
????}??
}??
document.getElementById(‘need_hide’).onclick?=?function(e)?{??
????stopPropagation(e);??
}
列舉常用的js框架以及分別適用的領域
js中如何實現一個map
js可否實現面向對象編程，如果可以如何實現js對象的繼承
約瑟夫環—已知n個人（以編號1，2，3…分別表示）圍坐在一張圓桌周圍。從編號為k的人開始報數，數到m的那個人出列；他的下一個人又從1開始報數，數到m的那個人又出列；依此規律重復下去，直到圓桌周圍的人全部出列。
有1到10w這個10w個數，去除2個并打亂次序，如何找出那兩個數？
如何獲取對象a擁有的所有屬性（可枚舉的、不可枚舉的，不包括繼承來的屬性）
有下面這樣一段HTML結構，使用css實現這樣的效果：
左邊容器無論寬度如何變動，右邊容器都能自適應填滿父容器剩余的寬度。
關于IE的window對象表述正確的有：（ACD）
A. window.opener屬性本身就是指向window對象
B. window.reload()方法可以用來刷新當前頁面 應該是location.reload或者window.location.reload
C. window.location=”a.html”和window.location.href=”a.html”的作用都是把當前頁面替換成a.html頁面
D. 定義了全局變量g；可以用window.g的方式來存取該變量
下面正確的是 A
A: 跨域問題能通過JsonP方案解決 B：不同子域名間僅能通過修改window.name解決跨域 還可以通過script標簽src jsonp等h5 Java split等
C：只有在IE中可通過iframe嵌套跨域 D：MediaQuery屬性是進行視頻格式檢測的屬性是做響應式的
錯誤的是 B
A: Ajax本質是XMLHttpRequest
B: 塊元素實際占用的寬度與它的width、border、padding屬性有關，與background無關
C: position屬性absolute、fixed、—relative—會使文檔脫標
D: float屬性left也會使div脫標
答案C：relative不會脫離文檔流
不用任何插件，如何實現一個tab欄切換？
變量的命名規范以及命名推薦
變量，函數，方法：小寫開頭，以后的每個單詞首字母大寫 （駝峰）
構造函數，class：每個單詞大寫開頭
基于實際情況，以動詞，名詞，謂詞來命名。盡量言簡意駭，以命名代替注釋
三種彈窗的單詞以及三種彈窗的功能
1.alert
//彈出對話框并輸出一段提示信息
function ale() {
//彈出一個對話框
alert(“提示信息！”);
2.confirm
//彈出一個詢問框，有確定和取消按鈕
function firm() {
//利用對話框返回的值 （true 或者 false）
if (confirm(“你確定提交嗎？”)) {
alert(“點擊了確定”);
}
else {
alert(“點擊了取消”);
}
3.prompt
//彈出一個輸入框，輸入一段文字，可以提交
function prom() {
var name = prompt(“請輸入您的名字”, “”); //將輸入的內容賦給變量 name ，
console.log( 8 | 1 ); 輸出值是多少？
答案：9
只允許使用 + - * / 和 Math.* ，求一個函數 y = f(x, a, b);當x > 100 時返回 a 的值，否則返回 b 的值，不能使用 if else 等條件語句，也不能使用|,?:,數組。
答案：
function f(x, a, b) {
var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1));
}
console.log(f(-10, 1, 2));
JavaScriptalert(0.4*0.2);結果是多少？和你預期的一樣嗎？如果不一樣該如何處理？
有誤差，應該比準確結果偏大。 一般我會將小數變為整數來處理。當前之前遇到這個問題時也上網查詢發現有人用try catch return寫了一個函數，
當然原理也是一致先轉為整數再計算。
一個div，有幾種方式得到這個div的jQuery對象？
$(“#nodesView”) , (“.aabbcc”),(“.aabbcc”) ,(“.aabbcc”),(“#nodesView”)[0] , $(“.aabbcc”)[0]
、主流瀏覽器內核
IE trident 火狐gecko 谷歌蘋果webkit Opera：Presto
如何顯示/隱藏一個dom元素？請用原生的JavaScript方法實現
jQuery框架中$.ajax()的常用參數有哪些？寫一個post請求并帶有發送數據和返回數據的樣例
async是否異步
url請求地址
contentType發送信息至服務器時內容編碼類型
data發送到服務器的數據
dataType預期服務器返回的數據類型
type請求類型
success請求成功回調函數
error請求失敗回調函數
$.ajax({
url: “/jquery/test1.txt”,
type: ‘post’,
data: {
id: 1
},
success: function(data) {
alert(data);
}
}
JavaScript的循環語句有哪些？
For,for…in,while,do…while
作用域-編譯期執行期以及全局局部作用域問題
閉包：下面這個ul，如何點擊每一列的時候alert其index？
- 這是第一條
- 這是第二條
- 這是第三條
(2) 獲取事件源?
IE用srcElement獲取事件源，而FF用target獲取事件源
(3) 添加，去除事件?
IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)?
FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 獲取標簽的自定義屬性?
IE：div1.value或div1[“value”]?
FF：可用div1.getAttribute(“value”)?
如現在有一個效果，有顯示用戶頭像、用戶昵稱、用戶其他信息；當用戶鼠標移到頭像上時，會彈出用戶的所有信息；如果是你，你會如何實現這個功能，請用代碼實現？
(略)
提示：先寫個div將用戶信息放入，默認隱藏，當使用:hover樣式顯示這個div
用正則表達式，寫出由字母開頭，其余由數字、字母、下劃線組成的6~30的字符串？
2{1}[\w]{5,29}$
列舉瀏覽器對象模型BOM里常用的至少4個對象，并列舉window對象的常用方法至少5個 （10分）
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
在Javascript中什么是偽數組？如何將偽數組轉化為標準數組？
答案：
偽數組（類數組）：無法直接調用數組方法或期望length屬性有什么特殊的行為，但仍可以對真正數組遍歷方法來遍歷它們。典型的是函數的argument參數，還有像調用getElementsByTagName,document.childNodes之類的,它們都返回NodeList對象都屬于偽數組。可以使用Array.prototype.slice.call(fakeArray)將數組轉化為真正的Array對象。
寫一個函數可以計算 sum(5,0,-5);輸出0; sum(1,2,3,4);輸出10;
function sum() {
var result = 0;
var arr = arguments;
for (var i = 0; i < arr.length; i++) {
var num = arguments[i];
if (typeof num==‘number’) {
result += num;
};
};
return result;
}
《正則》寫出正確的正則表達式匹配固話號，區號3-4位，第一位為0，中橫線，7-8位數字，中橫線，3-4位分機號格式的固話號
3\d{2,3}-\d{7,8}-\d{3,4}$
《算法》 一下A,B可任選一題作答，兩題全答加分
A:農場買了一只羊，第一年是小羊，第二年底生一只，第三年不生，第四年底再生一只，第五年死掉。
B:寫出代碼對下列數組去重并從大到小排列{5,2,3,6,8,6,5,4,7,1,9}
function fn(arr){
for (var i = 0; i < arr.length-1; i++) {
for (var j = 0; j < arr.length-1-i; j++) {
if(arr[j]<arr[j+1]){
var temp = arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
console.log(fn([5,2,3,6,8,6,5,4,7,1,9]).toString());
請寫一個正則表達式：要求最短6位數，最長20位，阿拉伯數和英文字母（不區分大小寫）組成
^(?=.\d)(?=.[a-z])(?=.*[A-Z])[a-zA-Z\d]{6,20}$
統計1到400億之間的自然數中含有多少個1？比如1-21中，有1、10、11、21這四個自然數有5個1
刪除與某個字符相鄰且相同的字符，比如fdaffdaaklfjklja字符串處理之后成為“fdafdaklfjklja”
請寫出三種以上的Firefox有但，InternetExplorer沒有的屬性或者函數
請寫出一個程序，在頁面加載完成后動態創建一個form表單，并在里面添加一個input對象并給它任意賦值后義post方式提交到：http://127.0.0.1/save.php
window.οnlοad=function(){
var form=document.createElement(“form”);
form.setAttribute(“method”, “post”);
form.setAttribute(“action”, “http://127.0.0.1/save.php”);
var input=document.createElement(“input”);
form.appendChild(input);
document.body.appendChild(form);
input.value=“cxc”;
form.submit();//提交表單
}
用JavaScript實現冒泡排序。數據為23、45、18、37、92、13、24
//升序算法
function sort(arr){
for (var i = 0; i <arr.length; i++) {
for (var j = 0; j <arr.length-i; j++) {
if(arr[j]>arr[j+1]){
var c=arr[j];//交換兩個變量的位置
arr[j]=arr[j+1];
arr[j+1]=c;
}
};
};
return arr.toString();
}
console.log(sort([23,45,18,37,92,13,24]));
前端代碼優化的方法
var User = {
count = 1，
getCount：function（）{
return this.count;
}
}
console.log(User.getCount());
var func = User.getCount;
console.log(func());
1 undefined（因為是window對象執行了func函數）;
下列JavaScript代碼執行后，依次alert的結果是
(function test(){
var a=b=5;
alert(typeof a);
alert(typeof b);
})();
alert(typeof a);
alert(typeof b);
答案：number
number
undefined
number
下列JavaScript代碼執行后，iNum的值是
var iNum = 0;
for(var i = 1; i< 10; i++){
if(i % 5 == 0){
continue;
}
iNum++;
}
答案：8
輸出結果是多少？
1） var a;
var b = a * 0;
if (b == b) {
console.log(b * 2 + “2” - 0 + 4);
} else {
console.log(!b * 2 + “2” - 0 + 4);
}
答案：26
2）
答案：6
3） var t = 10;
function test(t){
var t = t++;
}test(t);
console.log(t);
答案：10
4） var t = 10;
function test(test){
var t = test++;
}test(t);
console.log(t);
答案：10
6） var t = 10;
function test(test){
t = test++;
}test(t);
console.log(t);
答案：10
7） var t = 10;
function test(test){
t = t + test;
console.log(t);
var t = 3;
}test(t);
console.log(t);
答案：NaN 10
8） var a;
var b = a / 0;
if (b == b) {
console.log(b * 2 + “2” - 0 + 4);
} else {
console.log(!b * 2 + “2” - 0 + 4);
}
答案：26
9）
答案：Infinity24
用程序實現找到html中id名相同的元素？
id名重復的元素 var nodes=document.querySelectorAll("#form1>*"); for(var i=0,len=nodes.length;i下列JavaScript代碼執行后，運行的結果是
點擊我
var btn = document.getElementById(‘btn’);
var handler = {
id: ‘_eventHandler’,
exec: function(){
alert(this.id);
}
}
btn.addEventListener(‘click’, handler.exec);
答案：”btn”
下列JavaScript代碼執行后，依次alert的結果是
var obj = {proto: {a:1,b:2}};
function F(){};
F.prototype = obj.proto;
var f = new F();
obj.proto.c = 3;
obj.proto = {a:-1, b:-2};
alert(f.a);
alert(f.c);
delete F.prototype[‘a’];
alert(f.a);
alert(obj.proto.a);
答案：
1
3
undefined
-1
下列JavaScript代碼執行后的效果是
- item
- item
- item
- item
- item
- Item
- Item
- Item
var items = document.getElementsByTagName(‘li’);
for(var i = 0; i< items.length; i++){
if(items[i].innerHTML == ‘’){
items[i].parentNode.removeChild(items[i]);
}
}
程序中捕獲異常的方法？
window.error
try{}catch(){}finally{}
將字符串”{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}?</td><td>{name}”中的{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}?替換成10，{name}替換成Tony （使用正則表達式）
答案：’{KaTeX parse error: Expected 'EOF', got '}' at position 3: id}?</td><td>{id}_{$name}’
.replace(/{$id}/g,‘10’)
.replace(/{$name}/g,‘Tony’)
給String對象添加一個方法，傳入一個string類型的參數，然后將string的每個字符間價格空格返回，例如：addSpace(“hello world”) // -> ‘h e l l o ?w o r l d’
String.prototype.spacify = function(){
return this.split(’’).join(’ ');
};
數組和字符串
輸出結果：
答案：lashou 拉手 lashou 1,2,3 1,2,3,4 1,2,3,4
下列控制臺都輸出什么
第1題：
function setName(){
name=“張三”;
}
setName();
console.log(name);
答案：“張三”
第2題：
//考點：1、變量聲明提升 2、變量搜索機制
var a=1;
function test(){
console.log(a);
var a=1;
}
test();
答案：undefined
第3題：
var b=2;
function test2(){
window.b=3;
console.log(b);
}
test2();
答案：3
第4題：
c=5;//聲明一個全局變量c
function test3(){
window.c=3;
console.log?; //答案：undefined，原因：由于此時的c是一個局部變量c，并且沒有被賦值
var c;
console.log(window.c);//答案：3，原因：這里的c就是一個全局變量c
}
test3();
第5題：
var arr = [];
arr[0] = ‘a’;
arr[1] = ‘b’;
arr[10] = ‘c’;
alert(arr.length); //答案：11
console.log(arr[5]); //答案：undefined
第6題：
var a=1;
console.log(a++); //答案：1
console.log(++a); //答案：3
第7題：
console.log(null==undefined); //答案：true
console.log(“1”==1); //答案：true，因為會將數字1先轉換為字符串1
console.log(“1”===1); //答案：false，因為數據類型不一致
第8題：
typeof 1; “number”
typeof “hello”; “string”
typeof /[0-9]/; “object”
typeof {}; “object”
typeof null; “object”
typeof undefined; “undefined”
typeof [1,2,3]; “object”
typeof function(){}; //“function”
第9題：
parseInt(3.14); //3
parseFloat(“3asdf”); //3
parseInt(“1.23abc456”);
parseInt(true);//“true” NaN
第10題：
//考點：函數聲明提前
function bar() {
return foo;
foo = 10;
function foo() {}
//var foo = 11;
}
alert(typeof bar());//“function”
第11題：考點：函數聲明提前
var foo = 1;
function bar() {
foo = 10;
return;
function foo() {}
}
bar();
alert(foo);//答案：1
第12題：
console.log(a);//是一個函數
var a = 3;
function a(){}
console.log(a);3
第13題：
//考點：對arguments的操作
function foo(a) {
arguments[0] = 2;
alert(a);//答案：2，因為：a、arguments是對實參的訪問，b、通過arguments[i]可以修改指定實參的值
}
foo(1);
第14題：
function foo(a) {
alert(arguments.length);//答案：3，因為arguments是對實參的訪問
}
foo(1, 2, 3);
第15題
bar();//報錯
var foo = function bar(name) {
console.log(“hello”+name);
console.log(bar);
};
//alert(typeof bar);
foo(“world”);//“hello”
console.log(bar);//undefined
console.log(foo.toString());
bar();//報錯
第16題：以下執行會有什么輸出
function test(){
console.log(“test函數”);
}
setTimeout(function(){
console.log(“定時器回調函數”);
}, 0)
test();
結果：
test函數
定時器回調函數
三、HTML5 CSS3
CSS3有哪些新特性？
3.transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋轉,縮放,定位,傾斜
html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
新特性：
移除的元素：
支持HTML5新標簽：
如何區分：
DOCTYPE聲明新增的結構元素、功能元素
本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什么？
Cookies:服務器和客戶端都可以訪問；大小只有4KB左右；有有效期，過期后將會刪除；
本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意通過POST或者GET的通道發送到服務器；每個域5MB；沒有過期數據，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除
如何實現瀏覽器內多個標簽頁之間的通信?
調用 localstorge、cookies 等本地存儲方式
你如何對網站的文件和資源進行優化？
文件合并
文件最小化/文件壓縮
使用CDN托管
緩存的使用
什么是響應式設計？
它是關于網頁制作的過程中讓不同的設備有不同的尺寸和不同的功能。響應式設計是讓所有的人能在這些設備上讓網站運行正常
新的 HTML5 文檔類型和字符集是？
答：HTML5文檔類型：<!doctype html>
HTML5使用的編碼
HTML5 Canvas 元素有什么用？
答：Canvas 元素用于在網頁上繪制圖形，該元素標簽強大之處在于可以直接在 HTML 上進行圖形操作。
HTML5 存儲類型有什么區別？
答：Media API、Text Track API、Application Cache API、User Interaction、Data Transfer API、Command API、Constraint Validation API、History API
用H5+CSS3解決下導航欄最后一項掉下來的問題
CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個
元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后
元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的
元素的每個
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個
元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個
元素。
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。
請用CSS實現：一個矩形內容，有投影，有圓角，hover狀態慢慢變透明。
css屬性的熟練程度和實踐經驗
描述下CSS3里實現元素動畫的方法
動畫相關屬性的熟悉程度
html5\CSS3有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 HTML 和 HTML5？
HTML5 現在已經不是 SGML 的子集，主要是關于圖像，位置，存儲，地理定位等功能的增加。
- 繪畫 canvas 元素
用于媒介回放的 video 和 audio 元素
本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失；
sessionStorage 的數據在瀏覽器關閉后自動刪除
語意化更好的內容元素，比如 article、footer、header、nav、section
表單控件，calendar、date、time、email、url、search
CSS3實現圓角，陰影，對文字加特效，增加了更多的CSS選擇器 多背景 rgba
新的技術webworker, websockt, Geolocation
移除的元素
純表現的元素：basefont，big，center，font, s，strike，tt，u；
對可用性產生負面影響的元素：frame，frameset，noframes； - 是IE8/IE7/IE6支持通過document.createElement方法產生的標簽，
可以利用這一特性讓這些瀏覽器支持HTML5新標簽，
瀏覽器支持新標簽后，還需要添加標簽默認的樣式： - 當然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
你怎么來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏 品 字布局 如何設計?
- 首先劃分成頭部、body、腳部；。。。。。
- 實現效果圖是最基本的工作，精確到2px；
與設計師，產品經理的溝通和項目的參與
做好的頁面結構，頁面重構和用戶體驗
處理hack，兼容、寫出優美的代碼格式
針對服務器的優化、擁抱 HTML5。
你能描述一下漸進增強和優雅降級之間的不同嗎?
漸進增強?progressive?enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級?graceful?degradation：一開始就構建完整的功能，然后再針對低版本瀏覽器進行兼容。
區別：優雅降級是從復雜的現狀開始，并試圖減少用戶體驗的供給，而漸進增強則是從一個非常基礎的，能夠起作用的版本開始，并不斷擴充，以適應未來環境的需要。降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時保證其根基處于安全地帶?！?br /> “優雅降級”觀點
“優雅降級”觀點認為應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認為“過時”或有功能缺失的瀏覽器下的測試工作安排在開發周期的最后階段，并把測試對象限定為主流瀏覽器（如?IE、Mozilla?等）的前一個版本。
在這種設計范例下，舊版的瀏覽器被認為僅能提供“簡陋卻無妨?(poor,?but?passable)”?的瀏覽體驗。你可以做一些小的調整來適應某個特定的瀏覽器。但由于它們并非我們所關注的焦點，因此除了修復較大的錯誤之外，其它的差異將被直接忽略。
“漸進增強”觀點
“漸進增強”觀點則認為應關注于內容本身。
內容是我們建立網站的誘因。有的網站展示它，有的則收集它，有的尋求，有的操作，還有的網站甚至會包含以上的種種，但相同點是它們全都涉及到內容。這使得“漸進增強”成為一種更為合理的設計范例。這也是它立即被?Yahoo!?所采納并用以構建其“分級式瀏覽器支持?(Graded?Browser?Support)”策略的原因所在。
?
那么問題了。現在產品經理看到IE6,7,8網頁效果相對高版本現代瀏覽器少了很多圓角，陰影（CSS3），要求兼容（使用圖片背景，放棄CSS3），你會如何說服他？
為什么利用多個域名來存儲網站資源會更有效？
CDN緩存更方便?
突破瀏覽器并發限制?
節約cookie帶寬?
節約主域名的連接數，優化頁面響應速度?
防止不必要的安全問題
請談一下你對網頁標準和標準制定機構重要性的理解。
（無標準答案）網頁標準和標準制定機構都是為了能讓web發展的更‘健康’，開發者遵循統一的標準，降低開發難度，開發成本，SEO也會更好做，也不會因為濫用代碼導致各種BUG、安全問題，最終提高網站易用性。
?
請描述一下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僅僅是為了在本地“存儲”數據而生。
知道css有個content屬性嗎？有什么作用？有什么應用？
知道。css的content屬性專門應用在 before/after 偽元素上，用來插入生成內容。最常見的應用是利用偽類清除浮動。
//一種常見利用偽類清除浮動的代碼
.clearfix:after {
content:"."; //這里利用到了content屬性
display:block;
height:0;
visibility:hidden;
clear:both; }
.clearfix {
*zoom:1;
}
after偽元素通過 content 在元素的后面生成了內容為一個點的塊級素，再利用clear:both清除浮動。
那么問題繼續還有，知道css計數器（序列數字字符自動遞增）嗎？如何通過css content屬性實現css計數器？
答案：css計數器是通過設置counter-reset 、counter-increment 兩個屬性 、及 counter()/counters()一個方法配合after / before 偽類實現。?
如何在 HTML5 頁面中嵌入音頻?
HTML 5 包含嵌入音頻文件的標準方式，支持的格式包括 MP3、Wav 和 Ogg：
?
???
???Your?browser?does’nt?support?audio?embedding?feature.?
如何在 HTML5 頁面中嵌入視頻？
和音頻一樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP4、WebM 和 Ogg：
?
???
???Your?browser?does’nt?support?video?embedding?feature.?
?
HTML5 引入什么新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl
CSS3新增偽類有那些？
p:first-of-type 選擇屬于其父元素的首個元素的每個
元素。
p:last-of-type 選擇屬于其父元素的最后元素的每個
元素。
p:only-of-type 選擇屬于其父元素唯一的元素的每個
元素。
p:only-child 選擇屬于其父元素的唯一子元素的每個元素。
p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個元素。
、、和等）
:enabled、:disabled 控制表單控件的禁用狀態。
:checked，單選框或復選框被選中。
(寫)描述一段語義的html代碼吧。
（HTML5中新增加的很多標簽（如：
就是基于語義化設計原則）
< div id=“header”>
< h1>標題< /h1>
< h2>專注Web前端技術< /h2>
< /div>
語義 HTML 具有以下特性：總結
- 上一篇： PHP 免费视频教程
- 下一篇： PHP的session阻塞问题