1、html5為什么只需要寫<!doctype html>?
答：html5不是基于sgml（標(biāo)準(zhǔn)通用標(biāo)記語言），不需要對dtd文件進(jìn)行引用，但是需要doctype來規(guī)范瀏覽器的行為，
否則瀏覽器將開啟怪異模式，而html4.01基于sgml，需要引入dtd，才能告知瀏覽器文檔使用的文檔類型
2、行內(nèi)元素有哪些？塊級元素有哪些？空（void）元素有哪些？
行內(nèi)元素有：a b span img input select strong（強(qiáng)調(diào)的語氣）
塊級元素有：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>
3、頁面導(dǎo)入樣式時(shí)，使用link和@import有什么區(qū)別？
兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：
區(qū)別1：link是XHTML標(biāo)簽，除了加載CSS外，還可以定義RSS等其他事務(wù)；@import屬于CSS范疇，只能加載CSS。
區(qū)別2：link引用CSS時(shí)，在頁面載入時(shí)同時(shí)加載；@import需要頁面網(wǎng)頁完全載入以后加載。
區(qū)別3：link是XHTML標(biāo)簽，無兼容問題；@import是在CSS2.1提出的，低版本的瀏覽器不支持。
區(qū)別4：link支持使用Javascript控制DOM去改變樣式；而@import不支持。
補(bǔ)充：@import最優(yōu)寫法
@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”)是最優(yōu)的選擇，兼容的瀏覽器最多。
從字節(jié)優(yōu)化的角度來看@import url(style.css)最值得推薦。
4、常見的瀏覽器內(nèi)核有哪些？
使用Trident內(nèi)核的瀏覽器：IE、Maxthon、TT、The World等；
使用Gecko內(nèi)核的瀏覽器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；
使用Presto內(nèi)核的瀏覽器：Opera7及以上版本；
使用Webkit內(nèi)核的瀏覽器：Safari、Chrome。
5、html5有哪些新特性？移除了哪些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容性問題？如何區(qū)分html和html5？
新增的元素有繪畫 canvas ，用于媒介回放的 video 和 audio 元素，本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失，而sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除，此外，還新增了以下的幾大類元素。
內(nèi)容元素，article、footer、header、nav、section。
表單控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列這些：
顯現(xiàn)層元素：basefont，big，center，font, s，strike，tt，u。
性能較差元素：frame，frameset，noframes。
如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分HTML和HTML5？
處理兼容問題有兩種方式：
1.IE8/IE7/IE6支持通過document.方法產(chǎn)生的標(biāo)簽，利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽。
2.使用是html5shim框架
另外，DOCTYPE聲明的方式是區(qū)分HTML和HTML5標(biāo)志的一個(gè)重要因素，此外，還可以根據(jù)新增的結(jié)構(gòu)、功能元素來加以區(qū)分。
6、iframe有哪些優(yōu)缺點(diǎn)？
優(yōu)點(diǎn)：
1.用來實(shí)現(xiàn)長連接，在websocket不可用的時(shí)候作為一種替代，最開始由google發(fā)明。Comet：基于 HTTP 長連接的”服務(wù)器推”技術(shù)
2.跨域通信。JavaScript跨域總結(jié)與解決辦法 ，類似的還有瀏覽器多頁面通信，比如音樂播放器，用戶如果打開了多個(gè)tab頁，應(yīng)該只有一個(gè)在播放。
3.歷史記錄管理，解決ajax化網(wǎng)站響應(yīng)瀏覽器前進(jìn)后退按鈕的方案，在html5的history api不可用時(shí)作為一種替代。
4.純前端的utf8和gbk編碼互轉(zhuǎn)。比如在utf8頁面需要生成一個(gè)gbk的encodeURIComponent字符串，可以通過頁面加載一個(gè)gbk的iframe，然后主頁面與子頁面通信的方式實(shí)現(xiàn)轉(zhuǎn)換，這樣就不用在頁面上插入一個(gè)非常巨大的編碼映射表文件了
缺點(diǎn)：
1、在網(wǎng)頁中使用框架結(jié)構(gòu)最大的弊病是搜索引擎的”蜘蛛”程序無法解讀這種頁面。當(dāng)”蜘蛛”程序遇到由數(shù)個(gè)框架組成的網(wǎng)頁時(shí)，它們只看到框架而 無法找到鏈接，因此它們會以為該網(wǎng)站是個(gè)死站點(diǎn)，并且很快轉(zhuǎn)身離去。對一個(gè)網(wǎng)站來說這無異于一場災(zāi)難。
如果你想銷售產(chǎn)品，你需要客戶;如想得到客戶，你首先要讓人們訪問你的網(wǎng)站，而要做到這一點(diǎn)，你就非求助于搜索引擎不可。你花費(fèi)了大量的時(shí)間、 精力和金錢開設(shè)了一家網(wǎng)上商店，卻又故意不讓搜索引擎檢索你，這就好象開家零售商店，卻將窗戶全部漆成黑色，而且還不掛任何招牌一樣。
2、框架結(jié)構(gòu)有時(shí)會讓人感到迷惑，特別是在幾個(gè)框架中都出現(xiàn)上下、左右滾動(dòng)條的時(shí)候。這些滾動(dòng)條除了會擠占已經(jīng)非常有限的頁面空間外，還會分散 訪問者的注意力。訪問者遇到這種網(wǎng)站往往會立刻轉(zhuǎn)身離開。他們會想，既然你的主頁如此混亂，那么網(wǎng)站的其他部分也許更不值得瀏覽。
3、鏈接導(dǎo)航問題。使用框架結(jié)構(gòu)時(shí)，你必須保證正確設(shè)置所有的導(dǎo)航鏈接，如不然，會給訪問者帶來很大的麻煩。比如被鏈接的頁面出現(xiàn)在導(dǎo)航框架 內(nèi)，這種情況下訪問者便被陷住了，因?yàn)榇藭r(shí)他沒有其他地方可去。
7、label的作用是什么？是怎么使用的？
Label 中有兩個(gè)屬性是非常有用的,一個(gè)是FOR、另外一個(gè)就是ACCESSKEY了。
FOR屬性
功能：表示Label標(biāo)簽要綁定的HTML元素，你點(diǎn)擊這個(gè)標(biāo)簽的時(shí)候，所綁定的元素將獲取焦點(diǎn)。
用法：<Label FOR=”InputBox”>姓名</Label><input ID=”InputBox” type=”text”>
ACCESSKEY屬性：
功能：表示訪問Label標(biāo)簽所綁定的元素的熱鍵，當(dāng)您按下熱鍵，所綁定的元素將獲取焦點(diǎn)。
用法：<Label FOR=”InputBox” ACCESSKEY＝”N”>姓名</Label><input ID=”InputBox” type=”text”>
局限性：accessKey屬性所設(shè)置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優(yōu)先激活瀏覽器的快捷鍵。
8、實(shí)現(xiàn)不使用border，畫出1px高的線，在不同瀏覽器下的Quirksmode和CSSCompat模式下都能保持一致的效果？
<div style=”height:1px;overflow:hidden;background:red”></div>
9、網(wǎng)頁驗(yàn)證碼是干嘛的？是為了解決什么安全問題？
網(wǎng)頁驗(yàn)證碼介紹：”驗(yàn)證碼”的英文表示為CAPTCHA（Completely Automated Public Turing test to tell Computers and Humans Apart），翻譯過來就是”全自動(dòng)區(qū)分計(jì)算機(jī)和人類的圖靈測試”，顧名思義，它是用來區(qū)分計(jì)算機(jī)和人類的。在 CAPTCHA 測試中，作為服務(wù)器的計(jì)算機(jī)會自動(dòng)生成一個(gè)問題由用戶來解答。這個(gè)問題可以由計(jì)算機(jī)生成并評判，但是必須只有人類才能解答。由于計(jì)算機(jī)無法解答 CAPTCHA 的問題，所以回答出問題的用戶就可以被認(rèn)為是人類。 CAPTCHA 是由計(jì)算機(jī)來考人類，而不是標(biāo)準(zhǔn)圖靈測試中那樣由人類來考計(jì)算機(jī)，因此人們有時(shí)稱 CAPTCHA 是一種反向圖靈測試。
驗(yàn)證碼的原理：服務(wù)器端隨機(jī)生成驗(yàn)證碼字符串，保存在內(nèi)存中，并寫入圖片，發(fā)送給瀏覽器端顯示，瀏覽器端輸入驗(yàn)證碼圖片上字符，然后提交服務(wù)器端，提交的字符和服務(wù)器端保存的該字符比較是否一致，一致就繼續(xù)，否則返回提示。攻擊者編寫的robot程序，很難識別驗(yàn)證碼字符，順利的完成自動(dòng)注冊，登錄；而用戶可以識別填寫，所以這就實(shí)現(xiàn)了阻擋攻擊的作用。而圖片的字符識別，就是看圖片上的干擾強(qiáng)度了。就實(shí)際的效果來說，驗(yàn)證碼只是增加攻擊者的難度，而不可能完全的防止。
10、介紹一下標(biāo)準(zhǔn)的css的盒子模型？與低版本IE的盒子模型有什么不同？
盒子模型有兩種，分別是 ie 盒子模型和標(biāo)準(zhǔn) w3c 盒子模型
W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分
IE 盒子模型的范圍也包括 margin、border、padding、content，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading
11、如何居中div，如何居中一個(gè)浮動(dòng)元素？如何讓絕對定位的div居中？
a.margin:xpx auto;
b.確定容器的寬高，這里寬度是必須的，高度可以不設(shè)，設(shè)置外層的上外邊距和左外邊距分別是寬高的一半。
實(shí)現(xiàn)居中關(guān)鍵在于 margin設(shè)置與 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定位在以紅色圈為起點(diǎn)的位置，加上margin:-100px 0px 0px -100
12、display有哪些值？說明他們的作用？
block :塊對象的默認(rèn)值。用該值為對象之后添加新行
none :隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間
inline :內(nèi)聯(lián)對象的默認(rèn)值。用該值將從對象中刪除行
compact :分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
marker :指定內(nèi)容在容器對象之前或之后。要使用此參數(shù)，對象必須和:after及:before 偽元素一起使用
inline-table :將表格顯示為無前后換行的內(nèi)聯(lián)對象或內(nèi)聯(lián)容器
list-item :將塊對象指定為列表項(xiàng)目。并可以添加可選項(xiàng)目標(biāo)志
run-in :分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象
table :將對象作為塊元素級的表格顯示
13、position的值relative和absolute的定位原點(diǎn)是什么？
Absolute，CSS中的寫法是：position:absolute; 他的意思是絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定TRBL并且父級沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。
Relative，CSS中的寫法是：position:relative; 他的意思是絕對相對定位，他是參照父級的原始點(diǎn)為原始點(diǎn)，無父級則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級的原始點(diǎn)則參照父級內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。
14、display設(shè)置為inline-block時(shí)，li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？
行框的排列會受到中間空白（回車空格等等）的影響，這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間隔
解決：設(shè)置ul的font-size為0，缺陷是必須重新在li中去設(shè)置字體大小
15、請解釋下為什么會出現(xiàn)浮動(dòng)和什么時(shí)候需要清除浮動(dòng)？清除浮動(dòng)的方式？
a.添加新的元素 、應(yīng)用 clear：both;
b.父級定義 overflow: auto（注意：是父級div也就是這里的 div.outer） 一個(gè)對seo比較友好，另個(gè)hidden對seo不是太友好
在IE6中還需要觸發(fā) hasLayout ，例如 zoom：1；
c.據(jù)說是最高大上的方法 :after
方法：（注意：作用于浮動(dòng)元素的父親）IE6-7不支持:after，
使用 zoom:1觸發(fā) hasLayout
{zoom:1;} /*==for IE6/7 Maxthon2==*/
:after {clear:both;content:’.’;display:block;width: 0;height: 0;visibility:hidden;}
d.使用 br標(biāo)簽和其自身的 html屬性,<br clear=”all” /> clear=”all | left | right | none” 屬性
e.父元素也設(shè)置浮動(dòng)
f.父元素設(shè)置display:table 盒模型屬性已經(jīng)改變，由此造成的一系列問題，得不償失，不推薦使用
16、在網(wǎng)頁中的應(yīng)該使用奇數(shù)還是偶數(shù)的字體？為什么呢？
偶數(shù)字號相對更容易和 web 設(shè)計(jì)的其他部分構(gòu)成比例關(guān)系
使用奇數(shù)號字體不好的地方是，文本段落無法對齊
17、margin和padding分別適合什么場景使用？
何時(shí)應(yīng)當(dāng)使用margin：
（1）需要在border外側(cè)添加空白時(shí)，
（2）空白處不需要有背景（色）時(shí)，
（3）上下相連的兩個(gè)盒子之間的空白需要相互抵消時(shí)，比如15px+20px的margin，將得到20px的空白（注意地方見第三點(diǎn)）。
何時(shí)應(yīng)當(dāng)使用padding
（1）需要在border內(nèi)側(cè)添加空白時(shí)（往往是文字與邊框距離的設(shè)置），
（2）空白處需要背景（色）時(shí)，
（3）上下相連的兩個(gè)盒子之間的空白希望等于兩者之和時(shí)，比如15px+20px的padding，將得到35px的空白。
margin使用時(shí)應(yīng)該注意的地方
margin在垂直方向上相鄰的值相同時(shí)會發(fā)生疊加，水平方向上相鄰的值會相加。margin取負(fù)值時(shí)，在垂直方向上，兩個(gè)元素的邊界仍然會重疊。但是，此時(shí)一個(gè)為正值，一個(gè)為負(fù)值，并不是取其中較大的值，而是用正邊界減去負(fù)邊界的絕對值，也就是說，把正的邊界值和負(fù)的邊界值相加。
18、元素豎向的百分比設(shè)定是相對于容器的高度嗎？
答：相對于父容器的寬度
19、什么是響應(yīng)式設(shè)計(jì)？響應(yīng)式設(shè)計(jì)的基本原理是什么？如何兼容較低版本的IE？
答：一個(gè)網(wǎng)站能夠兼容多個(gè)終端——而不是為每個(gè)終端做一個(gè)特定的版本。
優(yōu)點(diǎn)：
面對不同分辨率設(shè)備靈活性強(qiáng)
能夠快捷解決多設(shè)備顯示適應(yīng)問題
缺點(diǎn)：
兼容各種設(shè)備工作量大，效率低下
代碼累贅，會出現(xiàn)隱藏?zé)o用的元素，加載時(shí)間加長
其實(shí)這是一種折中性質(zhì)的設(shè)計(jì)解決方案，多方面因素影響而達(dá)不到最佳效果
一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)，會出現(xiàn)用戶混淆的情況
respond.js和css3-mediaqueries-js
20、設(shè)置元素浮動(dòng)后，該元素的display值是多少？
display:block;
21、怎么讓chrome支持小于12px的文字？
chrome私有屬性：-webkit-text-size-adjust:none;
-webkit-transform:scale(0.8);
行內(nèi)元素設(shè)置:-webkit-transform:scale(0.8);display:inline-block
22、display:inline-block什么時(shí)候會顯示間隙？
1.給 父元素 寫font-size:0
2.把標(biāo)簽寫到一行，不要在編輯器里敲回車換行，但是這種寫法對于標(biāo)簽很多的情況可讀性太差，適用與例如<a></a><a></a>這樣簡單的結(jié)構(gòu)
23、有一個(gè)高度自適應(yīng)的div。里面有2個(gè)div，一個(gè)高度100px，希望另一個(gè)填滿剩下的高度？
外層box-sizing: border-box; 同時(shí)設(shè)置padding: 100px 0 0；
內(nèi)層100像素高的元素向上移動(dòng)100像素，或使用absolute定位防止占據(jù)空間；
另一個(gè)元素直接height: 100%;
外層position: relative；
百分百自適應(yīng)元素直接position: absolute; top: 100px; bottom: 0; left: 0
24、什么是window對象？什么是document對象？
window它是一個(gè)頂層對象,而不是另一個(gè)對象的屬性即瀏覽器的窗口。
document對象是window對象的一個(gè)對象屬性
25、null和undefined的區(qū)別？
null是一個(gè)表示”無”的對象，轉(zhuǎn)為數(shù)值時(shí)為0；undefined是一個(gè)表示”無”的原始值，轉(zhuǎn)為數(shù)值時(shí)為NaN。
null表示”沒有對象”，即該處不應(yīng)該有值
（1） 作為函數(shù)的參數(shù)，表示該函數(shù)的參數(shù)不是對象。
（2） 作為對象原型鏈的終點(diǎn)。
undefined表示”缺少值”，就是此處應(yīng)該有一個(gè)值，但是還沒有定義
（1）變量被聲明了，但沒有賦值時(shí)，就等于undefined。
（2) 調(diào)用函數(shù)時(shí)，應(yīng)該提供的參數(shù)沒有提供，該參數(shù)等于undefined。
（3）對象沒有賦值的屬性，該屬性的值為undefined。
（4）函數(shù)沒有返回值時(shí)，默認(rèn)返回undefined。
26、什么是閉包（closure）？為什么要用它？
閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)
由于在Javascript語言中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取局部變量，因此可以把閉包簡單理解成”定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”。
所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來的一座橋梁。
閉包的用途：
閉包可以用在許多地方。它的最大用處有兩個(gè)，一個(gè)是前面提到的可以讀取函數(shù)內(nèi)部的變量，另一個(gè)就是讓這些變量的值始終保持在內(nèi)存中
重用變量又不能造成全局污染
27、js代碼中”use strict”是什么意思？使用它區(qū)別是什么？
進(jìn)入”嚴(yán)格模式”的標(biāo)志，老版本的瀏覽器會把它當(dāng)作一行普通字符串，加以忽略
將”use strict”放在腳本文件的第一行，則整個(gè)腳本都將以”嚴(yán)格模式”運(yùn)行。如果這行語句不在第一行，則無效，整個(gè)腳本以”正常模式”運(yùn)行。如果不同模式的代碼文件合并成一個(gè)文件，這一點(diǎn)需要特別注意。
(嚴(yán)格地說，只要前面不是產(chǎn)生實(shí)際運(yùn)行結(jié)果的語句，”use strict”可以不在第一行，比如直接跟在一個(gè)空的分號后面。)
將”use strict”放在函數(shù)體的第一行，則整個(gè)函數(shù)以”嚴(yán)格模式”運(yùn)行
因?yàn)榈谝环N調(diào)用方法不利于文件合并，所以更好的做法是，借用第二種方法，將整個(gè)腳本文件放在一個(gè)立即執(zhí)行的匿名函數(shù)之中
– 消除Javascript語法的一些不合理、不嚴(yán)謹(jǐn)之處，減少一些怪異行為;
– 消除代碼運(yùn)行的一些不安全之處，保證代碼運(yùn)行的安全；
– 提高編譯器效率，增加運(yùn)行速度；
– 為未來新版本的Javascript做好鋪墊。
28、js中有一個(gè)函數(shù)，執(zhí)行對象查找時(shí)，永遠(yuǎn)不會去查找原型，這個(gè)函數(shù)是什么？
hasOwnProperty()函數(shù)用于指示一個(gè)對象自身(不包括原型鏈)是否具有指定名稱的屬性。如果有，返回true，否則返回false。該方法屬于Object對象，由于所有的對象都”繼承”了Object的對象實(shí)例，因此幾乎所有的實(shí)例對象都可以使用該方法。
29、js延遲加載的方式有哪些？
js的延遲加載有助與提高頁面的加載速度，以下是延遲加載的幾種方法：
1.使用setTimeout延遲方法的加載時(shí)間
延遲加載js代碼，給網(wǎng)頁加載留出更多時(shí)間
<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腳本文件時(shí)，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運(yùn)行JavaScript的代碼~~~ 所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度
3.上述方法2也會偶爾讓你收到Google頁面速度測試工具的”延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。
//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近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(“l(fā)oad”, downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent(“onload”, downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
這段代碼意思是等到整個(gè)文檔加載完后，再加載外部文件”defer.js”。
使用此段代碼的步驟：
1）.復(fù)制上面代碼
2）.粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)
3）.修改”defer.js”為你的外部JS文件名
4）.確保你文件路徑是正確的。例如：如果你僅輸入”defer.js”，那么”defer.js”文件一定與HTML文件在同一文件夾下。
注意：這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件或其他東西)。這些需等到頁面加載后再執(zhí)行的JavaScript代碼，應(yīng)放在一個(gè)外部文件，然后再引進(jìn)來。
30、同步和異步的區(qū)別？
同步就是指一個(gè)進(jìn)程在執(zhí)行某個(gè)請求的時(shí)候，若該請求需要一段時(shí)間才能返回信息，那么這個(gè)進(jìn)程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；異步是指進(jìn)程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進(jìn)程的狀態(tài)。當(dāng)有消息返回時(shí)系統(tǒng)會通知進(jìn)程進(jìn)行處理，這樣可以提高執(zhí)行的效率。
舉個(gè)瀏覽器例子：普通B/S模式（同步）AJAX技術(shù)（異步）
同步：提交請求->等待服務(wù)器處理->處理完畢返回 這個(gè)期間客戶端瀏覽器不能干任何事
異步: 請求通過事件觸發(fā)->服務(wù)器處理（這是瀏覽器仍然可以作其他事情）->處理完畢
再舉個(gè)生活的例子：大家聯(lián)系的時(shí)候如果使用手機(jī)通話，那么只能跟一個(gè)人聯(lián)系，過程中做不了其他任何操作，如果使用短信或者聊天的方式，就可以同時(shí)跟很多人聊天，別人收到信息后會回復(fù)，在回復(fù)之前還可以跟另外的人進(jìn)行聊天。
31、document.write和innerHTML的區(qū)別？
1.document.write是直接寫入到頁面的內(nèi)容流，如果在寫之前沒有調(diào)用document.open, 瀏覽器會自動(dòng)調(diào)用open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會導(dǎo)致頁面被重寫。
2.innerHTML則是DOM頁面元素的一個(gè)屬性，代表該元素的html內(nèi)容。你可以精確到某一個(gè)具體的元素來進(jìn)行更改。如果想修改document的內(nèi)容，則需要修改document.documentElement.innerElement。
3.兩者都可動(dòng)態(tài)包含外部資源如JavaScript文件
通過document.write插入<script></script>元素會自動(dòng)執(zhí)行其中的腳本；
大多數(shù)瀏覽器中，通過innerHTML插入<script></script>元素并不會執(zhí)行其中的腳本
innerHTML很多情況下都優(yōu)于document.write，其原因在于其允許更精確的控制要刷新頁面的那一個(gè)部分。
32、.call()和.apply()的含義和區(qū)別？
1、call，apply都屬于Function.prototype的一個(gè)方法，它是JavaScript引擎內(nèi)在實(shí)現(xiàn)的，因?yàn)閷儆贔unction.prototype，所以每個(gè)Function對象實(shí)例(就是每個(gè)方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當(dāng)然是針對方法的了，這兩個(gè)方法是容易混淆的，因?yàn)樗鼈兊淖饔靡粯?，只是使用方式不同?/p>
2、語法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
3、相同點(diǎn)：兩個(gè)方法產(chǎn)生的作用是完全一樣的。
4、不同點(diǎn)：方法傳遞的參數(shù)不同，單個(gè)單數(shù)傳入，另一個(gè)可以以數(shù)組方式傳入
33、JQ和JQUI有啥區(qū)別？
jQuery是一個(gè)快速、簡潔的JavaScript框架，是繼Prototype之后又一個(gè)優(yōu)秀的JavaScript代碼庫（或JavaScript框架）。jQuery設(shè)計(jì)的宗旨是”write Less，Do More”，即倡導(dǎo)寫更少的代碼，做更多的事情。它封裝JavaScript常用的功能代碼，提供一種簡便的JavaScript設(shè)計(jì)模式，優(yōu)化HTML文檔操作、事件處理、動(dòng)畫設(shè)計(jì)和Ajax交互。
jQuery UI 是建立在 jQuery JavaScript 庫上的一組用戶界面交互、特效、小部件及主題。
34、需求：實(shí)現(xiàn)一個(gè)頁面操作不會整頁刷新的網(wǎng)站，并且能在瀏覽器的前進(jìn)，后退時(shí)正確響應(yīng)。給出你的技術(shù)實(shí)現(xiàn)方案？
用cookie或者localStorage來記錄應(yīng)用的狀態(tài)即可，刷新頁面時(shí)讀取一下這個(gè)狀態(tài)，然后發(fā)送相應(yīng)ajax請求來改變頁面即可
HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通過這個(gè)接口做到無刷新改變頁面URL的
雖然ajax可以無刷新改變頁面內(nèi)容，但無法改變頁面URL
其次為了更好的可訪問性，內(nèi)容發(fā)生改變后，改變URL的hash。但是hash的方式不能很好的處理瀏覽器的前進(jìn)、后退等問題
有的瀏覽器引入了onhashchange的接口，不支持的瀏覽器只能定時(shí)去判斷hash是否改變
再有，ajax的使用對搜索引擎很不友好，往往蜘蛛爬到的區(qū)域是空的
為了解決傳統(tǒng)ajax帶來的問題，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通過pushState和replaceState接口操作瀏覽器歷史，并且改變當(dāng)前頁面的URL。
pushState是將指定的URL添加到瀏覽器歷史里，replaceState是將指定的URL替換當(dāng)前的URL。
如何調(diào)用
var state = { title: title, url: options.url, otherkey: othervalue};window.history.pushState(state, document.title, url);
state對象除了要title和url之外，也可以添加其他的數(shù)據(jù)，比如：還想將一些發(fā)送ajax的配置給保存起來。
replaceState和pushState是相似的，不需要多做解釋。
如何響應(yīng)瀏覽器的前進(jìn)、后退操作
window對象上提供了onpopstate事件，上面?zhèn)鬟f的state對象會成為event的子對象，這樣就可以拿到存儲的title和URL了。
window.addEventListener(‘popstate’, function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); }}, false);
這樣就可以結(jié)合ajax和pushState完美的進(jìn)行無刷新瀏覽了。
35、js的數(shù)據(jù)類型都有哪些？
字符串、數(shù)字、布爾、數(shù)組、對象、Null、Undefined
36、已知ID的input輸入框，希望獲取這個(gè)輸入框的輸入值，怎么做？(不使用第三方框架)
document.getElementById(id).value;
37、希望獲取到頁面中所有的checkbox怎么做？(不使用第三方框架)
document.getElementsByTagName(‘input’);
遍歷循環(huán)
38、設(shè)置一個(gè)已知ID的div和html內(nèi)容為xxx，字體顏色設(shè)置為黑色？(不使用第三方框架)
var div = document.getElementById(id);
div.innerHTML = ”;
div.style.color = ”;
39、當(dāng)一個(gè)dom節(jié)點(diǎn)被點(diǎn)擊時(shí)，我們需要能夠執(zhí)行一個(gè)函數(shù)，應(yīng)該怎么做？
直接在DOM里綁定事件：”<div onclick=”test()”>xx</div>” …
在JS里通過onclick綁定：xxx.onclick = test
通過事件添加進(jìn)行綁定：addEventListener(xxx, ‘click’, test)
那么問題來了，Javascript的事件流模型都有什么？
“事件冒泡”：事件開始由最具體的元素接受，然后逐級向上傳播
“事件捕捉”：事件由最不具體的節(jié)點(diǎn)先接收，然后逐級向下，一直到最具體的
“DOM事件流”：三個(gè)階段：事件捕捉，目標(biāo)階段，事件冒泡
40、什么是Ajax和JSON，他們的優(yōu)缺點(diǎn)？
Ajax是異步JavaScript和XML，用于在Web頁面中實(shí)現(xiàn)異步數(shù)據(jù)交互。
優(yōu)點(diǎn)：
可以使得頁面不重載全部內(nèi)容的情況下加載局部內(nèi)容，降低數(shù)據(jù)傳輸量
避免用戶不斷刷新或者跳轉(zhuǎn)頁面，提高用戶體驗(yàn)
缺點(diǎn)：
對搜索引擎不友好（
要實(shí)現(xiàn)ajax下的前后退功能成本較大
可能造成請求數(shù)的增加
跨域問題限制
JSON是一種輕量級的數(shù)據(jù)交換格式，ECMA的一個(gè)子集
優(yōu)點(diǎn)：輕量級、易于人的閱讀和編寫，便于機(jī)器（JavaScript）解析，支持復(fù)合數(shù)據(jù)類型（數(shù)組、對象、字符串、數(shù)字）
41、請看下列代碼輸出什么？解釋原因？
var a;
alert(typeof a); //undefined
alert(b); //報(bào)錯(cuò)
解釋：Undefined是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是”undefined”，
在使用var聲明變量但并未對其賦值進(jìn)行初始化時(shí)，這個(gè)變量的值就是undefined。而b由于未聲明將報(bào)錯(cuò)。
注意未申明的變量和聲明了未賦值的是不一樣的。
ar a = null;
alert(typeof a); //object
解釋：null是一個(gè)只有一個(gè)值的數(shù)據(jù)類型，這個(gè)值就是null。表示一個(gè)空指針對象，所以用typeof檢測會返回”object”
42、js的typeof返回哪些數(shù)據(jù)類型？
有如下6種返回值：
1）number；
2）string；
3）boolean；
4）object
5）function
6）undefined;
43、split() join()的區(qū)別？
join() 方法用于把數(shù)組中的所有元素放入一個(gè)字符串。
元素是通過指定的分隔符進(jìn)行分隔的。
指定分隔符方法join(“#”);其中#可以是任意
與之相反的是split()方法：用于把一個(gè)字符串分割成字符串?dāng)?shù)組.
44、數(shù)組方法pop() push() unshift() shift()?
push和pop方法，這兩個(gè)方法只會對數(shù)組從尾部進(jìn)行壓入或彈出，而且是在原數(shù)組進(jìn)行操作，任何的改動(dòng)都是會影響到操作的數(shù)組。push(args)可以每次壓入多個(gè)元素，并返回更新后的數(shù)組長度。pop()函數(shù)每次只會彈出最后一個(gè)結(jié)尾的元素，并返回彈出的元素，如果是對空組數(shù)調(diào)用pop()則返回undefined。 如果參數(shù)是數(shù)組則是將整個(gè)數(shù)組當(dāng)做一個(gè)元素壓入到原來的數(shù)組當(dāng)中。并不會產(chǎn)生類似concat合并數(shù)組時(shí)產(chǎn)生的”拆分現(xiàn)象”
unshift和shift這兩個(gè)方法都是通過對數(shù)組的頭部進(jìn)行的操作，其他基本跟push和pop類似
shift:從集合中把第一個(gè)元素刪除，并返回這個(gè)元素的值。
unshift: 在集合開頭添加一個(gè)或更多元素，并返回新的長度
push:在集合中添加元素，并返回新的長度
pop:從集合中把最后一個(gè)元素刪除，并返回這個(gè)元素的值
45、ajax請求時(shí)，如何解釋json數(shù)據(jù)？
1.$.JSON(url,params,fun);
2.$.ajax({}); dataType:’json’
都可以使用$each();進(jìn)行遍歷
$.each(object,function(index,item){
});
46、js的本地對象，內(nèi)置對象和宿主對象？
本地對象：
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定義好了的對象
內(nèi)置對象： Global 和 Math，內(nèi)置對象是本地對象的一種
宿主對象：所有的BOM和DOM對象都是宿主對象，是那些官方未定義，你自己構(gòu)建的對象加上DOM和BOM對象組成的
47、列舉所了解的前端框架并簡述？
以下是常用的前端基礎(chǔ)框架：
以下是常見的前端構(gòu)建框架：
以下是場檢的JS/CSS模塊化開發(fā)的框架：
48、對web標(biāo)準(zhǔn)以及w3c的理解與認(rèn)識？
（1）web標(biāo)準(zhǔn)規(guī)范要求，書寫標(biāo)簽必須閉合、標(biāo)簽小寫、不亂嵌套，可提高搜索機(jī)器人對網(wǎng)頁內(nèi)容的搜索幾率?！?SEO
（2）建議使用外鏈css和js腳本，從而達(dá)到結(jié)構(gòu)與行為、結(jié)構(gòu)與表現(xiàn)的分離，提高頁面的渲染速度，能更快地顯示頁面的內(nèi)容。
（3）樣式與標(biāo)簽的分離，更合理的語義化標(biāo)簽，使內(nèi)容能被更多的用戶所訪問、內(nèi)容能被更廣泛的設(shè)備所訪問、更少的代碼和組件， 從而降低維護(hù)成本、改版更方便
（4）不需要變動(dòng)頁面內(nèi)容，便可提供打印版本而不需要復(fù)制內(nèi)容，提高網(wǎng)站易用性
遵循w3c制定的web標(biāo)準(zhǔn)，能夠使用戶瀏覽者更方便的閱讀，使網(wǎng)頁開發(fā)者之間更好的交流。
49、xhtml和html有什么區(qū)別？
XHTML是HTML 4.01和XML1.0的雜交，XHTML1.0是基于HTML4.01的
HTML是一種基于標(biāo)準(zhǔn)通用標(biāo)記語言（SGML）的應(yīng)用，而XHTML則基于可擴(kuò)展標(biāo)記語言（XML），HTML和XHTML其實(shí)是平行發(fā)展的兩個(gè)標(biāo)準(zhǔn)。本質(zhì)上說，XHTML是一個(gè)過渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性。建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過渡
1、XHTML要求正確嵌套
2、XHTML所有元素必須關(guān)閉
3、XHTML區(qū)分大小寫
4、XHTML屬性值要加引號
5、XHTML用id屬性代替name屬性
6、屬性值不能簡寫
50、行內(nèi)元素有哪些？塊級元素有哪些？css和盒子模型？
盒子模型：內(nèi)容、填充（padding）、邊框（border）、外邊界（margin）
box-sizing:border-box; box-sizing:content-box;
51、css選擇器有哪些？哪些屬性可以繼承？優(yōu)先級算法如何計(jì)算？內(nèi)聯(lián)和import哪個(gè)級別更高？
可繼承的：font-size font-family color
不可繼承的：border padding margin background-color width height
優(yōu)先級：!important > [ id > class > tag ] important 比 內(nèi)聯(lián)優(yōu)先級高
52、前端頁面有哪三層構(gòu)成，分別是什么？作用是什么？
結(jié)構(gòu)層、表示層、行為層
結(jié)構(gòu)層（structural layer）
由 HTML 或 XHTML之類的標(biāo)記語言負(fù)責(zé)創(chuàng)建。標(biāo)簽，也就是那些出現(xiàn)在尖括號里的單詞，對網(wǎng)頁內(nèi)容的語義含義做出了描述，但這些標(biāo)簽不包含任何關(guān)于如何顯示有關(guān)內(nèi)容的信息。例如，P標(biāo)簽表達(dá)了這樣一種語義：”這是一個(gè)文本段?！?/p>
表示層（presentation layer）
由 CSS 負(fù)責(zé)創(chuàng)建。 CSS對”如何顯示有關(guān)內(nèi)容”的問題做出了回答。
行為層（behaviorlayer）
負(fù)責(zé)回答”內(nèi)容應(yīng)該如何對事件做出反應(yīng)”這一問題。這是 Javascript 語言和 DOM主宰的領(lǐng)域
53、你如何對網(wǎng)站的文件和資源進(jìn)行優(yōu)化？期待的解決方法包括？
A、文件合并，減少http請求，合并JavaScript和CSS文件、CSS Sprites、圖像映射 （Image Map）和使用Data URI來編碼圖片
B、文件最小化/文件壓縮，減少文件下載的體積；常用的工具是YUI Compressor
C、使用 CDN 托管，盡可能避開互聯(lián)網(wǎng)上有可能影響數(shù)據(jù)傳輸速度和穩(wěn)定性的瓶頸和環(huán)節(jié)，使內(nèi)容傳輸?shù)母?、更穩(wěn)定
D、緩存的使用（多個(gè)域名來提供緩存）
E、GZIP 壓縮你的 JS 和 CSS 文件
54、看下列代碼？輸出什么？解釋原因？
var a = null;
alert(typeof a);
答案：輸出為object, JS類型值是存在32 BIT 單元里,32位有1-3位表示TYPE TAG,其它位表示真實(shí)值
而表示object的標(biāo)記位正好是低三位都是0
000: object. The data is a reference to an object.
而js 里的Null 是機(jī)器碼NULL空指針, (0x00 is most platforms).所以空指針引用 加上 對象標(biāo)記還是0,最終體現(xiàn)的類型還是object..
這也就是為什么Number(null)===0吧…
The history of “typeof null”
2. 曾經(jīng)有提案 typeof null === ‘null’.但提案被拒絕
harmony:typeof_null
55、看代碼給答案？并進(jìn)行解釋？
var a = new Object();
a.value=1;
b = a;
b.value=2;
alert(a.value);
56、var numberArray = [3,6,2,4,1,5];
1) 實(shí)現(xiàn)對該數(shù)組的倒排，輸出[5,1,4,2,6,3]
2) 實(shí)現(xiàn)對該數(shù)組的降序排列，輸出[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;
})
57、你能描述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級之間的不同嗎?
如果提到了特性檢測，可以加分。
檢測瀏覽器，漸進(jìn)增強(qiáng)就是讓牛b的瀏覽器的效果更好，優(yōu)雅降級就是讓2b的瀏覽器在功能ok的情況下效果一般。
58、線程與進(jìn)程的區(qū)別？
一個(gè)程序至少有一個(gè)進(jìn)程,一個(gè)進(jìn)程至少有一個(gè)線程.
線程的劃分尺度小于進(jìn)程，使得多線程程序的并發(fā)性高。
另外，進(jìn)程在執(zhí)行過程中擁有獨(dú)立的內(nèi)存單元，而多個(gè)線程共享內(nèi)存，從而極大地提高了程序的運(yùn)行效率。
線程在執(zhí)行過程中與進(jìn)程還是有區(qū)別的。每個(gè)獨(dú)立的線程有一個(gè)程序運(yùn)行的入口、順序執(zhí)行序列和程序的出口。但是線程不能夠獨(dú)立執(zhí)行，必須依存在應(yīng)用程序中，由應(yīng)用程序提供多個(gè)線程執(zhí)行控制。
從邏輯角度來看，多線程的意義在于一個(gè)應(yīng)用程序中，有多個(gè)執(zhí)行部分可以同時(shí)執(zhí)行。但操作系統(tǒng)并沒有將多個(gè)線程看做多個(gè)獨(dú)立的應(yīng)用，來實(shí)現(xiàn)進(jìn)程的調(diào)度和管理以及資源分配。這就是進(jìn)程和線程的重要區(qū)別。
59、請解釋一下什么是”語義化的 HTML”？
語義化的好處：
1：去掉或樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)：
html本身是沒有表現(xiàn)的，我們看到例如<h1>是粗體，字體大小2em，加粗；<strong>是加粗的，不要認(rèn)為這是html的表現(xiàn)，這些其實(shí)html默認(rèn)的css樣式在起作用，所以去掉或樣式丟失的時(shí)候能讓頁面呈現(xiàn)清晰的結(jié)構(gòu)不是
的HTML結(jié)構(gòu)的優(yōu)點(diǎn)，但是瀏覽器都有有默認(rèn)樣式，默認(rèn)樣式的目的也是為了更好的表達(dá)html的語義，可以說瀏覽器的默認(rèn)樣式和語義化的HTML結(jié)構(gòu)是不可分割的。
2.屏幕閱讀器（如果訪客有視障）會完全根據(jù)你的標(biāo)記來”讀”你的網(wǎng)頁.
3.PDA、手機(jī)等設(shè)備可能無法像普通電腦的瀏覽器一樣來渲染網(wǎng)頁（通常是因?yàn)檫@些設(shè)備對CSS的支持較弱）.
4.搜索引擎的爬蟲也依賴于標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重.
5.你的頁面是否對爬蟲容易理解非常重要,因?yàn)榕老x很大程度上會忽略用于表現(xiàn)的標(biāo)記, 而只注重語義標(biāo)記.
6.便于團(tuán)隊(duì)開發(fā)和維護(hù)
語義化的HTML就是：標(biāo)題用h1-h6，文字段落用p，列表用ul li，大致如此
60、為什么利用多個(gè)域名來提供網(wǎng)站資源會更有效？
瀏覽器同一時(shí)間可以從一個(gè)域名下載多少資源？你的瀏覽器能同時(shí)保持對一個(gè)域名的多少連接？
三個(gè)最主流的原因:
1. CDN緩存更方便
2. 突破瀏覽器并發(fā)限制 (你隨便挑一個(gè) G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4換成 lh3,lh6 啥的，都照樣能夠訪問，像地圖之類的需要大量并發(fā)下載圖片的站點(diǎn)，這個(gè)非常重要。)
3. Cookieless, 節(jié)省帶寬，尤其是上行帶寬 一般比下行要慢。。。
還有另外兩個(gè)非常規(guī)原因:
4. 對于UGC的內(nèi)容和主站隔離，防止不必要的安全問題( 上傳js竊取主站cookie之類的) 。
正是這個(gè)原因要求用戶內(nèi)容的域名必須不是自己主站的子域名，而是一個(gè)完全獨(dú)立的第三方域名。
5. 數(shù)據(jù)做了劃分，甚至切到了不同的物理集群，通過子域名來分流比較省事. ^_^ 這個(gè)可能被用的不多。
PS: 關(guān)于Cookie的問題，帶寬是次要的，安全隔離才是主要的。
關(guān)于多域名，也不是越多越好，雖然服務(wù)器端可以做泛解釋，瀏覽器做dns解釋也是耗時(shí)間的，而且太多域名，如果要走 https的話，還有要多買證書和部署的問題，^_^。
61、請說出三種減少頁面加載時(shí)間的方法。（加載時(shí)間指感知的時(shí)間或者實(shí)際加載時(shí)間）
1.優(yōu)化圖片
2.圖像格式的選擇（GIF：提供的顏色較少，可用在一些對顏色要求不高的地方）
3.優(yōu)化CSS（壓縮合并css，如margin-top,margin-left…)
4.網(wǎng)址后加斜杠（如www.campr.com/目錄，會判斷這個(gè)”目錄是什么文件類型，或者是目錄。）
5.標(biāo)明高度和寬度（如果瀏覽器沒有找到這兩個(gè)參數(shù)，它需要一邊下載圖片一邊計(jì)算大小，如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，也影響瀏覽體驗(yàn)。
當(dāng)瀏覽器知道了高度和寬度參數(shù)后，即使圖片暫時(shí)無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容。從而加載時(shí)間快了，瀏覽體驗(yàn)也更好了。）
6.減少http請求（合并文件，合并圖片）。
62、如果你參與到一個(gè)項(xiàng)目中，發(fā)現(xiàn)他們使用 Tab 來縮進(jìn)代碼，但是你喜歡空格，你會怎么做？
1.建議這個(gè)項(xiàng)目使用像 EditorConfig (http://editorconfig.org/) 之類的規(guī)范
2.為了保持一致性，接受項(xiàng)目原有的風(fēng)格
3.直接使用 VIM 的 retab 命令
63、請寫一個(gè)簡單的幻燈效果頁面
如果不使用JS來完成，可以加分。（如：純CSS實(shí)現(xiàn)的幻燈片效果）
可以采用CSS3的單選按鈕radio來實(shí)現(xiàn)圖片的切換
64、你都使用哪些工具來測試代碼的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
65、如果今年你打算熟練掌握一項(xiàng)新技術(shù)，那會是什么？
nodejs，html5，css3，less
66、請談一下你對網(wǎng)頁標(biāo)準(zhǔn)和標(biāo)準(zhǔn)制定機(jī)構(gòu)重要性的理解？
(google)w3c存在的意義就是讓瀏覽器兼容性問題盡量小，首先是他們對瀏覽器開發(fā)者的約束，然后是對開發(fā)者的約束。
67、什么是 FOUC（無樣式內(nèi)容閃爍）？你如何來避免 FOUC？
FOUC – Flash Of Unstyled Content 文檔樣式閃爍
<style type=”text/css” media=”all”>@import “../fouc.css”;</style>
而引用CSS文件的@import就是造成這個(gè)問題的罪魁禍?zhǔn)?。IE會先加載整個(gè)HTML文檔的DOM，然后再去導(dǎo)入外部的CSS文件，因此，在頁面DOM加載完成到CSS導(dǎo)入完成中間會有一段時(shí)間頁面上的內(nèi)容是沒有樣式的，這段時(shí)間的長短跟網(wǎng)速，電腦速度都有關(guān)系。
解決方法簡單的出奇，只要在<head>之間加入一個(gè)<link>或者<script></script>元素就可以了。
68、doctype（文檔類型）的作用是什么？你知道多少種文檔類型？
此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范。
該標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。
HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。
XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。
Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，而 Quirks
（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計(jì)的網(wǎng)頁。
69、瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)別是什么？
W3C標(biāo)準(zhǔn)推出以后，瀏覽器都開始采納新標(biāo)準(zhǔn)，但存在一個(gè)問題就是如何保證舊的網(wǎng)頁還能繼續(xù)瀏覽，在標(biāo)準(zhǔn)出來以前，很多頁面都是根據(jù)舊的渲染方法編寫的，如果用的標(biāo)準(zhǔn)來渲染，將導(dǎo)致頁面顯示異常。為保持瀏覽器渲染的兼容性，使以前的頁面能夠正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產(chǎn)生了Quircks mode和Standars mode，兩種渲染方法共存在一個(gè)瀏覽器上。
IE盒子模型和標(biāo)準(zhǔn)W3C盒子模型：ie的width包括：padding\border。 標(biāo)準(zhǔn)的width不包括：padding\border
在js中如何判斷當(dāng)前瀏覽器正在以何種方式解析？
document對象有個(gè)屬性compatMode ,它有兩個(gè)值：
BackCompat 對應(yīng)quirks mode
CSS1Compat 對應(yīng)strict mode
70、使用 XHTML 的局限有哪些？
xhtml要求嚴(yán)格，必須有head、body每個(gè)dom必須要閉合。
如果頁面使用’application/xhtml+xml’會有什么問題嗎？
一些老的瀏覽器并不兼容。
十六、如果網(wǎng)頁內(nèi)容需要支持多語言，你會怎么做？
編碼UTF-8，空間域名需要支持多瀏覽地址。
在設(shè)計(jì)和開發(fā)多語言網(wǎng)站時(shí)，有哪些問題你必須要考慮？
1、應(yīng)用字符集的選擇 2、語言書寫習(xí)慣&導(dǎo)航結(jié)構(gòu) 3、數(shù)據(jù)庫驅(qū)動(dòng)型網(wǎng)站
71、data-屬性的作用是什么？
data-為前端開發(fā)者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過 getAttribute方法獲取
<div data-author=”david” data-time=”2011-06-20″ data-comment-num=”10″>…</div>
div.dataset.commentNum; // 10
需要注意的是，data-之后的以連字符分割的多個(gè)單詞組成的屬性，獲取的時(shí)候使用駝峰風(fēng)格。
并不是所有的瀏覽器都支持.dataset屬性，測試的瀏覽器中只有Chrome和Opera支持。
72、如果把 HTML5 看作做一個(gè)開放平臺，那它的構(gòu)建模塊有哪些？
<nav>, <header>,<section>, <footer>
73、請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web請求之間保存數(shù)據(jù)。有了本地?cái)?shù)據(jù)，就可以避免數(shù)據(jù)在瀏覽器和服務(wù)器間不必要地來回傳遞。
sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數(shù)據(jù)，其中sessionStorage的概念很特別，引入了一個(gè)”瀏覽器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始終存在的數(shù)據(jù)。也就是說只要這個(gè)瀏覽器窗口沒有關(guān)閉，即使刷新頁面或進(jìn)入同源另一頁面，數(shù)據(jù)仍然存在。關(guān)閉窗口后，sessionStorage即被銷毀。同時(shí)”獨(dú)立”打開的不同窗口，即使是同一頁面，sessionStorage對象也是不同的
cookies會發(fā)送到服務(wù)器端。其余兩個(gè)不會。
Microsoft指出InternetExplorer8增加cookie限制為每個(gè)域名50個(gè)，但I(xiàn)E7似乎也允許每個(gè)域名50個(gè)cookie。
Firefox每個(gè)域名cookie限制為50個(gè)。
Opera每個(gè)域名cookie限制為30個(gè)。
Firefox和Safari允許cookie多達(dá)4097個(gè)字節(jié)，包括名（name）、值（value）和等號。
Opera允許cookie多達(dá)4096個(gè)字節(jié)，包括：名（name）、值（value）和等號。
InternetExplorer允許cookie多達(dá)4095個(gè)字節(jié)，包括：名（name）、值（value）和等號。
74、描述下 “reset” CSS 文件的作用和使用它的好處。
因?yàn)闉g覽器的品種很多，每個(gè)瀏覽器的默認(rèn)樣式也是不同的，所以定義一個(gè)css reset可以使各瀏覽器的默認(rèn)樣式統(tǒng)一。
75、解釋下浮動(dòng)和它的工作原理？
浮動(dòng)元素脫離文檔流，不占據(jù)空間。浮動(dòng)元素碰到包含它的邊框或者浮動(dòng)元素的邊框停留
76、列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場景？
1.使用空標(biāo)簽清除浮動(dòng)。
這種方法是在所有浮動(dòng)標(biāo)簽后面添加一個(gè)空標(biāo)簽 定義css clear:both. 弊端就是增加了無意義標(biāo)簽。
2.使用overflow。
給包含浮動(dòng)元素的父標(biāo)簽添加css屬性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after偽對象清除浮動(dòng)。
該方法只適用于非IE瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點(diǎn)。一、該方法中必須為需要清除浮動(dòng)元素的偽對象中設(shè)置 height:0，否則該元素會比實(shí)際高出若干像素；二、content屬性是必須的，但其值可以為空，藍(lán)色理想討論該方法的時(shí)候content屬性的值設(shè)為”.”，但我發(fā)現(xiàn)為空亦是可以的。
*{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>
77、解釋下 CSS sprites，以及你要如何在頁面或網(wǎng)站中使用它？
CSS Sprites其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中，再利用CSS的”background-image”，”background- repeat”，”background-position”的組合進(jìn)行背景定位，background-position可以用數(shù)字能精確的定位出背景圖片的位置。
78、你最喜歡的圖片替換方法是什么，你如何選擇使用？
<h2> <span 圖片丟這里></span>Hello World </h2> 把span背景設(shè)成文字內(nèi)容，這樣又可以保證seo，也有圖片的效果在上面。
一般都是：alt，title，onerror
79、討論CSS hacks，條件引用或者其他？
background-color:blue; 各個(gè)瀏覽器都認(rèn)識，這里給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;} } 這個(gè)是老是跟ie搶著認(rèn)\0的神奇的opera，必須加個(gè)\0,不然firefox，chrome，safari也都認(rèn)識。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后這個(gè)是瀏覽器新貴chrome和safari的。
80、如何為有功能限制的瀏覽器提供網(wǎng)頁？你會使用哪些技術(shù)和處理方法？
百度 谷歌 SO SOGOU Bing
81、如何視覺隱藏網(wǎng)頁內(nèi)容，只讓它們在屏幕閱讀器中可用？
1.display:none;的缺陷
搜索引擎可能認(rèn)為被隱藏的文字屬于垃圾信息而被忽略
屏幕閱讀器（是為視覺上有障礙的人設(shè)計(jì)的讀取屏幕內(nèi)容的程序）會忽略被隱藏的文字。
2. visibility: hidden ;的缺陷
這個(gè)大家應(yīng)該比較熟悉就是隱藏的內(nèi)容會占據(jù)他所應(yīng)該占據(jù)物理空間
3.overflow:hidden;一個(gè)比較合理的方法
.texthidden { display:block;/*統(tǒng)一轉(zhuǎn)化為塊級元素*/ overflow: hidden; width: 0; height: 0; }
就像上面的一段CSS所展示的方法，將寬度和高度設(shè)定為0，然后超過部分隱藏，就會彌補(bǔ)上述一、二方法中的缺陷，也達(dá)到了隱藏內(nèi)容的目的。
82、你用過柵格系統(tǒng)嗎？如果使用過，你最喜歡哪種？
比如：Bootstrap，流式柵格系統(tǒng)
83、你用過媒體查詢，或針對移動(dòng)端的布局/CSS 嗎？
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) {….}
媒體查詢，就是響應(yīng)式布局。
84、你熟悉 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>
85、如何優(yōu)化網(wǎng)頁的打印樣式？
<link rel=”stylesheet” type=”text/css” media=”screen” href=”xxx.css” />
其中media指定的屬性就是設(shè)備，顯示器上就是screen，打印機(jī)則是print，電視是tv，投影儀是projection。
<link rel=”stylesheet” type=”text/css” media=”print” href=”yyy.css” />
但打印樣式表也應(yīng)有些注意事項(xiàng)：
1、打印樣式表中最好不要用背景圖片，因?yàn)榇蛴C(jī)不能打印CSS中的背景。如要顯示圖片，請使用html插入到頁面中。
2、最好不要使用像素作為單位，因?yàn)榇蛴邮奖硪蛴〕鰜淼臅菍?shí)物，所以建議使用pt和cm。
3、隱藏掉不必要的內(nèi)容。（@print div{display:none;}）
4、打印樣式表中最好少用浮動(dòng)屬性，因?yàn)樗鼈儠А?/p>
如果想要知道打印樣式表的效果如何，直接在瀏覽器上選擇打印預(yù)覽就可以了。
86、在書寫高效 CSS 時(shí)會有哪些問題需要考慮？
1.樣式是：從右向左的解析一個(gè)選擇器
2.ID最快，Universal最慢 有四種類型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify （永遠(yuǎn)不要這樣做 ul#main-navigation { } ID已經(jīng)是唯一的，不需要Tag來標(biāo)識，這樣做會讓選擇器變慢。）
4.后代選擇器最糟糕（換句話說，下面這個(gè)選擇器是很低效的： html body ul li a { }）
5.想清楚你為什么這樣寫
6.CSS3的效率問題（CSS3選擇器（比如 :nth-child）能夠漂亮的定位我們想要的元素，又能保證我們的CSS整潔易讀。但是這些神奇的選擇器會浪費(fèi)很多的瀏覽器資源。）
7.我們知道#ID速度是最快的，那么我們都用ID，是不是很快。但是我們不應(yīng)該為了效率而犧牲可讀性和可維護(hù)性
87、使用 CSS 預(yù)處理器的優(yōu)缺點(diǎn)有哪些？
(SASS，Compass，Stylus，LESS)
描述下你曾經(jīng)使用過的 CSS 預(yù)處理的優(yōu)缺點(diǎn)
88、如果設(shè)計(jì)中使用了非標(biāo)準(zhǔn)的字體，你該如何去實(shí)現(xiàn)？
Webfonts (字體服務(wù)例如：Google Webfonts，Typekit 等等。)
89、解釋下瀏覽器是如何判斷元素是否匹配某個(gè) CSS 選擇器？
瀏覽器先產(chǎn)生一個(gè)元素集合，這個(gè)集合往往由最后一個(gè)部分的索引產(chǎn)生（如果沒有索引就是所有元素的集合）。然后向上匹配，如果不符合上一個(gè)部分，就把元素從集合中刪除，直到真?zhèn)€選擇器都匹配完，還在集合中的元素就匹配這個(gè)選擇器了。
舉個(gè)例子，有選擇器：
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出來組成一個(gè)集合，然后上一層，對每一個(gè)集合中的元素，如果元素的 parent id 不為 #wrapper 則把元素從集合中刪去。 再向上，從這個(gè)元素的父元素開始向上找，沒有找到一個(gè) tagName 為 body 且 class 中有 ready 的元素，就把原來的元素從集合中刪去。
至此這個(gè)選擇器匹配結(jié)束，所有還在集合中的元素滿足。
大體就是這樣，不過瀏覽器還會有一些奇怪的優(yōu)化。
為什么從后往前匹配因?yàn)樾屎臀臋n流的解析方向。效率不必說，找元素的父親和之前的兄弟比遍歷所喲兒子快而且方便。關(guān)于文檔流的解析方向，是因?yàn)楝F(xiàn)在的 CSS，一個(gè)元素只要確定了這個(gè)元素在文檔流之前出現(xiàn)過的所有元素，就能確定他的匹配情況。應(yīng)用在即使 html 沒有載入完成，瀏覽器也能根據(jù)已經(jīng)載入的這一部分信息完全確定出現(xiàn)過的元素的屬性。
為什么是用集合主要也還是效率?；?CSS Rule 數(shù)量遠(yuǎn)遠(yuǎn)小于元素?cái)?shù)量的假設(shè)和索引的運(yùn)用，遍歷每一條 CSS Rule 通過集合篩選，比遍歷每一個(gè)元素再遍歷每一條 Rule 匹配要快得多。
90、解釋一下你對盒模型的理解，以及如何在 CSS 中告訴瀏覽器使用不同的盒模型來渲染你的布局。
所有HTML元素可以看作盒子，在CSS中，”box model”這一術(shù)語是用來設(shè)計(jì)和布局時(shí)使用。
CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
下面的圖片說明了盒子模型(Box Model)：
不同部分的說明：
91、解釋下事件代理？
JavaScript事件代理則是一種簡單的技巧，通過它你可以把事件處理器添加到一個(gè)父級元素上，這樣就避免了把事件處理器添加到多個(gè)子級元素上。
當(dāng)我們需要對很多元素添加事件的時(shí)候，可以通過將事件添加到它們的父節(jié)點(diǎn)而將事件委托給父節(jié)點(diǎn)來觸發(fā)處理函數(shù)。這主要得益于瀏覽器的事件冒泡機(jī)制。
事件代理用到了兩個(gè)在JavaSciprt事件中常被忽略的特性：事件冒泡以及目標(biāo)元素。
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
92、解釋下 JavaScript 中 this 是如何工作的？
this 永遠(yuǎn)指向函數(shù)運(yùn)行時(shí)所在的對象，而不是函數(shù)被創(chuàng)建時(shí)所在的對象。匿名函數(shù)或不處于任何對象中的函數(shù)指向 window
1.如果是call，apply,with，指定的this是誰，就是誰
2.普通的函數(shù)調(diào)用，函數(shù)被誰調(diào)用，this就是誰
93、解釋下原型繼承的原理？
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop)) {
return obj[prop];
}else if (obj.__proto__ !== null) {
return getProperty(obj.__proto__, prop);
}else{
return undefined;
}
}
94、生成時(shí)間戳的兩種方法？
JavaScript 獲取當(dāng)前時(shí)間戳：
第一種方法：
var timestamp = Date.parse(new Date());
結(jié)果：1280977330000
第二種方法：
var timestamp = (new Date()).valueOf();
結(jié)果：1280977330748
第三種方法：
var timestamp=new Date().getTime()；
結(jié)果：1280977330748
第一種：獲取的時(shí)間戳是把毫秒改成000顯示，
第二種和第三種是獲取了當(dāng)前毫秒的時(shí)間戳。
95、用原型鏈的方式給Array對象添加一個(gè)數(shù)組去重的方法？
Array.prototype.delRepeat=function() {
//tempRepeat保存重復(fù)數(shù)組項(xiàng)
var tempRepeat = [];
var obj = {}; //保存數(shù)組中每項(xiàng)，及其出現(xiàn)的次數(shù)
//遍歷數(shù)組
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());
96、定義一個(gè)方法，對所有傳入的數(shù)字參數(shù)的第三位小數(shù)進(jìn)行
四舍五入，使得返回值保留兩位小數(shù)，不夠的補(bǔ)0
97、定義一個(gè)方法，實(shí)現(xiàn)階乘
function factorial(num) {
if(num <= 1) {
return 1;
} else {
return num * arguments.callee(num – 1);
}
}
98、定義一段代碼，頁面載入完成1分鐘后非緩存模式刷新當(dāng)前頁面
window.onload=function()
{
setTimeout(function(){
location.reload();//要執(zhí)行刷新的代碼
},60000);
}
99、document.getElementById(“HEAD”).onclick=function(oEvent){
var A = oEvent.type.B = oEvent.target
}
A和B的值是什么？
100、阻止事件默認(rèn)行為和事件冒泡的方法是什么
默認(rèn)行為：event.preventDefault();
冒泡：event.stopPropregation();
event.cancelBubble();
101、把Object的實(shí)例化對象A、B、C合并 賦值給對象C
102、設(shè)置一個(gè)已知ID的DIV的html內(nèi)容為xxx，字體顏色設(shè)置為黑色（不使用第三方框架）
103、當(dāng)一個(gè)DOM節(jié)點(diǎn)被點(diǎn)擊的時(shí)候，我們希望能夠執(zhí)行一個(gè)函數(shù)，應(yīng)該怎么做？
直接在DOM里綁定事件：
在JS里通過onclick綁定：xxx.onclick = test
通過事件添加進(jìn)行綁定：addEventListener(xxx, ‘click’, test)
104、什么是Ajax和JSON，他們的優(yōu)缺點(diǎn)？
Ajax是一種異步提交數(shù)據(jù)的方法。
通常在html中，要想重新獲取頁面的數(shù)據(jù)。更新某一個(gè)地方的數(shù)據(jù)時(shí)。就必須得刷新整個(gè)頁面，才能重新刷新數(shù)據(jù)。那么問題來了，當(dāng)我們僅僅只需要更新某一個(gè)小地方的數(shù)據(jù)時(shí)。我們也來刷新整個(gè)頁面的話，就顯得有點(diǎn)麻煩了，于是Ajax就幫我們完成了這個(gè)功能，讓我們單獨(dú)開辟一條道路來進(jìn)行獲取數(shù)據(jù)，然后頁面不需要刷新，用JS把AJAX請求的數(shù)據(jù)顯示到該顯示的地方。AJAX叫 無刷新獲取技術(shù)
json 是一種數(shù)據(jù)的載體，可以把他想象成數(shù)組一樣的東西，只不過，它有點(diǎn)牛，就是很多格式都可以自動(dòng)支持。就差不多這樣了。
105、看下列代碼輸出為何？解釋原因？
var a;
alert(typeof a);//undefined
alert(b); //報(bào)錯(cuò)
106、看下列代碼，輸出什么？解釋原因？
var a = null;
alert(typeof a); //object
107、看下列代碼，輸出什么？
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
108、看代碼給答案？
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value); //2
109、輸出今天的日期，以YYYY-MM-DD的方式，比如今天是2016年4月12日，則 輸出2016-04-12
var d = new Date();
// 獲取年，getFullYear()返回4位的數(shù)字 //今年：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);
110、將字符串”<tr><td>{$id}</td><td>${name}</td></tr>”中的${id}替換成10，{$name}替換成Tony(使用正則表達(dá)式)
答案：”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10′).replace(/{\$name}/g, ‘Tony’);
111、為了保證頁面輸出安全，我們經(jīng)常需要對一些特殊的字符進(jìn)行轉(zhuǎn)義，請寫出一個(gè)函數(shù)escapeHtml，將< , > & , ” 進(jìn)行轉(zhuǎn)義
String.prototype.escapeHTML = function
() {
return
this.replace(/&/g,’&’).replace(/>/g,’>’).replace(/</g,’<’).replace(/”/g,’"’);
};
112、foo = foo || bar ,這行代碼是什么意思？為什么要這樣寫？
foo和bar應(yīng)該都是bool型變量，||是表示 或 的意思，只要foo或者bar有一個(gè)為真，那么這個(gè)表達(dá)式的值就為真，并把它賦給foo
113、看下列代碼，將會輸出什么?
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
結(jié)果：undifined，2
var foo=1; 它的作用域是window；但是函數(shù)體內(nèi)有同名局部變量，在執(zhí)行函數(shù)時(shí)，第一句會尋找體內(nèi)變量。
如果想調(diào)用該定義，需明確指定作用域，不指定則默認(rèn)函數(shù)體本身。
console.log(window.foo); //1
114、用js實(shí)現(xiàn)隨機(jī)選取10~100之間的10個(gè)數(shù)字，存入一個(gè)數(shù)組，并且排序
function sortNumber(a,b){
return a-b;//升序
//return b-a;//降序
}
//js實(shí)現(xiàn)隨機(jī)選取10–100之間的10個(gè)數(shù)字，存入一個(gè)數(shù)組，并排序
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);
115、寫一個(gè)function 清除字符串前后的空格（兼容所有瀏覽器）
第一種：循環(huán)替換
//供使用者調(diào)用
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的內(nèi)部實(shí)現(xiàn)為：
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;
}
}
}
