前端面試合集
VUEjavascript
1.什麼是 vue 生命週期css
2.vue生命週期的做用是什麼html
3.第一次頁面加載會觸發哪幾個鉤子前端
4.簡述每一個週期具體適合哪些場景vue
5.created和mounted的區別html5
6.vue獲取數據在哪一個周期函數java
7.請詳細說下你對vue生命週期的理解？node
vue路由面試題react
mvvm 框架是什麼？
vue-router 是什麼?它有哪些組件jquery
active-class 是哪一個組件的屬性？
怎麼定義 vue-router 的動態路由? 怎麼獲取傳過來的值
vue-router 有哪幾種導航鉤子?
6.$route 和 $router 的區別
7.vue-router響應路由參數的變化
8.vue-router傳參
9.vue-router的兩種模式
10.vue-router實現路由懶加載（ 動態加載路由 ）
vue常見面試題
1.vue優勢
2.vue父組件向子組件傳遞數據？
3.子組件像父組件傳遞事件
4.v-show和v-if指令的共同點和不一樣點
5.如何讓CSS只在當前組件中起做用
6.<keep-alive></keep-alive>的做用是什麼?
7.如何獲取dom
8.說出幾種vue當中的指令和它的用法？
9. vue-loader是什麼？使用它的用途有哪些？
10.爲何使用key
11.axios及安裝
12.axios解決跨域
13.v-modal的使用
14.scss的安裝以及使用
15. 請說出vue.cli項目中src目錄每一個文件夾和文件的用法？
16.分別簡述computed和watch的使用場景
17.v-on能夠監聽多個方法嗎
18.$nextTick的使用
19.vue組件中data爲何必須是一個函數
20.vue事件對象的使用
21 組件間的通訊
22.漸進式框架的理解
23.Vue中雙向數據綁定是如何實現的
24.單頁面應用和多頁面應用區別及優缺點
25.vue中過濾器有什麼做用及詳解
26.v-if和v-for的優先級
27.assets和static的區別
28.列舉經常使用的指令
29.vue經常使用的修飾符
30.數組更新檢測
31.Vue.set視圖更新
32.自定義指令詳解
33.vue的兩個核心點
34.vue和jQuery的區別
35 引進組件的步驟
Vue-cli打包命令是什麼？打包後悔致使路徑問題，應該在哪裏修改
三大框架的對比
跨組件雙向數據綁定
delete和Vue.delete刪除數組的區別
SPA首屏加載慢如何解決
Vue-router跳轉和location.href有什麼區別
vue slot
大家vue項目是打包了一個js文件，一個css文件，仍是有多個文件？ 44.vue遇到的坑，如何解決的？
Vue裏面router-link在電腦上有用，在安卓上沒反應怎麼解決？ 46.Vue2中註冊在router-link上事件無效解決方法
RouterLink在IE和Firefox中不起做用（路由不跳轉）的問題
axios的特色有哪些
請說下封裝 vue 組件的過程？
vuex常見面試題
vuex是什麼？怎麼使用？哪一種功能場景使用它？
vuex有哪幾種屬性
不使用Vuex會帶來什麼問題
Vue.js中ajax請求代碼應該寫在組件的methods中仍是vuex的actions中？
vuex一個例子方法
Vuex中如何異步修改狀態
Vuex中actions和mutations的區別
ES6新增方法面試題
let const var比較
反引號（`）標識
函數默認參數
箭頭函數
屬性簡寫
方法簡寫
Object.keys()方法，獲取對象的全部屬性名或方法名
Object.assign ()原對象的屬性和方法都合併到了目標對象
for...of 循環
import和export
Promise對象
解構賦值
set數據結構（可用於快速去重）
Spread Operator 展開運算符(...)
字符串新增方法
ES6數組面試題
forEach() 2.map() 3.filter() 4.reduce() 5.some() 6.every() 7.all()方法 ES6編程題
使用解構，實現兩個變量的值的交換
利用數組推導，計算出數組 [1,2,3,4] 每個元素的平方並組成新的數組。 3.使用ES6改下面的模板
把如下代碼使用兩種方法，來依次輸出0到9？
JS面試題
簡述同步和異步的區別
2.怎麼添加、移除、複製、建立、和查找節點
3.實現一個函數clone 能夠對Javascript中的五種主要數據類型（Number、string、Object、Array、Boolean）進行復制
4.如何消除一個數組裏面重復的元素
5.寫一個返回閉包的函數
6.使用遞歸完成1到100的累加
7.Javascript有哪幾種數據類型
8.如何判斷數據類型
9.console.log(1+'2')和console.log(1-'2')的打印結果
10.Js的事件委託是什麼，原理是什麼
11.如何改變函數內部的this指針的指向
12.列舉幾種解決跨域問題的方式，且說明原理
13.談談垃圾回收機制的方式及內存管理
14.寫一個function ，清除字符串先後的空格
15.js實現繼承的方法有哪些
16.判斷一個變量是不是數組，有哪些辦法
17.let ，const ，var 有什麼區別
18.箭頭函數與普通函數有什麼區別
19.隨機取1-10之間的整數
20.new操做符具體幹了什麼
21.Ajax原理
22.模塊化開發怎麼作
23.異步加載Js的方式有哪些
24.xml和 json的區別
25.webpack如何實現打包的
26.常見web安全及防禦原理
27.用過哪些設計模式
28.爲何會有同源限制
29.offsetWidth/offsetHeight,clientWidth/clientHeight與scrollWidth/scrollHeight的區別
30.javascript有哪些方法定義對象
31.說說你對promise的瞭解
32.談談你對AMD、CMD的理解
33.web開發中會話跟蹤的方法有哪些
34.介紹js有哪些內置對象？
35.說幾條寫JavaScript的基本規範？
36.javascript建立對象的幾種方式？
37.eval是作什麼的？
38.null，undefined 的區別？
39.[「1」, 「2」, 「3」].map(parseInt) 答案是多少？
40.javascript 代碼中的」use strict」;是什麼意思 ? 使用它區別是什麼？ 41.js延遲加載的方式有哪些？
42.defer和async
43.說說嚴格模式的限制
44.attribute和property的區別是什麼？
45.ECMAScript6 怎麼寫class麼，爲何會出現class這種東西?
46.常見兼容性問題
47.函數防抖節流的原理
48.原始類型有哪幾種？null是對象嗎？
49.爲何console.log(0.2+0.1==0.3) //false
50.說一下JS中類型轉換的規則？
51.深拷貝和淺拷貝的區別？如何實現
52.如何判斷this？箭頭函數的this是什麼
53.== 和 ===的區別
54.什麼是閉包
55.JavaScript原型，原型鏈 ? 有什麼特色？
56.typeof()和instanceof()的用法區別
57.什麼是變量提高
58.all、apply以及bind函數內部實現是怎麼樣的
59.爲何會出現setTimeout倒計時偏差？如何減小
60.談談你對JS執行上下文棧和做用域鏈的理解
61.new的原理是什麼？經過new的方式建立對象和經過字面量建立有什麼區別？
62.prototype 和 proto 區別是什麼？
63.使用ES5實現一個繼承？
64.取數組的最大值（ES五、ES6）
65.ES6新的特性有哪些？
66.promise 有幾種狀態, Promise 有什麼優缺點 ?
67.Promise構造函數是同步仍是異步執行，then呢 ?promise如何實現then處理 ?
68.Promise和setTimeout的區別 ?
69.如何實現 Promise.all ?
70.如何實現 Promise.finally ?
71.如何判斷img加載完成
72.如何阻止冒泡？
73.如何阻止默認事件？
74.ajax請求時，如何解釋json數據
75.json和jsonp的區別?
76.如何用原生js給一個按鈕綁定兩個onclick事件？
77.拖拽會用到哪些事件
78.document.write和innerHTML的區別
79.jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？
80.瀏覽器是如何渲染頁面的？
81.$(document).ready()方法和window.onload有什麼區別？
82. jquery中$.get()提交和$.post()提交有區別嗎？
83.對前端路由的理解？先後端路由的區別？
84.手寫一個類的繼承
85.XMLHttpRequest：XMLHttpRequest.readyState;狀態碼的意思
瀏覽器/html/css面試題
1.什麼是盒模型
2.行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？行內元素和塊級元素有什麼區別？
3.簡述src和href的區別
4.什麼是css Hack
5.什麼叫優雅降級和漸進加強
6.px和em的區別
7.HTML5 爲何只寫<!DOCTYPE HTML>
8.Http的狀態碼有哪些
9.一次完整的HTTP事務是怎麼一個過程
10.HTTPS是如何實現加密
11.瀏覽器是如何渲染頁面的
12.瀏覽器的內核有哪些？分別有什麼表明的瀏覽器
13.頁面導入時，使用link和@import有什麼區別
14.如何優化圖像，圖像格式的區別
15.列舉你瞭解Html5. Css3 新特性
16.能夠經過哪些方法優化css3 animation渲染
17.列舉幾個前端性能方面的優化
18.如何實現同一個瀏覽器多個標籤頁之間的通訊
19.瀏覽器的存儲技術有哪些
20.css定位方式
21.儘量多的寫出瀏覽器兼容性問題
22.垂直上下居中的方法
23.響應式佈局原理
25.清除浮動的方法
26.http協議和tcp協議
27.刷新頁面，js請求通常會有哪些地方有緩存處理
28.如何對網站的文件和資源進行優化
29.你對網頁標準和W3C重要性的理解
30.Http和https的區別
31.data-屬性的做用
32.如何讓Chrome瀏覽器顯示小於12px的文字
33.哪些操做會引發頁面迴流（Reflow）
34.CSS預處理器的比較less sass
35.如何實現頁面每次打開時清除本頁緩存
36.什麼是Virtual DOM,爲什麼要用Virtual DOM
37.僞元素和僞類的區別
38.http的幾種請求方法和區別
39.前端須要注意哪些SEO
40.<img>的title和alt有什麼區別
41.從瀏覽器地址欄輸入url到顯示頁面的步驟
42.如何進行網站性能優化
43.語義化的理解
44.HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？
45.瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢
46.iframe有那些缺點？
47.WEB標準以及W3C標準是什麼?
48.Doctype做用? 嚴格模式與混雜模式如何區分？它們有何意義?
49.HTML全局屬性(global attribute)有哪些
50.Canvas和SVG有什麼區別？
51.如何在頁面上實現一個圓形的可點擊區域？
52.網頁驗證碼是幹嗎的，是爲了解決什麼安全問題
53.請描述一下 cookies，sessionStorage 和 localStorage 的區別？
微信小程序開發
初識小程序
1.註冊小程序
2.微信開發者工具
3.小程序與普通網頁開發的區別
4.小程序尺寸單位rpx
5.樣式導入（WeUI for）
6.選擇器
7.小程序image高度自適應及裁剪問題
8.微信小程序長按識別二維碼
9.給頁面加背景色
10.微信小程序獲取用戶信息
11.代碼審覈和發佈
12.小程序微信認證
13.小程序申請微信支付
14.小程序的目錄解構及四種文件類型
15.小程序文件的做用域
16.小程序經常使用組件
1.view
2.scroll-view
3.swiper組件
4.movable-view
5.cover-view
6.cover-image
小程序基礎
17.受權獲得用戶信息
18.數據綁定
19.列表渲染
20.條件渲染
21.公共模板創建
22.事件及事件綁定
23.引用
24.頁面跳轉
1.wx.switchTab
2.wx.reLaunch
3.wx.redirectTo
4.wx.navigateTo
5.wx.navigateBack
25.設置tabBar
26.頁面生命週期
27.轉發分享
小程序高級
28.request請求後臺接口
29.http-promise 封裝
30.webview
31.獲取用戶收貨地址
32.獲取地裏位置
33.自定義組件
34.微信小程序支付問題
小程序項目實戰
35.微信小程序本地數據緩存
36.下拉刷新和下拉加載
37.列表頁向詳情頁跳轉（動態修改title）
38.客服電話
39.星級評分組件
40.小程序插槽的使用slot
41.模糊查詢
42.wxs過濾
43.小程序動畫
44.列表根據索引值渲染
45.小程序動態修改class
46.小程序經常使用框架
47.參數傳值的方法
48.提升小程序的應用速度
49.微信小程序的優劣勢
50.小程序的雙向綁定和vue的區別
51.微信小程序給按鈕添加動畫
52.微信小程序的tab按鈕的轉換
53.微信小程序引進echarts
54.APP打開小程序流程
55.小程序解析富文本編輯器
一些html5和css3的一些常見面試題
最近總結了一些有關於html5和css3的一些常見面試題，但願對正在找工做的你有所幫助。
還有歡迎你們補充~~~
1、HTML5 CSS3
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
html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 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]-->
如何區分：
DOCTYPE聲明新增的結構元素、功能元素
本地存儲（Local Storage ）和cookies（儲存在用戶本地終端上的數據）之間的區別是什麼？
Cookies:服務器和客戶端均可以訪問；大小隻有4KB左右；有有效期，過時後將會刪除；
本地存儲：只有本地瀏覽器端可訪問數據，服務器不能訪問本地存儲直到故意經過POST或者GET的通道發送到服務器；每一個域5MB；沒有過時數據，它將保留知道用戶從瀏覽器清除或者使用Javascript代碼移除
如何實現瀏覽器內多個標籤頁之間的通訊?
調用 localstorge、cookies 等本地存儲方式
你如何對網站的文件和資源進行優化？
文件合併
文件最小化/文件壓縮
使用CDN託管
緩存的使用
什麼是響應式設計？
它是關於網頁製做的過程當中讓不一樣的設備有不一樣的尺寸和不一樣的功能。響應式設計是讓全部的人能在這些設備上讓網站運行正常
新的 HTML5 文檔類型和字符集是？
答：HTML5文檔類型：<!doctype html>
HTML5使用的編碼<meta charset=」UTF-8」>
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> 元素的每一個 <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，單選框或複選框被選中。
請用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框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
你怎麼來實現頁面設計圖，你認爲前端應該如何高質量完成工做? 一個滿屏 品 字佈局 如何設計?
* 首先劃分紅頭部、body、腳部；。。。。。
* 實現效果圖是最基本的工做，精確到2px；
與設計師，產品經理的溝通和項目的參與
作好的頁面結構，頁面重構和用戶體驗
處理hack，兼容、寫出優美的代碼格式
針對服務器的優化、擁抱 HTML5。
你能描述一下漸進加強和優雅降級之間的不一樣嗎?
漸進加強 progressive enhancement：針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給，而漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要。降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶。
「優雅降級」觀點
「優雅降級」觀點認爲應該針對那些最高級、最完善的瀏覽器來設計網站。而將那些被認爲「過期」或有功能缺失的瀏覽器下的測試工做安排在開發週期的最後階段，並把測試對象限定爲主流瀏覽器（如 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 包含嵌入音頻文件的標準方式，支持的格式包括 MP三、Wav 和 Ogg：
<audio controls>
<source src="jamshed.mp3" type="audio/mpeg">
Your browser does'nt support audio embedding feature.
</audio>
如何在 HTML5 頁面中嵌入視頻？
和音頻同樣，HTML5 定義了嵌入視頻的標準方法，支持的格式包括：MP四、WebM 和 Ogg：
<video width="450" height="340" controls>
<source src="jamshed.mp4" type="video/mp4">
Your browser does'nt support video embedding feature.
</video>
HTML5 引入什麼新的表單屬性？
Datalist datetime output keygen date month week time number range emailurl
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，單選框或複選框被選中。
(寫)描述一段語義的html代碼吧。
（HTML5中新增長的不少標籤（如：<article>、<nav>、<header>和<footer>等）
就是基於語義化設計原則）
< div id="header">
< h1>標題< /h1>
< h2>專一Web前端技術< /h2>
< /div>
語義 HTML 具備如下特性：
文字包裹在元素中，用以反映內容。例如：
段落包含在 <p> 元素中。
順序表包含在<ol>元素中。
從其餘來源引用的大型文字塊包含在<blockquote>元素中。
HTML 元素不能用做語義用途之外的其餘目的。例如：
<h1>包含標題，但並不是用於放大文本。
<blockquote>包含大段引述，但並不是用於文本縮進。
空白段落元素 ( <p></p> ) 並不是用於跳行。
文本並不直接包含任何樣式信息。例如：
不使用 <font> 或 <center> 等格式標記。
類或 ID 中不引用顏色或位置。
cookie在瀏覽器和服務器間來回傳遞。 sessionStorage和localStorage區別
sessionStorage和localStorage的存儲空間更大；
sessionStorage和localStorage有更多豐富易用的接口；
sessionStorage和localStorage各自獨立的存儲空間；
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框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
如何區分： DOCTYPE聲明\新增的結構元素\功能元素
語義化的理解？
用正確的標籤作正確的事情！
html語義化就是讓頁面的內容結構化，便於對瀏覽器、搜索引擎解析；
在沒有樣式CCS狀況下也以一種文檔格式顯示，而且是容易閱讀的。
搜索引擎的爬蟲依賴於標記來肯定上下文和各個關鍵字的權重，利於 SEO。
使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。
HTML5的離線儲存？
localStorage 長期存儲數據，瀏覽器關閉後數據不丟失；
sessionStorage 數據在瀏覽器關閉後自動刪除。
寫出HTML5的文檔聲明方式
<DOCYPE html>
HTML5和CSS3的新標籤
HTML5： nav, footer, header, section, hgroup, video, time, canvas, audio...
CSS3: RGBA, opacity, text-shadow, box-shadow, border-radius, border-image,
border-color, transform...;
本身對標籤語義化的理解
在我看來，語義化就是好比說一個段落， 那麼咱們就應該用 <p>標籤來修飾，標題就應該用 <h?>標籤等。符合文檔語義的標籤。
第一階段 HTML、CSS、HTML五、CSS3
一、XHTML與HTML的有何異同？
HTML是一種基於WEB的網絡設計語言，XHTML是基於XML的置標語言，XHTML能夠認爲是XML版的HTML，因此它的語法比較嚴謹：元素必須關閉，嵌套必須正確，大小寫區分，屬性值必須用雙引號，id屬性代替name屬性
二、介紹一下CSS的盒子模型？彈性盒子模型是什麼？
盒子模型由content+padding+border+margin組成，分爲標準盒子和IE盒子，標準盒子的width指content，IE盒子的width包括content，padding，border
三、Doctype的做用？標準模式與兼容模式各有什麼區別?
聲明在文檔的第一行，位於html的前面，用於告知瀏覽器的解析器以什麼樣的文檔標準來解析這個文檔，若是沒有聲明文檔就會以兼容模式呈現
標準模式的排版和JS都是以瀏覽器支持的最高的標準運行
兼容模式頁面以寬鬆向後兼容的方式顯示，模仿老式瀏覽器，防止站點沒法工做
四、HTML5 爲何只須要寫 ？
HTML不急於SGML，不用引用DTD
五、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
常見的空元素：br hr img input link meta
六、頁面導入樣式時，使用link和@import有什麼區別？
link是XHTML的標籤，不但能夠引入CSS還能夠引入RSS，定義REL屬性等
@import是CSS2.1提出的，只能引入CSS
link在頁面加載時同時加載，@import要等頁面加載完才加載
七、介紹一下你對瀏覽器內核的理解？
瀏覽器內核分爲渲染引擎和JS引擎
八、常見的瀏覽器內核有哪些？
Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
九、HTML5有哪些新特性、移除了那些元素？
新特性：
畫布canvas
用於媒介播放的video和audio
新的語義化標籤：article，header，nav，section，footer
新的本地存儲：localstorage，sessionstorage
新的表單控件：date，time，calendar，url
新的技術：websocket，web worker，geoloacation
移除得元素：
能夠用css代替的元素，font，fontbase，center，s，tt，u
十、簡述一下你對HTML語義化的理解？
能夠清晰的向瀏覽器和開發者描述其意義，爲了在丟失css的狀況下也能很好的顯示頁面的結構，利於seo，seo能夠根據標籤和上下文己算權重，方便其餘設備解析，方便開發和維護，可讀性高
十一、iframe有那些缺點？
會有過多的http請求，影響性能，會阻塞主頁面的onload事件，不利於seo，頁面調試樣式很麻煩，會出現不少滾動條，瀏覽器後退按鈕會沒有效果，小型移動設備兼容性很差，會顯示不全
十二、列出display的值，說明他們的做用？position的值， relative和absolute定位原點是？
display：none，block，inline，inline-block，flex，grid，table，table-cell
position：static，relatice，absolute，fixed，sticky
relative定位原點是本身，absolute定位原點是離本身最近的父元素
1三、一個滿屏 品 字佈局 如何設計?
1四、常見兼容性問題？
https://blog.csdn.net/xustart7720/article/details/73604651?utm_source=blogxgwz0
1五、若是須要手動寫動畫，你認爲最小時間間隔是多久，爲何？（阿里面試題）
除了電競顯示器，通常顯示器是60hz，因此最小間隔爲1000/60 = 16.7ms
1六、列舉IE 與其餘瀏覽器不同的特性？
IE支持currentStyle，FIrefox使用getComputStyle
IE 使用innerText，Firefox使用textContent
濾鏡方面：IE:filter:alpha(opacity= num)；Firefox：-moz-opacity:num
事件方面：IE：attachEvent：火狐是addEventListener
鼠標位置：IE是event.clientX；火狐是event.pageX
IE使用event.srcElement；Firefox使用event.target
IE中消除list的原點僅需margin:0便可達到最終效果；FIrefox須要設置margin:0;padding:0以及list-style:none
CSS圓角：ie7如下不支持圓角
2五、cssSprite是什麼 ？有什麼優缺點？
精靈圖是一種網頁圖片的應用技術，它把背景圖片都整合到一張圖片上，再利用background-position進行圖片定位，優勢是有效的減小了http請求，減小了圖片的字節，缺點是合成比較麻煩，須要精準定位
2七、前端頁面有哪三層構成？ 分別是什麼？ 做用是什麼？
結構層由HTML負責，負責搭建頁面的結構
表示層由CSS負責，負責頁面的樣式
行爲層由JavaScript負責，負責頁面的交互
2九、如何用CSS分別單獨定義ie6 IE7 IE8 IE9 IE10的width屬性
用hack選擇器，根據不一樣的瀏覽器識別不一樣的hack選擇器的原理，給每一種瀏覽器都單獨設定width屬性
30、在CSS中哪些屬性能夠同父元素繼承。
visibility，cursor，font-size，color…
3一、談談之前端的角度出發作好seo須要作什麼
一、提升頁面加載速度。 能用css解決的不用背景圖片，背景圖片也儘可能壓縮大小，能夠幾個icons放在一個圖片上，使用background-position找到須要的圖片位置。能夠減小HTTP請求數，提升網頁加載速度。
二、 結構、表現和行爲的分離。另一個重要的拖慢網頁加載速度的緣由就是將css和JS都堆積在HTML頁面上，每次看到有人直接在頁面上編寫CSS和JS我都很痛心疾首。經過外鏈的方式能大大加快網頁加載速度的，css文件能夠放在head裏，JS文件能夠放置在body的最下方，在不影響閱讀的狀況下再去加載JS文件。
三、 優化網站分級結構。在每一個內頁加麪包屑導航是頗有必要的，可讓蜘蛛進入頁面以後不至於迷路，有條件的話，最好能單獨加個Sitemap頁面，將網站結構一目瞭然地展現在蜘蛛面前，更有利於蜘蛛抓取信息。
四、 集中網站權重。因爲蜘蛛分配到每一個頁面的權重是必定的，這些權重也將平均分配到每一個a連接上，那麼爲了集中網站權重，能夠使用」rel=nofollow」屬性，它告訴蜘蛛無需抓取目標頁,能夠將權重分給其餘的連接。
五、 文本強調標籤的使用。當着重強調某個關鍵詞須要加粗表示，選用strong標籤比使用b標籤要更有強調做用。
六、 a標籤的title屬性的使用。在不影響頁面功能的狀況下，能夠儘可能給a標籤加上title屬性，能夠更有利於蜘蛛抓取信息。
七、 圖片alt屬性的使用。這個屬性能夠在圖片加載不出來的時候顯示在頁面上相關的文字信息，做用同上。
八、 H標籤的使用。主要是H1標籤的使用須要特別注意，由於它自帶權重，一個頁面有且最多隻能有一個H1標籤，放在該頁面最重要的標題上面，如首頁的logo上能夠加H1標籤。
3二、css選擇符有哪些？優先級算法如何計算？
標籤選擇符，類選擇符，ID選擇符，僞類選擇符，相鄰選擇符，子代選擇符，後代選擇符，通配符選擇符，屬性選擇符
優先級：
就近原則，下面覆蓋上面
!important＞內聯＞ID＞類＞標籤
3七、document load 和document ready 的區別
1.load是當頁面全部資源所有加載完成後（包括DOM文檔樹，css文件，js文件，圖片資源等），執行一個函數
問題：若是圖片資源較多，加載時間較長，onload後等待執行的函數須要等待較長時間，因此一些效果可能受到影響
2.$(document).ready()是當DOM文檔樹加載完成後執行一個函數 （不包含圖片，css等）因此會比load較快執行
在原生的jS中不包括ready()這個方法，只有load方法就是onload事件
3九、哪些瀏覽器支持html5？
現代的瀏覽器都支持，早期不支持的瀏覽器也可讓他支持
40、css 中的使用列布局是什麼？ 爲了實現列布局咱們須要指定哪些內容？
能夠幫助你分配文字爲一個個列，須要指定列數和列之間的間隔
4一、描述css reset的做用和用途？
每一個瀏覽器都有一些自帶的或者共有的默認樣式，會形成一些佈局上的困擾，css reset的做用就是重置這些默認樣式，使樣式表現一致，好比 *{margin:0;padding:0}就是一個最簡單的css reset
4二、寫出5 種以上ie6 bug 的解決方法，哪些你認爲是解決起來最麻煩的？
float狀況下有雙邊距的bug，使用display: inline解決
寬高爲奇數時有bug，使用偶數
min-height設置不了，加!important
z-index問題，給父親設置position：relative
設置高度小與10px左右的時候，實際高度高於設置高度，由於有默認行高，把行高也設置
4四、什麼是Web workers？爲何咱們須要他？
一個運行在後臺的JavaScript，有助於異步執行JavaScript，提升頁面性能
4六、寫出至少三個CSS3中新添加的樣式屬性的名字及參數。
陰影，rgba，圓角
4七、給一個元素添加CSS樣式有哪幾種方法說說他們的優先級。
引用css，內聯樣式，head裏style標籤內樣式
4八、多人項目中，你如何規劃css文件樣式命名。
寫在一個文檔裏，你們按照文檔命名
4九、爲了讓網頁更快的加載，你會如何處理你的css文件和js文件，以及圖片文件，頁面性能優化你還知道哪些方法。
5一、HTML中div與span區別；
div是塊級元素，獨自佔一行，寬度默認是佔滿父級的寬度，能夠設置寬高
span是行內元素，排列在一行裏，寬度是內容的寬度，不能設置寬高
5二、HTML5 存儲類型有哪些，以及與他們的區別；
cookies，localstorage，sessionstorage
cookies的存儲容量比較小並且數量有限制，通常爲4K左右，localstorage的能夠高達5M以上
cookies在設置的時間以前有效，localstorage本地永久存儲，sessionstorage在當前窗口有效
cookies每次http請求都會被攜帶，會形成帶寬浪費，localstorage和sessionstorage是保存在本地
5三、css實現垂直水平居中（口語描述）。
定位，top和left設置50%，再經過transform的translate(-50%, -50%)設置實現垂直水平居中
定位，top和left設置50%，再經過margin-top和margin-left本身寬高的一半設置實現垂直水平居中
定位，top，bottom，left，right都設置爲0，再經過margin設置爲auto實現垂直水平居中
flex佈局，先設置justify-content爲center實現水平居中，再設置align-items爲center實現垂直居中
table佈局，設置父元素display爲table-cell，再設置vertical-align爲middle實現垂直居中，把本身display設置爲inline-block，父級設置text-align爲center實現水平居中
5五、列舉5種以上表單元素中input的type類型；
text，password，submit，button，checkbox，reset，radio，date，time，url，email
5六、alt和title分別表示什麼含義以及具體應用體現；
alt是代替圖片的文字，圖片不能顯示時會顯示alt，title是鼠標指上去時的解釋文字
6七、什麼事css預處理器；
less和sass等等，能夠提供 CSS 缺失的樣式層複用機制、減小冗餘代碼，提升樣式代碼的可維護性。
6八、css3中你最經常使用的有哪些？說明用法。
選擇器：nth-child，first-child，last-child
自定義字體@font-face
rgba，陰影，圓角之類的
transition，transform
animation 先綁定後使用
6九、document.write、innerHTML和innerText 的區別？
document.write會重寫頁面，以前的html會被覆蓋，innerHTML包括標籤以及標籤裏面的內容，innerText不包括標籤，只指裏面的文本
7二、實現 class爲test的div 在屏幕寬爲400一下的寬度爲200，屏幕寬爲400~800的狀況下寬 度爲350；
@media screen and (max-width: 400) {
.test {
width: 200px;
}
}
@media (min-width:400px) and (max-width:800px) {
.test {
width: 350px;
}
}
1
2
3
4
5
6
7
8
9
10
7三、實現當屏幕寬度大雨700,小於800是時引用外部樣式style-7-9.css
7四、HTML中input的6個新屬性
time，date，url，email，search，calendar，number
7六、對WEB標準以及W3C的理解與認識
WEB標準分爲結構，表現和行爲
web標準通常是將該三部分獨立分開，使其更具備模塊化。但通常產生行爲時，就會有結構或者表現的變化，也使這三者的界限並不那麼清晰。
W3C對web標準提出了規範化的要求，也就是在實際編程中的一些代碼規範：包含以下幾點
1.對於結構要求：（標籤規範能夠提升搜索引擎對頁面的抓取效率，對SEO頗有幫助）
1）。標籤字母要小寫
2）。標籤要閉合
3）。標籤不容許隨意嵌套
2.對於css和js來講
1）。儘可能使用外鏈css樣式表和js腳本。是結構、表現和行爲分爲三塊，符合規範。同時提升頁面渲染速度，提升用戶的體驗。
2）。樣式儘可能少用行間樣式表，使結構與表現分離，標籤的id和class等屬性命名要作到見文知義，標籤越少，加載越快，用戶體驗提升，代碼維護簡單，便於改版
3）。不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性。
7八、Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
7九、行內元素有哪些?塊級元素有哪些?CSS的盒模型?
80、CSS引入的方式有哪些? link和@import的區別是?
8一、CSS選擇符有哪些?哪些屬性能夠繼承?優先級算法如何計算?內聯和important哪一個優先 級高?
8二、標籤選擇符 類選擇符 id選擇符
8三、標籤上title與alt屬性的區別是什麼?
8四、描述css reset的做用和用途
8五、解釋css sprites，如何使用。
8六、瀏覽器標準模式和怪異模式之間的區別是什麼?
8七、你如何對網站的文件和資源進行優化?期待的解決方案包括：
8八、清除浮動的幾種方式，各自的優缺點
8九、CSS3有哪些新特性？
90、CSS中的class和id有什麼區別。
9一、請說一下移動端常見的適配不一樣屏幕大小的方法。
9二、一個高寬未知的圖片如何在一個比他大的容器內水平居中。
9三、Table標籤的做用是什麼。
9四、定義連接四種狀態的僞類的正確書寫順序是？
9五、你知道的css選擇器有哪些。
9六、遇到疑難問題時，你一般時如何解決的？
9七、Inline，inline-block和block的區別是。
9八、頁面導入樣式時，使用link和@import有什麼區別。
9九、CSS超過寬度的文字顯示點點，必需要設置的屬性。
100、設置文字陰影屬性。設置表格邊框合併屬性。
10一、文本強制換行。
10二、display：none與visibility:hidden的區別是什麼？
10三、超連接訪問事後hover樣式後會出現什麼問題？如何解決。
10四、前端頁面有那三部分構成，其做用是什麼。
10五、寫出至少三個css3中新添加的樣式屬性的名字及參數。
10六、給一個元素添加css樣式有哪幾種方法說說他們的優先級。
10七、多人項目中，你如何規劃css文件樣式命名。
10八、爲了讓網頁更快的加載，你會如何處理你的css文件和js文件，以及圖片文件，頁面性 能優化你還知道哪些方法。
10九、你常常遇到的瀏覽器兼容性有哪些？一般是怎麼處理的。
1十、HTML中div與span區別；
1十一、HTML5 存儲類型有哪些，以及與他們的區別；
1十二、css實現垂直水平居中。
11三、瀏覽器內核分別是什麼；
11四、列舉5種以上表單元素中input的type類型；
11五、alt和title分別表示什麼含義以及具體應用體現；
11六、css中position的屬性值都有哪些？並描述其含義及具體解釋；
11七、對html語義化理解，以及語義化有哪些優勢。
11八、常用的頁面開發工具級測試工具。
11九、常用什麼腳本庫，開發或使用什麼應用或組件；
120、使用css如何讓一個寬度爲200px的div水平居中，（要求兼容ie，可提供多種方法）；
12一、簡要畫出盒模型，並描述關鍵要素的含義；
12二、頁面構造中你遇到過什麼樣的兼容問題，如何解決
12三、Doctype做用？標準模式與兼容模式有什麼區別；
12四、html5有哪些新特性，移除了哪些元素；
12五、介紹一下標準css盒子模型；
12六、什麼事css預處理器；
12七、css3有哪些新特性；
12八、html5 中的應用緩存是什麼？
12九、本地存儲和cookies’之間的區別是什麼
130、簡單介紹boostrap柵格系統
13一、你如何對網站的文件和資源進行優化？
13二、ie 和標準下有哪些兼容性的寫法
13三、get和post區別？
13四、Doctype的做用是什麼？
13五、瀏覽器標準模式和怪異模式的區別是什麼。
13六、解釋一下浮動和它的工做原理。
13七、列舉不一樣的清除浮動的方法，並指出他們各自適用的場景。
HTML XHML HTML5的關係
HTML屬於SGML
XHML屬於XML,是Html進行XML嚴格化的結果
HTML5簡單點理解成：h5≈ html+CSS 3+js+API，減小對外部插件的需求（好比 Flash），更優秀的錯誤處理，更多取代腳本的標記
HTML5新特性
新的語義化元素：article 、footer 、header 、nav 、section
表單加強，新的表單控件：calendar 、date 、time 、email 、url 、search
新的API：音頻(用於媒介回放的video和audio元素)、圖形（繪圖canvas元素）
新的API：離線，經過建立 cache manifest 文件，建立應用程序緩存
新的API：本地存儲，localStorage-沒有時間限制的數據存儲，sessionStorage-session數據存儲（關閉瀏覽器窗口數據刪除）
新的API：實時通信，設備能力
JS獲取寬高如何獲取盒模型對應的寬高
一、dom.style.width/height
這種方式只能取到dom元素內聯樣式所設置的寬高，也就是說若是該節點的樣式是在style標籤中或外聯的CSS文件中 設置的話，經過這種方法是獲取不到dom的寬高的
二、dom.currentStyle.width/height
這種方式獲取的是在頁面渲染完成後的結果，就是說無論是哪一種方式設置的樣式，都能獲取到，只有IE瀏覽器支持該方式
三、window.getComputedStyle(dom).width/height
這種方式的原理和2是同樣的，這個能夠兼容更多的瀏覽器，通用性好一些
四、 dom.getBoundingClientRect().width/height
這種方式是根據元素在視窗中的絕對位置來獲取寬高的
五、 dom.offsetWidth/offsetHeight
邊距重疊
邊距重疊是指兩個或多個盒子(可能相鄰也可能嵌套)的相鄰邊界(其間沒有任何非空內容、補白、邊框)重合在一塊兒而造成一個單一邊界
BFC
塊級格式化上下文 (Block Fromatting Context)是按照塊級盒子佈局
BFC的原理
一、內部的box會在垂直方向，一個接一個的放置
二、每一個元素的margin box的左邊，與包含塊border box的左邊相接觸（對於從作往右的格式化，不然相反）
三、box垂直方向的距離由margin決定，屬於同一個bfc的兩個相鄰box的margin會發生重疊
四、bfc的區域不會與浮動區域的box重疊
五、bfc是一個頁面上的獨立的容器，外面的元素不會影響bfc裏的元素，反過來，裏面的也不會影響外面的
六、計算bfc高度的時候，浮動元素也會參與計算
怎麼建立bfc（邊距重疊產生緣由）
一、float屬性不爲none（脫離文檔流）
二、position爲absolute或fixed
三、display爲inline-block,table-cell,table-caption,flex,inine-flex
四、overflow不爲visible
五、根元素的垂直margin不會被重疊
防止外邊距重疊解決方案
一、外層元素padding代替
二、內層元素透明邊框 border:1px solid transparent;
三、內層元素絕對定位 postion:absolute
四、外層元素 overflow:hidden;
五、內層元素 加float:left;或display:inline-block;
六、內層元素padding:1px;
BFC應用場景
一、自適應兩欄佈局 二、清除內部浮動
浮動float誤解和誤用
float 被設計出來的初衷是用於文字環繞效果，即一個圖片一段文字，圖片float:left以後，文字會環繞圖片
可是，後來你們發現結合float + div能夠實現以前經過table實現的網頁佈局，所以就被「誤用」於網頁佈局了
爲什麼 float 會致使父元素塌陷？
一、float 的破壞性 —— float 破壞了父標籤的本來結構，使得父標籤出現了坍塌現象。
二、致使這一現象的最根本緣由在於：被設置了 float 的元素會脫離文檔流，咱們的浮動是左右浮動，因此咱們的塊級元素都是左右排列。其根本緣由在於 float 的設計初衷是解決文字環繞圖片的問題
三、包裹性也是 float 的一個很是重要的特性，普通的 div 若是沒有設置寬度，它會撐滿整個屏幕，在以前的盒子模型那一節也講到過。而若是給 div 增長float:left以後，它忽然變得緊湊了，寬度發生了變化，把內容中的三個字包裹了——這就是包裹性。爲 div 設置了 float 以後，其寬度會自動調整爲包裹住內容寬度，而不是撐滿整個父容器 清空格，對於高度不一樣的容器，float 排版出來的網頁嚴絲合縫，
px
PX實際上就是像素，用PX設置字體大小時，比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，若是改變了瀏覽器的縮放，這時會使用咱們的Web頁面佈局被打破。這樣對於那些關心本身網站可用性的用戶來講，就是一個大問題了。所以，這時就提出了使用「em」來定義Web頁面的字體。
em
EM就是根據基準來縮放字體的大小。EM實質是一個相對值，而非具體的數值。這種技術須要一個參考點，通常都是以的「font-size」爲基準。如WordPress官方主題Twenntytwelve的基準就是14px=1em
rem
REM是相對於其父元素來設置字體大小的，這樣就會存在一個問題，進行任何元素設置，都有可能須要知道他父元素的大小。而Rem是相對於根元素，這樣就意味着，咱們只須要在根元素肯定一個參考值
px em rem瀏覽器的兼容性
除了IE6-IE8r，其它的瀏覽器都支持em和rem屬性，px是全部瀏覽器都支持。 所以爲了瀏覽器的兼容性，可「px」和「rem」一塊兒使用，用"px"來實現IE6-8下的效果，而後使用「Rem」來實現代瀏覽器的效果
HTML渲染過程
構建DOM樹(DOM tree)：從上到下解析HTML文檔生成DOM節點樹（DOM tree）
構建CSSOM(CSS Object Model)樹：加載解析樣式生成CSSOM樹
執行Javaｓｃｒｉｐｔ：加載並執行Javaｓｃｒｉｐｔ代碼（包括內聯代碼或外聯Javaｓｃｒｉｐｔ文件）
構建渲染樹(render tree)：根據DOM樹和CSSOM樹,生成渲染樹(render tree)；渲染樹：按順序展現在屏幕上的一系列矩形，這些矩形帶有字體，顏色和尺寸等視覺屬性
佈局（layout）：根據渲染樹將節點樹的每個節點佈局在屏幕上的正確位置
繪製（painting）：遍歷渲染樹繪製全部節點，爲每個節點適用對應的樣式，這一過程是經過UI後端模塊完成
重排或者叫回流（reflow，relayout）
這個過程就是經過渲染樹中渲染對象的信息，計算出每個渲染對象的位置和尺寸
將其安置在瀏覽器窗口的正確位置
觸發：增長、刪除、修改、移動、修改css樣式
重繪(redraw)
瀏覽器會根據元素的新屬性從新繪製，使元素呈現新的外觀
重繪不會帶來從新佈局，並不必定伴隨重排
觸發：dom改變，css移動，改變visibility、outline、背景色等屬性
、
微信小程序面試資料
一：面試題
一、簡單描述下微信小程序的相關文件類型？
答：微信小程序項目結構主要有四個文件類型,以下
.json 後綴的 JSON 配置文件
.wxml 後綴的 WXML 模板文件
.wxss 後綴的 WXSS 樣式文件
.js 後綴的 JS 腳本邏輯文件
1、WXML （WeiXin Markup Language）
是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。內部主要是微信本身定義的一套組件。
2、WXSS (WeiXin Style Sheets)
是一套樣式語言，用於描述 WXML 的組件樣式，
2、js
邏輯處理，網絡請求
3、json
小程序設置，如頁面註冊，頁面標題及tabBar。
4、app.json
必需要有這個文件，若是沒有這個文件，項目沒法運行，由於微信框架把這個做爲配置文件入口，整個小程序的全局配置。包括頁面註冊，網絡設置，以及小程序的window背景色，配置導航條樣式，配置默認標題。
app.json 是對當前小程序的全局配置，包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。
咱們簡單說一下這個配置各個項的含義:
pages字段 —— 用於描述當前小程序全部頁面路徑，這是爲了讓微信客戶端知道當前你的小程序頁面定義在哪一個目錄。
window字段 —— 小程序全部頁面的頂部背景顏色，文字顏色定義在這裏的。
這裏的 page.json 其實用來表示 pages/logs 目錄下的 logs.json 這類和小程序頁面相關的配置。
若是你整個小程序的風格是藍色調，那麼你能夠在 app.json 裏邊聲明頂部顏色是藍色便可。實際狀況可能不是這樣，可能你小程序裏邊的每一個頁面都有不同的色調來區分不一樣功能模塊，所以咱們提供了 page.json，讓開發者能夠獨立定義每一個頁面的一些屬性，例如剛剛說的頂部顏色、是否容許下拉刷新等等。
5、app.js
必需要有這個文件，沒有也是會報錯！可是這個文件建立一下就行 什麼都不須要寫之後咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。
6、app.wxss
全局配置的樣式文件，項目非必須。
二、你是怎麼封裝微信小程序的數據請求的？
答：1、將全部的接口放在統一的js文件中並導出；
2、在app.js中建立封裝請求數據的方法；
3、在子頁面中調用封裝的方法請求數據。
三、有哪些參數傳值的方法？
答：1、給HTML元素添加data-*屬性來傳遞咱們須要的值，而後經過e.currentTarget.dataset或onload的param參數獲取。但data-名稱不能有大寫字母和不能夠存放對象；
2、設置id 的方法標識來傳值經過e.currentTarget.id獲取設置的id的值,而後經過設置全局對象的方式來傳遞數值；
3、在navigator中添加參數傳值。
四、你使用過哪些方法，來提升微信小程序的應用速度？
答：1、提升頁面加載速度；
2、用戶行爲預測；
3、減小默認data的大小；
4、組件化方案。
五、小程序與原生App哪一個好？
答： 小程序除了擁有公衆號的低開發成本、低獲客成本低以及無需下載等優點，在服務請求延時與用戶使用體驗是都獲得了較大幅度 的提高，使得其可以承載跟複雜的服務功能以及使用戶得到更好的用戶體驗。
六、簡述微信小程序原理？
答：微信小程序採用JavaScript、WXML、WXSS三種技術進行開發，從技術講和現有的前端開發差很少，但深刻挖掘的話卻又有所不一樣。
JavaScript：首先JavaScript的代碼是運行在微信App中的，並非運行在瀏覽器中，所以一些H5技術的應用，須要微信App提供對應的API支持，而這限制住了H5技術的應用，且其不能稱爲嚴格的H5，能夠稱其爲僞H5，同理，微信提供的獨有的某些API，H5也不支持或支持的不是特別好。
WXML：WXML微信本身基於XML語法開發的，所以開發時，只能使用微信提供的現有標籤，HTML的標籤是沒法使用的。
WXSS：WXSS具備CSS的大部分特性，但並非全部的都支持，並且支持哪些，不支持哪些並無詳細的文檔。
微信的架構，是數據驅動的架構模式，它的UI和數據是分離的，全部的頁面更新，都須要經過對數據的更改來實現。
小程序分爲兩個部分webview和appService。其中webview主要用來展示UI，appService有來處理業務邏輯、數據及接口調用。它們在兩個進程中運行，經過系統層JSBridge實現通訊，實現UI的渲染、事件的處理。
七、分析下微信小程序的優劣勢？
答：優點：一、無需下載，經過搜索和掃一掃就能夠打開。
二、良好的用戶體驗：打開速度快。
三、開發成本要比App要低。
四、安卓上能夠添加到桌面，與原生App差很少。
五、爲用戶提供良好的安全保障。小程序的發佈，微信擁有一套嚴格的審查流程，不能經過審查的小程序是沒法發佈到線上的。
劣勢：一、限制較多。頁面大小不能超過1M。不能打開超過5個層級的頁面。
二、樣式單一。小程序的部分組件已是成型的了，樣式不能夠修改。例如：幻燈片、導航。
三、推廣面窄，不能分享朋友圈，只能經過分享給朋友，附近小程序推廣。其中附近小程序也受到微信的限制。
四、依託於微信，沒法開發後臺管理功能。
八、微信小程序與H5的區別？
答：第一條是運行環境的不一樣:
傳統的HTML5的運行環境是瀏覽器，包括webview，而微信小程序的運行環境並不是完整的瀏覽器，是微信開發團隊基於瀏覽器內核徹底重構的一個內置解析器，針對小程序專門作了優化，配合本身定義的開發語言標準，提高了小程序的性能。
第二條是開發成本的不一樣:
只在微信中運行，因此不用再去顧慮瀏覽器兼容性，不用擔憂生產環境中出現不可預料的奇妙BUG
第三條是獲取系統級權限的不一樣:
系統級權限均可以和微信小程序無縫銜接
第四條即是應用在生產環境的運行流暢度:
長久以來，當HTML5應用面對複雜的業務邏輯或者豐富的頁面交互時，它的體驗老是不盡人意，須要不斷的對項目優化來提高用戶體驗。可是因爲微信小程序運行環境獨立.
九、怎麼解決小程序的異步請求問題？
答：在回調函數中調用下一個組件的函數：
app.js
success: function (info) {
that.apirtnCallback(info)
}
index.js
onLoad: function () {
app.apirtnCallback = res => {
console.log(res)
}
｝
十、小程序的wxss和css有哪些不同的地方？
答：1、wxss的圖片引入需使用外鏈地址；
2、沒有Body；樣式可直接使用import導入.
十一、webview中的頁面怎麼跳回小程序中？
答：首先要引入最新版的jweixin-1.3.2.js，而後
wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})
十二、小程序關聯微信公衆號如何肯定用戶的惟一性？
答：使用wx.getUserInfo方法withCredentials爲 true 時 可獲取encryptedData，裏面有 union_id。後端須要進行對稱解密。
1三、如何實現下拉刷新？
答：用view代替scroll-view,,設置onPullDownRefresh函數實現
1四、使用webview直接加載要注意哪些事項？
答: 1、必需要在小程序後臺使用管理員添加業務域名；
2、h5頁面跳轉至小程序的腳本必須是1.3.1以上；
3、微信分享只能夠都是小程序的主名稱了，若是要自定義分享的內容，需小程序版本在1.7.1以上；
4、h5的支付不能夠是微信公衆號的appid，必須是小程序的appid，並且用戶的openid也必須是用戶和小程序的。
1五、小程序調用後臺接口遇到哪些問題？
答：1.數據的大小有限制，超過範圍會直接致使整個小程序崩潰，除非重啓小程序；
2.小程序不能夠直接渲染文章內容頁這類型的html文本內容，若需顯示要借住插件，但插件渲染會致使頁面加載變慢，因此最好在後臺對文章內容的html進行過濾，後臺直接處理批量替換p標籤div標籤爲view標籤，而後其它的標籤讓插件來作，減輕前端的時間。
1六、webview的頁面怎麼跳轉到小程序導航的頁面？
答：小程序導航的頁面能夠經過switchTab，但默認狀況是不會從新加載數據的。若需加載新數據，則在success屬性中加入如下代碼便可：
success: function (e) {
var page = getCurrentPages().pop();
if (page == undefined || page == null) return;
page.onLoad();
}
webview的頁面，則經過
wx.miniProgram.switchTab({
url: '/pages/index/index'
})
1七、小程序和Vue寫法的區別？
答：1、循環遍歷的時候：小程序是wx:for="list"，而Vue是v-for="infoin list"
2、調用data模型的時候：小程序是this.data.uinfo，而Vue是this.uinfo；給模型賦值也不同，小程序是this.setData({uinfo:1})，而Vue是直接this.uinfo=1
1八、小程序的雙向綁定和vue哪裏不同？
答：小程序直接this.data的屬性是不能夠同步到視圖的，必須調用：
this.setData({
noBind:true
})
二：常見問題
1.rpx（responsivepixel）
微信小程序新定義了一個尺寸單位，能夠適配不一樣分辨率的屏幕，它規定屏幕寬爲750rpx，如在 iPhone6 上，屏幕寬度爲375px，共有750個物理像素，則750rpx = 375px =750物理像素，1rpx = 0.5px = 1物理像素。
2.40013錯誤
在微信小程序剛出來的時候若是沒輸入AppID，提示這個信息就表示沒有破解，可是如今官方軟件更新能夠選擇無AppID開發，咱們能夠經過選擇無AppID，便可解決此錯誤。建議安裝官方開發工具。
3.-4058錯誤
微信小程序建立項目時選擇無AppID，建立項目時會生成app.json，app.josn是程序啓動最重要的文件，程序的頁面註冊，窗口設置，tab設置及網絡請求時間設置都是在此文件下的。若是你建立的項目目錄下沒有app.json文件就會報下面的錯誤。
咱們看到上面的錯誤信息中有個數字-4058，這應該是初入微信小程序遇到最多的錯誤了，這種通常都是文件缺失，後面有個path，能夠對着該路徑看看是否存在這個文件。形成這種錯誤的緣由通常都是建立項目選擇的目錄不正確，或者在app.json註冊了一個不存在的頁面。
固然還有一種狀況就是在app.json文件的pages註冊的頁面是沒有建立的，或者你刪除了某個頁面，可是沒有取消註冊也會是-4058錯誤。
4.Page註冊錯誤
這個錯誤可能很容易理解，頁面註冊錯誤。頁面是經過Page對象來渲染的，每一個頁面對應的js文件必需要建立page，最簡單的方式就是在js文件下寫入Page({})，在page中有管理頁面渲染的生命週期，以及數據處理，事件都在這完成。這個錯誤引發的緣由通常都是剛建立頁面，js文件還有有處理或者忘了處理。因此要養成建立頁面的同時在js文件先建立Page的習慣.
5.Page route錯誤
字面意思就是頁面路由錯誤，在微信中有兩種路由方式一種是在wxml文件使用
以下代碼：
wxml文件：
<navigatorurl="search/search">
<viewclass="serach_view_show" bindtap="bindtap"> 搜索</view>
</navigator>
js文件事件處理函數：
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
若是你這樣寫的話，恭喜你，你就會看到上面提示的錯誤，這是由於重複調用路由引發的，處理方法就是刪除一個路由，刪除<navigator />組件或者刪除wx.navigateTo。除了上面說的可能致使路由錯誤外，還有一種狀況，相似於下面的代碼
<navigatorurl="search/search">
<navigatorurl="search/search">
<viewclass="serach_view_show" bindtap="bindtap"> 搜索</view>
</navigator>
</navigator>
這種也是不容許的，也就是說<navigator/>組件內部不能再嵌套<navigator/>組件。它只能是單層存在的。
6.Do not have * handler in currentpage.
大概意思就是當前頁面沒有此處理，讓肯定是否已經定義，還指出了錯誤出現的可能位置pages/message/message,其實這種問題出現通常就是咱們在wxml定義了一些處理事件，可是在js文件中沒有實現這個時事件的處理方法，就會出現這個錯誤。那麼咱們按提示在js文件加上事件處理，以下代碼，加上後就不會再有此錯誤提示。
bindtap:function(event){
wx.navigateTo({
url:"search/search"
})
},
7.tabBar設置不顯示
對於tabBar不顯示，緣由有不少，查找這個錯誤直接去app.json這個文件，最多見的也是剛學習微信小程序最容易犯的錯誤無外乎下面幾種
註冊頁面即將頁面寫到app.json的pages字段中，如
"pages":[
"pages/message/message",
"pages/contact/contact",
"pages/dynamic/dynamic",
"pages/dynamic/music/music",
"pages/index/index",
"pages/logs/logs"
]
· tabBar寫法錯誤致使的不顯示，將其中的大寫字母B寫成小寫，致使tabBar不顯示。
· tabBar的list中沒有寫pagePath字段，或者pagePath中的頁面沒有註冊
· tabBar的list的pagePath指定的頁面沒有寫在註冊頁面第一個。微信小程序的邏輯是"pages"中的第一個頁面是首頁，也就是程序啓動後第一個顯示的頁面，若是tabBar的list的pagePath指定的頁面都不是pages的第一個，固然也就不會顯示tabBar了。
· tabBar的數量低於兩項或者高於五項，微信官方中明確規定tabBar的至少兩項最多五項。超過或者少於都不會顯示tabBar。
8. 生命週期函數
· onLoad: 頁面加載
o 一個頁面只會調用一次，能夠在 onLoad 中獲取打開當前頁面所調用的 query 參數。
· onShow: 頁面顯示
o 每次打開頁面都會調用一次。
· onReady: 頁面初次渲染完成
o 一個頁面只會調用一次，表明頁面已經準備穩當，能夠和視圖層進行交互。
o 對界面的設置如wx.setNavigationBarTitle請在onReady以後設置。詳見生命週期
· onHide: 頁面隱藏
o 當navigateTo或底部tab切換時調用。
· onUnload: 頁面卸載
o 當redirectTo或navigateBack的時候調用。
9.wx.navigateTo沒法打開頁面
一個應用同時只能打開5個頁面，當已經打開了5個頁面以後，wx.navigateTo不能正常打開新頁面。請避免多層級的交互方式，或者使用wx.redirectTo
10.本地資源沒法經過 css 獲取
background-image：能夠使用網絡圖片，或者 base64，或者使用<image/>標籤
11.頁面間數據傳遞
微信小程序路由（頁面跳轉）是經過API wx.navigateTo或者wxml中<navigator/>組件實現的，無論哪一種實現都會有一個重要的參數就是url，它指定了要跳轉的頁面，而且頁面之間數據傳遞也是經過url來實現的，這個數據傳遞有點相似於咱們使用的get網絡請求，把參數都拼接在要跳轉界面地址的後面並以「？」鏈接。而後將要傳入的數據以鍵和值的形式追加在"?"後面，多個參數直接用"&"符合。如咱們點擊消息聊天記錄，將列表上的數據傳到下一個頁面，能夠這樣寫。
<navigatorurl="/pages/dynamic/dynamic?title={{item.title}}&message={{item.message}}">
<viewclass="item" >
<viewclass="item-left">
<imagesrc="{{item.url}}" class="image"/>
</view>
<viewclass="item-middle">
<view>
<textclass="title">{{item.title}}</text>
</view>
<view>
<textclass="message">{{item.message}}</text>
</view>
</view>
<viewclass="item_right">
<view><text class="time">{{item.time}}</text></view>
<viewclass="mark" wx:if="{{item.count>0}}"><textclass="text">{{item.count}}</text></view>
</view>
</view>
<view class="line"></view>
</navigator>
而數據接收是在js文件的page裏接收的，page生命週期有一個onLoad函數，它就是作一些初始化數據的工做，onLoad函數有一個參數options，咱們就能夠經過key將數據獲取，以下
Page({
data:{
// text:"這是一個頁面"
isHiddenToast:true
}
onLoad:function(options){
// 頁面初始化 options爲頁面跳轉所帶來的參數
console.log(options.title)
console.log(options.message)
},
onReady:function(){
// 頁面渲染完成
},
onShow:function(){
// 頁面顯示
},
onHide:function(){
// 頁面隱藏
},
onUnload:function(){
// 頁面關閉
},
bindtap:function(event){
wx.navigateTo({
url: "/pages/message/search/search"
})
},
})
13.ajax的步驟
什麼是ajax?
ajax(異步javascript xml) 可以刷新局部網頁數據而不是從新加載整個網頁。
如何使用ajax?
第一步，建立xmlhttprequest對象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest對象用來和服務器交換數據。
var xhttp;
if (window.XMLHttpRequest) {
//現代主流瀏覽器
xhttp = new XMLHttpRequest();
} else {
// 針對瀏覽器，好比IE5或IE6
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
第二步，使用xmlhttprequest對象的open（）和send（）方法發送資源請求給服務器。
第三步，使用xmlhttprequest對象的responseText或responseXML屬性得到服務器的響應。
第四步，onreadystatechange函數，當發送請求到服務器，咱們想要服務器響應執行一些功能就須要使用onreadystatechange函數，每次xmlhttprequest對象的readyState發生改變都會觸發onreadystatechange函數
14.xml和json的區別，請用四個詞語來形容
· JSON相對於XML來說，數據的體積小，傳遞的速度更快些
· JSON與JavaScript的交互更加方便，更容易解析處理，更好的數據交互
· XML對數據描述性比較好；
· JSON的速度要遠遠快於XML
15.清楚浮動的方法？(屢次出如今面試題)
1.父級div定義 height
原理：父級div手動定義height，就解決了父級div沒法自動獲取到高度的問題。
優勢：簡單、代碼少、容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，若是高度和父級div不同時，會產生問題
2，結尾處加空div標籤 clear:both
原理：添加一個空div，利用css提升的clear:both清除浮動，讓父級div能自動獲取到高度
優勢：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：很多初學者不理解原理；若是頁面浮動佈局多，就要增長不少空div，讓人感受很很差
3，父級div定義 僞類:after 和 zoom
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點相似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優勢：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、很多初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持
4，父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優勢：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，由於超出的尺寸的會被隱藏。
16.box-sizing經常使用的屬性有哪些？分別有什麼做用？
屬性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 這是box-sizing的默認屬性值
· 是CSS2.1中規定的寬度高度的顯示行爲
· 在CSS中定義的寬度和高度就對應到元素的內容框
· 在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框
border-box
· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
· 即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度以內進行繪製
· CSS中設定的寬度和高度減去邊框和內間距才能獲得元素內容所佔的實際寬度和高度
(Q1)box-sizing: content-box|border-box|inherit;
(Q2)content-box:寬度和高度分別應用到元素的內容框。在寬度和高度以外繪製元素的內邊距和邊框(元素默認效果)。
border-box:元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。經過從已設定的寬度和高度分別減去邊框和內邊距才能獲得內容的寬度和高度。
17.css選擇器有哪些，選擇器的權重的優先級
選擇器類型
一、ID #id
二、class .class
三、標籤 p
四、通用 *
五、屬性 [type="text"]
六、僞類 ：hover
七、僞元素 ::first-line
八、子選擇器、相鄰選擇器
3、權重計算規則
1. 第一等：表明內聯樣式，如: style=」」，權值爲1000。
2. 第二等：表明ID選擇器，如：#content，權值爲0100。
3. 第三等：表明類，僞類和屬性選擇器，如.content，權值爲0010。
4. 第四等：表明類型選擇器和僞元素選擇器，如div p，權值爲0001。
5. 通配符、子選擇器、相鄰選擇器等的。如*、>、+,權值爲0000。
6. 繼承的樣式沒有權值。
18. 塊級元素水平垂直居中的方法有哪些（三個方法）
讓div等塊級元素水平和垂直都居中，即永遠處於屏幕的正中央，當咱們作如登陸塊時很是有用！
實現1、原理：要讓div等塊級元素水平和垂直居中，必需知道該div等塊級元素的寬度和高度，而後設置位置爲絕對位置，距離頁面窗口左邊框和上邊框的距離設置爲50%，這個50%就是指頁面窗口的寬度和高度的50%，最後將該div等塊級元素分別左移和上移，左移和上移的大小就是該div等塊級元素寬度和高度的一半。
CSS代碼：
.mycss{
width:300px;
height:200px;
position:absolute;
left:50%;
top:50%;
margin:-100px 0 0 -150px }
實現二原理：利用CSS的margin設置爲auto讓瀏覽器本身幫咱們水平和垂直居中。
CSS代碼：
.mycss{
position: absolute;
left: 0px;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 200px;
width: 300px;
}
jQuery實現水平和垂直居中
原理：jQuery實現水平和垂直居中的原理就是經過jQuery設置div等塊級元素的CSS，獲取div等塊級元素的左、上的邊距偏移量，邊距偏移量的算法就是用頁面窗口 的寬度減去該div等塊級元素的寬度，獲得的值再除以2即左偏移量，右偏移量算法相同。注意div等塊級元素的CSS設置要在resize()方法中完成，就是每次改變窗口大 小時，都要執行設置div等塊級元素的CSS。
jquery代碼：
$(window).resize(function(){
$(".myblock").css({
position: "absolute",
left: ($(window).width() - $(".myblock").outerWidth())/2,
top: ($(window).height() - $(".myblock").outerHeight())/2 });
});
此外在頁面載入時，就須要調用resize()方法
$(function(){
$(window).resize();
});
19.三個盒子，左右定寬，中間自適應有幾種方法
第一種：左右側採用浮動 中間採用margin-left 和 margin-right 方法。
代碼以下：
<div style="width:100%; margin:0 auto;">
<div style="width:200px; float:right; background-color:#960">這是右側的內容 固定寬度</div>
<div style="width:150px; float:left; background:#6FF">這是左側的內容 固定寬度</div>
<div style="margin-left:150px;margin-right:200px; background-color:#9F3">中間內容，自適應寬度</div>
</div>
第二種：左右兩側採用絕對定位 中間一樣採用margin-left margin-right方法：
第三種負的margin
使用這種方法就稍微複雜了一些了，使用的是負的margin值，並且html標籤也增長了，先來看其代碼吧：
<div id="main">
<div id="mainContainer">main content</div></div><div id="left">
<div id="leftContainer" class="inner">left content</div></div><div id="right">
<div id="rightContainer" class="inner">right</div></div>
#main {
float: left;
width: 100%;
}
#mainContainer {
margin: 0 230px;
height: 200px;
background: green;
}
#left {
float: left;
margin-left: -100%;
width: 230px}
#right {
float: left;
margin-left: -230px;
width: 230px;
}
#left .inner,
#right .inner {
background: orange;
margin: 0 10px;
height: 200px;
}
20.js有幾種數據類型，其中基本數據類型有哪些
五種基本類型: Undefined、Null、Boolean、Number和String。
1中複雜的數據類型————Object，Object本質上是由一組無序的名值對組成的。
Object、Array和Function則屬於引用類型
21.undefined 和 null 區別
null： Null類型，表明「空值」，表明一個空對象指針，使用typeof運算獲得 「object」，因此你能夠認爲它是一個特殊的對象值。
undefined： Undefined類型，當一個聲明瞭一個變量未初始化時，獲得的就是undefined。
null是javascript的關鍵字，能夠認爲是對象類型，它是一個空對象指針，和其它語言同樣都是表明「空值」，不過 undefined 倒是javascript纔有的。undefined是在ECMAScript第三版引入的，爲了區分空指針對象和未初始化的變量，它是一個預約義的全局變量。沒有返回值的函數返回爲undefined，沒有實參的形參也是undefined。
javaScript權威指南： null 和 undefined 都表示「值的空缺」，你能夠認爲undefined是表示系統級的、出乎意料的或相似錯誤的值的空缺，而null是表示程序級的、正常的或在乎料之中的值的空缺。
22.http 和 https 有何區別？如何靈活使用？
http是HTTP協議運行在TCP之上。全部傳輸的內容都是明文，客戶端和服務器端都沒法驗證對方的身份。
https是HTTP運行在SSL/TLS之上，SSL/TLS運行在TCP之上。全部傳輸的內容都通過加密，加密採用對稱加密，但對稱加密的密鑰用服務器方的證書進行了非對稱加密。此外客戶端能夠驗證服務器端的身份，若是配置了客戶端驗證，服務器方也能夠驗證客戶端的身份
23.常見的HTTP狀態碼
2開頭 （請求成功）表示成功處理了請求的狀態代碼。
200 （成功） 服務器已成功處理了請求。 一般，這表示服務器提供了請求的網頁。
201 （已建立） 請求成功而且服務器建立了新的資源。
202 （已接受） 服務器已接受請求，但還沒有處理。
203 （非受權信息） 服務器已成功處理了請求，但返回的信息可能來自另外一來源。
204 （無內容） 服務器成功處理了請求，但沒有返回任何內容。
205 （重置內容） 服務器成功處理了請求，但沒有返回任何內容。
206 （部份內容） 服務器成功處理了部分 GET 請求。
3開頭 （請求被重定向）表示要完成請求，須要進一步操做。 一般，這些狀態代碼用來重定向。
300 （多種選擇） 針對請求，服務器可執行多種操做。 服務器可根據請求者 (user agent) 選擇一項操做，或提供操做列表供請求者選擇。
301 （永久移動） 請求的網頁已永久移動到新位置。 服務器返回此響應（對 GET 或 HEAD 請求的響應）時，會自動將請求者轉到新位置。
302 （臨時移動） 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。
303 （查看其餘位置） 請求者應當對不一樣的位置使用單獨的 GET 請求來檢索響應時，服務器返回此代碼。
304 （未修改） 自從上次請求後，請求的網頁未修改過。 服務器返回此響應時，不會返回網頁內容。
305 （使用代理） 請求者只能使用代理訪問請求的網頁。 若是服務器返回此響應，還表示請求者應使用代理。
307 （臨時重定向） 服務器目前從不一樣位置的網頁響應請求，但請求者應繼續使用原有位置來進行之後的請求。
4開頭 （請求錯誤）這些狀態代碼表示請求可能出錯，妨礙了服務器的處理。
400 （錯誤請求） 服務器不理解請求的語法。
401 （未受權） 請求要求身份驗證。 對於須要登陸的網頁，服務器可能返回此響應。
403 （禁止） 服務器拒絕請求。
404 （未找到） 服務器找不到請求的網頁。
405 （方法禁用） 禁用請求中指定的方法。
406 （不接受） 沒法使用請求的內容特性響應請求的網頁。
407 （須要代理受權） 此狀態代碼與 401（未受權）相似，但指定請求者應當受權使用代理。
408 （請求超時） 服務器等候請求時發生超時。
409 （衝突） 服務器在完成請求時發生衝突。 服務器必須在響應中包含有關衝突的信息。
410 （已刪除） 若是請求的資源已永久刪除，服務器就會返回此響應。
411 （須要有效長度） 服務器不接受不含有效內容長度標頭字段的請求。
412 （未知足前提條件） 服務器未知足請求者在請求中設置的其中一個前提條件。
413 （請求實體過大） 服務器沒法處理請求，由於請求實體過大，超出服務器的處理能力。
414 （請求的 URI 過長） 請求的 URI（一般爲網址）過長，服務器沒法處理。
415 （不支持的媒體類型） 請求的格式不受請求頁面的支持。
416 （請求範圍不符合要求） 若是頁面沒法提供請求的範圍，則服務器會返回此狀態代碼。
417 （未知足指望值） 服務器未知足"指望"請求標頭字段的要求。
5開頭（服務器錯誤）這些狀態代碼表示服務器在嘗試處理請求時發生內部錯誤。 這些錯誤多是服務器自己的錯誤，而不是請求出錯。
500 （服務器內部錯誤） 服務器遇到錯誤，沒法完成請求。
501 （還沒有實施） 服務器不具有完成請求的功能。 例如，服務器沒法識別請求方法時可能會返回此代碼。
502 （錯誤網關） 服務器做爲網關或代理，從上游服務器收到無效響應。
503 （服務不可用） 服務器目前沒法使用（因爲超載或停機維護）。 一般，這只是暫時狀態。
504 （網關超時） 服務器做爲網關或代理，可是沒有及時從上游服務器收到請求。
505 （HTTP 版本不受支持） 服務器不支持請求中所用的 HTTP 協議版本。
24. 如何進行網站性能優化
1. 從用戶角度而言，優化可以讓頁面加載得更快、對用戶的操做響應得更及時，可以給用戶提供更爲友好的體驗。
2. 從服務商角度而言，優化可以減小頁面請求數、或者減少請求所佔帶寬，可以節省可觀的資源。
總之，恰當的優化不只可以改善站點的用戶體驗而且可以節省至關的資源利用。
前端優化的途徑有不少，按粒度大體能夠分爲兩類，第一類是頁面級別的優化，例如 HTTP請求數、腳本的無阻塞加載、內聯腳本的位置優化等 ;第二類則是代碼級別的優化，例如 Javascript中的DOM 操做優化、CSS選擇符優化、圖片優化以及 HTML結構優化等等。另外，本着提升投入產出比的目的，後文提到的各類優化策略大體按照投入產出比從大到小的順序排列。
1、頁面級優化
1. JavaScript 壓縮和模塊打包
2. 按需加載資源
3. 在使用 DOM 操做庫時用上 array-ids
4. 緩存
5. 啓用 HTTP/2
6. 應用性能分析
7. 使用負載均衡方案
8. 爲了更快的啓動時間考慮一下同構
9. 使用索引加速數據庫查詢
10. 使用更快的轉譯方案
11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
12. 用於將來的一個建議：使用 service workers + 流
13. 圖片編碼優化
25. react和vue有哪些不一樣，說說你對這兩個框架的見解
相同點
· 都支持服務器端渲染
· 都有Virtual DOM,組件化開發,經過props參數進行父子組件數據的傳遞,都實現webComponent規範
· 數據驅動視圖
· 都有支持native的方案,React的React native,Vue的weex
不一樣點
· React嚴格上只針對MVC的view層,Vue則是MVVM模式
· virtual DOM不同,vue會跟蹤每個組件的依賴關係,不須要從新渲染整個組件樹.而對於React而言,每當應用的狀態被改變時,所有組件都會從新渲染,因此react中會須要shouldComponentUpdate這個生命週期函數方法來進行控制
· 組件寫法不同, React推薦的作法是 JSX + inline style, 也就是把HTML和CSS全都寫進JavaScript了,即'all in js'; Vue推薦的作法是webpack+vue-loader的單文件組件格式,即html,css,jd寫在同一個文件;
· 數據綁定: vue實現了數據的雙向綁定,react數據流動是單向的
· state對象在react應用中不可變的,須要使用setState方法更新狀態;在vue中,state對象不是必須的,數據由data屬性在vue對象中管理
26.什麼是mvvm mvc是什麼區別 原理
1、MVC（Model-View-Controller）
MVC是比較直觀的架構模式，用戶操做->View（負責接收用戶的輸入操做）->Controller（業務邏輯處理）->Model（數據持久化）->View（將結果反饋給View）。
MVC使用很是普遍，好比JavaEE中的SSH框架
3、MVVM（Model-View-ViewModel）
若是說MVP是對MVC的進一步改進，那麼MVVM則是思想的徹底變革。它是將「數據模型數據雙向綁定」的思想做爲核心，所以在View和Model之間沒有聯繫，經過ViewModel進行交互，並且Model和ViewModel之間的交互是雙向的，所以視圖的數據的變化會同時修改數據源，而數據源數據的變化也會當即反應view。
27.px和em的區別
px表示像素 (計算機屏幕上的一個點：1px = 1/96in)，是絕對單位，不會由於其餘元素的尺寸變化而變化；
·
·
em表示相對於父元素的字體大小。em是相對單位 ，沒有一個固定的度量值，而是由其餘元素尺寸來決定的相對值。
28.優雅降級和漸進加強
漸進加強（Progressive Enhancement）：一開始就針對低版本瀏覽器進行構建頁面，完成基本的功能，而後再針對高級瀏覽器進行效果、交互、追加功能達到更好的體驗。
優雅降級（Graceful Degradation）：一開始就構建站點的完整功能，而後針對瀏覽器測試和修復。好比一開始使用 CSS3 的特性構建了一個應用，而後逐步針對各大瀏覽器進行 hack 使其能夠在低版本瀏覽器上正常瀏覽。
其實漸進加強和優雅降級並不是什麼新概念，只是舊的概念換了一個新的說法。在傳統軟件開發中，常常會提到向上兼容和向下兼容的概念。漸進加強至關於向上兼容，而優雅降級至關於向下兼容
29.eval()的做用
把字符串參數解析成JS代碼並運行，並返回執行的結果；
eval("2+3");//執行加運算，並返回運算值。
eval("varage=10");//聲明一個age變量
eval的做用域
functiona(){
1. eval("var x=1"); //等效於 var x=1;
2. console.log(x); //輸出1
3. }
4. a();
5. console.log(x);//錯誤 x沒有定
30. JS哪些操做會形成內存泄露
1）意外的全局變量引發的內存泄露
function leak(){
leak="xxx";//leak成爲一個全局變量，不會被回收
}
2）閉包引發的內存泄露
3）3）沒有清理的DOM元素引用
4）被遺忘的定時器或者回調 5）子元素存在引發的內存泄露
31. 瀏覽器緩存有哪些，一般緩存有哪幾種
1、http緩存
2、websql
cookie
localstorage
sessionstorage
flash緩存
32:bootstrap響應式實現的原理
百分比佈局+媒體查詢
33.關於JS事件冒泡與JS事件代理（事件委託）
事件做爲DOM操做重要的一環，須要你們好好理解和運用，今天特地看了一下事件冒泡和事件代理的相關資料，感觸頗深，也深感本身的無知不知道多浪費了多少內存，廢話很少說進入正題：
1.事件冒泡：
通俗易懂的來說，就是當一個子元素的事件被觸發的時候（如onclick事件），該事件會從事件源（被點擊的子元素）開始逐級向上傳播，觸發父級元素的點擊事件。
2.事件委託
事件委託，首先按字面的意思就能看你出來，是將事件交由別人來執行，再聯想到上面講的事件冒泡，是否是想到了？對，就是將子元素的事件經過冒泡的形式交由父元素來執行。下面通過詳細的例子來講明事件委託：
有可能在開發的時候會遇到這種狀況：如導航每個欄目都要加一個事件，你可能會經過遍從來給每一個欄目添加事件：
事件委託是怎
1. var ul = document.getElementById('parentUl');
2. ul.οnclick=function (event) {
3. var e = event||window.event,
4. source = e.target || e.srcElement;//target表示在事件冒泡中觸發事件的源元素，在IE中是srcElement
5. if(source.nodeName.toLowerCase() == "li"){ //判斷只有li觸發的纔會輸出內容
6. alert(source.innerHTML);
7. }
8. stopPropagation(e); //阻止繼續冒泡
9. };
10. function addElement() {
11. var li = document.createElement('li');
12. li.innerHTML="我是新孩子";
13. ul.appendChild(li);
14. }
34. CSS樣式覆蓋規則
規則一：因爲繼承而發生樣式衝突時，最近祖先獲勝。
規則二：繼承的樣式和直接指定的樣式衝突時，直接指定的樣式獲勝
規則三：直接指定的樣式發生衝突時，樣式權值高者獲勝。
樣式的權值取決於樣式的選擇器，權值定義以下表。
CSS選擇器
權值
標籤選擇器
1
類選擇器
10
ID選擇器
100
內聯樣式
1000
僞元素(:first-child等)
1
僞類(:link等)
10
能夠看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標籤選擇器，除此之外，後代選擇器的權值爲每項權值之和，好比」#nav .current a」的權值爲100 + 10 + 1 = 111。
規則四：樣式權值相同時，後者獲勝。
規則五：!important的樣式屬性不被覆蓋。
!important能夠看作是萬不得已的時候，打破上述四個規則的」金手指」。若是你必定要採用某個樣式屬性，而不讓它被覆蓋的，能夠在屬性值後加上!important，以規則四的例子爲例，」.byline a {color:red !important;}」能夠強行使連接顯示紅色。大多數狀況下均可以經過其餘方式來控制樣式的覆蓋，不能濫用!important。
35. 介紹一下box-sizing屬性
兼容問題
首先，box-sizing屬性在FireFox中存在兼容問題，因此須要使用-moz-box-sizing作一下兼容。
屬性值
· box-sizing：content-box
· box-sizing：border-box
· box-sizing：inherit
content-box
· 這是box-sizing的默認屬性值
· 是CSS2.1中規定的寬度高度的顯示行爲
· 在CSS中定義的寬度和高度就對應到元素的內容框
· 在CSS中定義的寬度和高度以外繪製元素的內邊距和邊框
border-box
· 在CSS中微元素設定的寬度和高度就決定了元素的邊框盒
· 即爲元素在設置內邊距和邊框是在已經設定好的寬度和高度以內進行繪製
· CSS中設定的寬度和高度減去邊框和內間距才能獲得元素內容所佔的實際寬度和高度
36. css選擇符有哪些？優先級算法如何計算？（常見）
37. 請簡要描述margin重合問題，及解決方式
1.同向margin的重疊：
1圖片的margin-top與3圖片的margin-top發生重疊，2圖片的margin-bottom與3圖片的margin-bottom發生重疊。這時候重疊以後的margin值由發生重疊兩片的最大值決定；若是其中一個出現負值，則由最大的正邊距減去絕對值最大的負邊距，若是沒有最大正邊距，則由0減去絕對值最大的負邊距。
解決同向重疊的方法：
（1）在最外層的div中加入overflow:hidden;zoom:1
（2）在最外層加入padding:1px;屬性
（3）在最外層加入：border:1px solid #cacbcc;
2.異向重疊問題：
1圖片的margin-bottom與2圖片的margin-top發生重疊，這時候重疊以後的margin值由發生重疊兩圖片的最大值的決定的。
解決異向重疊問題：
float:left（只能解決IE6瀏覽器中的異向重疊問題，能夠解決IE8以上、chorme、firefox、opera下的同向重疊問題）
38：position的值，relative\absolute\fixed分別相對於進行誰定位，有什麼區別，何時用？
39.解釋下CSS sprites，以及你要如何在頁面或網站中使用它。
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的「background-image」，「background-repeat」，「background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置
40.什麼是閉包，如何使用它，爲何要使用它？
包就是可以讀取其餘函數內部變量的函數。因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成「定義在一個函數內部的函數」。
因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中。
使用閉包的注意點：
· 因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
· 閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。
41.請解釋JSONP的工做原理，以及它爲何不是真正的AJAX。
JSONP (JSON with Padding)是一個簡單高效的跨域方式，HTML中的script標籤能夠加載並執行其餘域的javascript，因而咱們能夠經過script標記來動態加載其餘域的資源。例如我要從域A的頁面pageA加載域B的數據，那麼在域B的頁面pageB中我以JavaScript的形式聲明pageA須要的數據，而後在 pageA中用script標籤把pageB加載進來，那麼pageB中的腳本就會得以執行。JSONP在此基礎上加入了回調函數，pageB加載完以後會執行pageA中定義的函數，所須要的數據會以參數的形式傳遞給該函數。JSONP易於實現，可是也會存在一些安全隱患，若是第三方的腳本隨意地執行，那麼它就能夠篡改頁面內容，截獲敏感數據。可是在受信任的雙方傳遞數據，JSONP是很是合適的選擇。
AJAX是不跨域的，而JSONP是一個是跨域的，還有就是兩者接收參數形式不同！
42.請解釋一下JavaScript的同源策略。
在客戶端編程語言中，如javascript和 ActionScript，同源策略是一個很重要的安全理念，它在保證數據的安全性方面有着重要的意義。同源策略規定跨域之間的腳本是隔離的，一個域的腳本不能訪問和操做另一個域的絕大部分屬性和方法。那麼什麼叫相同域，什麼叫不一樣的域呢？當兩個域具備相同的協議, 相同的端口，相同的host，那麼咱們就能夠認爲它們是相同的域。同源策略還應該對一些特殊狀況作處理，好比限制file協議下腳本的訪問權限。本地的HTML文件在瀏覽器中是經過file協議打開的，若是腳本能經過file協議訪問到硬盤上其它任意文件，就會出現安全隱患，目前IE8還有這樣的隱患。
43.怎樣添加、移除、移動、複製、建立和查找節點？
1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性
44.談談垃圾回收機制方式及內存管理
回收機制方式
一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。
二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。
三、實例以下：
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}var a = fn1();var b = fn2();
fn1中定義的obj爲局部變量，而當調用結束後，出了fn1的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。
四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。
標記清除：
定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。
到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。
引用計數：
定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。
4五、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？
(1)、bind 【jQuery 1.3以前】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：bind(type,[data],function(eventObject))；
特色：
(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。
(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。
實例以下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3以後】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：live(type, [data], fn);
特色：
(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；
實例以下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監聽事件綁定在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特色：
(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。
(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。
實例以下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了以前的三種方式的新事件綁定機制】
定義和用法：將監聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。
說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()
4六、px和em的區別
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
4七、瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
4八、什麼叫優雅降級和漸進加強？
漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶
4九、sessionStorage 、localStorage 和 cookie 之間的區別
共同點：用於瀏覽器端存儲的緩存數據
不一樣點：
(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；
web storage,會將數據保存到本地，不會形成寬帶浪費；
(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;
(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；
sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；
(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
50、瀏覽器是如何渲染頁面的？
渲染的流程以下：
1.解析HTML文件，建立DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。
2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3.將CSS與DOM合併，構建渲染樹（Render Tree）
4.佈局和繪製，重繪（repaint）和重排（reflow）
51:js的基本數據類型
JavaScript中有五種基本數據類型，它們分別是：undefined，null，boolean，number，string。
還有一種複雜數據類型-object。
52：事件委託
事件委託就是利用的DOM事件的事件捕獲階段。把具體dom上發生的事件，委託給更大範圍的dom去處理。比如送信員，若是每次都把信件送給每一戶，很是繁瑣。可是若是交給一個大範圍的管理者，好比小區的傳達室，那麼事情會變得很是簡單。事件委託就相似這種原理，我頁面中有不少按鈕，若是不使用事件委託，我只能在每一個按鈕上註冊事件。很是麻煩。但若是我把事件註冊在一個大範圍的div（假設全部的按鈕都在這個div中），那麼我只要註冊一次事件，就能夠處理全部按鈕（只要按鈕包含在上述div中）事件的響應了
53：CSS3新增了不少的屬性，下面一塊兒來分析一下新增的一些屬性：
1.CSS3邊框：
· border-radius：CSS3圓角邊框。在 CSS2 中添加圓角矩形須要技巧，咱們必須爲每一個圓角使用不一樣的圖片，在 CSS3 中，建立圓角是很是容易的，在 CSS3 中，border-radius 屬性用於建立圓角。border：2px solid;
· box-shadow：CSS3邊框陰影。在 CSS3 中，box-shadow 用於向方框添加陰影。box-shadow:10px 10px 5px #888888;
· border-image：CSS3邊框圖片。經過 CSS3 的 border-image 屬性，您能夠使用圖片來建立邊框。border-image：url(border.png) 30 30 round;
2.CSS3背景：
· background-size： 屬性規定背景圖片的尺寸。在 CSS3 以前，背景圖片的尺寸是由圖片的實際尺寸決定的。在 CSS3 中，能夠規定背景圖片的尺寸，這就容許咱們在不一樣的環境中重複使用背景圖片。您可以以像素或百分比規定尺寸。若是以百分比規定尺寸，那麼尺寸相對於父元素的寬度和高度。
· background-origin ：屬性規定背景圖片的定位區域。背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。
3.CSS3文字效果：
· text-shadow：在 CSS3 中，text-shadow 可向文本應用陰影。text-shadow:5px 5px 5px #FFFFFF;
· word-wrap :單詞太長的話就可能沒法超出某個區域，容許對長單詞進行拆分，並換行到下一行：p{word-wrap:break-word;}
4.CSS3 2D轉換：
transform：經過 CSS3 轉換，咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。
· translate()：元素從其當前位置移動，根據給定的 left（x 座標） 和 top（y 座標） 位置參數：transform：translate（50px,100px）;值 translate(50px,100px) 把元素從左側移動 50 像素，從頂端移動 100 像素。
· rotate()：元素順時針旋轉給定的角度。容許負值，元素將逆時針旋轉。transform:rotate(30deg);值 rotate(30deg) 把元素順時針旋轉 30 度。
· scale():元素的尺寸會增長或減小，根據給定的寬度（X 軸）和高度（Y 軸）參數：transform:scale(2,4);值 scale(2,4) 把寬度轉換爲原始尺寸的 2 倍，把高度轉換爲原始高x() 5.CSS3 3D轉換：
· rotateX()：元素圍繞其 X 軸以給定的度數進行旋轉。transform：rotateX(120deg);
· rotateY()：元素圍繞其 Y 軸以給定的度數進行旋轉。transform：rotateY(120deg);
6.CSS3 過渡：當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。
7.CSS3動畫：經過 CSS3，咱們可以建立動畫，這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。
8.CSS3多列：
· column-count：屬性規定元素應該被分隔的列數。
· column-gap：屬性規定列之間的間隔。
· column-rule ：屬性設置列之間的寬度、樣式和顏色規則。
9.CSS3用戶界面：
· resize：屬性規定是否可由用戶調整元素尺寸。
· box-sizing：屬性容許您以確切的方式定義適應某個區域的具體內容。
· outline-offset ：屬性對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。
54：從輸入url到顯示頁面，都經歷了什麼
第一步：客戶機提出域名解析請求,並將該請求發送給本地的域名服務器。
第二步：當本地的域名服務器收到請求後,就先查詢本地的緩存,若是有該紀錄項,則本地的域名服務器就直接把查詢的結果返回。
第三步：若是本地的緩存中沒有該紀錄,則本地域名服務器就直接把請求發給根域名服務器,而後根域名服務器再返回給本地域名服務器一個所查詢域(根的子域)的主域名服務器的地址。
第四步：本地服務器再向上一步返回的域名服務器發送請求,而後接受請求的服務器查詢本身的緩存,若是沒有該紀錄,則返回相關的下級的域名服務器的地址。
第五步：重複第四步,直到找到正確的紀錄。
第2種解釋：
通常會經歷如下幾個過程：
一、首先，在瀏覽器地址欄中輸入url
二、瀏覽器先查看瀏覽器緩存-系統緩存-路由器緩存，若是緩存中有，會直接在屏幕中顯示頁面內容。若沒有，則跳到第三步操做。
三、在發送http請求前，須要域名解析(DNS解析)(DNS（域名系統，Domain Name System）是互聯網的一項核心服務，它做爲能夠將域名和IP地址相互映射的一個分佈式數據庫，可以令人更方便的訪問互聯網，而不用去記住IP地址。)，解析獲取相應的IP地址。
四、瀏覽器向服務器發起tcp鏈接，與瀏覽器創建tcp三次握手。（TCP即傳輸控制協議。TCP鏈接是互聯網鏈接協議集的一種。）
五、握手成功後，瀏覽器向服務器發送http請求，請求數據包。
六、服務器處理收到的請求，將數據返回至瀏覽器
七、瀏覽器收到HTTP響應
八、讀取頁面內容，瀏覽器渲染，解析html源碼
九、生成Dom樹、解析css樣式、js交互
十、客戶端和服務器交互
十一、ajax查詢
55：對<meta></meta>標籤有什麼理解
什麼是meta標籤？
引自下W3school的定義說明一下。
元數據（metadata）是關於數據的信息。
標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上，可是對於機器是可讀的。
典型的狀況是，meta 元素被用於規定頁面的描述、關鍵詞、文檔的做者、最後修改時間以及其餘元數據。
標籤始終位於 head 元素中。
元數據可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。
其實對上面的概念簡單總結下就是：<meta> 標籤提供關於 HTML 文檔的元數據。它不會顯示在頁面上，可是對於機器是可讀的。可用於瀏覽器（如何顯示內容或從新加載頁面），搜索引擎（關鍵詞），或其餘 web 服務。
meta的做用
meta裏的數據是供機器解讀的，告訴機器該如何解析這個頁面，還有一個用途是能夠添加服務器發送到瀏覽器的http頭部內容
56：new操做符到底到了什麼
先看代碼
[javascript] view plain copy
1. var Func=function(){
2. };
3. var func=new Func ();
new共通過了4幾個階段
一、建立一個空對象
[javascript] view plain copy
1. varobj=new Object();
二、設置原型鏈
[javascript] view plain copy
1. obj.__proto__= Func.prototype;
三、讓Func中的this指向obj，並執行Func的函數體。
[javascript] view plain copy
1. var result =Func.call(obj);
四、判斷Func的返回值類型：
若是是值類型，返回obj。若是是引用類型，就返回這個引用類型的對象。
[javascript] view plain copy
1. if (typeof(result) == "object"){
2. func=result;
3. }
4. else{
5. func=obj;;
6. }
57：h5新特性
HTML5新特性 —— 新特性
(1)新的語義標籤和屬性
(2)表單新特性
(3)視頻和音頻
(4)Canvas繪圖
(5)SVG繪圖
(6)地理定位
(7)拖放API
58：vue的生命週期
58：請寫出你對閉包的理解，並列出簡單的理解
使用閉包主要是爲了設計私有的方法和變量。閉包的優勢是能夠避免全局變量的污染，缺點是閉包會常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。
閉包有三個特性：
1.函數嵌套函數
2.函數內部能夠引用外部的參數和變量
3.參數和變量不會被垃圾回收機制回收
59：display none visibility hidden區別？
1.display:none是完全消失，不在文檔流中佔位，瀏覽器也不會解析該元素；visibility:hidden是視覺上消失了，能夠理解爲透明度爲0的效果，在文檔流中佔位，瀏覽器會解析該元素；
2.使用visibility:hidden比display:none性能上要好，display:none切換顯示時visibility，頁面產生迴流（當頁面中的一部分元素須要改變規模尺寸、佈局、顯示隱藏等，頁面從新構建，此時就是迴流。全部頁面第一次加載時須要產生一次迴流），而visibility切換是否顯示時則不會引發迴流。
60：JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現
typeof(obj) === "string"
typeof obj === "string"
obj.constructor === String
61：如何理解閉包？
一、定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。
二、表現形式：使函數外部可以調用函數內部定義的變量。
三、實例以下：
(1)、根據做用域鏈的規則，底層做用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到window的變量，沒有就返回undefined。這裏明顯count 是函數內部的flag2 的那個count 。
var count=10; //全局做用域 標記爲flag1function add(){
var count=0; //函數全局做用域 標記爲flag2
return function(){
count+=1; //函數的內部做用域 alert(count);
}
}var s = add()
s();//輸出1
s();//輸出2
四、變量的做用域
要理解閉包，首先必須理解Javascript特殊的變量做用域。
變量的做用域分類：全局變量和局部變量。
特色：
一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。
二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！
五、使用閉包的注意點
1）濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
2）會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。
62：談談垃圾回收機制方式及內存管理
回收機制方式
一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。
二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。
三、實例以下：
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}var a = fn1();var b = fn2();
fn1中定義的obj爲局部變量，而當調用結束後，出了fn1的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。
四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。
標記清除：
定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。
到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。
引用計數：
定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。
63：判斷一個字符串中出現次數最多的字符，統計這個次數
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;
}
} console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
6四、$(document).ready()方法和window.onload有什麼區別？
(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。
(2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。
6五、 jquery中$.get()提交和$.post()提交有區別嗎？
相同點：都是異步請求的方式來獲取服務端的數據；
異同點：
一、請求方式不一樣：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。
二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。
三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多
四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。
6六、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？（常見）
(1)、bind 【jQuery 1.3以前】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：bind(type,[data],function(eventObject))；
特色：
(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。
(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。
實例以下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3以後】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：live(type, [data], fn);
特色：
(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；
實例以下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監聽事件綁定在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特色：
(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。
(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。
實例以下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了以前的三種方式的新事件綁定機制】
定義和用法：將監聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。
說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()
6七、px和em的區別（常見）
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
6八、瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
6九、什麼叫優雅降級和漸進加強？（常見）
漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶
70、sessionStorage 、localStorage 和 cookie 之間的區別（常見）
共同點：用於瀏覽器端存儲的緩存數據
不一樣點：
(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；
web storage,會將數據保存到本地，不會形成寬帶浪費；
(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;
(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；
sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；
(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
一、html5爲何只須要寫<!doctype html>?
答：html5不是基於sgml（標準通用標記語言），不須要對dtd文件進行引用，可是須要doctype來規範瀏覽器的行爲，
不然瀏覽器將開啓怪異模式，而html4.01基於sgml，須要引入dtd，才能告知瀏覽器文檔使用的文檔類型
二、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？
行內元素有：a b span img input select strong（強調的語氣）
塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素：
<br> <hr> <img> <input> <link> <meta>
不爲人知的是：
<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
三、頁面導入樣式時，使用link和@import有什麼區別？
二者都是外部引用CSS的方式，可是存在必定的區別：
區別1：link是XHTML標籤，除了加載CSS外，還能夠定義RSS等其餘事務；@import屬於CSS範疇，只能加載CSS。
區別2：link引用CSS時，在頁面載入時同時加載；@import須要頁面網頁徹底載入之後加載。
區別3：link是XHTML標籤，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
補充：@import最優寫法
@import的寫法通常有下列幾種：
@import ‘style.css’ //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import 「style.css」 //Windows IE4/ NS4, Macintosh IE4/NS4不識別
@import url(style.css) //Windows NS4, Macintosh NS4不識別
@import url(‘style.css’) //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不識別
@import url(「style.css」) //Windows NS4, Macintosh NS4不識別
由上分析知道，@import url(style.css) 和@import url(「style.css」)是最優的選擇，兼容的瀏覽器最多。
從字節優化的角度來看@import url(style.css)最值得推薦。
四、常見的瀏覽器內核有哪些？
使用Trident內核的瀏覽器：IE、Maxthon、TT、The World等；
使用Gecko內核的瀏覽器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用Presto內核的瀏覽器：Opera7及以上版本；
使用Webkit內核的瀏覽器：Safari、Chrome。
五、html5有哪些新特性？移除了哪些元素？如何處理HTML5新標籤的瀏覽器兼容性問題？如何區分html和html5？
新增的元素有繪畫 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新標籤的瀏覽器兼容問題？如何區分HTML和HTML5？
處理兼容問題有兩種方式：
1.IE8/IE7/IE6支持經過document.方法產生的標籤，利用這一特性讓這些瀏覽器支持HTML5新標籤。
2.使用是html5shim框架
另外，DOCTYPE聲明的方式是區分HTML和HTML5標誌的一個重要因素，此外，還能夠根據新增的結構、功能元素來加以區分。
六、iframe有哪些優缺點？
優勢：
1.用來實現長鏈接，在websocket不可用的時候做爲一種替代，最開始由google發明。Comet：基於 HTTP 長鏈接的」服務器推」技術
2.跨域通訊。JavaScript跨域總結與解決辦法 ，相似的還有瀏覽器多頁面通訊，好比音樂播放器，用戶若是打開了多個tab頁，應該只有一個在播放。
3.歷史記錄管理，解決ajax化網站響應瀏覽器前進後退按鈕的方案，在html5的history api不可用時做爲一種替代。
4.純前端的utf8和gbk編碼互轉。好比在utf8頁面須要生成一個gbk的encodeURIComponent字符串，能夠經過頁面加載一個gbk的iframe，而後主頁面與子頁面通訊的方式實現轉換，這樣就不用在頁面上插入一個很是巨大的編碼映射表文件了
缺點：
一、在網頁中使用框架結構最大的弊病是搜索引擎的」蜘蛛」程序沒法解讀這種頁面。當」蜘蛛」程序遇到由數個框架組成的網頁時，它們只看到框架而 沒法找到連接，所以它們會覺得該網站是個死站點，而且很快轉身離去。對一個網站來講這無異於一場災難。
若是你想銷售產品，你須要客戶;如想獲得客戶，你首先要讓人們訪問你的網站，而要作到這一點，你就非求助於搜索引擎不可。你花費了大量的時間、 精力和金錢開設了一家網上商店，卻又故意不讓搜索引擎檢索你，這就好象開家零售商店，卻將窗戶所有漆成黑色，並且還不掛任何招牌同樣。
二、框架結構有時會讓人感到迷惑，特別是在幾個框架中都出現上下、左右滾動條的時候。這些滾動條除了會擠佔已經很是有限的頁面空間外，還會分散 訪問者的注意力。訪問者遇到這種網站每每會馬上轉身離開。他們會想，既然你的主頁如此混亂，那麼網站的其餘部分也許更不值得瀏覽。
三、連接導航問題。使用框架結構時，你必須保證正確設置全部的導航連接，如否則，會給訪問者帶來很大的麻煩。好比被連接的頁面出如今導航框架 內，這種狀況下訪問者便被陷住了，由於此時他沒有其餘地方可去。
七、label的做用是什麼？是怎麼使用的？
Label 中有兩個屬性是很是有用的,一個是FOR、另一個就是ACCESSKEY了。
FOR屬性
功能：表示Label標籤要綁定的HTML元素，你點擊這個標籤的時候，所綁定的元素將獲取焦點。
用法：<Label FOR=」InputBox」>姓名</Label><input ID=」InputBox」 type=」text」>
ACCESSKEY屬性：
功能：表示訪問Label標籤所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。
用法：<Label FOR=」InputBox」 ACCESSKEY＝」N」>姓名</Label><input ID=」InputBox」 type=」text」>
侷限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵衝突，不然將優先激活瀏覽器的快捷鍵。
八、實現不使用border，畫出1px高的線，在不一樣瀏覽器下的Quirksmode和CSSCompat模式下都能保持一致的效果？
<div style=」height:1px;overflow:hidden;background:red」></div>
九、網頁驗證碼是幹嗎的？是爲了解決什麼安全問題？
網頁驗證碼介紹：」驗證碼」的英文表示爲CAPTCHA（Completely Automated Public Turing test to tell Computers and Humans Apart），翻譯過來就是」全自動區分計算機和人類的圖靈測試」，顧名思義，它是用來區分計算機和人類的。在 CAPTCHA 測試中，做爲服務器的計算機會自動生成一個問題由用戶來解答。這個問題能夠由計算機生成並評判，可是必須只有人類才能解答。因爲計算機沒法解答 CAPTCHA 的問題，因此回答出問題的用戶就能夠被認爲是人類。 CAPTCHA 是由計算機來考人類，而不是標準圖靈測試中那樣由人類來考計算機，所以人們有時稱 CAPTCHA 是一種反向圖靈測試。
驗證碼的原理：服務器端隨機生成驗證碼字符串，保存在內存中，並寫入圖片，發送給瀏覽器端顯示，瀏覽器端輸入驗證碼圖片上字符，而後提交服務器端，提交的字符和服務器端保存的該字符比較是否一致，一致就繼續，不然返回提示。攻擊者編寫的robot程序，很難識別驗證碼字符，順利的完成自動註冊，登陸；而用戶能夠識別填寫，因此這就實現了阻擋攻擊的做用。而圖片的字符識別，就是看圖片上的干擾強度了。就實際的效果來講，驗證碼只是增長攻擊者的難度，而不可能徹底的防止。
十、介紹一下標準的css的盒子模型？與低版本IE的盒子模型有什麼不一樣？
盒子模型有兩種，分別是 ie 盒子模型和標準 w3c 盒子模型
W3C 盒子模型的範圍包括 margin、border、padding、content，而且 content 部分不包含其餘部分
IE 盒子模型的範圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不一樣的是：IE 盒子模型的 content 部分包含了 border 和 pading
十一、如何居中div，如何居中一個浮動元素？如何讓絕對定位的div居中？
a.margin:xpx auto;
b.肯定容器的寬高，這裏寬度是必須的，高度能夠不設，設置外層的上外邊距和左外邊距分別是寬高的一半。
實現居中關鍵在於 margin設置與 position:relative.
.div {
width:500px ;
height:300px;
margin: -150px 0 0 -250px;
position:relative;
left:50%;
top:50%;
}
c.position:absolute;
top: 50%;
left: 50%; 只能把div定位在以紅色圈爲起點的位置，加上margin:-100px 0px 0px -100
十二、display有哪些值？說明他們的做用？
block :塊對象的默認值。用該值爲對象以後添加新行
none :隱藏對象。與visibility屬性的hidden值不一樣，其不爲被隱藏的對象保留其物理空間
inline :內聯對象的默認值。用該值將從對象中刪除行
compact :分配對象爲塊對象或基於內容之上的內聯對象
marker :指定內容在容器對象以前或以後。要使用此參數，對象必須和:after及:before 僞元素一塊兒使用
inline-table :將表格顯示爲無先後換行的內聯對象或內聯容器
list-item :將塊對象指定爲列表項目。並能夠添加可選項目標誌
run-in :分配對象爲塊對象或基於內容之上的內聯對象
table :將對象做爲塊元素級的表格顯示
1三、position的值relative和absolute的定位原點是什麼？
Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的作標原始點爲原始點。若是設定TRBL而且父級沒有設定position屬性，那麼當前的absolute則以瀏覽器左上角爲原始點進行定位，位置將由TRBL決定。
Relative，CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點爲原始點，無父級則以BODY的原始點爲原始點，配合TRBL進行定位，當父級內有padding等CSS屬性時，當前級的原始點則參照父級內容區的原始點進行定位。
1四、display設置爲inline-block時，li與li之間有看不見的空白間隔是什麼緣由引發的？有什麼解決辦法？
行框的排列會受到中間空白（回車空格等等）的影響，這些空白也會被應用樣式，佔據空間，因此會有間隔
解決：設置ul的font-size爲0，缺陷是必須從新在li中去設置字體大小
1五、請解釋下爲何會出現浮動和何時須要清除浮動？清除浮動的方式？
a.添加新的元素 、應用 clear：both;
b.父級定義 overflow: auto（注意：是父級div也就是這裏的 div.outer） 一個對seo比較友好，另個hidden對seo不是太友好
在IE6中還須要觸發 hasLayout ，例如 zoom：1；
c.聽說是最高大上的方法 :after
方法：（注意：做用於浮動元素的父親）IE6-7不支持:after，
使用 zoom:1觸發 hasLayout
{zoom:1;} /*==for IE6/7 Maxthon2==*/
:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}
d.使用 br標籤和其自身的 html屬性,<br clear=」all」 /> clear=」all | left | right | none」 屬性
e.父元素也設置浮動
f.父元素設置display:table 盒模型屬性已經改變，由此形成的一系列問題，得不償失，不推薦使用
1六、在網頁中的應該使用奇數仍是偶數的字體？爲何呢？
偶數字號相對更容易和 web 設計的其餘部分構成比例關係
使用奇數號字體很差的地方是，文本段落沒法對齊
1七、margin和padding分別適合什麼場景使用？
什麼時候應當使用margin：
（1）須要在border外側添加空白時，
（2）空白處不須要有背景（色）時，
（3）上下相連的兩個盒子之間的空白鬚要相互抵消時，好比15px+20px的margin，將獲得20px的空白（注意地方見第三點）。
什麼時候應當使用padding
（1）須要在border內側添加空白時（每每是文字與邊框距離的設置），
（2）空白處須要背景（色）時，
（3）上下相連的兩個盒子之間的空白但願等於二者之和時，好比15px+20px的padding，將獲得35px的空白。
margin使用時應該注意的地方
margin在垂直方向上相鄰的值相同時會發生疊加，水平方向上相鄰的值會相加。margin取負值時，在垂直方向上，兩個元素的邊界仍然會重疊。可是，此時一個爲正值，一個爲負值，並非取其中較大的值，而是用正邊界減去負邊界的絕對值，也就是說，把正的邊界值和負的邊界值相加。
1八、元素豎向的百分比設定是相對於容器的高度嗎？
答：相對於父容器的寬度
1九、什麼是響應式設計？響應式設計的基本原理是什麼？如何兼容較低版本的IE？
答：一個網站可以兼容多個終端——而不是爲每一個終端作一個特定的版本。
優勢：
面對不一樣分辨率設備靈活性強
可以快捷解決多設備顯示適應問題
缺點：
兼容各類設備工做量大，效率低下
代碼累贅，會出現隱藏無用的元素，加載時間加長
其實這是一種折中性質的設計解決方案，多方面因素影響而達不到最佳效果
必定程度上改變了網站原有的佈局結構，會出現用戶混淆的狀況
respond.js和css3-mediaqueries-js
20、設置元素浮動後，該元素的display值是多少？
display:block;
2一、怎麼讓chrome支持小於12px的文字？
chrome私有屬性：-webkit-text-size-adjust:none;
-webkit-transform:scale(0.8);
行內元素設置:-webkit-transform:scale(0.8);display:inline-block
2二、display:inline-block何時會顯示間隙？
1.給 父元素 寫font-size:0
2.把標籤寫到一行，不要在編輯器裏敲回車換行，可是這種寫法對於標籤不少的狀況可讀性太差，適用與例如<a></a><a></a>這樣簡單的結構
2三、有一個高度自適應的div。裏面有2個div，一個高度100px，但願另外一個填滿剩下的高度？
外層box-sizing: border-box; 同時設置padding: 100px 0 0；
內層100像素高的元素向上移動100像素，或使用absolute定位防止佔據空間；
另外一個元素直接height: 100%;
外層position: relative；
百分百自適應元素直接position: absolute; top: 100px; bottom: 0; left: 0
2四、什麼是window對象？什麼是document對象？
window它是一個頂層對象,而不是另外一個對象的屬性即瀏覽器的窗口。
document對象是window對象的一個對象屬性
2五、null和undefined的區別？
null是一個表示」無」的對象，轉爲數值時爲0；undefined是一個表示」無」的原始值，轉爲數值時爲NaN。
null表示」沒有對象」，即該處不該該有值
（1） 做爲函數的參數，表示該函數的參數不是對象。
（2） 做爲對象原型鏈的終點。
undefined表示」缺乏值」，就是此處應該有一個值，可是尚未定義
（1）變量被聲明瞭，但沒有賦值時，就等於undefined。
（2) 調用函數時，應該提供的參數沒有提供，該參數等於undefined。
（3）對象沒有賦值的屬性，該屬性的值爲undefined。
（4）函數沒有返回值時，默認返回undefined。
2六、什麼是閉包（closure）？爲何要用它？
閉包就是可以讀取其餘函數內部變量的函數
因爲在Javascript語言中，只有函數內部的子函數才能讀取局部變量，所以能夠把閉包簡單理解成」定義在一個函數內部的函數」。
因此，在本質上，閉包就是將函數內部和函數外部鏈接起來的一座橋樑。
閉包的用途：
閉包能夠用在許多地方。它的最大用處有兩個，一個是前面提到的能夠讀取函數內部的變量，另外一個就是讓這些變量的值始終保持在內存中
重用變量又不能形成全局污染
2七、js代碼中」use strict」是什麼意思？使用它區別是什麼？
進入」嚴格模式」的標誌，老版本的瀏覽器會把它看成一行普通字符串，加以忽略
將」use strict」放在腳本文件的第一行，則整個腳本都將以」嚴格模式」運行。若是這行語句不在第一行，則無效，整個腳本以」正常模式」運行。若是不一樣模式的代碼文件合併成一個文件，這一點須要特別注意。
(嚴格地說，只要前面不是產生實際運行結果的語句，」use strict」能夠不在第一行，好比直接跟在一個空的分號後面。)
將」use strict」放在函數體的第一行，則整個函數以」嚴格模式」運行
由於第一種調用方法不利於文件合併，因此更好的作法是，借用第二種方法，將整個腳本文件放在一個當即執行的匿名函數之中
– 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲;
– 消除代碼運行的一些不安全之處，保證代碼運行的安全；
– 提升編譯器效率，增長運行速度；
– 爲將來新版本的Javascript作好鋪墊。
2八、js中有一個函數，執行對象查找時，永遠不會去查找原型，這個函數是什麼？
hasOwnProperty()函數用於指示一個對象自身(不包括原型鏈)是否具備指定名稱的屬性。若是有，返回true，不然返回false。該方法屬於Object對象，因爲全部的對象都」繼承」了Object的對象實例，所以幾乎全部的實例對象均可以使用該方法。
2九、js延遲加載的方式有哪些？
js的延遲加載有助與提升頁面的加載速度，如下是延遲加載的幾種方法：
1.使用setTimeout延遲方法的加載時間
延遲加載js代碼，給網頁加載留出更多時間
<script type=」text/javascript」 >
function A(){
$.post(「/lord/login」,{name:username,pwd:password},function(){
alert(「Hello」);
});
}
$(function (){
setTimeout(‘A()’, 1000); //延遲1秒
})
</script>
2.讓js最後加載
例如引入外部js腳本文件時，若是放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼~~~ 因此咱們能夠把js外部引入的文件放到頁面底部，來讓js最後引入，從而加快頁面加載速度
3.上述方法2也會偶爾讓你收到Google頁面速度測試工具的」延遲加載javascript」警告。因此這裏的解決方案將是來自Google幫助頁面的推薦方案。
//這些代碼應被放置在</body>標籤前(接近HTML文件底部)
<script type=」text/javascript」>
function downloadJSAtOnload() {
var element = document.createElement(「script」);
element.src = 「defer.js」;
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener(「load」, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(「onload」, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
這段代碼意思是等到整個文檔加載完後，再加載外部文件」defer.js」。
使用此段代碼的步驟：
1）.複製上面代碼
2）.粘貼代碼到HTML的標籤前 (靠近HTML文件底部)
3）.修改」defer.js」爲你的外部JS文件名
4）.確保你文件路徑是正確的。例如：若是你僅輸入」defer.js」，那麼」defer.js」文件必定與HTML文件在同一文件夾下。
注意：這段代碼直到文檔加載完纔會加載指定的外部js文件。所以，不該該把那些頁面正常加載須要依賴的javascript代碼放在這裏。而應該將JavaScript代碼分紅兩組。一組是因頁面須要而當即加載的javascript代碼，另一組是在頁面加載後進行操做的javascript代碼(例如添加click事件或其餘東西)。這些需等到頁面加載後再執行的JavaScript代碼，應放在一個外部文件，而後再引進來。
30、同步和異步的區別？
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。
舉個瀏覽器例子：普通B/S模式（同步）AJAX技術（異步）
同步：提交請求->等待服務器處理->處理完畢返回 這個期間客戶端瀏覽器不能幹任何事
異步: 請求經過事件觸發->服務器處理（這是瀏覽器仍然能夠做其餘事情）->處理完畢
再舉個生活的例子：你們聯繫的時候若是使用手機通話，那麼只能跟一我的聯繫，過程當中作不了其餘任何操做，若是使用短信或者聊天的方式，就能夠同時跟不少人聊天，別人收到信息後會回覆，在回覆以前還能夠跟另外的人進行聊天。
3一、document.write和innerHTML的區別？
1.document.write是直接寫入到頁面的內容流，若是在寫以前沒有調用document.open, 瀏覽器會自動調用open。每次寫完關閉以後從新調用該函數，會致使頁面被重寫。
2.innerHTML則是DOM頁面元素的一個屬性，表明該元素的html內容。你能夠精確到某一個具體的元素來進行更改。若是想修改document的內容，則須要修改document.documentElement.innerElement。
3.二者均可動態包含外部資源如JavaScript文件
經過document.write插入<script></script>元素會自動執行其中的腳本；
大多數瀏覽器中，經過innerHTML插入<script></script>元素並不會執行其中的腳本
innerHTML不少狀況下都優於document.write，其緣由在於其容許更精確的控制要刷新頁面的那一個部分。
3二、.call()和.apply()的含義和區別？
一、call，apply都屬於Function.prototype的一個方法，它是JavaScript引擎內在實現的，由於屬於Function.prototype，因此每一個Function對象實例(就是每一個方法)都有call，apply屬性。既然做爲方法的屬性，那它們的使用就固然是針對方法的了，這兩個方法是容易混淆的，由於它們的做用同樣，只是使用方式不一樣。
二、語法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
三、相同點：兩個方法產生的做用是徹底同樣的。
四、不一樣點：方法傳遞的參數不一樣，單個單數傳入，另外一個能夠以數組方式傳入
3三、JQ和JQUI有啥區別？
jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype以後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是」write Less，Do More」，即倡導寫更少的代碼，作更多的事情。它封裝JavaScript經常使用的功能代碼，提供一種簡便的JavaScript設計模式，優化HTML文檔操做、事件處理、動畫設計和Ajax交互。
jQuery UI 是創建在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。
3四、需求：實現一個頁面操做不會整頁刷新的網站，而且能在瀏覽器的前進，後退時正確響應。給出你的技術實現方案？
用cookie或者localStorage來記錄應用的狀態便可，刷新頁面時讀取一下這個狀態，而後發送相應ajax請求來改變頁面便可
HTML5裏引用了新的API，就是history.pushState和history.replaceState，就是經過這個接口作到無刷新改變頁面URL的
雖然ajax能夠無刷新改變頁面內容，但沒法改變頁面URL
其次爲了更好的可訪問性，內容發生改變後，改變URL的hash。可是hash的方式不能很好的處理瀏覽器的前進、後退等問題
有的瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時去判斷hash是否改變
再有，ajax的使用對搜索引擎很不友好，每每蜘蛛爬到的區域是空的
爲了解決傳統ajax帶來的問題，HTML5裏引入了新的API，即：history.pushState, history.replaceState
能夠經過pushState和replaceState接口操做瀏覽器歷史，而且改變當前頁面的URL。
pushState是將指定的URL添加到瀏覽器歷史裏，replaceState是將指定的URL替換當前的URL。
如何調用
var state = { title: title, url: options.url, otherkey: othervalue};window.history.pushState(state, document.title, url);
state對象除了要title和url以外，也能夠添加其餘的數據，好比：還想將一些發送ajax的配置給保存起來。
replaceState和pushState是類似的，不須要多作解釋。
如何響應瀏覽器的前進、後退操做
window對象上提供了onpopstate事件，上面傳遞的state對象會成爲event的子對象，這樣就能夠拿到存儲的title和URL了。
window.addEventListener(‘popstate’, function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); }}, false);
這樣就能夠結合ajax和pushState完美的進行無刷新瀏覽了。
3五、js的數據類型都有哪些？
字符串、數字、布爾、數組、對象、Null、Undefined
3六、已知ID的input輸入框，但願獲取這個輸入框的輸入值，怎麼作？(不使用第三方框架)
document.getElementById(id).value;
3七、但願獲取到頁面中全部的checkbox怎麼作？(不使用第三方框架)
document.getElementsByTagName(‘input’);
遍歷循環
3八、設置一個已知ID的div和html內容爲xxx，字體顏色設置爲黑色？(不使用第三方框架)
var div = document.getElementById(id);
div.innerHTML = 」;
div.style.color = 」;
3九、當一個dom節點被點擊時，咱們須要可以執行一個函數，應該怎麼作？
直接在DOM裏綁定事件：」<div onclick=」test()」>xx</div>」 …
在JS裏經過onclick綁定：xxx.onclick = test
經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
那麼問題來了，Javascript的事件流模型都有什麼？
「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
「DOM事件流」：三個階段：事件捕捉，目標階段，事件冒泡
40、什麼是Ajax和JSON，他們的優缺點？
Ajax是異步JavaScript和XML，用於在Web頁面中實現異步數據交互。
優勢：
能夠使得頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量
避免用戶不斷刷新或者跳轉頁面，提升用戶體驗
缺點：
對搜索引擎不友好（
要實現ajax下的先後退功能成本較大
可能形成請求數的增長
跨域問題限制
JSON是一種輕量級的數據交換格式，ECMA的一個子集
優勢：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，支持複合數據類型（數組、對象、字符串、數字）
4一、請看下列代碼輸出什麼？解釋緣由？
var a;
alert(typeof a); //undefined
alert(b); //報錯
解釋：Undefined是一個只有一個值的數據類型，這個值就是」undefined」，
在使用var聲明變量但並未對其賦值進行初始化時，這個變量的值就是undefined。而b因爲未聲明將報錯。
注意未申明的變量和聲明瞭未賦值的是不同的。
ar a = null;
alert(typeof a); //object
解釋：null是一個只有一個值的數據類型，這個值就是null。表示一個空指針對象，因此用typeof檢測會返回」object」
4二、js的typeof返回哪些數據類型？
有以下6種返回值：
1）number；
2）string；
3）boolean；
4）object
5）function
6）undefined;
4三、split() join()的區別？
join() 方法用於把數組中的全部元素放入一個字符串。
元素是經過指定的分隔符進行分隔的。
指定分隔符方法join(「#」);其中#能夠是任意
與之相反的是split()方法：用於把一個字符串分割成字符串數組.
4四、數組方法pop() push() unshift() shift()?
push和pop方法，這兩個方法只會對數組從尾部進行壓入或彈出，並且是在原數組進行操做，任何的改動都是會影響到操做的數組。push(args)能夠每次壓入多個元素，並返回更新後的數組長度。pop()函數每次只會彈出最後一個結尾的元素，並返回彈出的元素，若是是對空組數調用pop()則返回undefined。 若是參數是數組則是將整個數組當作一個元素壓入到原來的數組當中。並不會產生相似concat合併數組時產生的」拆分現象」
unshift和shift這兩個方法都是經過對數組的頭部進行的操做，其餘基本跟push和pop相似
shift:從集合中把第一個元素刪除，並返回這個元素的值。
unshift: 在集合開頭添加一個或更多元素，並返回新的長度
push:在集合中添加元素，並返回新的長度
pop:從集合中把最後一個元素刪除，並返回這個元素的值
4五、ajax請求時，如何解釋json數據？
1.$.JSON(url,params,fun);
2.$.ajax({}); dataType:’json’
均可以使用$each();進行遍歷
$.each(object,function(index,item){
});
4六、js的本地對象，內置對象和宿主對象？
本地對象：
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定義好了的對象
內置對象： Global 和 Math，內置對象是本地對象的一種
宿主對象：全部的BOM和DOM對象都是宿主對象，是那些官方未定義，你本身構建的對象加上DOM和BOM對象組成的
4七、列舉所瞭解的前端框架並簡述？
如下是經常使用的前端基礎框架：
如下是常見的前端構建框架：
如下是場檢的JS/CSS模塊化開發的框架：
4八、對web標準以及w3c的理解與認識？
（1）web標準規範要求，書寫標籤必須閉合、標籤小寫、不亂嵌套，可提升搜索機器人對網頁內容的搜索概率。— SEO
（2）建議使用外鏈css和js腳本，從而達到結構與行爲、結構與表現的分離，提升頁面的渲染速度，能更快地顯示頁面的內容。
（3）樣式與標籤的分離，更合理的語義化標籤，使內容能被更多的用戶所訪問、內容能被更普遍的設備所訪問、更少的代碼和組件， 從而下降維護成本、改版更方便
（4）不須要變更頁面內容，即可提供打印版本而不須要複製內容，提升網站易用性
遵循w3c制定的web標準，可以使用戶瀏覽者更方便的閱讀，使網頁開發者之間更好的交流。
4九、xhtml和html有什麼區別？
XHTML是HTML 4.01和XML1.0的雜交，XHTML1.0是基於HTML4.01的
HTML是一種基於標準通用標記語言（SGML）的應用，而XHTML則基於可擴展標記語言（XML），HTML和XHTML實際上是平行發展的兩個標準。本質上說，XHTML是一個過渡技術，結合了部分XML的強大功能及大多數HTML的簡單特性。創建XHTML的目的就是實現HTML向XML的過渡
一、XHTML要求正確嵌套
二、XHTML全部元素必須關閉
三、XHTML區分大小寫
四、XHTML屬性值要加引號
五、XHTML用id屬性代替name屬性
六、屬性值不能簡寫
50、行內元素有哪些？塊級元素有哪些？css和盒子模型？
盒子模型：內容、填充（padding）、邊框（border）、外邊界（margin）
box-sizing:border-box; box-sizing:content-box;
5一、css選擇器有哪些？哪些屬性能夠繼承？優先級算法如何計算？內聯和import哪一個級別更高？
可繼承的：font-size font-family color
不可繼承的：border padding margin background-color width height
優先級：!important > [ id > class > tag ] important 比 內聯優先級高
5二、前端頁面有哪三層構成，分別是什麼？做用是什麼？
結構層、表示層、行爲層
結構層（structural layer）
由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出如今尖括號裏的單詞，對網頁內容的語義含義作出了描述，但這些標籤不包含任何關於如何顯示有關內容的信息。例如，P標籤表達了這樣一種語義：」這是一個文本段。」
表示層（presentation layer）
由 CSS 負責建立。 CSS對」如何顯示有關內容」的問題作出了回答。
行爲層（behaviorlayer）
負責回答」內容應該如何對事件作出反應」這一問題。這是 Javascript 語言和 DOM主宰的領域
5三、你如何對網站的文件和資源進行優化？期待的解決方法包括？
A、文件合併，減小http請求，合併JavaScript和CSS文件、CSS Sprites、圖像映射 （Image Map）和使用Data URI來編碼圖片
B、文件最小化/文件壓縮，減小文件下載的體積；經常使用的工具是YUI Compressor
C、使用 CDN 託管，儘量避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定
D、緩存的使用（多個域名來提供緩存）
E、GZIP 壓縮你的 JS 和 CSS 文件
5四、看下列代碼？輸出什麼？解釋緣由？
var a = null;
alert(typeof a);
答案：輸出爲object, JS類型值是存在32 BIT 單元裏,32位有1-3位表示TYPE TAG,其它位表示真實值
而表示object的標記位正好是低三位都是0
000: object. The data is a reference to an object.
而js 裏的Null 是機器碼NULL空指針, (0x00 is most platforms).因此空指針引用 加上 對象標記仍是0,最終體現的類型仍是object..
這也就是爲何Number(null)===0吧…
The history of 「typeof null」
2. 曾經有提案 typeof null === ‘null’.但提案被拒絕
harmony:typeof_null
5五、看代碼給答案？並進行解釋？
var a = new Object();
a.value=1;
b = a;
b.value=2;
alert(a.value);
5六、var numberArray = [3,6,2,4,1,5];
1) 實現對該數組的倒排，輸出[5,1,4,2,6,3]
2) 實現對該數組的降序排列，輸出[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){ //6,5,4,3,2,1
return b-a;
})
5七、你能描述一下漸進加強和優雅降級之間的不一樣嗎?
若是提到了特性檢測，能夠加分。
檢測瀏覽器，漸進加強就是讓牛b的瀏覽器的效果更好，優雅降級就是讓2b的瀏覽器在功能ok的狀況下效果通常。
5八、線程與進程的區別？
一個程序至少有一個進程,一個進程至少有一個線程.
線程的劃分尺度小於進程，使得多線程程序的併發性高。
另外，進程在執行過程當中擁有獨立的內存單元，而多個線程共享內存，從而極大地提升了程序的運行效率。
線程在執行過程當中與進程仍是有區別的。每一個獨立的線程有一個程序運行的入口、順序執行序列和程序的出口。可是線程不可以獨立執行，必須依存在應用程序中，由應用程序提供多個線程執行控制。
從邏輯角度來看，多線程的意義在於一個應用程序中，有多個執行部分能夠同時執行。但操做系統並無將多個線程看作多個獨立的應用，來實現進程的調度和管理以及資源分配。這就是進程和線程的重要區別。
5九、請解釋一下什麼是」語義化的 HTML」？
語義化的好處：
1：去掉或樣式丟失的時候能讓頁面呈現清晰的結構：
html自己是沒有表現的，咱們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認爲這是html的表現，這些其實html默認的css樣式在起做用，因此去掉或樣式丟失的時候能讓頁面呈現清晰的結構不是
的HTML結構的優勢，可是瀏覽器都有有默認樣式，默認樣式的目的也是爲了更好的表達html的語義，能夠說瀏覽器的默認樣式和語義化的HTML結構是不可分割的。
2.屏幕閱讀器（若是訪客有視障）會徹底根據你的標記來」讀」你的網頁.
3.PDA、手機等設備可能沒法像普通電腦的瀏覽器同樣來渲染網頁（一般是由於這些設備對CSS的支持較弱）.
4.搜索引擎的爬蟲也依賴於標記來肯定上下文和各個關鍵字的權重.
5.你的頁面是否對爬蟲容易理解很是重要,由於爬蟲很大程度上會忽略用於表現的標記, 而只注重語義標記.
6.便於團隊開發和維護
語義化的HTML就是：標題用h1-h6，文字段落用p，列表用ul li，大體如此
60、爲何利用多個域名來提供網站資源會更有效？
瀏覽器同一時間能夠從一個域名下載多少資源？你的瀏覽器能同時保持對一個域名的多少鏈接？
三個最主流的緣由:
1. CDN緩存更方便
2. 突破瀏覽器併發限制 (你隨便挑一個 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4換成 lh3,lh6 啥的，都照樣可以訪問，像地圖之類的須要大量併發下載圖片的站點，這個很是重要。)
3. Cookieless, 節省帶寬，尤爲是上行帶寬 通常比下行要慢。。。
還有另外兩個很是規緣由:
4. 對於UGC的內容和主站隔離，防止沒必要要的安全問題( 上傳js竊取主站cookie之類的) 。
正是這個緣由要求用戶內容的域名必須不是本身主站的子域名，而是一個徹底獨立的第三方域名。
5. 數據作了劃分，甚至切到了不一樣的物理集羣，經過子域名來分流比較省事. ^_^ 這個可能被用的很少。
PS: 關於Cookie的問題，帶寬是次要的，安全隔離纔是主要的。
關於多域名，也不是越多越好，雖然服務器端能夠作泛解釋，瀏覽器作dns解釋也是耗時間的，並且太多域名，若是要走 https的話，還有要多買證書和部署的問題，^_^。
6一、請說出三種減小頁面加載時間的方法。（加載時間指感知的時間或者實際加載時間）
1.優化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優化CSS（壓縮合並css，如margin-top,margin-left…)
4.網址後加斜槓（如www.campr.com/目錄，會判斷這個」目錄是什麼文件類型，或者是目錄。）
5.標明高度和寬度（若是瀏覽器沒有找到這兩個參數，它須要一邊下載圖片一邊計算大小，若是圖片不少，瀏覽器須要不斷地調整頁面。這不但影響速度，也影響瀏覽體驗。
當瀏覽器知道了高度和寬度參數後，即便圖片暫時沒法顯示，頁面上也會騰出圖片的空位，而後繼續加載後面的內容。從而加載時間快了，瀏覽體驗也更好了。）
6.減小http請求（合併文件，合併圖片）。
6二、若是你參與到一個項目中，發現他們使用 Tab 來縮進代碼，可是你喜歡空格，你會怎麼作？
1.建議這個項目使用像 EditorConfig (http://editorconfig.org/) 之類的規範
2.爲了保持一致性，接受項目原有的風格
3.直接使用 VIM 的 retab 命令
6三、請寫一個簡單的幻燈效果頁面
若是不使用JS來完成，能夠加分。（如：純CSS實現的幻燈片效果）
能夠採用CSS3的單選按鈕radio來實現圖片的切換
6四、你都使用哪些工具來測試代碼的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
6五、若是今年你打算熟練掌握一項新技術，那會是什麼？
nodejs，html5，css3，less
6六、請談一下你對網頁標準和標準制定機構重要性的理解？
(google)w3c存在的意義就是讓瀏覽器兼容性問題儘可能小，首先是他們對瀏覽器開發者的約束，而後是對開發者的約束。
6七、什麼是 FOUC（無樣式內容閃爍）？你如何來避免 FOUC？
FOUC – Flash Of Unstyled Content 文檔樣式閃爍
<style type=」text/css」 media=」all」>@import 「../fouc.css」;</style>
而引用CSS文件的@import就是形成這個問題的罪魁禍首。IE會先加載整個HTML文檔的DOM，而後再去導入外部的CSS文件，所以，在頁面DOM加載完成到CSS導入完成中間會有一段時間頁面上的內容是沒有樣式的，這段時間的長短跟網速，電腦速度都有關係。
解決方法簡單的出奇，只要在<head>之間加入一個<link>或者<script></script>元素就能夠了。
6八、doctype（文檔類型）的做用是什麼？你知道多少種文檔類型？
此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範。
該標籤可聲明三種 DTD 類型，分別表示嚴格版本、過渡版本以及基於框架的 HTML 文檔。
HTML 4.01 規定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標準）模式（也就是嚴格呈現模式）用於呈現遵循最新標準的網頁，而 Quirks
（包容）模式（也就是鬆散呈現模式或者兼容模式）用於呈現爲傳統瀏覽器而設計的網頁。
6九、瀏覽器標準模式和怪異模式之間的區別是什麼？
W3C標準推出之後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來之前，不少頁面都是根據舊的渲染方法編寫的，若是用的標準來渲染，將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性，使之前的頁面可以正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode和Standars mode，兩種渲染方法共存在一個瀏覽器上。
IE盒子模型和標準W3C盒子模型：ie的width包括：padding\border。 標準的width不包括：padding\border
在js中如何判斷當前瀏覽器正在以何種方式解析？
document對象有個屬性compatMode ,它有兩個值：
BackCompat 對應quirks mode
CSS1Compat 對應strict mode
70、使用 XHTML 的侷限有哪些？
xhtml要求嚴格，必須有head、body每一個dom必需要閉合。
若是頁面使用’application/xhtml+xml’會有什麼問題嗎？
一些老的瀏覽器並不兼容。
十6、若是網頁內容須要支持多語言，你會怎麼作？
編碼UTF-8，空間域名須要支持多瀏覽地址。
在設計和開發多語言網站時，有哪些問題你必需要考慮？
一、應用字符集的選擇 二、語言書寫習慣&導航結構 三、數據庫驅動型網站
7一、data-屬性的做用是什麼？
data-爲前端開發者提供自定義的屬性，這些屬性集能夠經過對象的dataset屬性獲取，不支持該屬性的瀏覽器能夠經過 getAttribute方法獲取
<div data-author=」david」 data-time=」2011-06-20″ data-comment-num=」10″>…</div>
div.dataset.commentNum; // 10
須要注意的是，data-以後的以連字符分割的多個單詞組成的屬性，獲取的時候使用駝峯風格。
並非全部的瀏覽器都支持.dataset屬性，測試的瀏覽器中只有Chrome和Opera支持。
7二、若是把 HTML5 看做作一個開放平臺，那它的構建模塊有哪些？
<nav>, <header>,<section>, <footer>
7三、請描述一下 cookies，sessionStorage 和 localStorage 的區別？
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，能夠方便的在web請求之間保存數據。有了本地數據，就能夠避免數據在瀏覽器和服務器間沒必要要地來回傳遞。
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個」瀏覽器窗口」的概念。sessionStorage是在同源的同學口（或tab）中，始終存在的數據。也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬。同時」獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的
cookies會發送到服務器端。其他兩個不會。
Microsoft指出InternetExplorer8增長cookie限制爲每一個域名50個，但IE7彷佛也容許每一個域名50個cookie。
Firefox每一個域名cookie限制爲50個。
Opera每一個域名cookie限制爲30個。
Firefox和Safari容許cookie多達4097個字節，包括名（name）、值（value）和等號。
Opera容許cookie多達4096個字節，包括：名（name）、值（value）和等號。
InternetExplorer容許cookie多達4095個字節，包括：名（name）、值（value）和等號。
7四、描述下 「reset」 CSS 文件的做用和使用它的好處。
由於瀏覽器的品種不少，每一個瀏覽器的默認樣式也是不一樣的，因此定義一個css reset能夠使各瀏覽器的默認樣式統一。
7五、解釋下浮動和它的工做原理？
浮動元素脫離文檔流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留
7六、列舉不一樣的清除浮動的技巧，並指出它們各自適用的使用場景？
1.使用空標籤清除浮動。
這種方法是在全部浮動標籤後面添加一個空標籤 定義css clear:both. 弊端就是增長了無心義標籤。
2.使用overflow。
給包含浮動元素的父標籤添加css屬性 overflow:auto; zoom:1; zoom:1用於兼容IE6。
3.使用after僞對象清除浮動。
該方法只適用於非IE瀏覽器。具體寫法可參照如下示例。使用中需注意如下幾點。1、該方法中必須爲須要清除浮動元素的僞對象中設置 height:0，不然該元素會比實際高出若干像素；2、content屬性是必須的，但其值能夠爲空，藍色理想討論該方法的時候content屬性的值設爲」.」，但我發現爲空亦是能夠的。
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:」」;visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
<div id=」layout」>
<div id=」left」>Left</div>
<div id=」right」>Right</div>
</div>
7七、解釋下 CSS sprites，以及你要如何在頁面或網站中使用它？
CSS Sprites其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用CSS的」background-image」，」background- repeat」，」background-position」的組合進行背景定位，background-position能夠用數字能精確的定位出背景圖片的位置。
7八、你最喜歡的圖片替換方法是什麼，你如何選擇使用？
<h2> <span 圖片丟這裏></span>Hello World </h2> 把span背景設成文字內容，這樣又能夠保證seo，也有圖片的效果在上面。
通常都是：alt，title，onerror
7九、討論CSS hacks，條件引用或者其餘？
background-color:blue; 各個瀏覽器都認識，這裏給firefox用；
background-color:red\9;\9全部的ie瀏覽器可識別；
background-color:yellow\0; \0 是留給ie8的
+background-color:pink; + ie7定了；
_background-color:orange; _專門留給神奇的ie6；
:root #test { background-color:purple\9; } :root是給ie9的，
@media all and (min-width:0px){ #test {background-color:black\0;} } 這個是總是跟ie搶着認\0的神奇的opera，必須加個\0,否則firefox，chrome，safari也都認識。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最後這個是瀏覽器新貴chrome和safari的。
80、如何爲有功能限制的瀏覽器提供網頁？你會使用哪些技術和處理方法？
百度 谷歌 SO SOGOU Bing
8一、如何視覺隱藏網頁內容，只讓它們在屏幕閱讀器中可用？
1.display:none;的缺陷
搜索引擎可能認爲被隱藏的文字屬於垃圾信息而被忽略
屏幕閱讀器（是爲視覺上有障礙的人設計的讀取屏幕內容的程序）會忽略被隱藏的文字。
2. visibility: hidden ;的缺陷
這個你們應該比較熟悉就是隱藏的內容會佔據他所應該佔據物理空間
3.overflow:hidden;一個比較合理的方法
.texthidden { display:block;/*統一轉化爲塊級元素*/ overflow: hidden; width: 0; height: 0; }
就像上面的一段CSS所展現的方法，將寬度和高度設定爲0，而後超過部分隱藏，就會彌補上述1、二方法中的缺陷，也達到了隱藏內容的目的。
8二、你用過柵格系統嗎？若是使用過，你最喜歡哪一種？
好比：Bootstrap，流式柵格系統
8三、你用過媒體查詢，或針對移動端的佈局/CSS 嗎？
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) {….}
媒體查詢，就是響應式佈局。
8四、你熟悉 SVG 樣式的書寫嗎？
<svg xmlns=」http://www.w3.org/2000/svg」 xmlns:xlink=」http://www.w3.org/1999/xlink」>
<circle cx=」40″ cy=」40″ r=」24″ style=」stroke:#006600; fill:#00cc00″/>
<text x=」250″ y=」150″ font-family=」Verdana」 font-size=」10px」 fill=」blue」>Hello, out there</text>
<defs><style type=」text/css」> <![CDATA[.sample{stroke:blue;fill:#0080FF;opacity:1;}]]></style></defs>
<use xlink:href=」#sample1″ class=」sample」/>
</svg>
8五、如何優化網頁的打印樣式？
<link rel=」stylesheet」 type=」text/css」 media=」screen」 href=」xxx.css」 />
其中media指定的屬性就是設備，顯示器上就是screen，打印機則是print，電視是tv，投影儀是projection。
<link rel=」stylesheet」 type=」text/css」 media=」print」 href=」yyy.css」 />
但打印樣式表也應有些注意事項：
一、打印樣式表中最好不要用背景圖片，由於打印機不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
二、最好不要使用像素做爲單位，由於打印樣式表要打印出來的會是實物，因此建議使用pt和cm。
三、隱藏掉沒必要要的內容。（@print div{display:none;}）
四、打印樣式表中最好少用浮動屬性，由於它們會消失。
若是想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預覽就能夠了。
8六、在書寫高效 CSS 時會有哪些問題須要考慮？
1.樣式是：從右向左的解析一個選擇器
2.ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify （永遠不要這樣作 ul#main-navigation { } ID已是惟一的，不須要Tag來標識，這樣作會讓選擇器變慢。）
4.後代選擇器最糟糕（換句話說，下面這個選擇器是很低效的： html body ul li a { }）
5.想清楚你爲何這樣寫
6.CSS3的效率問題（CSS3選擇器（好比 :nth-child）可以漂亮的定位咱們想要的元素，又能保證咱們的CSS整潔易讀。可是這些神奇的選擇器會浪費不少的瀏覽器資源。）
7.咱們知道#ID速度是最快的，那麼咱們都用ID，是否是很快。可是咱們不該該爲了效率而犧牲可讀性和可維護性
8七、使用 CSS 預處理器的優缺點有哪些？
(SASS，Compass，Stylus，LESS)
描述下你曾經使用過的 CSS 預處理的優缺點
8八、若是設計中使用了非標準的字體，你該如何去實現？
Webfonts (字體服務例如：Google Webfonts，Typekit 等等。)
8九、解釋下瀏覽器是如何判斷元素是否匹配某個 CSS 選擇器？
瀏覽器先產生一個元素集合，這個集合每每由最後一個部分的索引產生（若是沒有索引就是全部元素的集合）。而後向上匹配，若是不符合上一個部分，就把元素從集合中刪除，直到真個選擇器都匹配完，還在集合中的元素就匹配這個選擇器了。
舉個例子，有選擇器：
body.ready #wrapper > .lol233
先把全部 class 中有 lol233 的元素拿出來組成一個集合，而後上一層，對每個集合中的元素，若是元素的 parent id 不爲 #wrapper 則把元素從集合中刪去。 再向上，從這個元素的父元素開始向上找，沒有找到一個 tagName 爲 body 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。
至此這個選擇器匹配結束，全部還在集合中的元素知足。
大致就是這樣，不過瀏覽器還會有一些奇怪的優化。
爲何從後往前匹配由於效率和文檔流的解析方向。效率沒必要說，找元素的父親和以前的兄弟比遍歷所喲兒子快並且方便。關於文檔流的解析方向，是由於如今的 CSS，一個元素只要肯定了這個元素在文檔流以前出現過的全部元素，就能肯定他的匹配狀況。應用在即便 html 沒有載入完成，瀏覽器也能根據已經載入的這一部分信息徹底肯定出現過的元素的屬性。
爲何是用集合主要也仍是效率。基於 CSS Rule 數量遠遠小於元素數量的假設和索引的運用，遍歷每一條 CSS Rule 經過集合篩選，比遍歷每個元素再遍歷每一條 Rule 匹配要快得多。
90、解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不一樣的盒模型來渲染你的佈局。
全部HTML元素能夠看做盒子，在CSS中，」box model」這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不一樣部分的說明：
Margin(外邊距) – 清除邊框外的區域，外邊距是透明的。
Border(邊框) – 圍繞在內邊距和內容外的邊框。
Padding(內邊距) – 清除內容周圍的區域，內邊距是透明的。
Content(內容) – 盒子的內容，顯示文本和圖像。
9一、解釋下事件代理？
JavaScript事件代理則是一種簡單的技巧，經過它你能夠把事件處理器添加到一個父級元素上，這樣就避免了把事件處理器添加到多個子級元素上。
當咱們須要對不少元素添加事件的時候，能夠經過將事件添加到它們的父節點而將事件委託給父節點來觸發處理函數。這主要得益於瀏覽器的事件冒泡機制。
事件代理用到了兩個在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標元素。
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
9二、解釋下 JavaScript 中 this 是如何工做的？
this 永遠指向函數運行時所在的對象，而不是函數被建立時所在的對象。匿名函數或不處於任何對象中的函數指向 window
1.若是是call，apply,with，指定的this是誰，就是誰
2.普通的函數調用，函數被誰調用，this就是誰
9三、解釋下原型繼承的原理？
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop)) {
return obj[prop];
}else if (obj.__proto__ !== null) {
return getProperty(obj.__proto__, prop);
}else{
return undefined;
}
}
9四、生成時間戳的兩種方法？
JavaScript 獲取當前時間戳：
第一種方法：
var timestamp = Date.parse(new Date());
結果：1280977330000
第二種方法：
var timestamp = (new Date()).valueOf();
結果：1280977330748
第三種方法：
var timestamp=new Date().getTime()；
結果：1280977330748
第一種：獲取的時間戳是把毫秒改爲000顯示，
第二種和第三種是獲取了當前毫秒的時間戳。
9五、用原型鏈的方式給Array對象添加一個數組去重的方法？
Array.prototype.delRepeat=function() {
//tempRepeat保存重複數組項
var tempRepeat = [];
var obj = {}; //保存數組中每項，及其出現的次數
//遍歷數組
for (var i = 0; i < this.length; i++) {
if (obj[this[i]]) {
if(obj[this[i]]==1) {
tempRepeat.push(this[i]);
obj[this[i]]++;
delete(this[i]);
}
}
else {
obj[this[i]] = 1;
}
}
this.filter(function(){ return true;});
return tempRepeat;
}
var a=[1,3,」eirkgm」,4,6,」eirkgm」,3,3,」eirkgm」,3,3,3,」eirkgm」,4];
alert(a.delRepeat());
9六、定義一個方法，對全部傳入的數字參數的第三位小數進行
四捨五入，使得返回值保留兩位小數，不夠的補0
9七、定義一個方法，實現階乘
function factorial(num) {
if(num <= 1) {
return 1;
} else {
return num * arguments.callee(num – 1);
}
}
9八、定義一段代碼，頁面載入完成1分鐘後非緩存模式刷新當前頁面
window.onload=function()
{
setTimeout(function(){
location.reload();//要執行刷新的代碼
},60000);
}
9九、document.getElementById(「HEAD」).onclick=function(oEvent){
var A = oEvent.type.B = oEvent.target
}
A和B的值是什麼？
100、阻止事件默認行爲和事件冒泡的方法是什麼
默認行爲：event.preventDefault();
冒泡：event.stopPropregation();
event.cancelBubble();
10一、把Object的實例化對象A、B、C合併 賦值給對象C
10二、設置一個已知ID的DIV的html內容爲xxx，字體顏色設置爲黑色（不使用第三方框架）
10三、當一個DOM節點被點擊的時候，咱們但願可以執行一個函數，應該怎麼作？
直接在DOM裏綁定事件：
在JS裏經過onclick綁定：xxx.onclick = test
經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
10四、什麼是Ajax和JSON，他們的優缺點？
Ajax是一種異步提交數據的方法。
一般在html中，要想從新獲取頁面的數據。更新某一個地方的數據時。就必須得刷新整個頁面，才能從新刷新數據。那麼問題來了，當咱們僅僅只須要更新某一個小地方的數據時。咱們也來刷新整個頁面的話，就顯得有點麻煩了，因而Ajax就幫咱們完成了這個功能，讓咱們單獨開闢一條道路來進行獲取數據，而後頁面不須要刷新，用JS把AJAX請求的數據顯示到該顯示的地方。AJAX叫 無刷新獲取技術
json 是一種數據的載體，能夠把他想象成數組同樣的東西，只不過，它有點牛，就是不少格式均可以自動支持。就差很少這樣了。
10五、看下列代碼輸出爲什麼？解釋緣由？
var a;
alert(typeof a);//undefined
alert(b); //報錯
10六、看下列代碼，輸出什麼？解釋緣由？
var a = null;
alert(typeof a); //object
10七、看下列代碼，輸出什麼？
1.var undefined;
2.undefined == null; //true
3.3==true; // true
4.2==true; //false
5.0==false; //true
6.0==」; //true
7.NaN == NaN; //false
8.[]==false; //true
9.[] == ![]; //true
10八、看代碼給答案？
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value); //2
10九、輸出今天的日期，以YYYY-MM-DD的方式，好比今天是2016年4月12日，則 輸出2016-04-12
var d = new Date();
// 獲取年，getFullYear()返回4位的數字 //今年：2016
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);
1十、將字符串」<tr><td>{$id}</td><td>${name}</td></tr>」中的${id}替換成10，{$name}替換成Tony(使用正則表達式)
答案：」<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>」.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);
1十一、爲了保證頁面輸出安全，咱們常常須要對一些特殊的字符進行轉義，請寫出一個函數escapeHtml，將< , > & , 」 進行轉義
String.prototype.escapeHTML = function
() {
return
this.replace(/&/g,’&’).replace(/>/g,’>’).replace(/</g,’<’).replace(/」/g,’"’);
};
1十二、foo = foo || bar ,這行代碼是什麼意思？爲何要這樣寫？
foo和bar應該都是bool型變量，||是表示 或 的意思，只要foo或者bar有一個爲真，那麼這個表達式的值就爲真，並把它賦給foo
11三、看下列代碼，將會輸出什麼?
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
結果：undifined，2
var foo=1; 它的做用域是window；可是函數體內有同名局部變量，在執行函數時，第一句會尋找體內變量。
若是想調用該定義，需明確指定做用域，不指定則默認函數體自己。
console.log(window.foo); //1
11四、用js實現隨機選取10~100之間的10個數字，存入一個數組，而且排序
function sortNumber(a,b){
return a-b;//升序
//return b-a;//降序
}
//js實現隨機選取10–100之間的10個數字，存入一個數組，並排序
var iArray =[];
function getRandom(iStart,iEnd){
var iChoice = iStart-iEnd+1;
return Math.abs(Math.floor(Math.random()*iChoice))+iStart;
}
for(var i=0;i<10;i++){
iArray.push(getRandom(10,100))
}
iArray.sort(sortNumber);
alert(iArray);
11五、寫一個function 清除字符串先後的空格（兼容全部瀏覽器）
第一種：循環替換
//供使用者調用
function trim(s){
return trimRight(trimLeft(s));
}
//去掉左邊的空白
function trimLeft(s){
if(s == null) {
return 「」;
}
var whitespace = new String(」 \t\n\r」);
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}
//去掉右邊的空白 www.2cto.com
function trimRight(s){
if(s == null) return 「」;
var whitespace = new String(」 \t\n\r」);
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length – 1;
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){
i–;
}
str = str.substring(0, i+1);
}
return str;
}
第二種：正則替換
<SCRIPT LANGUAGE=」JavaScript」>
<!–
String.prototype.Trim = function()
{
return this.replace(/(^\s*)|(\s*$)/g, 「」);
}
String.prototype.LTrim = function()
{
return this.replace(/(^\s*)/g, 「」);
}
String.prototype.RTrim = function()
{
return this.replace(/(\s*$)/g, 「」);
}
//–>
</SCRIPT>
//去左空格;
function ltrim(s){
return s.replace(/(^\s*)/g, 「」);
}
//去右空格;
function rtrim(s){
return s.replace(/(\s*$)/g, 「」);
}
//去左右空格;
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g, 「」);
}
第三種：使用jquery
$().trim();
jquery的內部實現爲：
function trim(str){
return str.replace(/^(\s|\u00A0)+/,」).replace(/(\s|\u00A0)+$/,」);
}
第四種：使用motools
function trim(str){
return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, 」);
}
第五種：剪裁字符串方式
function trim(str){
str = str.replace(/^(\s|\u00A0)+/,」);
for(var i=str.length-1; i>=0; i–){
if(/\S/.test(str.charAt(i))){
str = str.substring(0, i+1);
break;
}
}
return str;
}
//———————————————————-
// 去掉字符串先後的空格
// 返回值：
// 去除空格後的字符串
//———————————————————-
function trim(param) {
if ((vRet = param) == 」) { return vRet; }
while (true) {
if (vRet.indexOf (‘ ‘) == 0) {
vRet = vRet.substring(1, parseInt(vRet.length));
} else if ((parseInt(vRet.length) != 0) && (vRet.lastIndexOf (‘ ‘) == parseInt(vRet.length) – 1)) {
vRet = vRet.substring(0, parseInt(vRet.length) – 1);
} else {
return vRet;
}
}
}
一、javascript 的 typeof 返回哪些數據類型
object
number
function
boolean
undefined
string
1
2
3
4
5
6
二、例舉 3 種強制類型轉換和 2 種隱式類型轉換?
強制（parseInt(),parseFloat(),Number()）
隱式（==）
1==」1」//true
null==undefined//true
1
2
3
4
三、split()和 join() 的區別
前者是切割成數組的形式，
後者是將數組轉換成字符串
1
2
四、數組方法 pop() push() unshift() shift()
Push()尾部添加
pop()尾部刪除
Unshift()頭部添加
shift()頭部刪除
1
2
3
4
五、事件綁定和普通事件有什麼區別
傳統事件綁定和符合 W3C 標準的事件綁定有什麼區別？
div1.οnclick=function(){}; <button onmouseover=」」></button>
1
一、若是說給同一個元素綁定了兩次或者屢次相同類型的事件，那麼後面的綁定會覆蓋前面 的綁定 ；
二、不支持 DOM 事件流 事件捕獲階段目標元素階段=>事件冒泡階段
addEventListener
一、 若是說給同一個元素綁定了兩次或者屢次相同類型的事件，全部的綁定將會依次觸發
二、 支持 DOM 事件流
三、 進行事件綁定傳參不須要 on 前綴 addEventListener(「click」,function(){},true);//此時的事件就是在事件冒泡階段執行
ie9 開始，ie11edge：addEventListener
ie9 之前：attachEvent/detachEvent
一、 進行事件類型傳參須要帶上 on 前綴
二、 這種方式只支持事件冒泡，不支持事件捕獲 事件綁定是指把事件註冊到具體的元素之上，普通事件指的是能夠用來註冊的事件
六、IE 和 DOM 事件流的區別
1.執行順序不同、
2.參數不同
3.事件加不加 on
4.this 指向問題
IE9 之前：attachEvent(「onclick」)、detachEvent(「onclick」)
IE9 開始跟 DOM 事件流是同樣的，都是 addEventListener
1
2
3
4
5
6
七、IE 和標準下有哪些兼容性的寫法
var ev=ev||window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target
1
2
3
八、call 和 apply 的區別
call 和 apply 相同點：
都是爲了用一個本不屬於一個對象的方法，讓這個對象去執行
1
2
toString.call([],1,2,3)
toString.apply([],[1,2,3])
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
1
2
3
4
九、b 繼承 a 的方法
考點：繼承的多種方式
js繼承有5種實現方式：
一、繼承第一種方式：對象冒充
function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
//經過如下3行實現將Parent的屬性和方法追加到Child中，從而實現繼承
//第一步：this.method是做爲一個臨時的屬性，而且指向Parent所指向的對象，
//第二步：執行this.method方法，即執行Parent所指向的對象函數
//第三步：銷燬this.method屬性，即此時Child就已經擁有了Parent的全部屬性和方法
this.method = Parent;
this.method(username);//最關鍵的一行
delete this.method;
this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello(); //zhangsan
child.hello(); //lisi
child.world(); //123456
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
二、繼承第二種方式：call()方法方式
call方法是Function類中的方法
call方法的第一個參數的值賦值給類(即方法)中出現的this
call方法的第二個參數開始依次賦值給類(即方法)所接受的參數
function test(str){
alert(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
// 此時，第一個參數值object傳遞給了test類(即方法)中出現的this，而第二個參數"langsin"則賦值給了test類(即方法)的str
test.call(object,"langsin"); //zhangsan langsin
function Parent(username){
this.username = username;
this.hello = function(){
document.write(this.username + "<br>");
}
}
function Child(username,password){
Parent.call(this,username);
this.password = password;
this.world = function(){
document.write(this.password+ "<br>");
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello(); //zhangsan
child.hello(); //lisi
child.world(); //123456
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
三、繼承的第三種方式：apply()方法方式
apply方法接受2個參數，
A、第一個參數與call方法的第一個參數同樣，即賦值給類(即方法)中出現的this
B、第二個參數爲數組類型，這個數組中的每一個元素依次賦值給類(即方法)所接受的參數
function Parent(username){
this.username = username;
this.hello = function(){
alert(this.username);
}
}
function Child(username,password){
Parent.apply(this,new Array(username));
this.password = password;
this.world = function(){
alert(this.password);
}
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello(); //zhangsan
child.hello(); //lisi
child.world(); //123456
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
四、繼承的第四種方式：原型鏈方式
即子類經過prototype將全部在父類中經過prototype追加的屬性和方法都追加到Child，從而實現了繼承
function Person(){
}
Person.prototype.hello = "hello";
Person.prototype.sayHello = function(){
alert(this.hello);
}
function Child(){
}
Child.prototype = new Person();//這行的做用是：將Parent中將全部經過prototype追加的屬性和方法都追加到Child，從而實現了繼承
Child.prototype.world = "world";
Child.prototype.sayWorld = function(){
alert(this.world);
}
var c = new Child();
c.sayHello();
c.sayWorld();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
五、繼承的第五種方式：混合方式
混合了call方式、原型鏈方式
function Parent(hello){
this.hello = hello;
}
Parent.prototype.sayHello = function(){
alert(this.hello);
}
function Child(hello,world){
Parent.call(this,hello);//將父類的屬性繼承過來
this.world = world;//新增一些屬性
}
Child.prototype = new Parent();//將父類的方法繼承過來
Child.prototype.sayWorld = function(){//新增一些方法
alert(this.world);
}
var c = new Child("zhangsan","lisi");
c.sayHello();
c.sayWorld();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
十、JavaScript this 指針、閉包、做用域
this：指向調用上下文
閉包：內層做用域能夠訪問外層做用域的變量
做用域：定義一個函數就開闢了一個局部做用域，整個 js 執行環境有一個全局做用域
1
2
3
十一、事件委託是什麼
符合 W3C 標準的事件綁定 addEventLisntener/attachEvent
利用事件冒泡的原理，讓本身自己要觸發的事件，讓他的父元素代替執行！
十二、閉包是什麼，有什麼特性，對頁面有什麼影響
閉包就是可以讀取其餘函數內部變量的函數。
閉包的缺點：濫用閉包函數會形成內存泄露，由於閉包中引用到的包裹函數中定義的變量
永遠不會被釋放，因此咱們應該在必要的時候，及時釋放這個閉包函數。
弄清楚閉包的概念及運行機制很是重要，詳見博客（）
1三、如何阻止事件冒泡和默認事件
阻止事件冒泡
e. stopPropagation();//標準瀏覽器
event.canceBubble=true;//ie9 以前
1
2
阻止默認事件：
爲了避免讓 a 點擊以後跳轉，咱們就要給他的點擊事件進行阻止
return false
e.preventDefault();
1
2
1四、添加 刪除 替換 插入到某個接點的方法
obj.appendChild() //添加
obj.insertBefore() //插入。原生的 js 中不提供 insertAfter();
obj.replaceChild()//替換
obj.removeChild()//刪除
1
2
3
4
1五、javascript 的本地對象，內置對象和宿主對象
本地對象
Object、Function、Array、String、Number、Date、RegExp、Boolean、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError等能夠 用new 實例化的對象
由此得出，JS的本地對象就是ECMA-262中定義的類（引用類型）
內置對象
ECMA-262把內置對象定義爲：由ECMAScript提供實現的、獨立於宿主環境的全部對象，在ECMAScript程序開始執行時出現。
這意味着內置對象都是已經實例化好的，不須要咱們再進行實例化了，這裏咱們首先會想到的就是Math對象。
ECMA-262定義的內置對象只有兩個：Global和Math。（本地對象和內置對象都是獨立於宿主對象，根據定義能夠看出來內置對象也是本地對象，在JS中全部的內置對象都是本地對象）。
Math對象是咱們常常用到的，可是Global就比較少見了。其實咱們常常用到Global對象，只是沒有用Global這個名字。
Global對象是一個比較特殊的對象，它是一個全局對象，在程序中只有一個，它的存在伴隨着整個程序的生命週期，全局對象不能經過名字來訪問，可是它有一個window屬性，這個屬性指向它自己。
你們也要清楚，在ECMAScript中不存在獨立的函數，全部的函數都應該是某個對象的方法。相似於isNaN()、parseInt()、parseFloat()等方法都是Global對象的方法。
宿主對象
宿主對象：由ECMAScript實現的宿主環境提供的對象。
可能這樣不是很好理解，上面已經說過了宿主環境包括Web瀏覽器，因此咱們能夠這樣理解，瀏覽器提供的對象都是宿主對象。
也能夠這樣理解，由於本地對象是非宿主環境的對象，那麼非本地對象就是宿主對象，即全部的BOM對象和DOM對象都是宿主對象。
那麼還有一種對象，那就是咱們本身定義的對象，也是宿主對象。
最簡單的理解：ECMAScript官方未定義的對象都屬於宿主對象。
如瀏覽器自帶的 document,window 等
總結
官方的定義太繞口，還很差理解。說的簡單點：
本地對象就是ECMAScript中定義好的對象，如String、Date等，
內置對象是本地對象中比較特殊的一種，它不用實例化，包括Global和Math，
宿主對象就是BOM、DOM和本身定義的對象。
1六、document load 和 document ready 的區別
Document.onload 是在結構和樣式加載完就執行 js
window.onload：不只僅要在結構和樣式加載完，還要執行完全部的樣式、圖片這些資源文 件，所有加載完纔會觸發 window.onload 事件
Document.ready 原生中沒有這個方法，jquery 中有 $(document).ready(function)
1七、」==」和「===」的不一樣
前者會自動轉換類型
後者不會
1==」1」
null==undefined
===先判斷左右兩邊的數據類型，若是數據類型不一致，直接返回 false
以後纔會進行兩邊值的判斷
1八、JavaScript的同源策略
詳細解答請點擊連接進入個人另外一篇博客查看（JavaScript的同源策略詳解）
1九、編寫一個數組去重的方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>去除一個數組中重複的元素</title>
</head>
<body>
<script type="text/javascript">
/*
* 方法一：
*/
var arr = [1, 0, 2, 1, 8, 1, 0, 10, 8];
var obj = {};
var temp = [];
for(var i=0; i<arr.length; i++) {
if(!obj[arr[i]]) {
obj[arr[i]] = 1;
temp.push(arr[i]);
}
}
console.log(temp); //1,0,2,8,10
/*
* 方法二：
*/
var arr2= [1, 0, 2, 1, 8, 1, 0, 10, 8, 9, 11];
var arr3 = [];
for(var i=0; i<arr2.length; i++) {
//indexOf()方法從數組的開頭（位 置 0）開始向後查找,返回索引號
//若未找到則返回-1
if((arr3.indexOf(arr2[i])) < 0) {
arr3.push(arr2[i]);
}
}
console.log(arr3);//1,0,2,8,10,9,11
/*
* 方法三：
*/
//filter()：對數組中的每一項運行給定函數，返回該函數會返回 true的項組成的數組。
var arr4 = [0, 10, 22, 0, 10, 1, 2, 3, 1];
var arr5 = arr4.filter(function(element, index, arr4) {
return arr4.indexOf(element) == index;
});
console.log(arr5); //0,10,22,1,2,3
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
2一、JavaScript 的數據類型都有什麼？
基本數據類型：String,Boolean,number,undefined,object,Null
引用數據類型：Object(Array,Date,RegExp,Function)
那麼問題來了，如何判斷某變量是否爲數組數據類型？
方法一.判斷其是否具備「數組性質」，如 slice()方法。可本身給該變量定義 slice 方法，
故有時會失效
方法二.obj instanceof Array 在某些 IE 版本中不正確
方法三.方法一二皆有漏洞，在 ECMA Script5 中定義了新方法 Array.isArray(), 保證其兼
容性，最好的方法以下：
toString.call(18);//」[object Number]」
toString.call(「」);//」[object String]」
1
2
解析這種簡單的數據類型直接經過 typeof 就能夠直接判斷
toString.call 經常使用於判斷數組、正則這些複雜類型
toString.call(/[0-9]{10}/)//」[object RegExp]」
if(typeof Array.isArray==="undefined"){
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
1
2
3
4
5
6
7
2二、已知 ID 的 Input 輸入框，但願獲取這個輸入框的輸入值，怎麼作？(不使 用第三方框架)
document.getElementById(「ID」).value
1
2三、但願獲取到頁面中全部的 checkbox 怎麼作？(不使用第三方框架)
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];//返回的全部的 checkbox
var len = domList.length; //緩存到局部變量
while (len--) { //使用 while 的效率會比 for 循環更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
1
2
3
4
5
6
7
8
2四、設置一個已知 ID 的 DIV 的 html 內容爲 xxxx，字體顏色設置爲黑色(不使用 第三方框架)
var dom = document.getElementById(「ID」);
dom.innerHTML = 「xxxx」
dom.style.color = 「#000」
1
2
3
2五、當一個 DOM 節點被點擊時候，咱們但願可以執行一個函數，應該怎麼作？
直接在 DOM 裏綁定事件：<div onclick=」test()」></div>
在 JS 裏經過 onclick 綁定：xxx.onclick = test
經過事件添加進行綁定：addEventListener(xxx, ‘click’, test)
那麼問題來了，Javascript 的事件流模型都有什麼？
「事件冒泡」：事件開始由最具體的元素接受，而後逐級向上傳播
「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體的
「DOM 事件流」：三個階段：事件捕捉，目標階段，事件冒泡
2六、看下列代碼輸出爲什麼？解釋緣由。
var a;
alert(typeof a); // 「undefined」
//alert(b); // 報錯
b=10;
alert(typeof b);//」number」
1
2
3
4
5
解釋：Undefined 是一個只有一個值的數據類型，這個值就是「undefined」，在使用 var
聲明變量但並未對其賦值進行初始化時，這個變量的值就是 undefined。而 b 因爲未聲明將
報錯。注意未申明的變量和聲明瞭未賦值的是不同的。
undefined 會在如下三種狀況下產生：
一、 一個變量定義了卻沒有被賦值
二、 想要獲取一個對象上不存在的屬性或者方法:
三、 一個數組中沒有被賦值的元素
注意區分 undefined 跟 not defnied(語法錯誤)是不同的
2七、看下列代碼,輸出什麼？解釋緣由。
var a = null;
alert(typeof a); //object
1
2
解釋：null 是一個只有一個值的數據類型，這個值就是 null。表示一個空指針對象，因此
用 typeof 檢測會返回」object」。
2八、看下列代碼,輸出什麼？解釋緣由。
var undefined;//此時 undefined 這個變量的值是 undefined
undefined == null; // true
1 == true; // true
1
2
3
此時會把布爾類型的值轉換爲數字類型
true=1 false=0
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
1
2
3
4
5
6
7
undefined 與 null 相等，但不恆等（===）
一個是 number 一個是 string 時，會嘗試將 string 轉換爲 number
嘗試將 boolean 轉換爲 number，0 或 1
嘗試將 Object 轉換成 number 或 string，取決於另一個對比量的類型
因此，對於 0、空字符串的判斷，建議使用 「===」 。「===」會先判斷兩邊的值類
型，類型不匹配時爲 false。
那麼問題來了，看下面的代碼，輸出什麼，foo 的值爲何？
var foo = "11"+2-"1";
console.log(foo);//111
console.log(typeof foo);
1
2
3
執行完後 foo 的值爲 111，foo 的類型爲 number。
2九、看代碼給答案。
var a = new Object();
a.value = 1;
b = a; //{value:1}
b.value = 2;
alert(a.value);//2
1
2
3
4
5
答案：2（考察引用數據類型細節）
30 、 已 知 數 組 var stringArray = [「This」, 「is」, 「Baidu」, 「Campus」]，Alert 出」This is Baidu Campus」。
答案：
alert(stringArray.join(「 」))
1
3一、已知有字符串 foo=」get-element-by-id」,寫一個 function 將其轉化成駝峯表示法」：getElementById」。
function combo(msg){
var arr=msg.split("-");//[get,element,by,id]
for(var i=1;i<arr.length;i++){
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);//Element
}
msg=arr.join("");//msg=」 getElementById」
return msg;
}
1
2
3
4
5
6
7
8
(考察基礎 API)
3二、輸出今天的日期，以 YYYY-MM-DD 的方式，好比今天是 2014 年 9 月 26 日， 則輸出 2014-09-26
var d = new Date();
// 獲取年，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);
1
2
3
4
5
6
7
8
9
10
11
3三、使用正則表達式替換字符串
將字符串」<tr><td>{$id}</td><td>{$name}</td></tr>」中的{$id}替換 成 10，{$name}替換成 Tony （使用正則表達式）
答案：
"<tr><td>{$id}</td><td>{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');
1
3四、爲了保證頁面輸出安全，咱們常常須要對一些特殊的字符進行轉義，請寫 一個函數 escapeHtml，將<, >, &, \進行轉義
function escapeHtml(str) {
//[<>」&]:中括號中字符只要其中的一個出現就表明知足條件
//給 replace 第二個參數傳遞一個回調函數，回調函數中參數就是匹配結果，若是匹配不到就是null
return str.replace(/[<>"&]/g, function(match) {
switch (match) {
case "<":
return "<";
case ">":
return ">";
case "&":
return "&";
case '\"':
return """;
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
3五、foo=foo||bar ，這行代碼是什麼意思？爲何要這樣寫？
這種寫法稱之爲短路表達式
意思爲：if(!foo) foo = bar; //若是 foo 存在，值不變，不然把 bar 的值賦給 foo。
短路表達式：做爲」&&」和」||」操做符的操做數表達式，這些表達式在進行求值時，只要
最終的結果已經能夠肯定是真或假，求值過程便了結止，這稱之爲短路求值。
注意 if 條件的真假斷定，記住如下是 false 的狀況：
空字符串、false、undefined、null、0
3六、看下列代碼，將會輸出什麼?(變量聲明提高)
var foo = 1;
function(){
console.log(foo); //undefined
var foo = 2;
console.log(foo); //2
}
1
2
3
4
5
6
答案：輸出 undefined 和 2。上面代碼至關於：
var foo = 1;
function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
}
1
2
3
4
5
6
7
函數聲明與變量聲明會被 JavaScript 引擎隱式地提高到當前做用域的頂部，可是隻提高名
稱不會提高賦值部分。
3七、用 js 實現隨機選取 10–100 之間的 10 個數字，存入一個數組，並排序。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 隨機選取[10, 100]內的10個數
*並排序
* Math.floor(num); 取得num整數部分
* Math.ceil(num); 取得大於等於num的最小整數
* Math.round(num); num四捨五入後的整數
*/
var pushArray = []; //存放取出的數
//產生一個10到100之間的數
function getRandom(start, end) {
var choice = end - start + 1;
return Math.floor(Math.random() * choice + start);
}
//Math.random()就是獲取 0-1 之間的隨機數（永遠獲取不到 1）
for(var i=0; i<10; i++) {
var result = getRandom(10, 100);
pushArray.push(result);
}
pushArray.sort();
console.log(pushArray); //12,19,21,28,34,39,44,54,65,86
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
3八、把兩個數組合並，並刪除第二個元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1); //splice() 方法用於插入、刪除或替換數組的元素。
1
2
3
4
splice()方法以下所示：
//splice()方法
/*
* 刪除：能夠刪除任意數量的項，只需指定 2 個參數：要刪除的第一項的位置和要刪除的項數
* 會影響原始數組
*/
var fruits = ["apple", "mango", "banana", "pear"];
var fruit1 = fruits.splice(0, 2);
document.write(fruits + "<br>"); //banana,pear
document.write(fruit1); //返回刪除的項apple,mango
document.write("<br>");
/*
* 插入：能夠向指定位置插入任意數量的項，只需提供 3個參數：
* 起始位置、0（要刪除的項數） 和要插入的項
*/
var fruit2 = ["apple", "mango", "banana", "pear"];
var fruit3 = fruit2.splice(2, 0, "strawberry", "lalala");
document.write(fruit2 + "<br>");//apple,mango,strawberry,lalala,banana,pear
document.write(fruit3 + "<br>");//未刪除項，因此返回空數組
/*
* 替換：能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，
* 只需指定 3 個參數：起 始位置、要刪除的項數和要插入的任意數量的項。
* 插入的項數沒必要與刪除的項數相等。
*/
var fruit4 = ["apple", "mango", "banana", "pear"];
var fruit5 = fruit4.splice(1, 2, "aaa", "bbb", "ccc");
document.write("<br>" + fruit4 + "<br>");//apple,aaa,bbb,ccc,pear
document.write(fruit5); // 返回刪除的項mango,banana
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
3九、怎樣添加、移除、移動、複製、建立和查找節點
詳細講解請見本人另外一篇博客（（徹底詳解）JavaScript 添加、複製、移除、移動、建立和查找節點）】
40、有這樣一個 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 url='http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e';
function nameAndValue(url){
url=url.split('?')[1];
var group=url.split('&');
var res={};
for(var i=0;i<group.length;i++){
start=group[i].indexOf('=');
if(start!=-1){
name=group[i].slice(0,start);
value=group[i].slice(start+1,group[i].length);
res[name]=value;
}else{
res[group[i]]=undefined;
}
}
for(var key in res) {
document.write(key + ":" + " " + res[key]);
document.write("<br>");
}
}
nameAndValue(url);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
結果：
a: 1
b: 2
c:
d: xxx
e: undefined
4一、正則表達式構造函數 var reg=new RegExp(「xxx」)與正則表達字面量 var reg=//有什麼不一樣？匹配郵箱的正則表達式？
答案：當使用 RegExp()構造函數的時候，不只須要轉義引號（即\」表示」），而且還須要
雙反斜槓（即\表示一個\）。
使用正則表達字面量的效率更高。
郵箱的正則匹配：
var regMail = /^[A-Za-z\d]+[A-Za-z\d\-_\.]*@([A-Za-z\d]+[A-Za-z\d\-]*\.)+[A-Za-z]{2,4}$/;
1
24.看下面代碼，給出輸出結果。
for(var i=1;i<=3;i++){
setTimeout(function(){
console.log(i);
}, 0);
};
1
2
3
4
5
答案：4 4 4。
緣由： Javascript 事件處理器在線程空閒以前不會運行。
追問，如何讓上述代碼輸出 1 2 3？
for(var i=1;i<=3;i++){
setTimeout((function(a){ //改爲當即執行函數
console.log(a);
})(i), 0);
};
1
2
3
4
5
1 //輸出
2
3
4二、寫一個 function，清除字符串先後的空格。（兼容全部瀏覽器）
使用自帶接口 trim()，考慮兼容性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--寫一個 function，清除字符串先後的空格。（兼容全部瀏覽器）-->
<script type="text/javascript">
if(!String.prototype.trim) {
String.prototype.trim = function() {
//\s 匹配空白字符：回車、換行、製表符 tab 空格
return this.replace(/^\s+/, "").replace(/\s+$/, "");
}
}
//測試
var str = " \t\n test string ";
var newStr = str.trim();
alert(newStr == "test string"); //true
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
4三、Javascript 中 callee 和 caller 的做用？
arguments.callee：得到當前函數的引用
caller 是返回一個對函數的引用，該函數調用了當前函數；
callee 是返回正在被執行的 function 函數，也就是所指定的 function 對象的正文。
那麼問題來了？若是一對兔子每個月生一對兔子；一對新生兔，從第二個月起就開始生兔子；
假定每對兔子都是一雌一雄，試問一對兔子，第 n 個月能繁殖成多少對兔子？（使用 callee
完成）
var result=[];
function fn(n){ //典型的斐波那契數列
if(n==1){
return 1;
}else if(n==2){
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];
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
4四、 Javascript 中, 如下哪條語句必定會產生運行錯誤（BC）
A、 var _變量=NaN;
B、var 0bj = [];
C、var obj = //;
D、var obj = {};
1
2
3
4
4五、如下兩個變量 a 和 b，a+b 的哪一個結果是 NaN？ 答案( C )
A、var a=undefind; b=NaN //拼寫
B、var a=‘123’; b=NaN //字符串
C、var a =undefined , b =NaN
D、var a=NaN , b='undefined'//」Nan」
1
2
3
4
4六、var a=10; b=20; c=4; ++b+c+a++ 如下哪一個結果是正確的？答案( B )
A、 34 B、35 C、36 D、37
4七、下面的 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=」";
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
4八、要將頁面的狀態欄中顯示「已經選中該文本框」，下列 JavaScript 語句正確的是（ A ）
A. window.status=」已經選中該文本框」
B. document.status=」已經選中該文本框」
C. window.screen=」已經選中該文本框」
D. document.screen=」已經選中該文本框」
1
2
3
4
4九、如下哪條語句會產生運行錯誤：（A）正確答案：A
A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;
1
2
3
4
5
50、如下哪一個單詞不屬於 javascript 保留字：（B）
A.with
B.parent
C.class
D.void
1
2
3
4
5一、請選擇結果爲真的表達式：（C）
A.null instanceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN
1
2
3
4
5二、Javascript 中, 若是已知 HTML 頁面中的某標籤對象的 id=」username」， 用_document.getElementById(‘username’) _方法得到該標籤對象。
5三、typeof 運算符返回值中有一個跟 javascript 數據類型不一致，它是 」function」_。
typeof Number
typeof Object
1
2
5四、定義了一個變量，但沒有爲該變量賦值，若是 alert 該變量，javascript 彈出的對話框中顯示___undefined 。
5五、分析代碼，得出正確的結果。
var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e);
1
2
3
4
5
彈出提示對話框：77
5七、寫出程序運行結果
for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
結果：10
1
2
3
4
5
5八、閱讀如下代碼，請分析出結果：
var arr = new Array(1 ,3 ,5);
arr[4]='z';//[1,3,5,undefined,’z’]
arr2 = arr.reverse();//arr2=[’z’,undefined,5,3,1];
//arr=[’z’,undefined,5,3,1]
arr3 = arr.concat(arr2);
alert(arr3);
1
2
3
4
5
6
彈出提示對話框：z,,5,3,1,z,,5,3,1 reverse（）方法顛倒數組中元素的位置，並返回該數組的引用。
5九、補充按鈕事件的函數，確認用戶是否退出當前頁面，確認以後關閉窗口；
<html>
<head>
<script type=」text/javascript」 >
function closeWin(){
//在此處添加代碼
if(confirm(「肯定要退出嗎？」)){
window.close();
}
}
</script>
</head>
<body>
<input type=」button」 value=」關閉窗口」 onclick=」closeWin()」/>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
60、寫出簡單描述 html 標籤（不帶屬性的開始標籤和結束標籤）的正則表達式， 並將如下字符串中的 html 標籤去除掉
var str = 「<div>這裏是 div<p>裏面的段落</p></div>」;
1
<script type=」text/javascript」>
var reg = /<\/?\w+\/?>/gi; // x? 匹配問號前面的內容出現 0 或 1 次。
var str = 「<div>這裏是 div<p>裏面的段落</p></div>」;
alert(str.replace(reg,""));
</script>
1
2
3
4
5
6一、完成 foo()函數的內容，要求可以彈出對話框提示當前選中的是第幾個單選框。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" onsubmit="return foo()">
<input type="radio" name="radioBox" />蘋果<br />
<input type="radio" name="radioBox" />蘋果<br />
<input type="radio" name="radioBox" />蘋果<br />
<input type="radio" name="radioBox" />蘋果<br />
<input type="radio" name="radioBox" />蘋果<br />
<input type="radio" name="radioBox" />蘋果<br />
<input type="submit" />
</form>
<script type="text/javascript">
function foo() {
var getInput = document.getElementsByName("radioBox");
for(var i=0; i<getInput.length; i++) {
if(getInput[i].checked) {
alert("您選中了第"+(i+1)+"個單選框");
return;
}
}
alert("沒有選中任何選項");
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
6二、完成函數 showImg()，要求可以動態根據下拉列表的選項變化，更新圖片的顯示
注：圖片路徑和名稱需根據本身實際狀況設置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="page">
<div id="selector">
<div class="sel">
<select onchange="show(this)">
<option value="../img/banner/banner1" class="opt">科技改變將來</option>
<option value="../img/banner/banner2" class="opt">高端品質</option>
<option value="../img/banner/banner3" class="opt">智能產品</option>
<option value="../img/banner/banner4" class="opt">高科技</option>
</select>
</div>
<div class="img">
<img id="imgage1" src="../img/banner/banner1.jpg" width="600" />
</div>
</div>
</div>
<script type="text/javascript">
function show(img) {
var str = img.value;
// alert(str);
document.getElementById("imgage1").src = str + ".jpg";
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
6三、截取字符串 abcdefg 的 efg
alert('abcdefg'.substring(4));
1
6四、列舉瀏覽器對象模型 BOM 裏經常使用的至少 4 個對象，並列舉 window 對象的常 用方法至少 5 個
對象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
6五、簡述列舉文檔對象模型 DOM 裏 document 的經常使用的查找訪問節點的方法並作 簡單說明
Document.getElementById 根據元素 id 查找元素
Document.getElementByName 根據元素 name 查找元素
Document.getElementTagName 根據指定的元素名查找元素
1
2
3
6六、但願獲取到頁面中全部的 checkbox 怎麼作？(不使用第三方框架)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>獲取全部checkbox</title>
</head>
<body>
<div id="page">
<form action="" method="get">
姓名：<input type="text" class="1"/><br /><br />
性別：<br />
<input type="radio" class="2" name="sex" />男
<input type="radio" class="3" name="sex" />女<br /><br />
年齡：<select name="age">
<option value="kids">0-10</option>
<option value="teenagers">11-20</option>
<option value="adults">21-30</option>
<option value="freeFromConfusion">31-40</option>
<option value="half">41-50</option>
<option value="50_60">51-60</option>
<option value="60_70">61-70</option>
<option value="70_80">71-80</option>
<option value="80_90">81-90</option>
<option value="90_100">91-100</option>
<option value="over_100">>100</option>
</select><br /><br />
愛好：<br />
<input type="checkbox" class="check1" name="like" />閱讀
<input type="checkbox" class="check2" name="like" />登山
<input type="checkbox" class="check3" name="like" />編程
<input type="checkbox" class="check4" name="like" />旅行
<input type="checkbox" class="check5" name="like" />逛街
<br /><br />
<input type="submit" />
</form>
</div>
<script type="text/javascript">
//獲取全部checkbox
var $input = document.getElementsByTagName("input");
var checkList = [];
var len = $input.length;
while(len--) { //使用while比for效率更高
if($input[len].type == "checkbox") {
checkList.push($input[len]);
}
}
// console.log(checkList.length); //5
for(var i=0; i<checkList.length; i++) {
console.log(checkList[i]);
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
6七、JavaScript 的數據類型都有什麼？
基本數據類型：String,Boolean,Number,Undefined,Null
引用數據類型：Object(Array,Date,RegExp,Function)
70、簡述建立函數的幾種方式
第一種（函數聲明）：
functionsum1(num1,num2){
returnnum1+num2;
}
1
2
3
第二種（函數表達式）：
var sum2 = function(num1,num2){ return num1+num2; }
1
匿名函數： function(){}:只能本身執行本身
第三種（函數對象方式）：
var sum3 = newFunction("num1","num2","return num1+num2");
1
7一、Javascript 如何實現繼承？（《JavaScript高級程序設計》）
原型鏈繼承，借用構造函數繼承，組合繼承（原型鏈、構造函數組合），寄生式繼承，寄生組合繼承。
注：《JavaScript高級程序設計》一書上都有對應的講解
7二、Javascript 建立對象的幾種方式？
工廠方式，構造函數方式，原型模式，混合構造函數原型模式，動態原型方式
7三、把 Script 標籤 放在頁面的最底部的 body 封閉以前 和封閉以後有什麼區 別？瀏覽器會如何解析它們？
若是說放在 body 的封閉以前，將會阻塞其餘資源的加載
若是放在 body 封閉以後，不會影響 body 內元素的加載。
7四、iframe 的優缺點？
優勢：
1. 解決加載緩慢的第三方內容問題，如圖標和廣告等的加載問題
2. Security sandbox
3. 並行加載腳本
缺點：
1. iframe 會阻塞主頁面的 Onload 事件
2. 即便內容爲空，加載也須要時間
7五、請你談談 Cookie 的弊端？
缺點：
1.Cookie數量和長度的限制。每一個 domain 最多隻能有 20 條 cookie，每一個 cookie 長度不
能超過 4KB，不然會被截掉。
2.安全性問題。若是 cookie 被人攔截了，那人就能夠取得全部的 session 信息。即便加密
也於事無補，由於攔截者並不須要知道 cookie 的意義，他只要原樣轉發 cookie 就能夠達到
目的了。
3.有些狀態不可能保存在客戶端。例如，爲了防止重複提交表單，咱們須要在服務器端保存
一個計數器。若是咱們把這個計數器保存在客戶端，那麼它起不到任何做用。
7七、js 延遲加載的方式有哪些？
defer 和 async
動態建立 DOM 方式（建立 script，插入到 DOM 中，加載完畢後 callBack）
按需異步載入 js
7八、documen.write 和 innerHTML 的區別？
一、write是DOM方法,向文檔寫入HTML表達式或JavaScript代碼，可列出多個參數，參數被順序添加到文檔中 ；
innerHTML是DOM屬性,設置或返回調用元素開始結束標籤之間的HTML元素。
二、二者均可向頁面輸出內容,innerHTML比document.write更靈活。
當文檔加載時調用document.write直接向頁面輸出內容，文檔加載結束後調用document.write輸出內容會重寫整個頁面。
一般按照兩種的方式使用 write() 方法：一是在使用該方在文檔中輸出 HTML，二是在調用該方法的的窗口以外的窗口、框架中產生新文檔（務必使用close關閉文檔）。
在讀模式下，innerHTML屬性返回與調用元素的全部子節點對應的HTML標記，在寫模式下，innerHTML會根據指定的值建立新的DOM樹替換調用元素原先的全部子節點。
三、二者均可動態包含外部資源如JavaScript文件
經過document.write插入<script>元素會自動執行其中的腳本；
大多數瀏覽器中，經過innerHTML插入<script>元素並不會執行其中的腳本。
7九、哪些操做會形成內存泄漏？
內存泄漏指任何對象在你再也不擁有或須要它以後仍然存在。
垃圾回收器按期掃描對象，並計算引用了每一個對象的其餘對象的數量。若是一個對象的引用
數量爲 0（沒有其餘對象引用過該對象），或對該對象的惟一引用是循環的，那麼該對象的
內存便可回收。
setTimeout 的第一個參數使用字符串而非函數的話，會引起內存泄漏。
閉包
控制檯日誌
循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環）
80、寫一個獲取非行間樣式的函數
//獲取一個非行間的函數
function getStyle(obj,attr,value) {
if (!value) {
if (obj.currentStyle) {
return obj.currentStyle[attr]
}else {
obj.getComputedStyle(attr,false)
}
}else {
obj.style[attr] = value
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
8一、解釋 jsonp 的原理，以及爲何不是真正的 ajax
動態建立 script 標籤，回調函數
Ajax 是頁面無刷新請求數據操做
8二、字符串反轉，如將 ‘12345678’ 變成 ‘87654321’
//大牛作法；
//思路：先將字符串轉換爲數組 split()，利用數組的反序函數 reverse()顛倒數組，再利用 join()
爲字符串
var str = '12345678';
str = str.split('').reverse().join('');
1
2
8三、將數字 12345678 轉化成 RMB 形式 如： 12,345,678
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var num = 12345678;
//轉化爲字符串
num = num.toString();
// console.log(num); //"12345678"
//封裝字符串反轉方法
function rever(str) {
//先分割爲數組再反轉再合併爲字符串
return str = str.split("").reverse().join("");
}
num = rever(num);
// console.log(num); //87654321
var result = ""; //定義一個空字符串，接收最終結果
for(var i=1; i<=num.length; i++) {
result += num[i-1]; //把字符串的每一項從新放到一個新的字符串裏
if(i%3 == 0 && i!=num.length) { //字符串的索引是3 的倍數而且不是最後一項的時候添加
result += ",";
}
}
// console.log(result); //876, 543, 21
//最後調用上面定義的rever()方法反轉回來
result = rever(result);
console.log(result); //12,345,678
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
8四、生成 5 個不一樣的隨機數；
//思路：5 個不一樣的數，每生成一次就和前面的全部數字相比較，若是有相同的，則放棄當前生成的數字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>生成5個不一樣的隨機數</title>
</head>
<body>
<script type="text/javascript">
//思路：5 個不一樣的數，每生成一次就和前面的全部數字相比較，
//若是有相同的，則放棄當前生成的數字,從新生成一個數
var num = [];
for(var i=0; i<5; i++) {
num[i] = Math.floor(Math.random()*(30-15+1) + 15); //此處生成[15,30]的隨機數
// console.log(num[i]);
for(var j=0; j<i; j++) {
if(num[i] == num[j]) {
i--;
}
}
console.log(num);//此處可看見整個數組的生成過程
}
console.log(num);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
8五、階乘函數；9*8*7*6*5…*1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/*
* 在這個重寫後的 factorial()函數的函數體內，沒有再引用函數名 factorial。
* 這樣，不管引用 函數時使用的是什麼名字，均可以保證正常完成遞歸調用。
*/
function factorial(num) {
if(num <= 1) {
return 1;
}else {
return num * arguments.callee(num - 1);
}
}
var newName = factorial;
var result1 = newName(9);
alert(result1); //362880
factorial=function(num) {
return 0;
}
var result2 = factorial(9);
alert(result2); //0
var result3 = newName(9);
alert(result3); //362880
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
8六、window.location.search 返回的是什麼
8七、阻止冒泡函數
還不造「冒泡行爲」和「默認行爲」的道友，請移步至詳解javascript如何阻止冒泡事件及阻止默認事件
阻止冒泡函數
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);
}
1
2
3
4
5
6
7
8
9
10
11
12
阻止默認行爲函數
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}
1
2
3
4
5
6
7
8
阻止事件冒泡和默認行爲實例，可親自逐步調試查看效果，加深印象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>阻止事件冒泡和默認行爲</title>
</head>
<style type="text/css">
.one {
width: 200px;
height: 200px;
background: navajowhite;
}
.two {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.three {
cursor: pointer;
/*padding: 10px;*/
background: red;
}
.defauleAction {
width: 100px;
height: 100px;
border: 1px solid red;
line-height: 100px;
}
.four {
width: 200px;
height: 200px;
background: navajowhite;
margin-top: 20px;
}
.five {
height: 40px;
border: 1px solid red;
background: white;
line-height: 40px;
}
.six {
cursor: pointer;
/*padding: 10px;*/
background: red;
</style>
<body>
<div class="one">我是最外層
<p class="two">我是第二層
<span class="three">我是最裏層</span>
</p>
</div>
<!--阻止連接自動跳轉的默認行爲-->
<div class="defaultAction">
<a href="https://blog.csdn.net/qq_36595013">個人博客主頁</a>
</div>
<!--同時阻止冒泡事件和默認行爲-->
<div class="four">我是最外層
<p class="five">我是第二層
<span class="six"><a href="https://blog.csdn.net/qq_36595013">我是最裏層</a></span>
</p>
</div>
</body>
<script type="text/javascript" src="../jQuery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$(".one").click(function(e) {
alert($(this).text());
});
$(".two").click(function(e) {
preventPropagation(e);
alert($(this).text());
});
$(".three").click(function(e) {
/*1、先在最裏層添加進阻止事件冒泡函數，再查看效果
*發現點擊中間層的時候仍是會冒泡到最外層
* 而後再中間層加入阻止函數，再查看效果
*/
preventPropagation(e);
alert($(this).text());
});
//阻止默認單擊連接跳轉行爲
$(".defaultAction>a").click(function(e) {
preventDefaultAction(e);
alert("連接不跳轉了吧！");
});
//阻止事件冒泡函數
function preventPropagation(e) {
e = e||window.event;
if(e.stopPropagation) { //W3C方法
e.stopPropagation();
}else { //IE方法
e.cancelBubble = true;
}
}
//阻止默認行爲函數
function preventDefaultAction(e) {
e = e || window.event;
if(e.preventDefault) { //W3C方法
e.preventDefault();
}else { //IE方法
e.returnValue = false;
}
}
//同時阻止默認行爲和事件冒泡
$(".six").click(function() {
alert("點我以後既不向上冒泡又不跳轉到默認的連接");
//要想同時阻止默認行爲和事件冒泡，只須要返回return false就能夠了
return false;
});
$(".five").click(function(e) {
preventPropagation(e);
alert("我是中間層");
});
$(".four").click(function() {
alert("我是最外層");
});
});
</script>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
8八、看題作答：
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）輸出：1,3,3
console.log(f1()); //（3）輸出 1,3，undefined
1
2
3
4
5
6
7
8
9
分析：
這道題讓我從新認識了對象和函數，首先看代碼（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 。
8九、下面輸出多少？
var o1 = new Object();
var o2 = o1;
o2.name = "CSSer";
console.log(o1.name); //CSSer
1
2
3
4
若是不看答案，你回答真確了的話，那麼說明你對 javascript 的數據類型瞭解的仍是比較清楚了。js 中有兩種數據類型，分別是：基本數據類型和引用數據類型(object Array）。對於保存基本類型值的變量，變量是按值訪問的，由於咱們操做的是變量實際保存的值。
對於保存引用類型值的變量，變量是按引用訪問的，咱們操做的是變量值所引用（指向）的對象。
答案就清楚了： CSSer;
90、再來一個
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); //"http://www.csser.com/"
1
2
3
4
5
6
7
8
若是 CSSer 參數是按引用傳遞的，那麼結果應該是」http://www.popcg.com/「，但實際結果卻還是」http://www.csser.com/「。
事實是這樣的：在函數內部修改了引用類型值的參數，該參數值的原始引用保持不變。（此處能夠去讀一讀《JavaScript高級程序設計一書》）
咱們能夠把參數想象成局部變量，當參數被重寫時，這個變量引用的就是一個局部變量，局部變量的生存期僅限於函數執行的過程當中，函數執行完畢，局部變量即被銷燬以釋放內存。
（補充：內部環境能夠經過做用域鏈訪問全部的外部環境中的變量對象，但外部環境沒法訪問內部環境。每一個環境均可以向上搜索做用域鏈，以查詢變量和函數名，反之向下則不能。）
9一、輸出多少？
var a = 6;
setTimeout(function () {
var a = 666;//因爲變量 a 是一個局部變量
alert(a); // 輸出 666，
}, 1000);
a = 66;
1
2
3
4
5
6
由於 var a = 666;定義了局部變量 a，而且賦值爲 666，根據變量做用域鏈，
全局變量處在做用域末端，優先訪問了局部變量，從而覆蓋了全局變量 。
var a = 6;
setTimeout(function () {
//變量聲明提早
alert(a); // 輸出 undefined
var a = 666;
}, 1000);
a = 66;
1
2
3
4
5
6
7
由於 var a = 666;定義了局部變量 a，一樣覆蓋了全局變量，可是在 alert(a);以前
a 並未賦值，因此輸出 undefined。
9二、JS 的繼承性
window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
alert(this.color);
}
1
2
3
4
5
考點：
一、this 的指向
二、call 的用法
sayColor(); //red
sayColor.call(this); //red this 指向的是 window 對象
sayColor.call(window); //red
sayColor.call(o); //blue
1
2
3
4
9三、精度問題: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
1
2
3
4
5
6
7
9四、、加減運算
alert('5'+3); //53 string
alert('5'+'3'); //53 string
alert('5'-3); //2 number
alert('5'-'3'); //2 number
1
2
3
4
9五、爲何不能定義 1px 左右的 div 容器？
IE6 下這個問題是由於默認的行高形成的，解決的方法也有不少，例如：
overflow:hidden | zoom:0.08 | line-height:1px
1
9五、結果是什麼？
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
1
2
3
4
5
6
7
8
9
10
11
12
13
9六、輸出結果
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
1
2
3
4
5
6
7
8
9
10
11
12
9七、計算字符串字節數：
new function(s){
if(!arguments.length||!s) return null;
var l=0;
for(var i=0;i<s.length;i++){
if(s.charCodeAt(i)>255) l+=2;
else l+=1; //charCodeAt()獲得的是 uniCode碼
} //漢字的 uniCode 碼大於 255bit 就是兩個字節
alert(l);
}("hello world!");
1
2
3
4
5
6
7
8
9
9八、匹配輸入的字符：第一個必須是字母或下劃線開頭，後面就是字母和數字 或者下劃線構成，長度 5-20
/*
* 匹配輸入的字符
* 第一個字符必須是字母或下劃線開頭
* 後面的字符由字母、數字、下劃線組成
* 共5-20個字符
*/
var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/,
str1 = "WangWei",
str2 = "123Wang",
str3 = "_Wei",
str4 = "_wang";
document.write(reg.test(str1) + "<br>");//true
document.write(reg.test(str2) + "<br>");//false
document.write(reg.test(str3) + "<br>");//false 僅4個字符
document.write(reg.test(str4) + "<br>");//true
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
9九、如何在 HTML 中添加事件，幾種方法？
一、標籤之中直接添加 onclick="fun()";
二、JS 添加 Eobj.onclick = method;
三、現代事件 IE9 之前： obj.attachEvent('onclick', method)；
標準瀏覽器: obj.addEventListener('click', method, false);
100、BOM 對象有哪些，列舉 window 對象？
一、window 對象 ，是 JS 的最頂層對象，其餘的 BOM 對象都是 window 對象的
屬性；
二、document 對象，文檔對象；
三、location 對象，瀏覽器當前 URL 信息；
四、navigator 對象，瀏覽器自己信息；
五、screen 對象，客戶端屏幕信息；
六、history 對象，瀏覽器訪問歷史信息
10一、請用代碼實現 outerHTML
//說明：outerHTML 其實就是 innerHTML 再加上自己；
Object.prototype.outerHTML = function(){
var innerCon = this.innerHTML, //得到裏面的內容
outerCon = this.appendChild(innerCon); //添加到裏面
alert(outerCon);
}
1
2
3
4
5
6
演示代碼：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="outer">
hello
</div>
<script>
Object.prototype.outerHTML = function(){
var innerCon = this.innerHTML, //得到裏面的內容
outerCon = this.appendChild(innerCon); //添加到裏面
alert(outerCon);
}
function $(id){
return document.getElementById(id);
}
alert($('outer').innerHTML);
alert($('outer').outerHTML);
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
10二、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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
10三、bind(), live(), delegate()的區別
bind： 綁定事件，對新添加的事件不起做用，方法用於將一個處理程序附加
到每一個匹配元素的事件上並返回 jQuery 對象。
live： 方法將一個事件處理程序附加到與當前選擇器匹配的全部元素（包含
現有的或未來添加的）的指定事件上並返回 jQuery 對象。
delegate： 方法基於一組特定的根元素將處理程序附加到匹配選擇器的全部
元素（現有的或未來的）的一個或多個事件上。
10四、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
1
2
3
4
5
6
7
8
9
105簡述 link 和 import 的區別？
區別 1：link 是 XHTML 標籤，除了加載 CSS 外，還能夠定義 RSS 等其餘事務；@import
屬於 CSS 範疇，只能加載 CSS。
區別 2：link 引用 CSS 時，在頁面載入時同時加載；@import 須要頁面網頁徹底載入
之後加載。
區別 3：link 是 XHTML 標籤，無兼容問題；@import 是在 CSS2.1 提出的，低版本的瀏
覽器不支持。
區別 4：link 支持使用 Javascript 控制 DOM 去改變樣式；而@import 不支持
10六、、已知有字符串 foo=」get-element-by-id」,寫一個 function 將其轉化成駝 峯表示法」getElementById」。
答案：
function combo(msg){
var arr = msg.split("-");
var len = arr.length; //將 arr.length 存儲在一個局部變量能夠提升 for 循環效率
for(var i=1;i<len;i++) {
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
1
2
3
4
5
6
7
8
9
10七、你如何優化本身的代碼？
代碼重用
避免全局變量（命名空間，封閉空間，模塊化 mvc..）
拆分函數避免函數過於臃腫：單一職責原則
適當的註釋，尤爲是一些複雜的業務邏輯或者是計算邏輯，都應該寫出這個業務邏輯的具體過程
內存管理，尤爲是閉包中的變量釋放
變量的命名規範：尤爲是在實際項目中
$div：表明一個jquery對象
dom：表明一個原生的dom對象
但願一個函數是構造函數：函數的首字母都要大寫
變量必定要語義化
10八、請簡要描述web前端性能須要考慮哪方面，你的優化思路是什麼？
//參見雅虎14web優化規則
//0、減小http請求：
//一、小圖弄成大圖（雪碧圖、精靈圖），
//二、合理的設置緩存 localStorage cookie
//三、資源合併、壓縮 html代碼的最小化，壓縮體積：就是減小帶寬
//四、一些小的js文件合併成大的js文件
//五、將外部的js文件置底
10九、、簡述 readyonly 與 disabled 的區別
readonly 只針對 input(text/password)和 textarea 有效，
而 disabled 對於全部的表單元素都有效，
當表單元素在使用了 disabled 後，當咱們將表單以 POST 或 GET 的方式提交的話，這個元素的值不會被傳遞出去，而 readonly 會將該值傳遞出 去
1十、寫出 3 個使用 this 的典型應用
構造函數中使用 this，
原型中使用 this，
對象字面量使用 this
1十一、請儘量詳盡的解釋 ajax 的工做原理
思路：先解釋異步，再解釋 ajax 如何使用 Ajax 的原理
簡單來講經過 XmlHttpRequest 對象來向服務器發送異步請求，從服務器得到數據， 而後用javascript來操做DOM而更新頁面。
這其中最關鍵的一步就是從服務器得到請求數據。 要清楚這個過程和原理，咱們必須對 XMLHttpRequest 有所瞭解。
XMLHttpRequest 是 ajax 的核心機制，它是在 IE5 中首先引入的，是一種支持異步請求的 技術。簡單的說，也就是 javascript 能夠及時向服務器提出請求和處理響應，而不阻塞用戶。 達到無刷新的效果。
1十二、爲何擴展 javascript 內置對象不是好的作法？
由於擴展內置對象會影響整個程序中所使用到的該內置對象的原型屬性
11三、瀏覽器標準模式和怪異模式之間的區別是什麼？
標準模式是指，瀏覽器按 W3C 標準解析執行代碼；
怪異模式則是使用瀏覽器本身的方式解析執行代碼，由於不一樣瀏覽器解析執行的方式不一 樣，因此咱們稱之爲怪異模式。
瀏覽器解析時到底使用標準模式仍是怪異模式，與你網頁中的 DTD 聲明直接相關，DTD 聲 明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式加載網頁 並顯示，忽略 DTD 聲明,將使網頁進入怪異模式
11四、若是設計中使用了非標準的字體，你該如何去實現？
先經過 font-face 定義字體，再引用
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'), url('Sansation_Light.eot'); /* IE9+ */
}
1
2
3
4
5
11五、HTTP 協議中，GET 和 POST 有什麼區別？分別適用什麼場
景 ？
get 傳送的數據長度有限制，post 沒有
get 經過 url 傳遞，在瀏覽器地址欄可見，
post 是在報文中傳遞
適用場景：
post 通常用於表單提交
get 通常用於簡單的數據查詢，嚴格要求不是那麼高的場景
11六、HTTP 狀態消息 200 302 304 403 404 500 分別表示什麼
200：請求已成功，請求所但願的響應頭或數據體將隨此響應返回。
302：請求的資源臨時從不一樣的 URI 響應請求。因爲這樣的重定向是臨時的，客戶端應當 繼續向原有地址發送之後的請求。只有在Cache-Control或Expires中進行了指定的狀況下， 這個響應纔是可緩存的
304：若是客戶端發送了一個帶條件的 GET 請求且該請求已被容許，而文檔的內容（自上 次訪問以來或者根據請求的條件）並無改變，則服務器應當返回這個狀態碼。304 響應禁 止包含消息體，所以始終以消息頭後的第一個空行結尾。
403：服務器已經理解請求，可是拒絕執行它。
404：請求失敗，請求所但願獲得的資源未被在服務器上發現。
500：服務器遇到了一個不曾預料的情況，致使了它沒法完成對請求的處理。通常來講，這 個問題都會在服務器端的源代碼出現錯誤時出現。
11七、 HTTP 協 議 中 ， header 信 息 裏 面 ， 怎 麼 控 制 頁 面 失 效 時 間 （last-modified,cache-control,Expires 分別表明什麼）
11八、請列舉 js 數組類型中的經常使用方法
————————————————
javascript:
JavaScript中如何檢測一個變量是一個String類型？請寫出函數實現
方法一、
function isString(obj){
return typeof(obj) === "string"? true: false;
// returntypeof obj === "string"? true: false;
}
方法二、
function isString(obj){
return obj.constructor === String? true: false;
}
方法3.
function isString(obj){
return Object.prototype.toString.call(obj) === "[object String]"?true:false;
}
如：
var isstring = isString('xiaoming');
console.log(isstring); // true
請用js去除字符串空格？
方法一：使用replace正則匹配的方法
去除全部空格: str = str.replace(/\s*/g,"");
去除兩頭空格: str = str.replace(/^\s*|\s*$/g,"");
去除左空格： str = str.replace( /^\s*/, 「」);
去除右空格： str = str.replace(/(\s*$)/g, "");
str爲要去除空格的字符串，實例以下：
var str = " 23 23 ";
var str2 = str.replace(/\s*/g,"");
console.log(str2); // 2323
方法二：使用str.trim()方法
str.trim()侷限性：沒法去除中間的空格，實例以下：
var str = " xiao ming ";
var str2 = str.trim();
console.log(str2); //xiao ming
同理，str.trimLeft()，str.trimRight()分別用於去除字符串左右空格。
方法三：使用jquery,$.trim(str)方法
$.trim(str)侷限性：沒法去除中間的空格，實例以下：
var str = " xiao ming ";
var str2 = $.trim(str)
console.log(str2); // xiao ming
你如何獲取瀏覽器URL中查詢字符串中的參數？
測試地址爲：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23
實例以下：
複製代碼
function showWindowHref(){
var sHref = window.location.href;
var args = sHref.split('?');
if(args[0] == sHref){
return "";
}
var arr = args[1].split('&');
var obj = {};
for(var i = 0;i< arr.length;i++){
var arg = arr[i].split('=');
obj[arg[0]] = arg[1];
}
return obj;
}
var href = showWindowHref(); // obj
console.log(href['name']); // xiaoming
複製代碼
js 字符串操做函數
我這裏只是列舉了經常使用的字符串函數，具體使用方法，請參考網址。
concat() – 將兩個或多個字符的文本組合起來，返回一個新的字符串。
indexOf() – 返回字符串中一個子串第一處出現的索引。若是沒有匹配項，返回 -1 。
charAt() – 返回指定位置的字符。
lastIndexOf() – 返回字符串中一個子串最後一處出現的索引，若是沒有匹配項，返回 -1 。
match() – 檢查一個字符串是否匹配一個正則表達式。
substr() 函數 -- 返回從string的startPos位置，長度爲length的字符串
substring() – 返回字符串的一個子串。傳入參數是起始位置和結束位置。
slice() – 提取字符串的一部分，並返回一個新字符串。
replace() – 用來查找匹配一個正則表達式的字符串，而後使用新字符串代替匹配的字符串。
search() – 執行一個正則表達式匹配查找。若是查找成功，返回字符串中匹配的索引值。不然返回 -1 。
split() – 經過將字符串劃分紅子串，將一個字符串作成一個字符串數組。
length – 返回字符串的長度，所謂字符串的長度是指其包含的字符的個數。
toLowerCase() – 將整個字符串轉成小寫字母。
toUpperCase() – 將整個字符串轉成大寫字母。
怎樣添加、移除、移動、複製、建立和查找節點？
1）建立新節點
createDocumentFragment() //建立一個DOM片斷
createElement() //建立一個具體的元素
createTextNode() //建立一個文本節點
2）添加、移除、替換、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替換
insertBefore() //插入
3）查找
getElementsByTagName() //經過標籤名稱
getElementsByName() //經過元素的Name屬性的值
getElementById() //經過元素Id，惟一性
寫出3個使用this的典型應用
（1）、在html元素事件屬性中使用，如：
<input type=」button」 onclick=」showInfo(this);」 value=」點擊一下」/>
（2）、構造函數
function Animal(name, color) {
this.name = name;
this.color = color;
}
（3）、input點擊，獲取值
複製代碼
<input type="button" id="text" value="點擊一下" />
<script type="text/javascript">
var btn = document.getElementById("text");
btn.onclick = function() {
alert(this.value); //此處的this是按鈕元素
}
</script>
複製代碼
(4)、apply()/call()求數組最值
var numbers = [5, 458 , 120 , -215 ];
var maxInNumbers = Math.max.apply(this, numbers);
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215);
console.log(maxInNumbers); // 458
比較typeof與instanceof？
相同點：JavaScript 中 typeof 和 instanceof 經常使用來判斷一個變量是否爲空，或者是什麼類型的。
typeof的定義和用法：返回值是一個字符串，用來講明變量的數據類型。
細節：
(1)、typeof 通常只能返回以下幾個結果：number,boolean,string,function,object,undefined。
(2)、typeof 來獲取一個變量是否存在，如 if(typeof a!="undefined"){alert("ok")}，而不要去使用 if(a) 由於若是 a 不存在（未聲明）則會出錯。
(3)、對於 Array,Null 等特殊對象使用 typeof 一概返回 object，這正是 typeof 的侷限性。
Instanceof定義和用法：instanceof 用於判斷一個變量是否屬於某個對象的實例。
實例演示：
a instanceof b?alert("true"):alert("false"); //a是b的實例？真:假
var a = new Array();
alert(a instanceof Array); // true
alert(a instanceof Object) // true
如上，會返回 true，同時 alert(a instanceof Object) 也會返回 true;這是由於 Array 是 object 的子類。
function test(){};
var a = new test();
alert(a instanceof test) // true
細節：
(1)、以下，獲得的結果爲‘N’,這裏的 instanceof 測試的 object 是指 js 語法中的 object，不是指 dom 模型對象。
if (window instanceof Object){ alert('Y')} else { alert('N');} // 'N'
如何理解閉包？
一、定義和用法：當一個函數的返回值是另一個函數，而返回的那個函數若是調用了其父函數內部的其它變量，若是返回的這個函數在外部被執行，就產生了閉包。
二、表現形式：使函數外部可以調用函數內部定義的變量。
三、實例以下：
(1)、根據做用域鏈的規則，底層做用域沒有聲明的變量，會向上一級找，找到就返回，沒找到就一直找，直到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
複製代碼
四、變量的做用域
要理解閉包，首先必須理解Javascript特殊的變量做用域。
變量的做用域分類：全局變量和局部變量。
特色：
一、函數內部能夠讀取函數外部的全局變量；在函數外部沒法讀取函數內的局部變量。
二、函數內部聲明變量的時候，必定要使用var命令。若是不用的話，你實際上聲明瞭一個全局變量！
五、使用閉包的注意點
1）濫用閉包，會形成內存泄漏：因爲閉包會使得函數中的變量都被保存在內存中，內存消耗很大，因此不能濫用閉包，不然會形成網頁的性能問題，在IE中可能致使內存泄露。解決方法是，在退出函數以前，將不使用的局部變量所有刪除。
2）會改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。
什麼是跨域？跨域請求資源的方法有哪些？
一、什麼是跨域？
因爲瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不一樣即爲跨域。存在跨域的狀況：
網絡協議不一樣，如http協議訪問https協議。
端口不一樣，如80端口訪問8080端口。
域名不一樣，如qianduanblog.com訪問baidu.com。
子域名不一樣，如abc.qianduanblog.com訪問def.qianduanblog.com。
域名和域名對應ip,如www.a.com訪問20.205.28.90.
二、跨域請求資源的方法：
(1)、porxy代理
定義和用法：proxy代理用於將請求發送給後臺服務器，經過服務器來發送請求，而後將請求的結果傳遞給前端。
實現方法：經過nginx代理；
注意點：一、若是你代理的是https協議的請求，那麼你的proxy首先須要信任該證書（尤爲是自定義證書）或者忽略證書檢查，不然你的請求沒法成功。
(2)、CORS 【Cross-Origin Resource Sharing】
定義和用法：是現代瀏覽器支持跨域資源請求的一種最經常使用的方式。
使用方法：通常須要後端人員在處理請求數據的時候，添加容許跨域的相關操做。以下：
res.writeHead(200, {
"Content-Type": "text/html; charset=UTF-8",
"Access-Control-Allow-Origin":'http://localhost',
'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
'Access-Control-Allow-Headers': 'X-Requested-With, Content-Type'
});
(3)、jsonp
定義和用法：經過動態插入一個script標籤。瀏覽器對script的資源引用沒有同源限制，同時資源加載到頁面後會當即執行（沒有阻塞的狀況下）。
特色：經過狀況下，經過動態建立script來讀取他域的動態資源，獲取的數據通常爲json格式。
實例以下：
複製代碼
<script>
function testjsonp(data) {
console.log(data.name); // 獲取返回的結果
}
</script>
<script>
var _script = document.createElement('script');
_script.type = "text/javascript";
_script.src = "http://localhost:8888/jsonp?callback=testjsonp";
document.head.appendChild(_script);
</script>
複製代碼
缺點：
一、這種方式沒法發送post請求（這裏）
二、另外要肯定jsonp的請求是否失敗並不容易，大多數框架的實現都是結合超時時間來斷定。
談談垃圾回收機制方式及內存管理
回收機制方式
一、定義和用法：垃圾回收機制(GC:Garbage Collection),執行環境負責管理代碼執行過程當中使用的內存。
二、原理：垃圾收集器會按期（週期性）找出那些不在繼續使用的變量，而後釋放其內存。可是這個過程不是實時的，由於其開銷比較大，因此垃圾回收器會按照固定的時間間隔週期性的執行。
三、實例以下：
複製代碼
function fn1() {
var obj = {name: 'hanzichi', age: 10};
}
function fn2() {
var obj = {name:'hanzichi', age: 10};
return obj;
}
var a = fn1();
var b = fn2();
複製代碼
fn1中定義的obj爲局部變量，而當調用結束後，出了fn1的環境，那麼該塊內存會被js引擎中的垃圾回收器自動釋放；在fn2被調用的過程當中，返回的對象被全局變量b所指向，因此該塊內存並不會被釋放。
四、垃圾回收策略：標記清除(較爲經常使用)和引用計數。
標記清除：
定義和用法：當變量進入環境時，將變量標記"進入環境"，當變量離開環境時，標記爲："離開環境"。某一個時刻，垃圾回收器會過濾掉環境中的變量，以及被環境變量引用的變量，剩下的就是被視爲準備回收的變量。
到目前爲止，IE、Firefox、Opera、Chrome、Safari的js實現使用的都是標記清除的垃圾回收策略或相似的策略，只不過垃圾收集的時間間隔互不相同。
引用計數：
定義和用法：引用計數是跟蹤記錄每一個值被引用的次數。
基本原理：就是變量的引用次數，被引用一次則加1，當這個引用計數爲0時，被視爲準備回收的對象。
內存管理
一、何時觸發垃圾回收？
垃圾回收器週期性運行，若是分配的內存很是多，那麼回收工做也會很艱鉅，肯定垃圾回收時間間隔就變成了一個值得思考的問題。
IE6的垃圾回收是根據內存分配量運行的，當環境中的變量，對象，字符串達到必定數量時觸發垃圾回收。垃圾回收器一直處於工做狀態，嚴重影響瀏覽器性能。
IE7中，垃圾回收器會根據內存分配量與程序佔用內存的比例進行動態調整，開始回收工做。
二、合理的GC方案：(1)、遍歷全部可訪問的對象; (2)、回收已不可訪問的對象。
三、GC缺陷：(1)、中止響應其餘操做；
四、GC優化策略：(1)、分代回收（Generation GC）;(2)、增量GC
開發過程當中遇到的內存泄露狀況，如何解決的？
一、定義和用法：
內存泄露是指一塊被分配的內存既不能使用，又不能回收，直到瀏覽器進程結束。C#和Java等語言採用了自動垃圾回收方法管理內存，幾乎不會發生內存泄露。咱們知道，瀏覽器中也是採用自動垃圾回收方法管理內存，但因爲瀏覽器垃圾回收方法有bug，會產生內存泄露。
二、內存泄露的幾種狀況:
(1)、當頁面中元素被移除或替換時，若元素綁定的事件仍沒被移除，在IE中不會做出恰當處理，此時要先手工移除事件，否則會存在內存泄露。
實例以下:
複製代碼
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
複製代碼
解決方法以下：
複製代碼
<div id="myDiv">
<input type="button" value="Click me" id="myBtn">
</div>
<script type="text/javascript">
var btn = document.getElementById("myBtn");
btn.onclick = function(){
btn.onclick = null;
document.getElementById("myDiv").innerHTML = "Processing...";
}
</script>
複製代碼
(2)、因爲是函數內定義函數，而且內部函數--事件回調的引用外暴了，造成了閉包。閉包能夠維持函數內局部變量，使其得不到釋放。
實例以下：
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it's a empty function
}
}
解決方法以下：
複製代碼
function bindEvent(){
var obj=document.createElement("XXX");
obj.onclick=function(){
//Even if it's a empty function
}
obj=null;
}
複製代碼
javascript面向對象中繼承實現？
面向對象的基本特徵有：封閉、繼承、多態。
在JavaScript中實現繼承的方法：
1. 原型鏈（prototype chaining）
2. call()/apply()
3. 混合方式(prototype和call()/apply()結合)
4. 對象冒充
繼承的方法以下：
一、prototype原型鏈方式：
二、call()/apply()方法
三、混合方法【prototype,call/apply】
四、對象冒充
javascript相關程序計算題
一、判斷一個字符串中出現次數最多的字符，統計這個次數
複製代碼
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;
}
}
console.log('出現次數最多的是:'+iIndex+'出現'+iMax+'次');
複製代碼
結果以下：出現次數最多的是:a出現9次
JavaScript 數組(Array)對象
一、Array相關的屬性和方法
這裏只是作了相關的列舉，具體的使用方法，請參考網址。
Array 對象屬性
constructor 返回對建立此對象的數組函數的引用。
length 設置或返回數組中元素的數目。
prototype 使您有能力向對象添加屬性和方法。
Array 對象方法
concat() 鏈接兩個或更多的數組，並返回結果。
join() 把數組的全部元素放入一個字符串。元素經過指定的分隔符進行分隔。
pop() 刪除並返回數組的最後一個元素。
shift() 刪除並返回數組的第一個元素
push() 向數組的末尾添加一個或更多元素，並返回新的長度。
unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。
reverse() 顛倒數組中元素的順序。
slice() 從某個已有的數組返回選定的元素
sort() 對數組的元素進行排序
splice() 刪除元素，並向數組添加新元素。
toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
valueOf() 返回數組對象的原始值
二、編寫一個方法 去掉一個數組的重複元素
方法一：
複製代碼
var arr = [0,2,3,4,4,0,2];
var obj = {};
var tmp = [];
for(var i = 0 ;i< arr.length;i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
tmp.push(arr[i]);
}
}
console.log(tmp);
複製代碼
結果以下： [0, 2, 3, 4]
方法二：
複製代碼
var arr = [2,3,4,4,5,2,3,6],
arr2 = [];
for(var i = 0;i< arr.length;i++){
if(arr2.indexOf(arr[i]) < 0){
arr2.push(arr[i]);
}
}
console.log(arr2);
複製代碼
結果爲：[2, 3, 4, 5, 6]
方法三：
var arr = [2,3,4,4,5,2,3,6];
var arr2 = arr.filter(function(element,index,self){
return self.indexOf(element) === index;
});
console.log(arr2);
結果爲：[2, 3, 4, 5, 6]
三、求數組的最值？
方法一：
求數組最大值：Math.max.apply(null,arr);
var arr = [3,43,23,45,65,90];
var max = Math.max.apply(null,arr);
console.log(max);
// 90
求數組最小值：Math.min.apply(null,arr);
var arr = [3,43,23,45,65,90];
var min = Math.min.apply(null,arr);
console.log(min);
// 3
方法二：Array.max = function(arr){} / Array.min = function(arr){}
複製代碼
var array = [3,43,23,45,65,90];
Array.max = function( array ){
return Math.max.apply( Math, array );
};
Array.min = function( array ){
return Math.min.apply( Math, array );
};
var max = Array.max(array);
console.log(max); // 90
var min = Array.min(array);
console.log(min); // 3
複製代碼
方法三：Array.prototype.max = function(){};Array.prototype.min = function(){};
求數組最大值(基本思路：將數組中的第一個值賦值給變量max ,將數組進行循環與max進行比較，將數組中的大值賦給max,最後返回max;)
複製代碼
var arr = [3,43,23,45,65,90];
Array.prototype.max = function() {
var max = this[0];
var len = this.length;
for (var i = 0; i < len; i++){
if (this[i] > max) {
max = this[i];
}
}
return max;
}
var max = arr.max();
console.log(max); // 90
複製代碼
求數組最小值：
複製代碼
var arr = [3,43,23,45,65,90];
Array.prototype.min = function() {
var min = this[0];
var len = this.length;
for(var i = 0;i< len;i++){
if(this[i] < min){
min = this[i];
}
}
return min;
}
var min = arr.min();
console.log(min); // 3
複製代碼
四、數組排序相關
結合sort和函數排序：
數組由小到大進行排序：sort,sortnum;
複製代碼
var arr = [3,43,23,45,65,90];
function sortnum(a,b){
return a-b;
}
arr = arr.sort(sortnum);
console.log(arr);
// [3, 23, 43, 45, 65, 90]
複製代碼
數組由大到小進行排序：sort,sortnum;
複製代碼
var arr = [3,43,23,45,65,90];
function sortnum(a,b){
return a+b;
}
arr = arr.sort(sortnum);
console.log(arr);
// [90, 65, 45, 23, 43, 3]
複製代碼
冒泡排序：即實現數組由小到大進行排序；思路爲：每次比較相鄰的兩個數，若是後一個比前一個小，換位置。若是要實現由大到小排序，使用reverse()便可；
複製代碼
var arr = [3, 1, 4, 6, 5, 7, 2];
function bubbleSort(arr) {
var len = arr.length;
for (var i = len; i >= 2; --i) {
for (var j = 0; j < i - 1; j++) {
if (arr[j + 1] < arr[j]) {
var temp;
temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
return arr;
}
var arr2 = bubbleSort(arr);
console.log(arr2); // [1, 2, 3, 4, 5, 6, 7]
var arr3 = arr2.reverse();
console.log(arr3); // [7, 6, 5, 4, 3, 2, 1]
複製代碼
快速排序：
思路：採用二分法，取出中間數，數組每次和中間數比較，小的放到左邊，大的放到右邊。
複製代碼
var arr = [3, 1, 4, 6, 5, 7, 2];
function quickSort(arr) {
if(arr.length == 0) {
return []; // 返回空數組
}
var cIndex = Math.floor(arr.length / 2);
var c = arr.splice(cIndex, 1);
var l = [];
var r = [];
for (var i = 0; i < arr.length; i++) {
if(arr[i] < c) {
l.push(arr[i]);
} else {
r.push(arr[i]);
}
}
return quickSort(l).concat(c, quickSort(r));
}
console.log(quickSort(arr));
//[1, 2, 3, 4, 5, 6, 7]
複製代碼
五、數組的翻轉（非reverse()）
方法一：
複製代碼
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length) {
var num = arr.pop(); //刪除數組最後一個元素並返回被刪除的元素
arr2.push(num);
}
console.log(arr2);
// [4, 3, 2, 1]
複製代碼
方法二：
複製代碼
var arr = [1,2,3,4];
var arr2 = [];
while(arr.length){
var num = arr.shift(); //刪除數組第一個元素並返回被刪除的元素
arr2.unshift(num);
}
console.log(arr2);
複製代碼
jquery相關
一、 jQuery 庫中的 $() 是什麼？
$() 函數是 jQuery() 函數的別稱。$() 函數用於將任何對象包裹成 jQuery 對象，接着你就被容許調用定義在 jQuery 對象上的多個不一樣方法。你能夠將一個選擇器字符串傳入 $() 函數，它會返回一個包含全部匹配的 DOM 元素數組的 jQuery 對象。
二、如何找到全部 HTML select 標籤的選中項？
$('[name=selectname] :selected')
三、$(this) 和 this 關鍵字在 jQuery 中有何不一樣？
$(this) 返回一個 jQuery 對象，你能夠對它調用多個 jQuery 方法，好比用 text() 獲取文本，用val() 獲取值等等。
而 this 表明當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。
四、jquery怎麼移除標籤onclick屬性？
得到a標籤的onclick屬性: $("a").attr("onclick")
刪除onclick屬性：$("a").removeAttr("onclick");
設置onclick屬性：$("a").attr("onclick","test();");
五、jquery中addClass,removeClass,toggleClass的使用。
$(selector).addClass(class)：爲每一個匹配的元素添加指定的類名
$(selector).removeClass(class)：從全部匹配的元素中刪除所有或者指定的類，刪除class中某個值；
$(selector).toggleClass(class)：若是存在（不存在）就刪除（添加）一個類
$(selector).removeAttr(class);刪除class這個屬性；
六、JQuery有幾種選擇器?
(1)、基本選擇器：#id，class,element,*;
(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings
(3)、基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
(4)、內容過濾器選擇器： :contains ，:empty ，:has ，:parent
(5)、可見性過濾器選擇器：:hidden ，:visible
(6)、屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
(7)、子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child
(8)、表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；
(9)、表單過濾器選擇器：:enabled ，:disabled ，:checked ，:selected
七、jQuery中的Delegate()函數有什麼做用？
delegate()會在如下兩個狀況下使用到：
一、若是你有一個父元素，須要給其下的子元素添加事件，這時你能夠使用delegate()了，代碼以下：
$("ul").delegate("li", "click", function(){ $(this).hide(); });
二、當元素在當前頁面中不可用時，能夠使用delegate()
八、$(document).ready()方法和window.onload有什麼區別？
(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。
(2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。
九、如何用jQuery禁用瀏覽器的前進後退按鈕？
實現代碼以下：
<script type="text/javascript" language="javascript">
$(document).ready(function() {
window.history.forward(1);
//OR window.history.forward(-1);
});
</script>
十、 jquery中$.get()提交和$.post()提交有區別嗎？
相同點：都是異步請求的方式來獲取服務端的數據；
異同點：
一、請求方式不一樣：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。
二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。
三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多
四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。
十一、寫出一個簡單的$.ajax()的請求方式？
複製代碼
$.ajax({
url:'http://www.baidu.com',
type:'POST',
data:data,
cache:true,
headers:{},
beforeSend：function(){},
success:function(){},
error:function(){},
complete:function(){}
});
複製代碼
十二、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？
(1)、bind 【jQuery 1.3以前】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：bind(type,[data],function(eventObject))；
特色：
(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。
(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。
實例以下：$( "#members li a" ).bind( "click", function( e ) {} );
(2)、live 【jQuery 1.3以後】
定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；
語法：live(type, [data], fn);
特色：
(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。
(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。
(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；
實例以下：$( document ).on( "click", "#members li a", function( e ) {} );
(3)、delegate 【jQuery 1.4.2中引入】
定義和用法：將監聽事件綁定在就近的父級元素上
語法：delegate(selector,type,[data],fn)
特色：
(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。
(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。
實例以下：
$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});
$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});
(4)、on 【1.7版本整合了以前的三種方式的新事件綁定機制】
定義和用法：將監聽事件綁定到指定元素上。
語法：on(type,[selector],[data],fn)
實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。
說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。
總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()
回到頂部
HTML & CSS:
一、什麼是盒子模型？
在網頁中，一個元素佔有空間的大小由幾個部分構成，其中包括元素的內容（content），元素的內邊距（padding），元素的邊框（border），元素的外邊距（margin）四個部分。這四個部分佔有的空間中，有的部分能夠顯示相應的內容，而有的部分只用來分隔相鄰的區域或區域。4個部分一塊兒構成了css中元素的盒模型。
二、行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素：a、b、span、img、input、strong、select、label、em、button、textarea
塊級元素：div、ul、li、dl、dt、dd、p、h1-h六、blockquote
空元素：即系沒有內容的HTML元素，例如：br、meta、hr、link、input、img
三、CSS實現垂直水平居中
一道經典的問題，實現方法有不少種，如下是其中一種實現：
HTML結構：
<div class="wrapper">
<div class="content"></div>
</div>
CSS：
複製代碼
.wrapper {
position: relative;
width: 500px;
height: 500px;
border: 1px solid red;
}
.content{
position: absolute;
width: 200px;
height: 200px;
/*top、bottom、left和right 均設置爲0*/
top: 0;
bottom: 0;
left: 0;
right: 0;
/*margin設置爲auto*/
margin:auto;
border: 1px solid green;
}
複製代碼
效果以下：
四、簡述一下src與href的區別
href 是指向網絡資源所在位置，創建和當前元素（錨點）或當前文檔（連接）之間的連接，用於超連接。
src是指向外部資源的位置，指向的內容將會嵌入到文檔中當前標籤所在位置；在請求src資源時會將其指向的資源下載並應用到文檔內，例如js腳本，img圖片和frame等元素。
當瀏覽器解析到該元素時，會暫停其餘資源的下載和處理，直到將該資源加載、編譯、執行完畢，圖片和框架等元素也如此，相似於將所指向資源嵌入當前標籤內。這也是爲何將js腳本放在底部而不是頭部。
五、簡述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式。
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；
異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。
六、px和em的區別
相同點：px和em都是長度單位；
異同點：px的值是固定的，指定是多少就是多少，計算比較容易。em得值不是固定的，而且em會繼承父級元素的字體大小。
瀏覽器的默認字體高都是16px。因此未經調整的瀏覽器都符合: 1em=16px。那麼12px=0.75em, 10px=0.625em。
七、瀏覽器的內核分別是什麼?
IE: trident內核
Firefox：gecko內核
Safari：webkit內核
Opera：之前是presto內核，Opera現已改用Google Chrome的Blink內核
Chrome：Blink(基於webkit，Google與Opera Software共同開發)
八、什麼叫優雅降級和漸進加強？
漸進加強 progressive enhancement：
針對低版本瀏覽器進行構建頁面，保證最基本的功能，而後再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。
優雅降級 graceful degradation：
一開始就構建完整的功能，而後再針對低版本瀏覽器進行兼容。
區別：
a. 優雅降級是從複雜的現狀開始，並試圖減小用戶體驗的供給
b. 漸進加強則是從一個很是基礎的，可以起做用的版本開始，並不斷擴充，以適應將來環境的須要
c. 降級（功能衰減）意味着往回看；而漸進加強則意味着朝前看，同時保證其根基處於安全地帶
九、sessionStorage 、localStorage 和 cookie 之間的區別
共同點：用於瀏覽器端存儲的緩存數據
不一樣點：
(1)、存儲內容是否發送到服務器端：當設置了Cookie後，數據會發送到服務器端，形成必定的寬帶浪費；
web storage,會將數據保存到本地，不會形成寬帶浪費；
(2)、數據存儲大小不一樣：Cookie數據不能超過4K,適用於會話標識；web storage數據存儲能夠達到5M;
(3)、數據存儲的有效期限不一樣：cookie只在設置了Cookid過時時間以前一直有效，即便關閉窗口或者瀏覽器；
sessionStorage,僅在關閉瀏覽器以前有效；localStorage,數據存儲永久有效；
(4)、做用域不一樣：cookie和localStorage是在同源同學口中都是共享的；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；
十、Web Storage與Cookie相比存在的優點：
(1)、存儲空間更大：IE8下每一個獨立的存儲空間爲10M，其餘瀏覽器實現略有不一樣，但都比Cookie要大不少。
(2)、存儲內容不會發送到服務器：當設置了Cookie後，Cookie的內容會隨着請求一併發送的服務器，這對於本地存儲的數據是一種帶寬浪費。而Web Storage中的數據則僅僅是存在本地，不會與服務器發生任何交互。
(3)、更多豐富易用的接口：Web Storage提供了一套更爲豐富的接口，如setItem,getItem,removeItem,clear等,使得數據操做更爲簡便。cookie須要本身封裝。
(4)、獨立的存儲空間：每一個域（包括子域）有獨立的存儲空間，各個存儲空間是徹底獨立的，所以不會形成數據混亂。
十一、Ajax的優缺點及工做原理？
定義和用法:
AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。Ajax 是一種用於建立快速動態網頁的技術。Ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。
傳統的網頁（不使用 Ajax）若是須要更新內容，必須重載整個網頁頁面。
優勢：
1.減輕服務器的負擔,按需取數據,最大程度的減小冗餘請求
2.局部刷新頁面,減小用戶心理和實際的等待時間,帶來更好的用戶體驗
3.基於xml標準化,並被普遍支持,不需安裝插件等,進一步促進頁面和數據的分離
缺點：
1.AJAX大量的使用了javascript和ajax引擎,這些取決於瀏覽器的支持.在編寫的時候考慮對瀏覽器的兼容性.
2.AJAX只是局部刷新,因此頁面的後退按鈕是沒有用的.
3.對流媒體還有移動設備的支持不是太好等
AJAX的工做原理：
1.建立ajax對象（XMLHttpRequest/ActiveXObject(Microsoft.XMLHttp)）
2.判斷數據傳輸方式(GET/POST)
3.打開連接 open()
4.發送 send()
5.當ajax對象完成第四步（onreadystatechange）數據接收完成，判斷http響應狀態（status）200-300之間或者304（緩存）執行回調函數
十二、請指出document load和document ready的區別？
共同點：這兩種事件都表明的是頁面文檔加載時觸發。
異同點：
ready 事件的觸發，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件）。
onload 事件的觸發，表示頁面包含圖片等文件在內的全部元素都加載完成。
回到頂部
正則表達式
一、寫一個function，清除字符串先後的空格。（兼容全部瀏覽器）
function trim(str) {
if (str && typeof str === "string") {
return str.replace(/(^\s*)|(\s*)$/g,""); //去除先後空白符
}
}
二、使用正則表達式驗證郵箱格式
var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
var email = "example@qq.com";
console.log(reg.test(email)); // true
回到頂部
開發及性能優化
一、規避javascript多人開發函數重名問題
命名空間
封閉空間
js模塊化mvc（數據層、表現層、控制層）
seajs
變量轉換成對象的屬性
對象化
二、請說出三種減低頁面加載時間的方法
壓縮css、js文件
合併js、css文件，減小http請求
外部js、css文件放在最底下
減小dom操做，儘量用變量替代沒必要要的dom操做
三、你所瞭解到的Web攻擊技術
（1）XSS（Cross-Site Scripting，跨站腳本攻擊）：指經過存在安全漏洞的Web網站註冊用戶的瀏覽器內運行非法的HTML標籤或者JavaScript進行的一種攻擊。
（2）SQL注入攻擊
（3）CSRF（Cross-Site Request Forgeries，跨站點請求僞造）：指攻擊者經過設置好的陷阱，強制對已完成的認證用戶進行非預期的我的信息或設定信息等某些狀態更新。
四、web前端開發，如何提升頁面性能優化？
內容方面：
1.減小 HTTP 請求 (Make Fewer HTTP Requests)
2.減小 DOM 元素數量 (Reduce the Number of DOM Elements)
3.使得 Ajax 可緩存 (Make Ajax Cacheable)
針對CSS：
1.把 CSS 放到代碼頁上端 (Put Stylesheets at the Top)
2.從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3.精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4.避免 CSS 表達式 (Avoid CSS Expressions)
針對JavaScript ：
1. 腳本放到 HTML 代碼頁底部 (Put Scripts at the Bottom)
2. 從頁面中剝離 JavaScript 與 CSS (Make JavaScript and CSS External)
3. 精簡 JavaScript 與 CSS (Minify JavaScript and CSS)
4. 移除重複腳本 (Remove Duplicate Scripts)
面向圖片(Image)：
1.優化圖片
2 不要在 HTML 中使用縮放圖片
3 使用恰當的圖片格式
4 使用 CSS Sprites 技巧對圖片優化
五、前端開發中，如何優化圖像？圖像格式的區別？
優化圖像：
一、不用圖片，儘可能用css3代替。 好比說要實現修飾效果，如半透明、邊框、圓角、陰影、漸變等，在當前主流瀏覽器中均可以用CSS達成。
二、 使用矢量圖SVG替代位圖。對於絕大多數圖案、圖標等，矢量圖更小，且可縮放而無需生成多套圖。如今主流瀏覽器都支持SVG了，因此可放心使用！
3.、使用恰當的圖片格式。咱們常見的圖片格式有JPEG、GIF、PNG。
基本上，內容圖片多爲照片之類的，適用於JPEG。
而修飾圖片一般更適合用無損壓縮的PNG。
GIF基本上除了GIF動畫外不要使用。且動畫的話，也更建議用video元素和視頻格式，或用SVG動畫取代。
四、按照HTTP協議設置合理的緩存。
五、使用字體圖標webfont、CSS Sprites等。
六、用CSS或JavaScript實現預加載。
七、WebP圖片格式能給前端帶來的優化。WebP支持無損、有損壓縮，動態、靜態圖片，壓縮比率優於GIF、JPEG、JPEG2000、PG等格式，很是適合用於網絡等圖片傳輸。
圖像格式的區別：
矢量圖：圖標字體，如 font-awesome；svg
位圖：gif,jpg(jpeg),png
區別：
一、gif:是是一種無損，8位圖片格式。具備支持動畫，索引透明，壓縮等特性。適用於作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。
二、JPEG格式是一種大小與質量相平衡的壓縮圖片格式。適用於容許輕微失真的色彩豐富的照片，不適合作色彩簡單(色調少)的圖片，如logo,各類小圖標icons等。
三、png:PNG能夠細分爲三種格式:PNG8，PNG24，PNG32。後面的數字表明這種PNG格式最多能夠索引和存儲的顏色值。
關於透明：PNG8支持索引透明和alpha透明;PNG24不支持透明;而PNG32在24位的PNG基礎上增長了8位（256階）的alpha通道透明;
優缺點：
一、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。
二、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。
六、瀏覽器是如何渲染頁面的？
渲染的流程以下：
1.解析HTML文件，建立DOM樹。
自上而下，遇到任何樣式（link、style）與腳本（script）都會阻塞（外部樣式不阻塞後續外部腳本的加載）。
2.解析CSS。優先級：瀏覽器默認設置<用戶設置<外部樣式<內聯樣式<HTML中的style樣式；
3.將CSS與DOM合併，構建渲染樹（Render Tree）
4.佈局和繪製，重繪（repaint）和重排（reflow）
雪碧圖
css雪碧圖(sprite)是一種網頁圖片應用處理方式，它容許將一個頁面涉及到的全部零星圖片都包含到一張大圖中。使用雪碧圖的處理方式能夠實現兩個優勢：
一、減小Http請求數量（由於瀏覽器同一時間可以加載的資源數是必定的，IE 8是6個，Chrome是6個，Firefox是8），提升加載性能 二、有些狀況下能夠減小圖片的大小（字節總和）
缺點：
一、高清屏會失真
二、雪碧圖不方便變化，提升了網頁開發和維護成本
字體圖標
字體圖標就是利用字體來顯示網頁中的的純色圖標，或者是特殊字體
原理：
計算機裏面每一個字符都有一個unicode編碼,好比「我」的unicode是\u6211（16進制），而字體文件的做用是規定某個字符應該用什麼形狀來顯示，利用@font-face原理載入圖標字體庫，而後調用圖標
優勢：
一、靈活性：能夠任意地縮放，改變顏色，產生陰影，透明效果，能夠快速轉化形態（：hover）
二、輕量性：自己體積更小，但攜帶的信息並無削減。一旦圖標字體加載了，圖標就會立刻渲染出來，不須要下載一個圖像。能夠減小HTTP請求，還能夠配合HTML5離線存儲作性能優化。
三、兼容性：網頁字體支持全部現代瀏覽器，包括IE低版本。
缺點：
一、圖標字體只能被渲染成單色或者CSS3的漸變色，因爲此限制使得它不能普遍使用。 二、製做用於生成icon font的svg比較麻煩
base64
Base64是網絡上最多見的用於傳輸8Bit字節代碼的編碼方式之一，可用於在HTTP環境下傳遞較長的標識信息
優勢：
一、減小了HTTP請求 二、某些文件能夠避免跨域的問題 三、沒有圖片更新要從新上傳，還要清理緩存的問題
缺點：
一、用於小圖，體積約爲原圖的4/3 二、兼容性：IE6/IE7瀏覽器是不支持
僞類與僞元素
一、二者都不存在於HTML文檔樹中，僞類與僞元素都是用於向選擇器加特殊效果
二、僞類與僞元素的本質區別就是是否抽象創造了新元素
三、僞類只要不是互斥能夠疊加使用
四、僞元素在一個選擇器中只能出現一次，而且只能出如今末尾
五、僞類與僞元素優先級分別與類、標籤優先級相同
六、僞類單冒號，僞元素雙冒號
效果屬性（box-shadow、border-radius、background、clip-path）
box-shadow
一、營造層次感（立體感）
二、充當沒有寬度的邊框
三、 特殊效果
background
一、紋理/圖案
二、漸變
三、 雪碧圖動畫
四、背景圖尺寸適應
clip-path
一、對容器進行裁剪
二、常見幾何圖形
三、自定義路徑
Canvas和svg
Canvas
一、Canvas是基於位圖的，它不可以改變大小，只能縮放顯示，放大或縮小時圖形質量會有所損失
二、 依賴分辨率，逐像素進行渲染的
三、 Canvas 經過 Javaｓｃｒｉｐｔ 來繪製2D圖形（動態生成）
四、 不支持事件處理器。Canvas輸出的是一整幅畫布，可以以 .png 或 .jpg 格式保存結果圖像
五、 適合像素處理，動態渲染和大數據量繪製，最適合圖像密集型的遊戲（頻繁重繪對象）
六、 若是圖形位置發生變化，整個場景須要從新繪製，包括任何或許已被圖形覆蓋的對象
svg
一、SVG 可縮放矢量圖形（Scalable Vector Graphics），是一種使用可擴展標記語言（XML）描述2D圖形的語言
二、不依賴分辨率,逐元素（DOM元素）進行渲染,可以很好的處理圖形大小的改變, 放大或縮小時圖形質量不會有所損失
三、 基於XML，用文本格式的描述性語言來描述圖像內容
四、 支持事件處理器。SVG繪製出的每一個圖形元素都是獨立的DOM節點，可以方便的綁定事件
五、 適合靜態圖片展現，高保真文檔查看和打印的應用場景，不適合遊戲應用）
六、 若是對象屬性發生變化，瀏覽器能自動重現圖形。也就是說，SVG繪圖很容易編輯，只須要增長或移除相應的元素便可
瀏覽器內核
Trident內核(IE內核)
表明做品是IE，因IE捆綁在Windows中，因此佔有極高的份額，又稱爲IE內核或MSHTML，此內核只能用於Windows平臺，且不是開源的。 表明做品還有騰訊、Maxthon（遨遊）、360瀏覽器等。但因爲市場份額比較大，曾經出現脫離了W3C標準的時候，同時IE版本比較多， 存在不少的兼容性問題
Gecko(Firefox內核)
表明做品是Firefox，即火狐瀏覽器。因火狐是最多的用戶，故常被稱爲firefox內核它是開源的，最大優點是跨平臺，在Microsoft Windows、Linux、MacOs X等主 要操做系統中使用
Webkit內核(Safari內核,Chrome內核原型,開源)
它是蘋果公司本身的內核，也是蘋果的Safari瀏覽器使用的內核
Presto內核
表做品是Opera，Presto是由Opera Software開發的瀏覽器排版引擎，它是世界公認最快的渲染速度的引擎。在13年以後，Opera宣佈加入谷歌陣營，棄用了 Presto
Blink內核
由Google和Opera Software開發的瀏覽器排版引擎，2013年4月發佈。如今Chrome內核是Blink。谷歌還開發了本身的JS引擎，V8，使JS運行速度極大地提升了
css動畫
動畫類型
一、transition補間動畫 二、keyframe關鍵幀動畫 三、animation逐幀動畫
補間動畫
一、位置-平移（left/right/margin/transform） 二、方位-旋轉（transform） 三、大小-縮放（transform） 四、透明度（opacity） 五、其餘線性變換（transform）
Javascript理解this對象
this是函數運行時自動生成的一個內部對象，只能在函數內部使用，但總指向調用它的對象。
經過如下幾個例子加深對this的理解。
（1）做爲函數調用
var name = 'Jenny';
function person() {
return this.name;
}
console.log(person()); //Jenny
上面這個例子在全局做用域中調用person()，此時的調用對象爲window，所以this指向window，在window中定義了name變量，所以this.name至關於window.name，爲Jenny。
再看下面一個例子：
複製代碼
function a() {
function b() {
function c() {
console.log(this);
}
c();
}
b();
}
a(); // window
複製代碼
這個例子中，也同爲函數調用，所以this指向window。
（2）做爲對象的方法調用
複製代碼
var name = 'Jenny';
var obj = {
name: 'Danny',
person: function() {
return this.name;
}
};
console.log(obj.person()); //Danny
複製代碼
在這個例子中，person()函數在obj對象中定義，調用時是做爲obj對象的方法進行調用，所以此時的this指向obj，obj裏面定義了name屬性，值爲Danny，所以this.name = "Danny"。
（3）做爲構造函數調用
做爲構造函數調用和普通函數調用的區別是，構造函數使用new關鍵字建立一個實例，此時this指向實例對象。
複製代碼
function person() {
return new person.prototype.init();
}
person.prototype = {
init: function() {
return this.name;
},
name: 'Brain'
};
console.log(person().name); //undefined
複製代碼
這是一個比較複雜的例子，涉及到了原型。
首先，建立構造函數person，爲函數從新定義原型，在原型上定義了兩個方法init和name，其中init返回this.name。
調用person函數的name屬性，發現返回的是undefined，爲何不是Brain呢？
咱們看，調用person，返回person.prototype.init()的一個實例，假設返回的這個實例名爲a，那麼此時的this指向的就是a，a做爲person.prototype.init()的一個實例，那麼全部定義在person.prototype.init()中的方法等均可以被a調用，可是name屬性定義在person的原型中，而非init函數中，所以返回undefined。
（4）apply和call
使用apply()和call()能夠改變調用函數的對象，第一個參數爲改變後調用這個函數的對象，其中apply()的第二個參數爲一個數組，call的第二個參數爲每一個參數。
複製代碼
function person() {
return this.name;
}
var obj = {
name: 'Jenny',
age: 18
};
console.log(person.apply(obj)); //Jenny
複製代碼
使用apply函數改變了調用person的對象，是在obj對象下面調用person，再也不是在window對象下調用了，所以this指向obj，this.name = "Jenny";
深刻理解javascript原型鏈
在javascript中原型和原型鏈是一個很神奇的東西，對於大多數人也是最難理解的一部分，掌握原型和原型鏈的本質是javascript進階的重要一環。今天我分享一下我對javascript原型和原型鏈的理解。
1、對象等級劃分
咱們認爲在javascript任何值或變量都是對象，可是我還須要將javascript中的對象分爲一下幾個等級。
首先Object是頂級公民，這個應該毋庸置疑，由於全部的對象都是間接或直接的經過它衍生的。Function是一等公民，下面會作解釋。幾個像String，Array，Date，Number，Boolean，Math等內建對象是二等公民。剩下的則都是低級公民。
2、原型prototype
首先prototype是一個屬性，同時它自己也是一個對象。那麼哪些是具備prototype這個屬性呢？其實javascript中全部的函數都有prototype這個屬性，反過來全部具備prototype的對象自己也是一個函數，沒錯就是一個函數。
第一條我再也不印證，主要看看第二條。你們都知道Object，Array，Date都有prototype，他們是函數嗎？是的他們也是函數的一種，爲何這麼說呢？咱們在定義一個對象或者數組時，是否是能夠這麼作var o = new Object(),a = new Array()。學過java的人都知道new是用實例化一個對象的方法，可是咱們都知道javascript中不存在真正的類的概念，因此只能用函數來模擬，那麼既然能夠有上面的作法也就印證了Object和Array也是特殊的函數。
其實上面說到的幾等公民基本都是函數的一種，除了Math這個工具對象外，應該沒有見過這種new Math()這種寫法吧！固然這種寫法也是會報錯的，因此在訪問Math.prototype返回的也是undefined。
3、__proto__和原型鏈
__proto__是一個指針，它指的是構造它的對象的對象的prototype，聽起來有的拗口。舉個例子吧！
如上面代碼，o是Object的一個實例，因此o的__proto__指針指向構造o的Object的prototype。這樣的意義在於o能夠使用Object.prototype裏面的方法，例如toString(),o在訪問toString方法時，首先會在自身尋找，若是沒有找到則會在__proto__也就是Object.prototype上面查找。
能夠說幾乎全部的javascript對象都有__proto__這樣一個指針包括Object,咱們來看一看
其實a = 1就至關於a = new Number(1)。能夠看到全部的內建對象以及Object的__proto__指向的都是一個匿名函數，也就能夠認爲它們其實也是function的一個實例，因此以前會說function是一等公民。
那麼原型鏈究竟是什麼呢？咱們展開a.__proto__也就是Number.prototype對象，它是沒有toString()的方法的，可是對於a來講它實際上是能夠調用toString的方法的，這就是原型鏈的做用。看下面代碼
看上面代碼和結果，咱們沿着a的__proto__一直訪問會到達Object的prototype，也就是說a調用toString方法最終實際上是訪問Object.prototype的toString方法。那麼a的原型鏈就是由Number.prototype和Object.prototype組成，當a訪問一個方法或屬性時，它會先在自身查找，而後再沿原型鏈找，找到則調用，沒找到報錯。爲了印證這一點，咱們在Number.prototype上面加一個toString的方法。
能夠看到a調用的是Number.prototype的toString方法，在找到以後就中止。在javascript中，幾乎全部的對象的原型鏈的終點都是Object.prototype
總結
__proto__是實現原型鏈的關鍵，而prototype則是原型鏈的組成。最後附上一張稍微複雜的原型鏈和構造函數的關係圖，有興趣能夠研究一下。
- 1. 前端面試題合集
- 2. 前端面試集合
- 3. 前端面試題大集合
- 4. 2018-2020前端面試題合集
- 5. web前端Vue面試題目合集
- 6. 前端面試題 -- 綜合
- 7. 前端面試題小集
- 8. 前端面試題集錦
- 9. 前端面試問題集
- 10. 前端面試集錦
- 更多相關文章...
- • Scala Set(集合) - Scala教程
- • C# 集合（Collection） - C#教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 前端面試題合集
- 2. 前端面試集合
- 3. 前端面試題大集合
- 4. 2018-2020前端面試題合集
- 5. web前端Vue面試題目合集
- 6. 前端面試題 -- 綜合
- 7. 前端面試題小集
- 8. 前端面試題集錦
- 9. 前端面試問題集
- 10. 前端面試集錦