前端面試題彙總 筆試題
前端面試題目
1. div和span的區別？
div是塊級標籤，span是行級標籤
2. 在html中，position取值有哪幾種，預設值是什麼？
取值：static、relative、fixed、absolute
預設值：static
3. 前端頁面由哪三層構成，分別是什麼？作用是什麼？
前端頁面構成：結構層、表示層、行為層
結構層（structural layer）
由 HTML 或 XHTML之類的標記語言負責建立。標籤，也就是那些出現在尖括號裡的單詞，對網頁內容的語義含義做出了描述，但這些標籤不包含任何關於如何顯示有關內容的資訊。例如，P標籤表達了這樣一種語義：“這是一個文字段。”
表示層（presentation layer）
由 CSS 負責建立。 CSS對“如何顯示有關內容”的問題做出了回答。
行為層（behaviorlayer）
負責回答“內容應該如何對事件做出反應”這一問題。這是 Javascript 語言和 DOM主宰的領域。
4. 如何居中一個浮動元素？
方式1:設定容器的浮動方式為相對定位，然後確定容器的寬高比如寬500 高 300 的層，然後設定層的外邊距。
<!DOCTYPEHTML>
<html>
<head>
<styletype="text/css">
div{
width: 500px;
height: 300px;
margin: -150px 0 0 -250px;
position: absolute;
left: 50%;
top: 50%;
background-color: yellow;
}
</style>
</head>
<body>
<div>
元素居中
</div>
</body>
</html>
方式2：需要position:absolute;絕對定位。而層的定位點，使用外補丁margin負值的方法。負值的大小為層自身寬度高度除以二。
<styletype="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}
-->
</style>
<div>讓層垂直居中於瀏覽器視窗</div>
5. 請簡述HTML和XHTML最重要的4點不同？
不同：
XHTML要求正確巢狀
XHTML 所有元素必須關閉
XHTML 區分大小寫
XHTML 屬性值要用雙引號
XHTML 用 id 屬性代替 name 屬性
XHTML 特殊字元的處理
6. 頁面佈局中常聽說的“結構與表現”分離，“結構”是指？“表現”是指？
“結構”：HTML
“表現”：CSS
7. 怎麼樣從web前端方面優化效能？至少列舉5點？
1) HTML部分
u 語義化HTML：好處在於可以使程式碼簡潔清晰，支援不同裝置，利於搜尋引擎，便於團隊開發；
u 減少DOM節點：加速頁面渲染；
u 給圖片加上正確的寬高值：這可以減少頁面重繪，同時防止圖片縮放；
u 防止src屬性和link的href屬性為空：當值為空時，瀏覽器很可能會把當前頁面當成其屬性值載入；
u 正確的閉合標籤：如避免使用<div/>，瀏覽器會多一個將它解析成<div\></div\>的過程；
u 連結為目錄或首頁的地址後面加”/”，如http://www.5icool.org/；
u 用LINK而不用@import方式匯入樣式；
u 樣式放在頁頭，JS放在頁尾；
u 縮小favicon.ico並快取；
2) CSS部分
u 避免使用CSS Expressions(CSS表示式)：如background-color: expression( (newDate()).getHours()%2 ? “#B8D4FF” : “#F08A00″ ) ;
u 避免使用CSS Filter（CSS濾鏡）；
u 使用CSS縮寫，減少程式碼量；
u 通過CSSSprites把同類圖片合成一張，減少圖片請求；
u 減少查詢層級：如.header .logo要好過.header .top .logo；
u 減少查詢範圍：如.header>li要好過.header li；
u 避免TAG標籤與CLASS或ID並存：如a.top、button#submit；
u 刪除重複的CSS；
3) Javscript部分
u 儘量少用全域性變數；
u 使用事件代理繫結事件，如將事件繫結在body上進行代理；
u 避免頻繁操作DOM節點；
u 不使用EVAL；
u 減少物件查詢，如a.b.c.d這種查詢方式非常耗效能，儘可能把它定義在變數裡；
u 型別轉換：把數字轉換成字串使用”” + 1，浮點數轉換成整型使用Math.floor()或者Math.round()；
u 對字串進行迴圈操作，譬如替換、查詢，應使用正則表示式；
u 刪除重複的JS；
4) 伺服器部分
u 儘量合併CSS、JS檔案，或將其直接寫在頁面上，減少HTTP請求；
u 壓縮CSS、JS檔案，縮短檔案傳輸時間；
u 避免404錯誤：特別要避免給404指定一個停擺頁面，否則所有404錯誤都將會載入一次頁面；
u 一般要求減少DNS查詢次數，如同一個頁面的請求資源儘量少的使用不同的主機名，這可以減少網站並行下載的數量，但很多網站為了加速下載資源其實是特意用了多個主機名，這裡要做一個權衡；
u 使用CDN加速，使使用者從離自己最近的伺服器下載檔案；
u 減少Cookie的大小，使用無cookie的域，客戶端請求靜態檔案的時候，減少 Cookie 的反覆傳輸對主域名的影響；
u 為檔案頭指定Expires，使內容具有快取性；
u 使用gzip壓縮內容；
8. JavaScript中哪些方法獲取元素?
getElementById
getElementsByClassName
getElementsByTagName
getElementsByName
9. 描述CSS hack技巧?
特定符號：適用於能識別特定符號的瀏覽器
核心符號：針對不同瀏覽器核心
10.用JS擷取字串，asdfgh，要fgh;?
方式1： ‘asdfgh’.substr(3,3)
方式2： ’asdfgh’.substring(3,5) 或者 ‘asdfgh’.substring(3)
11.IE6的雙倍邊距BUG指的是什麼？怎麼解決？
雙邊距：當塊級元素有浮動樣式的時候，給元素新增margin-left和margin-right樣式，在ie6下就會出現雙倍邊距。
解決方案：給當前元素新增樣式，使當前元素不為塊，如：display:inline;display:list-item
12.如果製作一個訪問量很大的網站，對css，js和圖片應該怎麼處理?
方法1：資原始檔按模組進行放置，有利於團隊開發
方法2：圖片儘量採取聚合技術
方法3：精簡壓縮css和js檔案，減少檔案大小
方法4：類庫、媒體使用CDN加速，減輕伺服器壓力
13.述ajax原理，什麼是同步非同步(主觀題，答案不唯一)?
Ajax的工作原理：相當於在使用者和伺服器之間加了—箇中間層，使使用者操作與伺服器響應非同步化。這樣把以前的一些伺服器負擔的工作轉嫁到客戶端，利於客戶端閒置的處理能力來處理，減輕伺服器和頻寬的負擔，從而達到節約ISP的空間及頻寬租用成本的目的。
同步非同步：
14.平時有沒有使用xml和json，在ajax互動中，哪一種更易於開發和維護，js中怎麼序列化JSON字串?
有，json相比xml可讀性和可擴張性好、編碼及解碼難度較低、在資料互動中頻寬佔用少，並且在當下是最流行的資料互動格式。
序列化JSON字串：eval() 或者 JSON.parse()
15. JS怎麼建立一個類?
方式1 : var obj = new Object();
方式2 : var obj = {};
16.JS的typeof返回哪些資料型別?
string、number、object、boolean、function、undefined
17. HTTP請求有哪幾種？
post、get
18.完成下面佈局（相容IE6-10以及FF、谷歌、蘋果瀏覽器）?
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title></title>
<style>
body {
margin: 0;
padding: 0;
}
#body {
background-color: #0099CB;
width: 100%;
float: left;
}
#header {
height: 60px;
background-color: #999999;
}
#content {
background-color: #006766;
margin-left: 180px;
}
#sidebar {
width: 180px;
float: left;
}
#footer {
clear: both;
height: 60px;
background-color: #999999;
}
</style>
</head>
<body>
<divid="header"></div>
<divid="body">
<divid="sidebar"></div>
<divid="content"></div>
</div>
<divid="footer"></div>
</body>
</html>
19.閉包是什麼？有什麼特性？請簡單書寫一個簡單事例？
必包：閉包是指可以包含自由（未繫結到特定物件）變數的程式碼塊；這些變數不是在這個程式碼塊內或者任何全域性上下文中定義的，而是在定義程式碼塊的環境中定義（區域性變數）
特性：閉包是能夠讀取其他函式內部變數的函式，即在外面可以呼叫函式中的函式的變數，其實他就是將函式內外部連線起來的橋樑
事例：
<scripttype=’text/javascript’>
function a(){
var i = 99;
iAdd = function(){
i++;
}
function b(){
alert(i);
}
return b;
}
var result = a();
result();//結果為99
iAdd();
result();//結果為100
</script>
20. 解釋jsonp的原理，以及為什麼不是真正的ajax（主觀題）？
JSONP是一種非正式傳輸協議，該協議的一個要點就是允許使用者傳遞一個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住JSON資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。
21. js延遲載入的方式有哪些？
defer和async、動態建立DOM方式（用得最多）、按需非同步載入js
22. 對WEB標準以及W3C的理解與認識？
標籤閉合、標籤小寫、不亂巢狀、提高搜尋機器人搜尋機率、使用外 鏈css和js指令碼、結構行為表現的分離、檔案下載與頁面速度更快、內容能被更多的使用者所訪問、內容能被更廣泛的裝置所訪問、更少的程式碼和元件，容易維 護、改版方便，不需要變動頁面內容、提供列印版本而不需要複製內容、提高網站易用性；
23. xhtml和html有什麼區別？
HTML是一種基本的WEB網頁設計語言，XHTML是一個基於XML的置標語言
最主要的不同：
XHTML 元素必須被正確地巢狀。
XHTML 元素必須被關閉。
標籤名必須用小寫字母。
XHTML 文件必須擁有根元素。
24. Doctype? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
用於宣告文件使用那種規範（html/Xhtml）一般為嚴格 過度 基於框架的html文件
加入XMl宣告可觸發，解析方式更改為IE5.5 擁有IE5.5的bug
25. 行內元素有哪些？塊級元素有哪些？CSS的盒模型？
塊級元素：div p h1 h2 h3 h4 form ul
行內元素: a b br i span input select
Css盒模型:內容，border ,margin，padding
26.CSS引入的方式有哪些?link和@import的區別是?
內聯 內嵌 外鏈 匯入
區別 ：同時載入
前者無相容性，後者CSS2.1以下瀏覽器不支援
Link 支援使用javascript改變樣式，後者不可
27.CSS選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？內聯和important哪個優先順序高？
標籤選擇符 類選擇符 id選擇符
繼承不如指定 Id>class>標籤選擇
後者優先順序高
28.前端頁面有哪三層構成，分別是什麼？作用是什麼？
結構層 Html 表示層 CSS 行為層 js
29.css的基本語句構成是？
選擇器{屬性1:值1;屬性2:值2;……}
30.你做的頁面在哪些流覽器測試過？這些瀏覽器的核心分別是什麼?
Ie(Ie核心)火狐（Gecko）谷歌（webkit） opear(Presto)
31.寫出幾種IE6 BUG的解決方法？
1.雙邊距BUG float引起的使用display
2.3畫素問題使用float引起的使用dislpay:inline-3px
3.超連結hover 點選後失效使用正確的書寫順序link visited hover active
4.Ie z-index問題給父級新增position:relative
5.Png 透明使用js程式碼改
6.Min-height 最小高度！Important解決’
7.select 在ie6下遮蓋使用iframe巢狀
8.為什麼沒有辦法定義1px左右的寬度容器（IE6預設的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）
32.<img>標籤上title與alt屬性的區別是什麼？Alt 當圖片不顯示是用文字代表。
Title 為該屬性提供資訊
33.描述css reset的作用和用途？
Reset重置瀏覽器的css預設屬性瀏覽器的品種不同，樣式不同，然後重置，讓他們統一
34.解釋css sprites，如何使用？Css 精靈把一堆小的圖片整合到一張大的圖片上，減輕伺服器對圖片的請求數量
35.瀏覽器標準模式和怪異模式之間的區別是什麼？盒子模型渲染模式的不同使用 window.top.document.compatMode 可顯示為什麼模式
36.你如何對網站的檔案和資源進行優化？期待的解決方案包括：檔案合併檔案最小化/檔案壓縮使用CDN託管快取的使用
37.什麼是語義化的HTML？直觀的認識標籤對於搜尋引擎的抓取有好處
38.清除浮動的幾種方式，各自的優缺點？1.使用空標籤清除浮動 clear:both（理論上能清楚任何標籤，，，增加無意義的標籤）
2.使用overflow:auto（空標籤元素清除浮動而不得不增加無意程式碼的弊端,,使用zoom:1用於相容IE）
3.是用afert偽元素清除浮動(用於非IE瀏覽器)
39.javascript的typeof返回哪些資料型別？
Object number function boolean underfind
40.例舉3種強制型別轉換和2種隱式型別轉換？強制（parseInt,parseFloat,number）隱式（== – ===）
41.split() join() 的區別？前者是切割成陣列的形式，後者是將陣列轉換成字串
42.陣列方法pop() push() unshift() shift()？
Push()尾部新增 pop()尾部刪除
Unshift()頭部新增 shift()頭部刪除
43.14.JS中的call()和apply()方法的區別？
例子中用 add 來替換 sub，add.call(sub,3,1) == add(3,1) ，所以執行結果為：alert(4);
注意：js 中的函式其實是物件，函式名是對 Function 物件的引用。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
44.IE和DOM事件流的區別？
1.執行順序不一樣、
2.引數不一樣
3.事件加不加on
4.this指向問題
45.IE和標準下有哪些相容性的寫法？
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
46.ajax請求的時候get 和post方式的區別？一個在url後面一個放在虛擬載體裡面有大小限制安全問題應用不同一個是論壇等只需要請求的，一個是類似修改密碼的
47.call和apply的區別？
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
48.ajax請求時，如何解釋json資料？使用eval parse 鑑於安全性考慮使用parse更靠譜
49.new操作符具體幹了什麼呢?
1、建立一個空物件，並且 this 變數引用該物件，同時還繼承了該函式的原型。
2、屬性和方法被加入到 this 引用的物件中。
3、新建立的物件由 this 所引用，並且最後隱式的返回 this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
50.寫一個獲取非行間樣式的函式？
functiongetStyle(obj,attr,value)
{
if(!value)
{
if(obj.currentStyle)
{
return obj.currentStyle(attr)
}
else
{
obj.getComputedStyle(attr,false)
}
}
else
{
obj.style[attr]=value
}
}
51.事件委託是什麼？讓利用事件冒泡的原理，讓自己的所觸發的事件，讓他的父元素代替執行！http://www.webasily.com/?p=78例子可見此連結
53.如何阻止事件冒泡和預設事件？
canceBubble return false
54.新增刪除替換插入到某個接點的方法？
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
55.解釋jsonp的原理，以及為什麼不是真正的ajax？動態建立script標籤，回撥函式
Ajax是頁面無重新整理請求資料操作
56.javascript的本地物件，內建物件和宿主物件？本地物件為array obj regexp等可以new例項化內建物件為gload Math 等不可以例項化的宿主為瀏覽器自帶的document,window 等
57.document load 和document ready的區別？
Document.onload 是在結構和樣式載入完才執行js
Document.ready原生種沒有這個方法，jquery中有 $().ready(function)
58.”==”和“===”的不同？前者會自動轉換型別後者不會
59.javascript的同源策略？一段指令碼只能讀取來自於同一來源的視窗和文件的屬性，這裡的同一來源指的是主機名、協議和埠號的組合
60.編寫一個數組去重的方法？
function oSort(arr)
{
varresult ={};
varnewArr=[];
for(vari=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
returnnewArr
}
61.Doctype作用? 嚴格模式與混雜模式-如何觸發這兩種模式，區分它們有何意義?
（1）、<!DOCTYPE> 宣告位於文件中的最前面，處於 <html>標籤之前。告知瀏覽器的解析器，用什麼文件型別 規範來解析這個文件。
（2）、嚴格模式的排版和 JS 運作模式是 以該瀏覽器支援的最高標準執行。
（3）、在混雜模式中，頁面以寬鬆的向後相容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。
（4）、DOCTYPE不存在或格式不正確會導致文件以混雜模式呈現。
62.行內元素有哪些？塊級元素有哪些？空(void)元素有那些？
（1）CSS規範規定，每個元素都有display屬性，確定該元素的型別，每個元素都有預設的display值，比如div預設display屬性值為“block”，成為“塊級”元素；span預設display屬性值為“inline”，是“行內”元素。
（2）行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
（3）知名的空元素： <br> <hr> <img> <input> <link><meta>
鮮為人知的是： <area><base> <col> <command> <embed> <keygen><param> <source> <track> <wbr>
63.CSS的盒子模型？
（1）兩種， IE 盒子模型、標準 W3C 盒子模型；IE 的content部分包含了border 和 pading;
（2）盒模型： 內容(content)、填充(padding)、邊界(margin)、 邊框(border).
64.link 和@import 的區別是?
（1）、link屬於XHTML標籤，而@import是CSS提供的;
（2）、頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入;
（3）、import只在IE5以上才能識別，而link是XHTML標籤，無相容問題;
（4）、link方式的樣式的權重 高於@import的權重.
65.CSS 選擇符有哪些？哪些屬性可以繼承？優先順序演算法如何計算？ CSS3新增偽類有那些？
1.id選擇器（ # myid）
2.類選擇器（.myclassname）
3.標籤選擇器（div, h1, p）
4.相鄰選擇器（h1 + p）
5.子選擇器（ul < li）
6.後代選擇器（li a）
7.萬用字元選擇器（ * ）
8.屬性選擇器（a[rel = "external"]）
9.偽類選擇器（a: hover, li: nth - child）
可繼承： font-sizefont-family color, UL LI DL DD DT;
不可繼承 ：border paddingmargin width height ;
優先順序就近原則，樣式定義最近者為準;
載入樣式以最後載入的定位為準;
優先順序為:
!important > id > class > tag
important 比 內聯優先順序高
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，單選框或複選框被選中。
66.如何居中div,如何居中一個浮動元素?
· 給div設定一個寬度，然後新增margin:0 auto屬性
· div{
· width:200px;
· margin:0 auto;
· }
· 居中一個浮動元素
· 確定容器的寬高 寬500 高 300 的層
· 設定層的外邊距
·
· .div {
· Width:500px ; height:300px;//高度可以不設
· Margin: -150px 0 0 -250px;
· position:relative;相對定位
· background-color:pink;//方便看效果
· left:50%;
· top:50%;
· }
67.瀏覽器的核心分別是什麼?經常遇到的瀏覽器的相容性有哪些？原因，解決方法是什麼，常用hack的技巧？
* IE瀏覽器的核心Trident、 Mozilla的Gecko、google的WebKit、Opera核心Presto；
* png24為的圖片在iE6瀏覽器上出現背景，解決方案是做成PNG8.
* 瀏覽器預設的margin和padding不同。解決方案是加一個全域性的*{margin:0;padding:0;}來統一。
* IE6雙邊距bug:塊屬性標籤float後，又有橫行的margin情況下，在ie6顯示margin比設定的大。
浮動ie產生的雙倍距離 #box{float:left; width:10px; margin:0 0 0 100px;}
這種情況之下IE會產生20px的距離，解決方案是在float的標籤樣式控制中加入 ——_display:inline;將其轉化為行內屬性。(_這個符號只有ie6會識別)
漸進識別的方式，從總體中逐漸排除區域性。
首先，巧妙的使用“\9”這一標記，將IE遊覽器從所有情況中分離出來。
接著，再次使用“+”將IE8和IE7、IE6分離開來，這樣IE8已經獨立識別。
css
.bb{
background-color:#f1ee18;/*所有識別*/
.background-color:#00deff\9; /*IE6、7、8識別*/
+background-color:#a200ff;/*IE6、7識別*/
_background-color:#1e0bd1;/*IE6識別*/
}
* IE下,可以使用獲取常規屬性的方法來獲取自定義屬性,
也可以使用getAttribute()獲取自定義屬性;
Firefox下,只能使用getAttribute()獲取自定義屬性.
解決方法:統一通過getAttribute()獲取自定義屬性.
* IE下,even物件有x,y屬性,但是沒有pageX,pageY屬性;
Firefox下,event物件有pageX,pageY屬性,但是沒有x,y屬性.
* （條件註釋）缺點是在IE瀏覽器下可能會增加額外的HTTP請求數。
* Chrome 中文介面下預設會將小於 12px 的文字強制按照 12px 顯示, 可通過加入 CSS 屬性 -webkit-text-size-adjust: none; 解決.
超連結訪問過後hover樣式就不出現了 被點選訪問過的超連結樣式不在具有hover和active瞭解決方法是改變CSS屬性的排列順序:
L-V-H-A : a:link {} a:visited {}a:hover {} a:active {}
68.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]-->
69.你怎麼來實現頁面設計圖，你認為前端應該如何高質量完成工作? 一個滿屏品字佈局如何設計?
* 首先劃分成頭部、body、腳部；。。。。。
實現效果圖是最基本的工作，精確到2px；
與設計師，產品經理的溝通和專案的參與
做好的頁面結構，頁面重構和使用者體驗
處理hack，相容、寫出優美的程式碼格式
針對伺服器的優化、擁抱 HTML5。
70.常使用的庫有哪些？常用的前端開發工具？開發過什麼應用或元件？
* 使用率較高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超過91%。
輕量級框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解這些框架的功能、效能、設計原理）
* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
* 城市選擇外掛，汽車型號選擇外掛、幻燈片外掛。彈出層。（寫過開源程式，載入器，js引擎更好）
1. JavaScript原型，原型鏈 ? 有什麼特點？
2. * 原型物件也是普通的物件，是物件一個自帶隱式的 __proto__ 屬性，原型也有可能有自己的原型，如果一個原型物件的原型不為null的話，我們就稱之為原型鏈。
3. * 原型鏈是由一些用來繼承和共享屬性的物件組成的（有限的）物件鏈。
4.
5. * JavaScript的資料物件有那些屬性值？
6.
7. writable：這個屬性的值是否可以改。
8.
9. configurable：這個屬性的配置是否可以刪除，修改。
10.
11. enumerable：這個屬性是否能在for…in迴圈中遍歷出來或在Object.keys中列舉出來。
12.
13. value：屬性值。
14.
15. * 當我們需要一個屬性的時，Javascript引擎會先看當前物件中是否有這個屬性，如果沒有的話，就會查詢他的Prototype物件是否有這個屬性。
16.
17. function clone(proto) {
18.
19. function Dummy() { }
20.
21. Dummy.prototype = proto;
22.
23. Dummy.prototype.constructor = Dummy;
24.
25. return new Dummy(); //等價於Object.create(Person);
26.
27. }
28.