零散面試總結 · web-knowledge

## 前端開發知識點： ### HTML&CSS：對Web標準的理解、瀏覽器內核差異、兼容性、hack、CSS基本功：布局、盒子模型、選擇器優先級、 HTML5、CSS3、Flexbox ### JavaScript：數據類型、運算、對象、Function、繼承、閉包、作用域、原型鏈、事件、RegExp、JSON、Ajax、 DOM、BOM、內存泄漏、跨域、異步裝載、模板引擎、前端MVC、路由、模塊化、Canvas、 ECMAScript 6、Nodejs ### 其他：移動端、響應式、自動化構建、HTTP、離線存儲、WEB安全、優化、重構、團隊協作、可維護、易用性、 SEO、UED、架構、職業生涯、快速學習能力作為一名前端工程師，無論工作年頭長短都應該掌握的知識點：此條由王子墨發表在攻城師的實驗室 1、DOM結構 —— 兩個節點之間可能存在哪些關系以及如何在節點之間任意移動。 2、DOM操作 —— 如何添加、移除、移動、復制、創建和查找節點等。 3、事件 —— 如何使用事件，以及IE和標準DOM事件模型之間存在的差別。 4、XMLHttpRequest —— 這是什么、怎樣完整地執行一次GET請求、怎樣檢測錯誤。 5、嚴格模式與混雜模式 —— 如何觸發這兩種模式，區分它們有何意義。 6、盒模型 —— 外邊距、內邊距和邊框之間的關系，及IE8以下版本的瀏覽器中的盒模型 7、塊級元素與行內元素 —— 怎么用CSS控制它們、以及如何合理的使用它們 8、浮動元素 —— 怎么使用它們、它們有什么問題以及怎么解決這些問題。 9、HTML與XHTML —— 二者有什么區別，你覺得應該使用哪一個并說出理由。 10、JSON —— 作用、用途、設計結構。備注：更新記錄： ### 1. HTML Doctype作用？標準模式與兼容模式各有什么區別? （1）、<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。（2）、標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。 ### 2. HTML5 為什么只需要寫 `<!DOCTYPE HTML>`？ HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。 ### 3. 行內元素有哪些？塊級元素有哪些？空(void)元素有那些？首先：CSS規范規定，每個元素都有display屬性，確定該元素的類型，每個元素都有默認的display值，如div的display默認值為“block”，則為“塊級”元素；span默認display屬性值為“inline”，是“行內”元素。（1）行內元素有：`a b span img input select strong`（強調的語氣）（2）塊級元素有：`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>` ### 4. 不同瀏覽器（版本）、HTML4（5）、CSS2等實際略有差異參考: http://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements ### 5. 頁面導入樣式時，使用link和@import有什么區別？（1）link屬于XHTML標簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS; （2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無兼容問題; ### 5. 介紹一下你對瀏覽器內核的理解？主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，然后會輸出至顯示器或打印機。瀏覽器的內核的不同對于網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網絡內容的應用程序都需要內核。 JS引擎則：解析和執行javascript來實現網頁的動態效果。最開始渲染引擎和JS引擎并沒有區分的很明確，后來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的分支）] 詳細文章：瀏覽器內核的解析和對比 ### 6. 如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素 ### 7. 簡述一下你對HTML語義化的理解？用正確的標簽做正確的事情。 html語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析; 即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的; 搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，利于SEO; 使閱讀源代碼的人對網站更容易將網站分塊，便于閱讀維護理解。 HTML5的離線儲存怎么使用，工作原理能不能解釋一下？在用戶沒有與因特網連接時，可以正常訪問站點或應用，在用戶與因特網連接時，更新用戶機器上的緩存文件。原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術)，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當網絡在處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。如何使用： 1、頁面頭部像下面一樣加入一個manifest的屬性； 2、在cache.manifest文件的編寫離線存儲的資源； ~~~ CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html ~~~ 3、在離線狀態時，操作window.applicationCache進行需求實現。詳細的使用請參考： HTML5 離線緩存-manifest簡介 iframe有那些缺點？ *iframe會阻塞主頁面的Onload事件； *搜索引擎的檢索程序無法解讀這種頁面，不利于SEO; *iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。 Label的作用是什么？是怎么用的？ label標簽來定義表單控制間的關系,當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。 ~~~ <label for="Name">Number:</label> <input type=“text“name="Name" id="Name"/> <label>Date:<input type="text" name="B"/></label> ~~~ HTML5的form如何關閉自動完成功能？給不想要提示的 form 或某個 input 設置為 autocomplete=off。如何實現瀏覽器內多個標簽頁之間的通信? (阿里) WebSocket、SharedWorker；也可以調用localstorge、cookies等本地存儲方式； localstorge另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件，我們通過監聽事件，控制它的值來進行頁面信息通信；注意quirks：Safari 在無痕模式下設置localstorge值時會拋出 QuotaExceededError 的異常； webSocket如何兼容低瀏覽器？(阿里) Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、基于 multipart 編碼發送 XHR 、基于長輪詢的 XHR 頁面可見性（Page Visibility API）可以有哪些用途？通過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等; 在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放；如何在頁面上實現一個圓形的可點擊區域？ 1、map+area或者svg 2、border-radius 3、純js實現需要求一個點在不在圓上簡單算法、獲取鼠標坐標等等實現不使用 border 畫出1px高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果。 <div style="height:1px;overflow:hidden;background:red"></div> 網頁驗證碼是干嘛的，是為了解決什么安全問題。區分用戶是計算機還是人的公共全自動程序。可以防止惡意破解密碼、刷票、論壇灌水；有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。 title與h1的區別、b與strong的區別、i與em的區別？ title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面信息的抓取也有很大的影響； strong是標明重點內容，有語氣加強的含義，使用閱讀設備閱讀網絡時：strong>會重讀，而B>是展示強調內容。 i內容展示為斜體，em表示強調的文本； Physical Style Elements -- 自然樣式標簽 b, i, u, s, pre Semantic Style Elements -- 語義樣式標簽 strong, em, ins, del, code 應該準確使用語義樣式標簽, 但不能濫用, 如果不能確定時首選使用自然樣式標簽。 CSS 介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？（1）有兩種， IE 盒子模型、W3C 盒子模型；（2）盒模型：內容(content)、填充(padding)、邊界(margin)、邊框(border)；（3）區別： IE的content部分把 border 和 padding計算了進去; CSS選擇符有哪些？哪些屬性可以繼承？ 1.id選擇器（ # myid） 2.類選擇器（.myclassname） 3.標簽選擇器（div, h1, p） 4.相鄰選擇器（h1 + p） 5.子選擇器（ul > li） 6.后代選擇器（li a） 7.通配符選擇器（ * ） 8.屬性選擇器（a[rel = "external"]） 9.偽類選擇器（a:hover, li:nth-child）可繼承的樣式： font-size font-family color, UL LI DL DD DT; 不可繼承的樣式：border padding margin width height ; CSS優先級算法如何計算？優先級就近原則，同權重情況下樣式定義最近者為準; 載入樣式以最后載入的定位為準; 優先級為: !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> 元素。 :after 在元素之前添加內容,也可以用來做清除浮動。 :before 在元素之后添加內容 :enabled :disabled 控制表單控件的禁用狀態。 :checked 單選框或復選框被選中。如何居中div？水平居中：給div設置一個寬度，然后添加margin:0 auto屬性 div{ width:200px; margin:0 auto; } 讓絕對定位的div居中 div { position: absolute; width: 300px; height: 300px; margin: auto; top: 0; left: 0; bottom: 0; right: 0; background-color: pink; /* 方便看效果 */ } 水平垂直居中一確定容器的寬高寬500 高 300 的層設置層的外邊距 div { position: relative; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; margin: -150px 0 0 -250px; /* 外邊距為自身寬高的一半 */ background-color: pink; /* 方便看效果 */ } 水平垂直居中二未知容器的寬高，利用 `transform` 屬性 div { position: absolute; /* 相對定位或絕對定位均可 */ width:500px; height:300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: pink; /* 方便看效果 */ } 水平垂直居中三利用 flex 布局實際使用時應考慮兼容性 .container { display: flex; align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } .container div { width: 100px; height: 100px; background-color: pink; /* 方便看效果 */ } display有哪些值？說明他們的作用。 block 塊類型。默認寬度為父元素寬度，可設置寬高，換行顯示。 none 缺省值。象行內元素類型一樣顯示。 inline 行內元素類型。默認寬度為內容寬度，不可設置寬高，同行顯示。 inline-block 默認寬度為內容寬度，可以設置寬高，同行顯示。 list-item 象塊類型元素一樣顯示，并添加樣式列表標記。 table 此元素會作為塊級表格來顯示。 inherit 規定應該從父元素繼承 display 屬性的值。 position的值relative和absolute定位原點是？ absolute 生成絕對定位的元素，相對于值不為 static的第一個父元素進行定位。 fixed （老IE不支持）生成絕對定位的元素，相對于瀏覽器窗口進行定位。 relative 生成相對定位的元素，相對于其正常位置進行定位。 static 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right z-index 聲明）。 inherit 規定從父元素繼承 position 屬性的值。 #### CSS3有哪些新特性？ * 新增各種CSS選擇器（: not(.input)：所有 class 不是“input”的節點） * 圓角（border-radius:8px） * 多列布局（multi-column layout） * 陰影和反射（Shadow\Reflect） * 文字特效（text-shadow、） * 文字渲染（Text-decoration） * 線性漸變（gradient） * 旋轉（transform） * 縮放,定位,傾斜,動畫,多背景例如:transform:\scale(0.85,0.90)\ translate(0px,-30px)\ skew(-9deg,0deg)\Animation: #### 請解釋一下CSS3的Flexbox（彈性盒布局模型）,以及適用場景？一個用于頁面布局的全新CSS3功能，Flexbox可以把列表放在同一個方向（從上到下排列，從左到右），并讓列表能延伸到占用可用的空間。較為復雜的布局還可以通過嵌套一個伸縮容器（flex container）來實現。采用Flex布局的元素，稱為Flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為Flex項目（flex item），簡稱"項目"。常規布局是基于塊和內聯流方向，而Flex布局是基于flex-flow流可以很方便的用來做局中，能對不同屏幕大小自適應。在布局上有了比以前更加靈活的空間。具體：http://www.w3cplus.com/css3/flexbox-basics.html 用純CSS創建一個三角形的原理是什么？把上、左、右三條邊隱藏掉（顏色設為 transparent） ~~~ #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } ~~~ 一個滿屏品字布局如何設計? 簡單的方式：上面的div寬100%，下面的兩個div分別寬50%，然后用float或者inline使其不換行即可 css多列等高如何實現？利用padding-bottom|margin-bottom正負值相抵；設置父容器設置超出隱藏（overflow:hidden），這樣子父容器的高度就還是它里面的列沒有設定padding-bottom時的高度，當它里面的任一列高度增加了，則父容器的高度被撐到里面最高那列的高度，其他比這列矮的列會用它們的padding-bottom補償這部分高度差。經常遇到的瀏覽器的兼容性有哪些？原因，解決方法是什么，常用hack的技巧？ * 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:red;/*所有識別*/ 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 {} li與li之間有看不見的空白間隔是什么原因引起的？有什么解決辦法？行框的排列會受到中間空白（回車\空格）等的影響，因為空格也屬于字符,這些空白也會被應用樣式，占據空間，所以會有間隔，把字符大小設為0，就沒有空格了。為什么要初始化CSS樣式。 - 因為瀏覽器的兼容問題，不同瀏覽器對有些標簽的默認值是不同的，如果沒對CSS初始化往往會出現瀏覽器之間的頁面顯示差異。 - 當然，初始化樣式會對SEO有一定的影響，但魚和熊掌不可兼得，但力求影響最小的情況下初始化。最簡單的初始化方法： * {padding: 0; margin: 0;} （強烈不建議）淘寶的樣式初始化代碼： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list-style:none; } a { text-decoration:none; } a:hover { text-decoration:underline; } sup { vertical-align:text-top; } sub{ vertical-align:text-bottom; } legend { color:#000; } fieldset, img { border:0; } button, input, select, textarea { font-size:100%; } table { border-collapse:collapse; border-spacing:0; } absolute的containing block(容器塊)計算方式跟正常流有什么不同？無論屬于哪種，都要先找到其祖先元素中最近的 position 值不為 static 的元素，然后再判斷： 1、若此元素為 inline 元素，則 containing block 為能夠包含這個元素生成的第一個和最后一個 inline box 的 padding box (除 margin, border 外的區域) 的最小矩形； 2、否則,則由這個祖先元素的 padding box 構成。如果都找不到，則為 initial containing block。補充： 1. static(默認的)/relative：簡單說就是它的父元素的內容框（即去掉padding的部分） 2. absolute: 向上找最近的定位為absolute/relative的元素 3. fixed: 它的containing block一律為根元素(html/body)，根元素也是initial containing block CSS里的visibility屬性有個collapse屬性值是干嘛用的？在不同瀏覽器下以后什么區別？ position跟display、margin collapse、overflow、float這些特性相互疊加后會怎么樣？對BFC規范(塊級格式化上下文：block formatting context)的理解？（W3C CSS 2.1 規范中的一個概念,它是一個獨立容器，決定了元素如何對其內容進行定位,以及與其他元素的關系和相互作用。）一個頁面是由很多個 Box 組成的,元素的類型和 display 屬性,決定了這個 Box 的類型。不同類型的 Box,會參與不同的 Formatting Context（決定如何渲染文檔的容器）,因此Box內的元素會以不同的方式渲染,也就是說BFC內部的元素和外部的元素不會互相影響。 css定義的權重以下是權重的規則：標簽的權重為1，class的權重為10，id的權重為100，以下例子是演示各種定義的權重值： /*權重為1*/ div{ } /*權重為10*/ .class1{ } /*權重為100*/ #id1{ } /*權重為100+1=101*/ #id1 div{ } /*權重為10+1=11*/ .class1 div{ } /*權重為10+10+1=21*/ .class1 .class2 div{ } 如果權重相同，則最后定義的樣式會起作用，但是應該避免這種情況出現請解釋一下為什么需要清除浮動？清除浮動的方式清除浮動是為了清除使用浮動元素產生的影響。浮動的元素，高度會塌陷，而高度的塌陷使我們頁面后面的布局不能正常顯示。 1、父級div定義height； 2、父級div 也一起浮動； 3、常規的使用一個class； .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } 4、SASS編譯的時候，浮動元素的父級div定義偽類:after &:after,&:before{ content: " "; visibility: hidden; display: block; height: 0; clear: both; } 解析原理： 1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間; 2) height:0 避免生成內容破壞原有布局的高度。 3) visibility:hidden 使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和交互; 4）通過 content:"."生成內容作為最后一個元素，至于content里面是點還是其他都是可以的，例如oocss里面就有經典的 content:".",有些版本可能content 里面內容為空,一絲冰涼是不推薦這樣做的,firefox直到7.0 content:”" 仍然會產生額外的空隙； 5）zoom：1 觸發IE hasLayout。通過分析發現，除了clear：both用來閉合浮動的，其他代碼無非都是為了隱藏掉content生成的內容，這也就是其他版本的閉合浮動為什么會有font-size：0，line-height：0。 zoom:1的清楚浮動原理? 清楚浮動，觸發hasLayout； Zoom屬性是IE瀏覽器的專有屬性，它可以設置或檢索對象的縮放比例。解決ie下比較奇葩的bug。譬如外邊距（margin）的重疊，浮動清除，觸發ie的haslayout屬性等。來龍去脈大概如下：當設置了zoom的值之后，所設置的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這里一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不隨著自動擴大的問題。 Zoom屬是IE瀏覽器的專有屬性，火狐和老版本的webkit核心的瀏覽器都不支持這個屬性。然而，zoom現在已經被逐步標準化，出現在 CSS 3.0 規范草案中。目前非ie由于不支持這個屬性，它們又是通過什么屬性來實現元素的縮放呢？可以通過css3里面的動畫屬性scale進行縮放。移動端的布局用過媒體查詢嗎？假設你現在正用一臺顯示設備來閱讀這篇文章，同時你也想把它投影到屏幕上，或者打印出來，而顯示設備、屏幕投影和打印等這些媒介都有自己的特點，CSS就是為文檔提供在不同媒介上展示的適配方法當媒體查詢為真時，相關的樣式表或樣式規則會按照正常的級聯規被應用。當媒體查詢返回假，標簽上帶有媒體查詢的樣式表仍將被下載（只不過不會被應用）。包含了一個媒體類型和至少一個使用寬度、高度和顏色等媒體屬性來限制樣式表范圍的表達式。 CSS3加入的媒體查詢使得無需修改內容便可以使樣式應用于某些特定的設備范圍。 @media (min-width: 700px) and (orientation: landscape){ .sidebar { display: none; } } 使用 CSS 預處理器嗎？喜歡那個？ SASS (SASS、LESS沒有本質區別，只因為團隊前端都是用的SASS) CSS優化、提高性能的方法有哪些？關鍵選擇器（key selector）。選擇器的最后面的部分為關鍵選擇器（即用來匹配目標元素的部分）；如果規則擁有 ID 選擇器作為其關鍵選擇器，則不要為規則增加標簽。過濾掉無關的規則（這樣樣式系統就不會浪費時間去匹配它們了）；提取項目的通用公有樣式，增強可復用性，按模塊編寫組件；增強項目的協同開發性、可維護性和可擴展性; 使用預處理工具或構建工具（gulp對css進行語法檢查、自動補前綴、打包壓縮、自動優雅降級）；瀏覽器是怎樣解析CSS選擇器的？樣式系統從關鍵選擇器開始匹配，然后左移查找規則選擇器的祖先元素。只要選擇器的子樹一直在工作，樣式系統就會持續左移，直到和規則匹配，或者是因為不匹配而放棄該規則。在網頁中的應該使用奇數還是偶數的字體？為什么呢？ margin和padding分別適合什么場景使用？ margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。 margin用于布局分開元素使元素與元素互不相干； padding用于元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段抽離樣式模塊怎么寫，說出思路，有無實踐經驗？[阿里航旅的面試題] 元素豎向的百分比設定是相對于容器的高度嗎？全屏滾動的原理是什么？用到了CSS的那些屬性？什么是響應式設計？響應式設計的基本原理是什么？如何兼容低版本的IE？視差滾動效果，如何給每頁做不同的動畫？（回到頂部，向下滑動要再次出現，和只出現一次分別怎么做？） ::before 和 :after中雙冒號和單冒號有什么區別？解釋一下這2個偽元素的作用。單冒號(:)用于CSS3偽類，雙冒號(::)用于CSS3偽元素。（偽元素由雙冒號和偽元素名稱組成）雙冒號是在當前規范中引入的，用于區分偽類和偽元素。不過瀏覽器需要同時支持舊的已經存在的偽元素寫法，比如:first-line、:first-letter、:before、:after等，而新的在CSS3中引入的偽元素則不允許再支持舊的單冒號的寫法。想讓插入的內容出現在其它內容前，使用::before，否者，使用::after；在代碼順序上，::after生成的內容也比::before生成的內容靠后。如果按堆棧視角，::after生成的內容會在::before生成的內容之上如何修改chrome記住密碼后自動填充表單的黃色背景？ input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background-color: rgb(250, 255, 189); /* #FAFFBD; */ background-image: none; color: rgb(0, 0, 0); } 你對line-height是如何理解的？設置元素浮動后，該元素的display值是多少？自動變成了 display:block 怎么讓Chrome支持小于12px 的文字？ 1、用圖片：如果是內容固定不變情況下，使用將小于12px文字內容切出做圖片，這樣不影響兼容也不影響美觀。 2、使用12px及12px以上字體大小：為了兼容各大主流瀏覽器，建議設計美工圖時候設置大于或等于12px的字體大小，如果是接單的這個時候就需要給客戶講解小于12px瀏覽器不兼容等事宜。 3、繼續使用小于12px字體大小樣式設置：如果不考慮chrome可以不用考慮兼容，同時在設置小于12px對象設置-webkit-text-size-adjust:none，做到最大兼容考慮。 4、使用12px以上字體：為了兼容、為了代碼更簡單從新考慮權重下兼容性。讓頁面里的字體變清晰，變細用CSS怎么做？ -webkit-font-smoothing: antialiased; font-style屬性可以讓它賦值為“oblique” oblique是什么意思？傾斜的字體樣式 position:fixed;在android下無效怎么處理？ fixed的元素是相對整個頁面固定位置的，你在屏幕上滑動只是在移動這個所謂的viewport，原來的網頁還好好的在那，fixed的內容也沒有變過位置，所以說并不是iOS不支持fixed，只是fixed的元素不是相對手機屏幕固定的。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/> 如果需要手動寫動畫，你認為最小時間間隔是多久，為什么？（阿里）多數顯示器默認頻率是60Hz，即1秒刷新60次，所以理論上最小間隔為1/60＊1000ms ＝ 16.7ms display:inline-block 什么時候會顯示間隙？(攜程) 移除空格、使用margin負值、使用font-size:0、letter-spacing、word-spacing overflow: scroll時不能平滑滾動的問題怎么處理？有一個高度自適應的div，里面有兩個div，一個高度100px，希望另一個填滿剩下的高度。 png、jpg、gif 這些圖片格式解釋一下，分別什么時候用。有沒有了解過webp？什么是Cookie 隔離？（或者說：請求資源的時候不要讓它帶cookie怎么做）如果靜態文件都放在主域名下，那靜態文件請求的時候都帶有的cookie的數據提交給server的，非常浪費流量，所以不如隔離開。因為cookie有域的限制，因此不能跨域提交請求，故使用非主要域名的時候，請求頭中就不會帶有cookie數據，這樣可以降低請求頭的大小，降低請求時間，從而達到降低整體請求延時的目的。同時這種方式不會將cookie傳入Web Server，也減少了Web Server對cookie的處理分析環節，提高了webserver的http請求的解析速度。 style標簽寫在body后與body前有什么區別？什么是CSS 預處理器 / 后處理器？ - 預處理器例如：LESS、Sass、Stylus，用來預編譯Sass或less，增強了css代碼的復用性，還有層級、mixin、變量、循環、函數等，具有很方便的UI組件模塊化開發能力，極大的提高工作效率。 - 后處理器例如：PostCSS，通常被視為在完成的樣式表中根據CSS規范處理CSS，讓其更有效；目前最常做的是給CSS屬性添加瀏覽器私有前綴，實現跨瀏覽器兼容性的問題。 JavaScript 介紹js的基本數據類型。 Undefined、Null、Boolean、Number、String、 ECMAScript 2015 新增:Symbol(創建后獨一無二且不可變的數據類型 ) 介紹js有哪些內置對象？ Object 是 JavaScript 中所有對象的父對象數據封裝類對象：Object、Array、Boolean、Number 和 String 其他對象：Function、Arguments、Math、Date、RegExp、Error 參考：http://www.ibm.com/developerworks/cn/web/wa-objectsinjs-v1b/index.html 說幾條寫JavaScript的基本規范？ 1.不要在同一行聲明多個變量。 2.請使用 ===/!==來比較true/false或者數值 3.使用對象字面量替代new Array這種形式 4.不要使用全局函數。 5.Switch語句必須帶有default分支 6.函數不應該有時候有返回值，有時候沒有返回值。 7.For循環必須使用大括號 8.If語句必須使用大括號 9.for-in循環中的變量應該使用var關鍵字明確限定作用域，從而避免作用域污染。 JavaScript原型，原型鏈 ? 有什么特點？每個對象都會在其內部初始化一個屬性，就是prototype(原型)，當我們訪問一個對象的屬性時，如果這個對象內部不存在這個屬性，那么他就會去prototype里找這個屬性，這個prototype又會有自己的prototype，于是就這樣一直找下去，也就是我們平時所說的原型鏈的概念。關系：instance.constructor.prototype = instance.__proto__ 特點： JavaScript對象是通過引用來傳遞的，我們創建的每個新對象實體中并沒有一份屬于自己的原型副本。當我們修改原型時，與之相關的對象也會繼承這一改變。當我們需要一個屬性的時，Javascript引擎會先看當前對象中是否有這個屬性，如果沒有的話，就會查找他的Prototype對象是否有這個屬性，如此遞推下去，一直檢索到 Object 內建對象。 function Func(){} Func.prototype.name = "Sean"; Func.prototype.getInfo = function() { return this.name; } var person = new Func();//現在可以參考var person = Object.create(oldObject); console.log(person.getInfo());//它擁有了Func的屬性和方法 //"Sean" console.log(Func.prototype); // Func { name="Sean", getInfo=function()} JavaScript有幾種類型的值？，你能畫一下他們的內存圖嗎？棧：原始數據類型（Undefined，Null，Boolean，Number、String）堆：引用數據類型（對象、數組和函數）兩種類型的區別是：存儲位置不同；原始數據類型直接存儲在棧(stack)中的簡單數據段，占據空間小、大小固定，屬于被頻繁使用數據，所以放入棧中存儲；引用數據類型存儲在堆(heap)中的對象,占據空間大、大小不固定。如果存儲在棧中，將會影響程序運行的性能；引用數據類型在棧中存儲了指針，該指針指向堆中該實體的起始地址。當解釋器尋找引用值時，會首先檢索其在棧中的地址，取得地址后從堆中獲得實體 Stated Clearly Image Javascript如何實現繼承？ 1、構造繼承 2、原型繼承 3、實例繼承 4、拷貝繼承原型prototype機制或apply和call方法去實現較簡單，建議使用構造函數與原型混合方式。 function Parent(){ this.name = 'wang'; } function Child(){ this.age = 28; } Child.prototype = new Parent();//繼承了Parent，通過原型 var demo = new Child(); alert(demo.age); alert(demo.name);//得到被繼承的屬性 JavaScript繼承的幾種實現方式？參考：構造函數的繼承，非構造函數的繼承； javascript創建對象的幾種方式？ javascript創建對象簡單的說,無非就是使用內置對象或各種自定義對象，當然還可以用JSON；但寫法有很多種，也能混合使用。 1、對象字面量的方式 person={firstname:"Mark",lastname:"Yun",age:25,eyecolor:"black"}; 2、用function來模擬無參的構造函數 function Person(){} var person=new Person();//定義一個function，如果使用new"實例化",該function可以看作是一個Class person.name="Mark"; person.age="25"; person.work=function(){ alert(person.name+" hello..."); } person.work(); 3、用function來模擬參構造函數來實現（用this關鍵字定義構造的上下文屬性） function Pet(name,age,hobby){ this.name=name;//this作用域：當前對象 this.age=age; this.hobby=hobby; this.eat=function(){ alert("我叫"+this.name+",我喜歡"+this.hobby+",是個程序員"); } } var maidou =new Pet("麥兜",25,"coding");//實例化、創建對象 maidou.eat();//調用eat方法 4、用工廠方式來創建（內置對象） var wcDog =new Object(); wcDog.name="旺財"; wcDog.age=3; wcDog.work=function(){ alert("我是"+wcDog.name+",汪汪汪......"); } wcDog.work(); 5、用原型方式來創建 function Dog(){ } Dog.prototype.name="旺財"; Dog.prototype.eat=function(){ alert(this.name+"是個吃貨"); } var wangcai =new Dog(); wangcai.eat(); 5、用混合方式來創建 function Car(name,price){ this.name=name; this.price=price; } Car.prototype.sell=function(){ alert("我是"+this.name+"，我現在賣"+this.price+"萬元"); } var camry =new Car("凱美瑞",27); camry.sell(); Javascript作用鏈域? 全局函數無法查看局部函數的內部細節，但局部函數可以查看其上層的函數細節，直至全局細節。當需要從局部函數查找某一屬性或方法時，如果當前作用域沒有找到，就會上溯到上層作用域查找，直至全局函數，這種組織形式就是作用域鏈。談談This對象的理解。 this總是指向函數的直接調用者（而非間接調用者）；如果有new關鍵字，this指向new出來的那個對象；在事件中，this指向觸發這個事件的對象，特殊的是，IE中的attachEvent中的this總是指向全局對象Window； eval是做什么的？它的功能是把對應的字符串解析成JS代碼并運行；應該避免使用eval，不安全，非常耗性能（2次，一次解析成js語句，一次執行）。由JSON字符串轉換為JSON對象的時候可以用eval，var obj =eval('('+ str +')'); 什么是window對象? 什么是document對象? null，undefined 的區別？ null 表示一個對象是“沒有值”的值，也就是值為“空”； undefined 表示一個變量沒有被聲明，不存在這個值，或者被聲明了但沒有被賦值； undefined不是一個有效的JSON，而null是； undefined的類型(typeof)是undefined； null的類型(typeof)是object； Javascript將未賦值的變量默認值設為undefined； Javascript從來不會將變量設為null。它是用來讓程序員表明某個用var聲明的變量時沒有值的。 typeof undefined //"undefined" undefined :是一個表示"無"的原始值或者說表示"缺少值"，就是此處應該有一個值，但是還沒有定義。當嘗試讀取時會返回 undefined；例如變量被聲明了，但沒有賦值時，就等于undefined typeof null //"object" null : 是一個對象(空對象, 沒有任何屬性和方法)；例如作為函數的參數，表示該函數的參數不是對象；注意：在驗證null時，一定要使用　=== ，因為 == 無法分別 null 和　undefined null == undefined // true null === undefined // false 再來一個例子： null Q：有張三這個人么？ A：有！ Q：張三有房子么？ A：沒有！ undefined Q：有張三這個人么？ A：沒有！參考閱讀：undefined與null的區別寫一個通用的事件偵聽器函數。 // event(事件)工具集，來源：github.com/markyun markyun.Event = { // 頁面加載完成后 readyEvent : function(fn) { if (fn==null) { fn=document; } var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = fn; } else { window.onload = function() { oldonload(); fn(); }; } }, // 視能力分別使用dom0||dom2||IE方式來綁定事件 // 參數：操作的元素,事件名稱 ,事件處理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件類型、需要執行的函數、是否捕捉 element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent('on' + type, function() { handler.call(element); }); } else { element['on' + type] = handler; } }, // 移除事件 removeEvent : function(element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.datachEvent) { element.detachEvent('on' + type, handler); } else { element['on' + type] = null; } }, // 阻止事件 (主要是事件冒泡，因為IE不支持事件捕獲) stopPropagation : function(ev) { if (ev.stopPropagation) { ev.stopPropagation(); } else { ev.cancelBubble = true; } }, // 取消事件的默認行為 preventDefault : function(event) { if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; } }, // 獲取事件目標 getTarget : function(event) { return event.target || event.srcElement; }, // 獲取event對象的引用，取到事件的所有信息，確保隨時能使用event； getEvent : function(e) { var ev = e || window.event; if (!ev) { var c = this.getEvent.caller; while (c) { ev = c.arguments[0]; if (ev && Event == ev.constructor) { break; } c = c.caller; } } return ev; } }; ["1", "2", "3"].map(parseInt) 答案是多少？ parseInt() 函數能解析一個字符串，并返回一個整數，需要兩個參數 (val, radix)，其中 radix 表示要解析的數字的基數。【該值介于 2 ~ 36 之間，并且字符串中的數字不能大于radix才能正確返回數字結果值】; 但此處 map 傳了 3 個 (element, index, array),我們重寫parseInt函數測試一下是否符合上面的規則。 function parseInt(str, radix) { return str+'-'+radix; }; var a=["1", "2", "3"]; a.map(parseInt); // ["1-0", "2-1", "3-2"] 不能大于radix 因為二進制里面，沒有數字3,導致出現超范圍的radix賦值和不合法的進制解析，才會返回NaN 所以["1", "2", "3"].map(parseInt) 答案也就是：[1, NaN, NaN] 詳細解析：http://blog.csdn.net/justjavac/article/details/19473199 事件是？IE與火狐的事件機制有什么區別？如何阻止冒泡？ 1. 我們在網頁中的某個操作（有的操作對應多個事件）。例如：當我們點擊一個按鈕就會產生一個事件。是可以被 JavaScript 偵測到的行為。 2. 事件處理機制：IE是事件冒泡、Firefox同時支持兩種事件模型，也就是：捕獲型事件和冒泡型事件； 3. ev.stopPropagation();（舊ie的方法 ev.cancelBubble = true;）什么是閉包（closure），為什么要用它？閉包是指有權訪問另一個函數作用域中變量的函數，創建閉包的最常見的方式就是在一個函數內創建另一個函數，通過另一個函數訪問這個函數的局部變量,利用閉包可以突破作用鏈域，將函數內部的變量和方法傳遞到外部。閉包的特性： 1.函數內再嵌套函數 2.內部函數可以引用外層的參數和變量 3.參數和變量不會被垃圾回收機制回收 //li節點的onclick事件都能正確的彈出當前被點擊的li索引 <ul id="testUL"> <li> index = 0</li> <li> index = 1</li> <li> index = 2</li> <li> index = 3</li> </ul> <script type="text/javascript"> var nodes = document.getElementsByTagName("li"); for(i = 0;i<nodes.length;i+= 1){ nodes[i].onclick = (function(i){ return function() { console.log(i); } //不用閉包的話，值每次都是4 })(i); } </script> 執行say667()后,say667()閉包內部變量會存在,而閉包內部函數的內部變量不會存在使得Javascript的垃圾回收機制GC不會收回say667()所占用的資源因為say667()的內部函數的執行需要依賴say667()中的變量這是對閉包作用的非常直白的描述 function say667() { // Local variable that ends up within closure var num = 666; var sayAlert = function() { alert(num); } num++; return sayAlert; } var sayAlert = say667(); sayAlert()//執行結果應該彈出的667 javascript 代碼中的"use strict";是什么意思 ? 使用它區別是什么？ use strict是一種ECMAscript 5 添加的（嚴格）運行模式,這種模式使得 Javascript 在更嚴格的條件下運行, 使JS編碼更加規范化的模式,消除Javascript語法的一些不合理、不嚴謹之處，減少一些怪異行為。默認支持的糟糕特性都會被禁用，比如不能用with，也不能在意外的情況下給全局變量賦值; 全局變量的顯示聲明,函數必須聲明在頂層，不允許在非函數代碼塊內聲明函數,arguments.callee也不允許使用；消除代碼運行的一些不安全之處，保證代碼運行的安全,限制函數中的arguments修改，嚴格模式下的eval函數的行為和非嚴格模式的也不相同; 提高編譯器效率，增加運行速度；為未來新版本的Javascript標準化做鋪墊。如何判斷一個對象是否屬于某個類？使用instanceof （待完善） if(a instanceof Person){ alert('yes'); } new操作符具體干了什么呢? 1、創建一個空對象，并且 this 變量引用該對象，同時還繼承了該函數的原型。 2、屬性和方法被加入到 this 引用的對象中。 3、新創建的對象由 this 所引用，并且最后隱式的返回 this 。 var obj = {}; obj.__proto__ = Base.prototype; Base.call(obj); 用原生JavaScript的實現過什么功能嗎？ Javascript中，有一個函數，執行時對象查找時，永遠不會去查找原型，這個函數是？ hasOwnProperty javaScript中hasOwnProperty函數方法是返回一個布爾值，指出一個對象是否具有指定名稱的屬性。此方法無法檢查該對象的原型鏈中是否具有該屬性；該屬性必須是對象本身的一個成員。使用方法： object.hasOwnProperty(proName) 其中參數object是必選項。一個對象的實例。 proName是必選項。一個屬性名稱的字符串值。如果 object 具有指定名稱的屬性，那么JavaScript中hasOwnProperty函數方法返回 true，反之則返回 false。 JSON 的了解？ JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。它是基于JavaScript的一個子集。數據格式簡單, 易于讀寫, 占用帶寬小如：{"age":"12", "name":"back"} JSON字符串轉換為JSON對象: var obj =eval('('+ str +')'); var obj = str.parseJSON(); var obj = JSON.parse(str); JSON對象轉換為JSON字符串： var last=obj.toJSONString(); var last=JSON.stringify(obj); [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 能解釋一下這段代碼的意思嗎？ js延遲加載的方式有哪些？ defer和async、動態創建DOM方式（用得最多）、按需異步載入js Ajax 是什么? 如何創建一個Ajax？ ajax的全稱：Asynchronous Javascript And XML。異步傳輸+js+xml。所謂異步，在這里簡單地解釋就是：向服務器發送請求的時候，我們不必等待結果，而是可以同時做其他的事情，等到有了結果它自己會根據設定進行后續操作，與此同時，頁面是不會發生整頁刷新的，提高了用戶體驗。 (1)創建XMLHttpRequest對象,也就是創建一個異步調用對象 (2)創建一個新的HTTP請求,并指定該HTTP請求的方法、URL及驗證信息 (3)設置響應HTTP請求狀態變化的函數 (4)發送HTTP請求 (5)獲取異步調用返回的數據 (6)使用JavaScript和DOM實現局部刷新同步和異步的區別? 同步的概念應該是來自于OS中關于同步的概念:不同進程為協同完成某項工作而在先后次序上調整(通過阻塞,喚醒等方式).同步強調的是順序性.誰先誰后.異步則不存在這種順序性. 同步：瀏覽器訪問服務器請求，用戶看得到頁面刷新，重新發請求,等請求完，頁面刷新，新內容出現，用戶看到新內容,進行下一步操作。異步：瀏覽器訪問服務器請求，用戶正常操作，瀏覽器后端進行請求。等請求完，頁面不刷新，新內容也會出現，用戶看到新內容。（待完善）如何解決跨域問題? jsonp、 iframe、window.name、window.postMessage、服務器上設置代理頁面頁面編碼和被請求的資源編碼如果不一致如何處理？模塊化開發怎么做？立即執行函數,不暴露私有成員 var module1 = (function(){ 　　　　var _count = 0; 　　　　var m1 = function(){ 　　　　　　//... 　　　　}; 　　　　var m2 = function(){ 　　　　　　//... 　　　　}; 　　　　return { 　　　　　　m1 : m1, 　　　　　　m2 : m2 　　　　}; 　　})(); （待完善） AMD（Modules/Asynchronous-Definition）、CMD（Common Module Definition）規范區別？ AMD 規范在這里：https://github.com/amdjs/amdjs-api/wiki/AMD CMD 規范在這里：https://github.com/seajs/seajs/issues/242 Asynchronous Module Definition，異步模塊定義，所有的模塊將被異步加載，模塊加載不影響后面語句運行。所有依賴某些模塊的語句均放置在回調函數中。區別： 1. 對于依賴的模塊，AMD 是提前執行，CMD 是延遲執行。不過 RequireJS 從 2.0 開始，也改成可以延遲執行（根據寫法不同，處理方式不同）。CMD 推崇 as lazy as possible. 2. CMD 推崇依賴就近，AMD 推崇依賴前置。看代碼： // CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此處略去 100 行 var b = require('./b') // 依賴可以就近書寫 b.doSomething() // ... }) // AMD 默認推薦 define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好 a.doSomething() // 此處略去 100 行 b.doSomething() // ... }) requireJS的核心原理是什么？（如何動態加載的？如何避免多次加載的？如何緩存的？）參考：http://annn.me/how-to-realize-cmd-loader/ JS模塊加載器的輪子怎么造，也就是如何實現一個模塊加載器？談一談你對ECMAScript6的了解？ ECMAScript6 怎么寫class么，為什么會出現class這種東西? 異步加載JS的方式有哪些？ (1) defer，只支持IE (2) async： (3) 創建script，插入到DOM中，加載完畢后callBack documen.write和 innerHTML的區別 document.write只能重繪整個頁面 innerHTML可以重繪頁面的一部分 DOM操作——怎樣添加、移除、移動、復制、創建和查找節點? （1）創建新節點 createDocumentFragment() //創建一個DOM片段 createElement() //創建一個具體的元素 createTextNode() //創建一個文本節點（2）添加、移除、替換、插入 appendChild() removeChild() replaceChild() insertBefore() //在已有的子節點前插入一個新的子節點（3）查找 getElementsByTagName() //通過標簽名稱 getElementsByName() //通過元素的Name屬性的值(IE容錯能力較強，會得到一個數組，其中包括id等于name值的) getElementById() //通過元素Id，唯一性 .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); 數組和對象有哪些原生方法，列舉一下？ JS 怎么實現一個類。怎么實例化這個類 JavaScript中的作用域與變量聲明提升？如何編寫高性能的Javascript？那些操作會造成內存泄漏？ JQuery的源碼看過嗎？能不能簡單概況一下它的實現原理？ jQuery.fn的init方法返回的this指的是什么對象？為什么要返回this？ jquery中如何將數組轉化為json字符串，然后再轉化回來？ jQuery 的屬性拷貝(extend)的實現原理是什么，如何實現深拷貝？ jquery.extend 與 jquery.fn.extend的區別？ jQuery 的隊列是如何實現的？隊列可以用在哪些地方？談一下Jquery中的bind(),live(),delegate(),on()的區別？ JQuery一個對象可以同時綁定多個事件，這是如何實現的？是否知道自定義事件。jQuery里的fire函數是什么意思，什么時候用？ jQuery 是通過哪個方法和 Sizzle 選擇器結合的？（jQuery.fn.find()進入Sizzle）針對 jQuery性能的優化方法？ Jquery與jQuery UI 有啥區別？ *jQuery是一個js庫，主要提供的功能是選擇器，屬性修改和事件綁定等等。 *jQuery UI則是在jQuery的基礎上，利用jQuery的擴展性，設計的插件。提供了一些常用的界面元素，諸如對話框、拖動行為、改變大小行為等等 JQuery的源碼看過嗎？能不能簡單說一下它的實現原理？ jquery 中如何將數組轉化為json字符串，然后再轉化回來？ jQuery中沒有提供這個功能，所以你需要先編寫兩個jQuery的擴展： $.fn.stringifyArray = function(array) { return JSON.stringify(array) } $.fn.parseArray = function(array) { return JSON.parse(array) } 然后調用： $("").stringifyArray(array) jQuery和Zepto的區別？各自的使用場景？針對 jQuery 的優化方法？ *基于Class的選擇性的性能相對于Id選擇器開銷很大，因為需遍歷所有DOM元素。 *頻繁操作的DOM，先緩存起來再操作。用Jquery的鏈式調用更好。比如：var str=$("a").attr("href"); *for (var i = size; i < arr.length; i++) {} for 循環每一次循環都查找了數組 (arr) 的.length 屬性，在開始循環的時候設置一個變量來存儲這個數字，可以讓循環跑得更快： for (var i = size, length = arr.length; i < length; i++) {} Zepto的點透問題如何解決？ jQueryUI如何自定義組件? 需求：實現一個頁面操作不會整頁刷新的網站，并且能在瀏覽器前進、后退時正確響應。給出你的技術實現方案？如何判斷當前腳本運行在瀏覽器還是node環境中？（阿里）通過判斷Global對象是否為window，如果不為window，當前腳本沒有運行在瀏覽器中移動端最小觸控區域是多大？ jQuery 的 slideUp動畫，如果目標元素是被外部事件驅動, 當鼠標快速地連續觸發外部元素事件, 動畫會滯后的反復執行，該如何處理呢? 把 Script 標簽放在頁面的最底部的body封閉之前和封閉之后有什么區別？瀏覽器會如何解析它們？移動端的點擊事件的有延遲，時間是多久，為什么會有？怎么解決這個延時？（click 有 300ms 延遲,為了實現safari的雙擊事件的設計，瀏覽器要知道你是不是要雙擊操作。）知道各種JS框架(Angular, Backbone, Ember, React, Meteor, Knockout...)么? 能講出他們各自的優點和缺點么? Underscore 對哪些 JS 原生對象進行了擴展以及提供了哪些好用的函數方法？解釋JavaScript中的作用域與變量聲明提升？那些操作會造成內存泄漏？內存泄漏指任何對象在您不再擁有或需要它之后仍然存在。垃圾回收器定期掃描對象，并計算引用了每個對象的其他對象的數量。如果一個對象的引用數量為 0（沒有其他對象引用過該對象），或對該對象的惟一引用是循環的，那么該對象的內存即可回收。 setTimeout 的第一個參數使用字符串而非函數的話，會引發內存泄漏。閉包、控制臺日志、循環（在兩個對象彼此引用且彼此保留時，就會產生一個循環） JQuery一個對象可以同時綁定多個事件，這是如何實現的？ Node.js的適用場景？ (如果會用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么? 解釋一下 Backbone 的 MVC 實現方式？什么是“前端路由”?什么時候適合使用“前端路由”? “前端路由”有哪些優點和缺點? 知道什么是webkit么? 知道怎么用瀏覽器的各種工具來調試和debug代碼么? 如何測試前端代碼么? 知道BDD, TDD, Unit Test么? 知道怎么測試你的前端工程么(mocha, sinon, jasmin, qUnit..)? 前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用? 簡述一下 Handlebars 的基本用法？簡述一下 Handlerbars 的對模板的基本處理流程，如何編譯的？如何緩存的？用js實現千位分隔符?(來源：前端農民工，提示：正則+replace) 參考：http://www.tuicool.com/articles/ArQZfui function commafy(num) { return num && num .toString() .replace(/(\d)(?=(\d{3})+\.)/g, function($0, $1) { return $1 + ","; }); } console.log(commafy(1234567.90)); //1,234,567.90 檢測瀏覽器版本版本有哪些方式？功能檢測、userAgent特征檢測比如：navigator.userAgent //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.101 Safari/537.36" What is a Polyfill? polyfill 是“在舊版瀏覽器上復制標準 API 的 JavaScript 補充”,可以動態地加載 JavaScript 代碼或庫，在不支持這些標準 API 的瀏覽器中模擬它們。例如，geolocation（地理位置）polyfill 可以在 navigator 對象上添加全局的 geolocation 對象，還能添加 getCurrentPosition 函數以及“坐標”回調對象，所有這些都是 W3C 地理位置 API 定義的對象和函數。因為 polyfill 模擬標準 API，所以能夠以一種面向所有瀏覽器未來的方式針對這些 API 進行開發，一旦對這些 API 的支持變成絕對大多數，則可以方便地去掉 polyfill，無需做任何額外工作。做的項目中，有沒有用過或自己實現一些 polyfill 方案（兼容性處理方案）？比如： html5shiv、Geolocation、Placeholder 我們給一個dom同時綁定兩個點擊事件，一個用捕獲，一個用冒泡。會執行幾次事件，會先執行冒泡還是捕獲？使用JS實現獲取文件擴展名？ function getFileExtension(filename) { return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2); } String.lastIndexOf() 方法返回指定值（本例中的'.'）在調用該方法的字符串中最后出現的位置，如果沒找到則返回 -1。對于'filename'和'.hiddenfile'，lastIndexOf的返回值分別為0和-1無符號右移操作符(?>) 將-1轉換為4294967295，將-2轉換為4294967294，這個方法可以保證邊緣情況時文件名不變。 String.prototype.slice() 從上面計算的索引處提取文件的擴展名。如果索引比文件名的長度大，結果為""。 ECMAScript6 相關 Object.is() 與原來的比較操作符“ ===”、“ ==”的區別？兩等號判等，會在比較時進行類型轉換；三等號判等(判斷嚴格)，比較時不進行隱式類型轉換,（類型不同則會返回false）； Object.is 在三等號判等的基礎上特別處理了 NaN 、-0 和 +0 ，保證 -0 和 +0 不再相同，但 Object.is(NaN, NaN) 會返回 true. Object.is 應被認為有其特殊的用途，而不能用它認為它比其它的相等對比更寬松或嚴格。前端框架相關 react-router 路由系統的實現原理？ React中如何解決第三方類庫的問題? 其他問題原來公司工作流程是怎么樣的，如何與其他人協作的？如何夸部門合作的？你遇到過比較難的技術問題是？你是如何解決的？設計模式知道什么是singleton, factory, strategy, decrator么? 常使用的庫有哪些？常用的前端開發工具？開發過什么應用或組件？頁面重構怎么操作？網站重構：在不改變外部行為的前提下，簡化結構、添加可讀性，而在網站前端保持一致的行為。也就是說是在不改變UI的情況下，對網站進行優化，在擴展的同時保持一致的UI。對于傳統的網站來說重構通常是：表格(table)布局改為DIV+CSS 使網站前端兼容于現代瀏覽器(針對于不合規范的CSS、如對IE6有效的) 對于移動平臺的優化針對于SEO進行優化深層次的網站重構應該考慮的方面減少代碼間的耦合讓代碼保持彈性嚴格按規范編寫代碼設計可擴展的API 代替舊有的框架、語言(如VB) 增強用戶體驗通常來說對于速度的優化也包含在重構中壓縮JS、CSS、image等前端資源(通常是由服務器來解決) 程序的性能優化(如數據讀寫) 采用CDN來加速資源加載對于JS DOM的優化 HTTP服務器的文件緩存列舉IE與其他瀏覽器不一樣的特性？ 1、事件不同之處：觸發事件的元素被認為是目標（target）。而在 IE 中，目標包含在 event 對象的 srcElement 屬性；獲取字符代碼、如果按鍵代表一個字符（shift、ctrl、alt除外），IE 的 keyCode 會返回字符代碼（Unicode），DOM 中按鍵的代碼和字符是分離的，要獲取字符代碼，需要使用 charCode 屬性；阻止某個事件的默認行為，IE 中阻止某個事件的默認行為，必須將 returnValue 屬性設置為 false，Mozilla 中，需要調用 preventDefault() 方法；停止事件冒泡，IE 中阻止事件進一步冒泡，需要設置 cancelBubble 為 true，Mozzilla 中，需要調用 stopPropagation()； 99%的網站都需要被重構是那本書上寫的？網站重構：應用web標準進行設計（第2版）什么叫優雅降級和漸進增強？優雅降級：Web站點在所有新式瀏覽器中都能正常工作，如果用戶使用的是老式瀏覽器，則代碼會針對舊版本的IE進行降級處理了,使之在舊式瀏覽器上以某種形式降級體驗卻不至于完全不能用。如：border-shadow 漸進增強：從被所有瀏覽器支持的基本功能開始，逐步地添加那些只有新版本瀏覽器才支持的功能,向頁面增加不影響基礎瀏覽器的額外樣式和功能的。當瀏覽器支持時，它們會自動地呈現出來并發揮作用。如：默認使用flash上傳，但如果瀏覽器支持 HTML5 的文件上傳功能，則使用HTML5實現更好的體驗；是否了解公鑰加密和私鑰加密。一般情況下是指私鑰用于對數據進行簽名，公鑰用于對簽名進行驗證; HTTP網站在瀏覽器端用公鑰加密敏感數據，然后在服務器端再用私鑰解密。 WEB應用從服務器主動推送Data到客戶端有那些方式？ html5提供的Websocket 不可見的iframe WebSocket通過Flash XHR長時間連接 XHR Multipart Streaming <script>標簽的長時間連接(可跨域) 對Node的優點和缺點提出了自己的看法？ *（優點）因為Node是基于事件驅動和無阻塞的，所以非常適合處理并發請求，因此構建在Node上的代理服務器相比其他技術實現（如Ruby）的服務器表現要好得多。此外，與Node代理服務器交互的客戶端代碼是由javascript語言編寫的，因此客戶端和服務器端都用同一種語言編寫，這是非常美妙的事情。 *（缺點）Node是一個相對新的開源項目，所以不太穩定，它總是一直在變，而且缺少足夠多的第三方庫支持。看起來，就像是Ruby/Rails當年的樣子。你有用過哪些前端性能優化的方法？（1）減少http請求次數：CSS Sprites, JS、CSS源碼壓縮、圖片大小控制合適；網頁Gzip，CDN托管，data緩存，圖片服務器。（2）前端模板 JS+數據，減少由于HTML標簽導致的帶寬浪費，前端用變量保存AJAX請求結果，每次操作本地變量，不用請求，減少請求次數（3）用innerHTML代替DOM操作，減少DOM操作次數，優化javascript性能。（4）當需要設置的樣式很多時設置className而不是直接操作style。（5）少用全局變量、緩存DOM節點查找的結果。減少IO讀取操作。（6）避免使用CSS Expression（css表達式)又稱Dynamic properties(動態屬性)。（7）圖片預加載，將樣式表放在頂部，將腳本放在底部加上時間戳。（8）避免在頁面的主體布局中使用table，table要等其中的內容完全下載之后才會顯示出來，顯示比div+css布局慢。對普通的網站有一個統一的思路，就是盡量向前端優化、減少數據庫操作、減少磁盤IO。向前端優化指的是，在不影響功能和體驗的情況下，能在瀏覽器執行的不要在服務端執行，能在緩存服務器上直接返回的不要到應用服務器，程序能直接取得的結果不要到外部取得，本機內能取得的數據不要到遠程取，內存能取到的不要到磁盤取，緩存中有的不要去數據庫查詢。減少數據庫操作指減少更新次數、緩存結果減少查詢次數、將數據庫執行的操作盡可能的讓你的程序完成（例如join查詢），減少磁盤IO指盡量不使用文件系統作為緩存、減少讀寫文件次數等。程序優化永遠要優化慢的部分，換語言是無法“優化”的。部分地區用戶反應網站很卡，請問有哪些可能性的原因，以及解決方法？從打開app到刷新出內容，整個過程中都發生了什么，如果感覺慢，怎么定位問題，怎么解決? 你用的得心應手用的熟練地編輯器&開發環境是什么樣子？ Sublime Text 3 + 相關插件編寫前端代碼 Google chrome 、Mozilla Firefox瀏覽器 +firebug 兼容測試和預覽頁面UI、動畫效果和交互功能 Node.js+Gulp git 用于版本控制和Code Review 對前端工程師這個職位是怎么樣理解的？它的前景會怎么樣？前端是最貼近用戶的程序員，比后端、數據庫、產品經理、運營、安全都近。 1、實現界面交互 2、提升用戶體驗 3、有了Node.js，前端可以實現服務端的一些事情前端是最貼近用戶的程序員，前端的能力就是能讓產品從 90分進化到 100 分，甚至更好，參與項目，快速高質量完成實現效果圖，精確到1px；與團隊成員，UI設計，產品經理的溝通；做好的頁面結構，頁面重構和用戶體驗；處理hack，兼容、寫出優美的代碼格式；針對服務器的優化、擁抱最新前端技術。你怎么看待Web App 、hybrid App、Native App？你移動端前端開發的理解？（和 Web 前端開發的主要區別是什么？）你對加班的看法？加班就像借錢，原則應當是------救急不救窮先期團隊必須確定好全局樣式（globe.css），編碼模式(utf-8) 等；編寫習慣必須一致（例如都是采用繼承式的寫法，單樣式都寫成一行）；標注樣式編寫人，各模塊都及時標注（標注關鍵樣式調用的地方）；頁面進行標注（例如頁面模塊開始和結束）； CSS跟HTML 分文件夾并行存放，命名都得統一（例如style.css）； JS 分文件夾存放命名以該JS功能為準的英文翻譯。圖片采用整合的 images.png png8 格式文件使用盡量整合在一起使用方便將來的管理如何設計突發大規模并發架構？說說最近最流行的一些東西吧？常去哪些網站？ ES6\WebAssembly\Node\MVVM\Web Components\React\React Native\Webpack 組件化清晰的視覺縱線、信息的分組、極致的減法、利用選擇代替輸入、標簽及文字的排布方式、依靠明文確認密碼、合理的鍵盤利用、清除浮動 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .divcss{ width:400px; border:1px solid #F00; background:#FF0; /*!*height: 150px;*! 方法1：設置父元素的高度*/ /*!*float: left;*! 方法2：父元素浮動*/ /*overflow: hidden; 方法3:父元素設置overflow: hidden*/ /*!*position: absolute;*! 方法6：父元素絕對定位脫離文檔流*/ } .divcss-left,.divcss-right{ width:180px; height:100px; border:1px solid #00F; background:#FFF} .divcss-left{ float:left } .divcss-right{ float:right } /*.clerrfix{*/ /*!*clear: both; *! 方法4：在父元素內部，子元素后面設置清除浮動*/ /*}*/ /*.clearfix:after{*/ /*content: '';*/ /*display: block;*/ /*clear: both;*/ /*}*/ /*.clearfix{*/ /*!*zoom: 1;*! 兼容ie*/ /*!*}*! 方法5：用after*/ /*.clearfix:after{*/ /*content: '';*/ /*display: block;*/ /*clear: both;*/ /*height: 0;*/ /*visibility: hidden;*/ /*}*/ /*新浪*/ </style> </head> <body> <div class="divcss clearfix">  <div class="divcss-left">left浮動</div> <div class="divcss-right">right浮動</div>  </div> </body> </html> 居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.center{ text-align: center; background: hsl(0,100%,97%); } div.center img{ width: 33%; height: auto; } </style> </head> <body> <div class="center"> <img src="img.png"> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div.center{ background: hsl(60,100%,97%); } div.center img{ display: block; width: 33%; height: auto; margin: 0 auto; } </style> </head> <body> <div class="center"> <img src="img.png"> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .center-aligned{ display: table; background: hsl(120,100%,97%); width: 100%; } .center-core{ display: table-cell; text-align: center; vertical-align: middle; } .center-core img{ width: 33%; height: auto; } </style> </head> <body> <div class="center-aligned"> <div class="center-core"> <img src="img.png"> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .absolute-aligned{ position: relative; min-height: 500px; background: hsl(200,100%,97%); } .absolute-aligned img{ width: 50%; min-width: 200px; height: auto; overflow: auto; margin: auto; position: absolute; top:0; left: 0; bottom: 0; right: 0; } </style> </head> <body>  <div class="absolute-aligned"> <img src="img.png"> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .center{ background: hsl(180,100%,97%); position: relative; min-height: 500px; } .center img{ position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); width: 30%; height: auto; } </style> </head> <body>  <div class="center"> <img src="img.png"> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .center{ background: hsl(240,100%,97%); display: flex; justify-content: center; align-items: center; } .center img{ width: 30%; height: auto; } </style> </head> <body>  <div class="center"> <img src="img.png"> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .center{ background: hsl(300,100%,97%); min-height: 600px; position: relative; } .center img{ width: 40%; height: auto; position: absolute; top:calc(50% - 20%); left: calc(50% - 20%); } </style> </head> <body>  <div class="center"> <img src="img.png"> </div> </body> </html> CSS樣式覆蓋規則很多情況都會導致一個元素被運用上多種樣式，樣式覆蓋的規則也需要根據不同的情況來定，具體規則如下。規則一：由于繼承而發生樣式沖突時，最近祖先獲勝。 CSS的繼承機制使得元素可以從包含它的祖先元素中繼承樣式，考慮下面這種情況： ``` <html> <head> <title>rule1</title> <style> body {color:black;} p {color:blue;} </style> </head> <body> <p>welcome to <strong>加粗</strong></p> </body> </html> ``` strong分別從body和p中繼承了color屬性，但是由于p在繼承樹上離strong更近，因此strong中的文字最終繼承p的藍色。規則二：繼承的樣式和直接指定的樣式沖突時，直接指定的樣式獲勝。在上面的例子中，假如還指定了strong元素的樣式，如： ``` strong {color:red;} ``` 那么根據規則二，strong中的文字最終顯示為紅色。規則三：直接指定的樣式發生沖突時，樣式權值高者獲勝。樣式的權值取決于樣式的選擇器，權值定義如下表。 CSS選擇器權值標簽選擇器 1 偽元素(:first-child等) 1 類選擇器 10 ID選擇器 100 內聯樣式 1000 偽類(:link等) 10 可以看到，內聯樣式的權值>>ID選擇器>>類選擇器>>標簽選擇器，除此以外，后代選擇器的權值為每項權值之和，比如”#nav .current a”的權值為100 + 10 + 1 = 111。規則四：樣式權值相同時，后者獲勝。考慮下面這種情況 ``` <p class="byline">Written by <a class="email" href="mailto:jean@cosmofarmer.com">Jean Graine de Pomme</a></p> .byline a {color:red;} p .email {color:blue;} ``` “.byline a”與”p .email”都直接指定了上面的a元素，且權值都為11，根據規則四，最終顯示藍色。由于樣式表可以是外部的，也可以是內部的，規則四提醒我們要注意外部樣式表引入的順序（及<link>元素的順序），以及外部樣式表與內部樣式表的出現位置。一般來說，內部樣式表出現在所有外部樣式表的引入之后，一般是在</head>之前。規則五：!important的樣式屬性不被覆蓋。 !important可以看做是萬不得已的時候，打破上述四個規則的”金手指”。如果你一定要采用某個樣式屬性，而不讓它被覆蓋的，可以在屬性值后加上!important，以規則四的例子為例， ``` .byline a {color:red !important;} ``` 可以強行使鏈接顯示紅色。大多數情況下都可以通過其他方式來控制樣式的覆蓋，不能濫用!important。引入CSS的四種方式 ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>引入CSS的四種方式</title> <style type="text/css"> /*h2{ color:white;background-color:blue;}*/ /*要想使網頁內的CSS生效，必須注釋下一行代碼*/ @import "import.css"; </style> <link href="alone.css" rel="stylesheet" type="text/css" /> </head> <body> <h1 style="color:white; background-color:yellow">標簽內的CSS</h1> <h2>網頁內的CSS</h2> <h3>link引用的CSS文件</h3> <h4>import引用的CSS文件</h4> <p>link引用和import引用區別是：link是html加載前就引用，而import是html加載后才引用。舉例，采用impor引用，會先顯示無樣式的頁面，然后再把樣式放進去。如果用JavaScript動態引用CSS，得使用link引用方式才可實現。</p> </body> </html> ``` 1：下面的代碼會在 console 輸出神馬？為什么？ ``` (function(){ var a = b = 3; })(); console.log("a defined? " + (typeof a !== 'undefined')); console.log("b defined? " + (typeof b !== 'undefined')); ``` ``` console.log(b); //3 console,log(typeof a); //undefined ``` 拆解一下自執行函數中的變量賦值： ``` b = 3; var a = b; ``` 所以 b 成了全局變量，而 a 是自執行函數的一個局部變量。 2：下面的代碼會在 console 輸出神馬？為什么？ ``` var myObject = { foo: "bar", func: function() { var self = this; console.log("outer func: this.foo = " + this.foo);//outer func: this.foo = bar console.log("outer func: self.foo = " + self.foo);//outer func: self.foo = bar (function() { console.log("inner func: this.foo = " + this.foo);//inner func: this.foo = undefined console.log("inner func: self.foo = " + self.foo);//inner func: self.foo = bar }()); } }; myObject.func(); ``` 第一個和第二個的輸出不難判斷，在 ES6 之前，JavaScript 只有函數作用域，所以 func 中的 IIFE 有自己的獨立作用域，并且它能訪問到外部作用域中的 self，所以第三個輸出會報錯，因為 this 在可訪問到的作用域內是 undefined，第四個輸出是 bar。解決： ``` var myObject = { foo: "bar", func: function() { var self = this; console.log("outer func: this.foo = " + this.foo);//outer func: this.foo = bar console.log("outer func: self.foo = " + self.foo);//outer func: self.foo = bar (function(test) { console.log("inner func: this.foo = " + test.foo);// inner func: this.foo = bar console.log("inner func: self.foo = " + self.foo);// inner func: self.foo = bar }(self)); } }; myObject.func(); ``` 3:將 JavaScript 代碼包含在一個函數塊中有神馬意思呢？為什么要這么做？換句話說，為什么要用立即執行函數表達式（Immediately-Invoked Function Expression）。 IIFE 有兩個比較經典的使用場景，一是類似于在循環中定時輸出數據項，二是類似于 JQuery/Node 的插件和模塊開發。 ``` for(var i = 0; i < 5; i++) { setTimeout(function() { console.log(i); }, 1000); } ``` 上面的輸出并不是你以為的0，1，2，3，4，而輸出的全部是5，這時 IIFE 就能有用了： ``` for(var i = 0; i < 5; i++) { (function(i) { setTimeout(function() { console.log(i); //輸出0，1，2，3，4。 }, 1000); })(i) } ``` 而在 JQuery/Node 的插件和模塊開發中，為避免變量污染，也是一個大大的 IIFE： ``` (function($) { //代碼 } )(jQuery); ``` 4:下面兩個函數的返回值是一樣的嗎？為什么？ ``` function foo1() { return { bar: "hello" }; } function foo2() { return { bar: "hello" }; } ``` 在編程語言中，基本都是使用分號（;）將語句分隔開，這可以增加代碼的可讀性和整潔性。而在JS中，如若語句各占獨立一行，通常可以省略語句間的分號（;），JS 解析器會根據能否正常編譯來決定是否自動填充分號： var test = 1 + 2 console.log(test); //3 在上述情況下，為了正確解析代碼，就不會自動填充分號了，但是對于 return 、break、continue 等語句，如果后面緊跟換行，解析器一定會自動在后面填充分號(;)，所以上面的第二個函數就變成了這樣： ``` function foo2() { return; { bar: "hello" }; } ``` 所以第二個函數是返回 undefined。 5:NaN 是 Not a Number 的縮寫，JavaScript 的一種特殊數值，其類型是 Number，可以通過 isNaN(param) 來判斷一個值是否是 NaN： ``` console.log(isNaN(NaN)); //true console.log(isNaN(23)); //false console.log(isNaN('ds')); //true console.log(isNaN('32131sdasd')); //true console.log(NaN === NaN); //false console.log(NaN === undefined); //false console.log(undefined === undefined); //true console.log(typeof NaN); //number console.log(Object.prototype.toString.call(NaN)); //[object Number] ``` ES6 中，isNaN() 成為了 Number 的靜態方法：Number.isNaN(). 6:解釋一下下面代碼的輸出 ``` console.log(0.1 + 0.2); //0.30000000000000004 console.log(0.1 + 0.2 == 0.3); //false ``` JavaScript 中的 number 類型就是浮點型，JavaScript 中的浮點數采用IEEE-754 格式的規定，這是一種二進制表示法，可以精確地表示分數，比如1/2，1/8，1/1024，每個浮點數占64位。但是，二進制浮點數表示法并不能精確的表示類似0.1這樣的簡單的數字，會有舍入誤差。由于采用二進制，JavaScript 也不能有限表示 1/10、1/2 等這樣的分數。在二進制中，1/10(0.1)被表示為 0.00110011001100110011…… 注意 0011 是無限重復的，這是舍入誤差造成的，所以對于 0.1 + 0.2 這樣的運算，操作數會先被轉成二進制，然后再計算： 0.1 => 0.0001 1001 1001 1001…（無限循環） 0.2 => 0.0011 0011 0011 0011…（無限循環）雙精度浮點數的小數部分最多支持 52 位，所以兩者相加之后得到這么一串 0.0100110011001100110011001100110011001100…因浮點數小數位的限制而截斷的二進制數字，這時候，再把它轉換為十進制，就成了 0.30000000000000004。對于保證浮點數計算的正確性，有兩種常見方式。一是先升冪再降冪： ``` function add(num1, num2){ let r1, r2, m; r1 = (''+num1).split('.')[1].length; r2 = (''+num2).split('.')[1].length; m = Math.pow(10,Math.max(r1,r2)); return (num1 * m + num2 * m) / m; } console.log(add(0.1,0.2)); //0.3 console.log(add(0.15,0.2256)); //0.3756 ``` 二是是使用內置的 toPrecision() 和 toFixed() 方法，注意，方法的返回值字符串。 ``` function add(x, y) { return x.toPrecision() + y.toPrecision() } console.log(add(0.1,0.2)); //"0.10.2" ``` 7:實現函數 isInteger(x) 來判斷 x 是否是整數可以將 x 轉換成10進制，判斷和本身是不是相等即可： ``` function isInteger(x) { return parseInt(x, 10) === x; } ``` ES6 對數值進行了擴展，提供了靜態方法 isInteger() 來判斷參數是否是整數： ``` Number.isInteger(25) // true Number.isInteger(25.0) // true Number.isInteger(25.1) // false Number.isInteger("15") // false Number.isInteger(true) // false ``` JavaScript能夠準確表示的整數范圍在 -2^53 到 2^53 之間（不含兩個端點），超過這個范圍，無法精確表示這個值。ES6 引入了Number.MAX_SAFE_INTEGER 和 Number.MIN_SAFE_INTEGER這兩個常量，用來表示這個范圍的上下限，并提供了 Number.isSafeInteger() 來判斷整數是否是安全型整數。 8:在下面的代碼中，數字 1-4 會以什么順序輸出？為什么會這樣輸出？ ``` (function() { console.log(1); setTimeout(function(){console.log(2)}, 1000); setTimeout(function(){console.log(3)}, 0); console.log(4); })(); ``` 輸出順序： ``` 1 4 undefined 3 2 ``` 9：寫一個少于 80 字符的函數，判斷一個字符串是不是回文字符串 ``` First: function palindrome(string) { var sanitized = string.replace(/[^A-Za-z]/g, "").toLowerCase(); return sanitized == sanitized.split("").reduceRight(function(sum, v) {return sum + v;}); } Second: function palindrome(string) { var s = string.replace(/[^A-Za-z0-9]/g, "").toLowerCase(); for (var i = 0; i < s.length/2; i++) if (s[i] != s[s.length-i-1]) return false; return true; } Third: function palindrome(string) { var s = string.toLowerCase().replace(/[^a-z0-9]+/g, ''); return s == s.split('').reduce(function(str, value) { return value+str; }, ''); } Fourth: function palindrome(string) { return string.toLowerCase().replace(/[^a-z]/gi,'').split('').every(function(a,b,c){ return a===c[c.length-b-1] }) } Fifth: function palindrome(string) { return string .toLowerCase() .replace(/[^a-z]/g,'') .split("") .every(function(v, i, array){ return v == array[array.length-i-1] }) ; } ``` 10：寫一個按照下面方式調用都能正常工作的 sum 方法 ``` console.log(sum(2,3)); // Outputs 5 console.log(sum(2)(3)); // Outputs 5 ``` 針對這個題，可以判斷參數個數來實現： ``` function sum() { var fir = arguments[0]; if(arguments.length === 2) { return arguments[0] + arguments[1] } else { return function(sec) { return fir + sec; } } } ``` 11：根據下面的代碼片段回答后面的問題 ``` for (var i = 0; i < 5; i++) { var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)); btn.addEventListener('click', function(){ console.log(i); }); document.body.appendChild(btn); } ``` 1、點擊 Button 4，會在控制臺輸出什么？（點擊5個按鈕中的任意一個，都是輸出5） 2、給出一種符合預期的實現方式 12：下面的代碼會輸出什么？為什么？ ``` var arr1 = "john".split('');// j o h n var arr2 = arr1.reverse();// n h o j var arr3 = "jones".split(''); //j o n e s arr2.push(arr3); console.log("array 1: length=" + arr1.length + " last=" + arr1.slice(-1)); console.log("array 2: length=" + arr2.length + " last=" + arr2.slice(-1)); ``` ``` array 1: length=5 last=j,o,n,e,s array 2: length=5 last=j,o,n,e,s ``` 定義和用法 slice() 方法可從已有的數組中返回選定的元素。語法 arrayObject.slice(start,end) start 必需。規定從何處開始選取。如果是負數，那么它規定從數組尾部開始算起的位置。也就是說，-1 指最后一個元素，-2 指倒數第二個元素，以此類推。 end 可選。規定從何處結束選取。該參數是數組片斷結束處的數組下標。如果沒有指定該參數，那么切分的數組包含從 start 到數組結束的所有元素。如果這個參數是負數，那么它規定的是從數組尾部開始算起的元素。 13：下面輸出結果? ``` console.log(1 + "2" + "2");//122 console.log(1 + +"2" + "2");//32 console.log(1 + -"1" + "2");//02 console.log(+"1" + "1" + "2");//112 console.log( "A" - "B" + "2");//NaN2 console.log( "A" - "B" + 2);//NaN ``` 多個數字和數字字符串混合運算時，跟操作數的位置有關 ``` console.log(2 + 1 + '3'); //33 console.log('3' + 2 + 1); //321 ``` 數字字符串之前存在數字中的正負號(+/-)時，會被轉換成數字 ``` console.log(typeof '3'); // string console.log(typeof +'3'); //number ``` 同樣，可以在數字前添加 ''，將數字轉為字符串 ``` console.log(typeof 3); // number console.log(typeof (''+3)); //string ``` 對于運算結果不能轉換成數字的，將返回 NaN ``` console.log('a' * 'sd'); //NaN console.log('A' - 'B'); // NaN ``` 14:如果 list 很大，下面的這段遞歸代碼會造成堆棧溢出。如果在不改變遞歸模式的前提下修善這段代碼？ ``` var list = readHugeList(); var nextListItem = function() { var item = list.pop(); if (item) { // process the list item... nextListItem(); } }; ``` 原文上的解決方式是加個定時器： ``` var list = readHugeList(); var nextListItem = function() { var item = list.pop(); if (item) { // process the list item... setTimeout( nextListItem, 0); } }; ``` 15:解釋下列代碼的輸出 ``` console.log("0 || 1 = "+(0 || 1));//0 || 1 = 1 console.log("1 || 2 = "+(1 || 2));//1 || 2 = 1 console.log("0 && 1 = "+(0 && 1));//0 && 1 = 0 console.log("1 && 2 = "+(1 && 2));//1 && 2 = 2 ``` 邏輯與和邏輯或運算符會返回一個值，并且二者都是短路運算符：邏輯與返回第一個是 false 的操作數或者最后一個是 true的操作數 ``` console.log(1 && 2 && 0); //0 console.log(1 && 0 && 1); //0 console.log(1 && 2 && 3); //3 ``` 如果某個操作數為 false，則該操作數之后的操作數都不會被計算邏輯或返回第一個是 true 的操作數或者最后一個是 false的操作數 ``` console.log(1 || 2 || 0); //1 console.log(0 || 2 || 1); //2 console.log(0 || 0 || false); //false ``` 如果某個操作數為 true，則該操作數之后的操作數都不會被計算如果邏輯與和邏輯或作混合運算，則邏輯與的優先級高： ``` console.log(1 && 2 || 0); //2 console.log(0 || 2 && 1); //1 console.log(0 && 2 || 1); //1 ``` 在 JavaScript，常見的 false 值： 0, '0', +0, -0, false, '',null,undefined,null,NaN 要注意空數組([])和空對象({}): ``` console.log([] == false) //true console.log({} == false) //false console.log(Boolean([])) //true console.log(Boolean({})) //true ``` 所以在 if 中，[] 和 {} 都表現為 true： 16:判斷輸出結果： ``` console.log(false == '0')//true console.log(false === '0')//false ``` 17輸出： ``` var a={}, b={key:'b'}, c={key:'c'}; a[b]=123; a[c]=456; console.log(a[b]);//456 ``` 18輸出： ``` console.log((function f(n){return ((n > 1) ? n * f(n-1) : n)})(10));//3628800 ``` 結果是10的階乘。這是一個遞歸調用，為了簡化，我初始化 n=5，則調用鏈和返回鏈如下： ![圖片描述][1] 19輸出： ``` (function(x) { return (function(y) { console.log(x); })(2) })(1);//1 ``` 閉包能夠訪問外部作用域的變量或參數。 20：解釋下面代碼的輸出，并修復存在的問題 ``` var hero = { _name: 'John Doe', getSecretIdentity: function (){ return this._name; } }; var stoleSecretIdentity = hero.getSecretIdentity; console.log(stoleSecretIdentity());//undefined console.log(hero.getSecretIdentity());//John Doe ``` 將 getSecretIdentity 賦給 stoleSecretIdentity，等價于定義了 stoleSecretIdentity 函數： ``` var stoleSecretIdentity = function (){ return this._name; } stoleSecretIdentity ``` 的上下文是全局環境，所以第一個輸出 undefined。若要輸出 John Doe，則要通過 call 、apply 和 bind 等方式改變 stoleSecretIdentity 的this 指向(hero)。第二個是調用對象的方法，輸出 John Doe。 21:給你一個 DOM 元素，創建一個能訪問該元素所有子元素的函數，并且要將每個子元素傳遞給指定的回調函數。函數接受兩個參數： DOM 指定的回調函數原文利用深度優先搜索(Depth-First-Search) 給了一個實現： ``` function Traverse(p_element,p_callback) { p_callback(p_element); var list = p_element.children; for (var i = 0; i < list.length; i++) { Traverse(list[i],p_callback); // recursive call } } ``` .class .intro 選擇 class="intro" 的所有元素。 `#id` `#firstname` 選擇 id="firstname" 的所有元素。 *選擇所有元素。 element p 選擇所有 p 元素。 element,element div,p 選擇所有 div 元素和所有 p 元素。 element element div p 選擇 div 元素內部的所有p 元素。當沒有空格的時候，表示class里必須要有兩個才有效。 `element>element div>p` 選擇**父元素**為 div 元素的所有 p元素。 `element+element div+p` 選擇緊接在 <div> 元素**之后的所有** <p> 元素。 [attribute] [target] 選擇帶有 target 屬性所有元素。 [attribute=value] [target=_blank] 選擇 target="_blank" 的所有元素。 [attribute~=value] [title~=flower] 選擇 title 屬性包含單詞 "flower" 的所有元素。 [attribute|=value] [lang|=en] 選擇 lang 屬性值以 "en" 開頭的所有元素。 2 :link a:link 選擇所有未被訪問的鏈接。 :visited a:visited 選擇所有已被訪問的鏈接。 :active a:active 選擇活動鏈接。 :hover a:hover 選擇鼠標指針位于其上的鏈接。 :focus input:focus 選擇獲得焦點的 input 元素。 :first-letter p:first-letter 選擇每個 <p> 元素的首字母。 :first-line p:first-line 選擇每個 <p> 元素的首行。 :first-child p:first-child 選擇屬于父元素的第一個子元素的每個 <p> 元素。 :before p:before 在每個 <p> 元素的內容之前插入內容。 :after p:after 在每個 <p> 元素的內容之后插入內容。 :lang(language) p:lang(it) 選擇帶有以 "it" 開頭的 lang 屬性值的每個 <p> 元素。 element1~element2 p~ul 選擇前面有 <p> 元素的每個 <ul> 元素。**element1~element2 選擇器 element1 之后出現的所有 element2。兩種元素必須擁有相同的父元素，但是 element2 不必直接緊隨 element1。 `[attribute^=value] a[src^="https"]` 選擇其 src 屬性值以 `"https"` 開頭的每個 a 元素。 `[attribute$=value] a[src$=".pdf"]` 選擇其 src 屬性以 `".pdf"` 結尾的所有 a> 元素。 `[attribute*=value] a[src*="abc"]` 選擇其 src 屬性中包含 "abc" 子串的每個 a> 元素。 :first-of-type p:first-of-type 選擇屬于其父元素的首個 <p> 元素的每個 p> 元素。 :last-of-type p:last-of-type 選擇屬于其父元素的最后 <p> 元素的每個 p> 元素。 :only-of-type p:only-of-type 選擇屬于其父元素唯一的 <p> 元素的每個 <p> 元素。 :only-child p:only-child 選擇屬于其父元素的唯一子元素的每個 <p> 元素。 :nth-child(n) p:nth-child(2) 選擇屬于其父元素的第二個子元素的每個 <p> 元素。 :nth-last-child(n) p:nth-last-child(2) 同上，從最后一個子元素開始計數。 :nth-of-type(n) p:nth-of-type(2) 選擇屬于其父元素第二個 <p> 元素的每個 <p> 元素 :nth-last-of-type(n) p:nth-last-of-type(2) 同上，但是從最后一個子元素開始計數。 :last-child p:last-child 選擇屬于其父元素最后一個子元素每個 <p> 元素。 :root :root 選擇文檔的根元素。 :empty p:empty 選擇沒有子元素的每個 <p> 元素（包括文本節點）。 :target `#news:target` 選擇當前活動的 #news 元素。 :enabled input:enabled 選擇每個啟用的 input> 元素。 :disabled input:disabled 選擇每個禁用的 input> 元素 :checked input:checked 選擇每個被選中的 input> 元素。 :not(selector) :not(p) 選擇非 <p> 元素的每個元素。 ::selection ::selection 選擇被用戶選取的元素部分。 input的type值類型和描述-HTML button 定義可點擊的按鈕（大多與 JavaScript 使用來啟動腳本） checkbox 定義復選框。 color 定義拾色器。 date 定義日期字段（帶有 calendar 控件） datetime 定義日期字段（帶有 calendar 和 time 控件） datetime-local 定義日期字段（帶有 calendar 和 time 控件） month 定義日期字段的月（帶有 calendar 控件） week 定義日期字段的周（帶有 calendar 控件） time 定義日期字段的時、分、秒（帶有 time 控件） email 定義用于 e-mail 地址的文本字段 file 定義輸入字段和 "瀏覽..." 按鈕，供文件上傳 hidden 定義隱藏輸入字段 image 定義圖像作為提交按鈕 number 定義帶有 spinner 控件的數字字段 password 定義密碼字段。字段中的字符會被遮蔽。 radio 定義單選按鈕。 range 定義帶有 slider 控件的數字字段。 reset 定義重置按鈕。重置按鈕會將所有表單字段重置為初始值。 search 定義用于搜索的文本字段。 submit 定義提交按鈕。提交按鈕向服務器發送數據。 tel 定義用于電話號碼的文本字段。 text 默認。定義單行輸入字段，用戶可在其中輸入文本。默認是 20 個字符。 url 定義用于 URL 的文本字段。 Array ：數組函數 constructor 所修立對象的函數參考 prototype 能夠為對象加入的屬性和方法 index For an array created by a regular expression match, the zero-based index of the match in the string. input For an array created by a regular expression match, reflects the original string against which the regular expression was matched. length 獲取數組元素的個數,即最大下標加1 辦法(13): concat(array1,arrayn)將兩個或兩個以上的數組值銜接止來,合并后返回成果 join(string) 將數組中元素合并為字符串,十月媽咪,string為分隔符.如省詳參數則直交合并,不再分隔 pop() 移除數組中的最后一個元素并返回當元素 push(value) 在數組的終尾加上一個或多個元素,并且返回新的數組長度值 reverse() 倒置數組中元素的次序,反背排列 shift() 移除數組中的第一個元素并返回當元素 slice(start, deleteCount, [item1[, item2[,...[,itemN]]]]) 返從一個數組中移除一個或少個元素,假如必要,在所移除元素的地位上拔出新元素,返回所移除的元素 sort(compare Function) 在已指定排序號的情形下,依照元素的字女次序排列,假如不是字符串類型則轉換成字符串再排序,返回排序后的數組 splice() 為數組刪除并加加新的元素 toSource() 顯示對象的源代碼 toString() 將數組一切元素返回一個字符串,其間用逗號分隔 unshift(value)為數組的開端部門加上一個或者少個元葷,并且返回當數組的新長度 valueOf() 返回數組對象的原始值事件 a.窗心事件,只在body和frameset元素中才有效 onload 頁里或者圖片加載完成時 onunload 用戶分開頁里時 b.表雙元素事情,正在表雙元素中才有效 onchange 框內容轉變時 onsubmit 點打降接按鈕時 onreset 沉新點擊鼠標按鍵時 onselect 白原被挑選時 onblur 元素失來焦點時 onfocus 該元素獲與焦面時 c.鍵盤事情,在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元素里皆無效 onkeydown 按下鍵盤按鍵時 onkeypress 按下或按住鍵盤按鍵時 onkeyup 擱啟鍵盤按鍵時 d.正在base,bdo,br,frame,frameset,head,html,iframe,meta,param,script,style,title元葷里皆無效 onclick 鼠標點打一個對象時 ondblclick 鼠標雙打一個對象時 onmousedown 鼠本被按下時 onmousemove 鼠標被挪動時 onmouseout 鼠本分開元葷時 onmouseover 鼠標經由元素時 onmouseup 開釋鼠本按鍵時 String ：字符函數 constructor 所樹立對象的函數參考 prototype 可以為對于象參加的屬性和方式 length 返回字符串的字符長度法子(20): anchor("name")用來把字符串轉換為HTML錨面標志內(A NAME=>) big() 把字符串中的文本變成大字體(`<BIG>`) blink() 把字符串中的文本變成閃耀字體(`<BLINK>`) bold() 把字符串中的文本變成烏字體(`<B>`) fixed() 把字符串中的文本變成流動間距字體,便電報情勢(`<TT>`) fontcolor(color)設置字符串中文本的色彩(`<FONT COLOR=>`) Fontsize(size) 把字符串中的文本變成指定大小(`<FONTSIZE=>`) italics() 把字符串中的白原變成斜字體(`<I>`) Link(url)用來把字符串轉換-HTML鏈交標志中(A HREF=>) small() 把字符串中的文本變成小字體(`<SMALL>`) strike() 把字符串中的文本變成劃掉字體(`<STRIKE>`) sub() 把字符串中的文本變成下標(subscript)字體((`<SUB>`) sup() 把字符串中的文本變成上標(superscript)字體(`<SUP>`) charAt(index) 返回指定索引處的字符 charCodeAt(index)返回一個整數,該整數表現String對象中指定位置處的字符的Unicode編碼 concat(string2)銜接兩條或少條字符串 fromCharCode(num1, num2, …,BB霜, numN)獲取指定的Unicode值并返回字符串 indexOf(searchString, startIndex) 返回字符串中第一個呈現指定字符串的地位 lastlndexOf(searchString, startIndex) 返回字符串中最后一個呈現指定字符串的地位 match(regex) 在字符串中查覓指定值 replace(regex, newString)將字符串中的某些字符替代成其它字符 search(regex) 針對某施行值對字符串入止查覓 slice(startIndex, endIndex)將部門字符抽出并在新的字符串中返回剩余局部 split(delimiter)將字符串分配為數組 substr(startIndex, length) 從startIndex與,取length個字符 substring(startIndex, endIndex) 從startIndex和endIndex之間的字符,沒有包含endIndex toLowerCase() 把字符串中的文本變成小寫 toUpperCase() 把字符串中的白本變成大寫 toSource() 顯示對象的源代碼 valueOf() 返回字符串對象的原始值在一個函數中定義另一個會使閉包變得更加復雜。例如： ~~~ var iBaseNum = 10; function addNum(iNum1, iNum2) { function doAdd() { return iNum1 + iNum2 + iBaseNum; } return doAdd(); } ~~~ 這里，函數 addNum() 包括函數 doAdd() （閉包）。內部函數是一個閉包，因為它將獲取外部函數的參數 iNum1 和 iNum2 以及全局變量 iBaseNum 的值。 addNum() 的最后一步調用了 doAdd()，把兩個參數和全局變量相加，并返回它們的和。 doAdd() 函數根本不接受參數，它使用的值是從執行環境中獲取的。可以看到，閉包是 ECMAScript 中非常強大多用的一部分，可用于執行復雜的計算。提示：就像使用任何高級函數一樣，使用閉包要小心，因為它們可能會變得非常復雜。冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。 IE 5.5: div -> body -> document IE 6.0: div -> body -> html -> document Mozilla 1.0: div -> body -> html -> document -> window （2）捕獲型事件(event capturing)：事件從最不精確的對象(document 對象)開始觸發，然后到最精確(也可以在窗口級別捕獲事件，不過必須由開發人員特別指定)。（3）DOM事件流：同時支持兩種事件模型：捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。兩種事件流會觸及DOM中的所有對象，從document對象開始，也在document對象結束。支持W3C標準的瀏覽器在添加事件時用addEventListener(event,fn,useCapture)方法，基中第3個參數useCapture是一個Boolean值，用來設置事件是在事件捕獲時執行，還是事件冒泡時執行。而不兼容W3C的瀏覽器(IE)用attachEvent()方法，此方法沒有相關設置，不過IE的事件模型默認是在事件冒泡時執行的，也就是在useCapture等于false的時候執行，所以把在處理事件時把useCapture設置為false是比較安全，也實現兼容瀏覽器的效果。事件捕獲階段：事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。假設一個元素div，它有一個下級元素p。 ~~~ <div> 　　<p>元素</p> </div> ~~~ 這兩個元素都綁定了click事件，如果用戶點擊了p，它在div和p上都觸發了click事件，那這兩個事件處理程序哪個先執行呢？事件順序是什么？兩種模型以前，Netscape和Microsoft是不同的實現方式。 Netscape中，div先觸發，這就叫做事件捕獲。 Microsoft中，p先觸發，這就叫做事件冒泡。兩種事件處理順序剛好相反。IE只支持事件冒泡，Mozilla, Opera 7 和 Konqueror兩種都支持，舊版本的Opera's 和 iCab兩種都不支持。事件捕獲當你使用事件捕獲時，父級元素先觸發，子級元素后觸發，即div先觸發，p后觸發。事件冒泡當你使用事件冒泡時，子級元素先觸發，父級元素后觸發，即p先觸發，div后觸發。 W3C模型 W3C模型是將兩者進行中和，在W3C模型中，任何事件發生時，先從頂層開始進行事件捕獲，直到事件觸發到達了事件源元素。然后，再從事件源往上進行事件冒泡，直到到達document。程序員可以自己選擇綁定事件時采用事件捕獲還是事件冒泡，方法就是綁定事件時通過addEventListener函數，它有三個參數，第三個參數若是true，則表示采用事件捕獲，若是false，則表示采用事件冒泡。 ele.addEventListener('click',doSomething2,true) true=捕獲 false=冒泡傳統綁定事件方式在一個支持W3C DOM的瀏覽器中，像這樣一般的綁定事件方式，是采用的事件冒泡方式。 ele.onclick = doSomething2 IE瀏覽器如上面所說，IE只支持事件冒泡，不支持事件捕獲，它也不支持addEventListener函數，不會用第三個參數來表示是冒泡還是捕獲，它提供了另一個函數attachEvent。 ele.attachEvent("onclick", doSomething2); 附：事件冒泡（的過程）：事件從發生的目標（event.srcElement||event.target）開始，沿著文檔逐層向上冒泡，到document為止。事件的傳播是可以阻止的： ? 在W3c中，使用stopPropagation（）方法 ? 在IE下設置cancelBubble = true；在捕獲的過程中stopPropagation（）；后，后面的冒泡過程也不會發生了~ 3.阻止事件的默認行為，例如click `<a>`后的跳轉~ ? 在W3c中，使用preventDefault（）方法； ? 在IE下設置window.event.returnValue = false; 4.哇，終于寫完了，一邊測試一邊寫的額，不是所有的事件都能冒泡，例如：blur、focus、load、unload， css新特性： http://www.ibm.com/developerworks/cn/web/1202_zhouxiang_css3/ Html5 繪畫 canvas 元素用于媒介回放的 video 和 audio 元素本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失； sessionStorage 的數據在瀏覽器關閉后自動刪除語意化更好的內容元素，比如 article、footer、header、nav、section 表單控件，calendar、date、time、email、url、search CSS3 CSS3實現圓角（border-radius），陰影（box-shadow），對文字加特效（text-shadow、），線性漸變（gradient），旋轉（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋轉,縮放,定位,傾斜增加了更多的CSS選擇器多背景 rgba 在CSS3中唯一引入的偽元素是::selection. 媒體查詢，多欄布局 border-image 移除的元素純表現的元素：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] ~~~ 一、DOM創建 DOM節點（Node）通常對應于一個標簽，一個文本，或者一個HTML屬性。DOM節點有一個nodeType屬性用來表示當前元素的類型，它是一個整數： Element，元素 Attribute，屬性 Text，文本 DOM節點創建最常用的便是document.createElement和document.createTextNode方法： ~~~ var node1 = document.createElement('div'); var node2 = document.createTextNode('hello world!'); ~~~ 二、DOM查詢 ~~~ // 返回當前文檔中第一個類名為 "myclass" 的元素 var el = document.querySelector(".myclass"); // 返回一個文檔中所有的class為"note"或者 "alert"的div元素 var els = document.querySelectorAll("div.note, div.alert"); // 獲取元素 var el = document.getElementById('xxx'); var els = document.getElementsByClassName('highlight'); var els = document.getElementsByTagName('td'); Element也提供了很多相對于元素的DOM導航方法： // 獲取父元素、父節點 var parent = ele.parentElement; var parent = ele.parentNode;//只讀，沒有兼容性問題 var offsetParent=ele.offsetParent;//只讀，找到最近的有定位的父節點。　　　　　　　　　　　　　　　　　　　　　//沒有定位父級時，默認是body;但在IE7以下，如果當前元素沒有定位屬性，返回body，如果有，返回HTML; 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 //如果當前元素某個父級觸發了haslayout，則返回觸發了haslayout這個元素。 // 獲取子節點，子節點可以是任何一種節點，可以通過nodeType來判斷 var nodes = ele.children;//標準下、非標準下都只含元素類型，但對待非法嵌套的子節點，處理方式與childNodes一致。 var nodes = ele.childNodes;//非標準下：只包含元素類型，不會包含非法嵌套的子節點。 //標準下：包含元素和文本類型，會包含非法嵌套的子節點。 //獲取元素屬性列表 var attr = ele.attributes; // 查詢子元素 var els = ele.getElementsByTagName('td'); var els = ele.getElementsByClassName('highlight'); // 當前元素的第一個/最后一個子元素節點 var el = ele.firstChild;//對待標準和非標準模式，如childNods var el = ele.lastChild; var el = ele.firstElementChild;//非標準不支持 var el = ele.lastElementChild; // 下一個/上一個兄弟元素節點 var el = ele.nextSibling; var el = ele.previousSibling; var el = ele.nextElementSibling; var el = ele.previousElementSibling; ~~~ 兼容的獲取第一個子元素節點方法： `var first=ele.firstElementChild||ele.children[0];` 三、DOM更改 ~~~ // 添加、刪除子元素 ele.appendChild(el); ele.removeChild(el); // 替換子元素 ele.replaceChild(el1, el2); // 插入子元素 parentElement.insertBefore(newElement, referenceElement); //克隆元素 ele.cloneNode(true) //該參數指示被復制的節點是否包括原節點的所有屬性和子節點 ~~~ 四、屬性操作 ~~~ // 獲取一個{name, value}的數組 var attrs = el.attributes; // 獲取、設置屬性 var c = el.getAttribute('class'); el.setAttribute('class', 'highlight'); // 判斷、移除屬性 el.hasAttribute('class'); el.removeAttribute('class'); // 是否有屬性設置 el.hasAttributes(); ~~~ innerHTML與outerHTML的區別？比如對于這樣一個HTML元素：`<div>content<br/></div>。` innerHTML：內部HTML，content`<br/>`； outerHTML：外部HTML，`<div>`content`<br/></div>`； innerText：內部文本，content； outerText：內部文本，content；上述四個屬性不僅可以讀取，還可以賦值。outerText和innerText的區別在于outerText賦值時會把標簽一起賦值掉，另外xxText賦值時HTML特殊字符會被轉義。 ![](https://box.kancloud.cn/5e6b939b901107ad9da449dbd659e291_735x256.png) jQuery的html()與innerHTML的區別？ jQuery的.html()會調用.innerHTML來操作，但同時也會catch異常，然后用.empty(), .append()來重新操作。這是因為IE8中有些元素(比如input等)的.innerHTML是只讀的。在JavaScript中，將一個變量賦值為undefined或null，老實說，幾乎沒區別。 ~~~ var a = undefined; var a = null; ~~~ 上面代碼中，a變量分別被賦值為undefined和null，這兩種寫法幾乎等價。 undefined和null在if語句中，都會被自動轉為false，相等運算符甚至直接報告兩者相等。 ~~~ if(!undefined) console.log('undefined is false');// undefined is false if (!null) console.log('null is false');// null is false undefined == null// true ~~~ undefined表示"缺少值"，就是此處應該有一個值，但是還沒有定義。典型用法是：（1）變量被聲明了，但沒有賦值時，就等于undefined。（2) 調用函數時，應該提供的參數沒有提供，該參數等于undefined。（3）對象沒有賦值的屬性，該屬性的值為undefined。（4）函數沒有返回值時，默認返回undefined。 ~~~ var i; i // undefined function f(x){console.log(x)} f() // undefined var o = new Object(); o.p // undefined var x = f(); x // undefined ~~~ null表示"沒有對象"，即該處不應該有值。典型用法是：（1）作為函數的參數，表示該函數的參數不是對象。（2）作為對象原型鏈的終點。 `Object.getPrototypeOf(Object.prototype)// null` 增：push,unshift影響原來數組，contact ，...，不影響原來數組，移除：影響原來數組，pop,shift，splice,返回被移除的數組，移除不影響原來數組：filter。替換：splice影響原來是數組，map替換不影響原來數組； cookie 是存在瀏覽器里的。現在，就算你關掉瀏覽器，關掉電腦， cookie 里的信息也不會消失的。同源的文檔必須有相同的協議，主機名和端口號 CORS 是一種機制，允許我們繞過同源策略，從一個域名向另一個域名的資源發起請求。CORS 的原理是添加新的 HTTP 頭部，來對一些域名授權，那這些域名就可以發起對本頁面資源的請求。每一次請求都被認為是一次全新的請求，不同的請求之間并不知道對方的存在.這種” 無狀態性使得 HTTP 和互聯網都是 “去中心化” 的，不會輕易被人掌控。但也是因為這種屬性，使得 web 開發者在開發有狀態的 web 應用時十分的困難。無狀態就是不建立持久的連接； ~~~ Array對象，可以用這個函數判斷： function isArray(obj) { return Object.prototype.toString.call(obj) === '[object Array]'; } ~~~ ~~~ /*容器*/ .flex{ display: flex; display: -webkit-flex;/*Webkit內核的瀏覽器，必須加上-webkit前綴。*/ /*注意，設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。*/ flex-direction: row;/*決定主軸的方向，即子項目（子元素）橫向排列還是縱向排列*/ /*row（默認值）：主軸為水平方向，起點在左端。 row-reverse：主軸為水平方向，起點在右端。 column：主軸為垂直方向，起點在上沿。 column-reverse：主軸為垂直方向，起點在下沿。*/ flex-wrap:nowrap;/*定義如果一條軸線排不下，如何換行*/ /*nowrap（默認）：不換行。 wrap：換行，第一行在上方。 wrap-reverse：換行，第一行在下方。*/ justify-content: flex-start;/*定義了項目在主軸上的對齊方式。*/ /*flex-start（默認值）：左對齊 flex-end：右對齊 center：居中 space-between：兩端對齊，項目之間的間隔都相等。 space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。*/ align-items: flex-start;/*定義項目在交叉軸上如何對齊。*/ /*flex-start：交叉軸的起點對齊。 flex-end：交叉軸的終點對齊。 center：交叉軸的中點對齊。 baseline: 項目的第一行文字的基線對齊。 stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。*/ } /*項目，容器里的子元素默認成為項目，并擁有項目的默認屬性*/ .flex-item{ order:0;/*定義項目的排列順序。數值越小，排列越靠前，默認為0。*/ flex-grow:0;/*定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。*/ /*如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。*/ flex-shrink:1;/*定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。*/ flex-basis:auto;/*定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。它的默認值為auto，即項目的本來大小。*/ flex:0 1 auto;/*flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。*/ align-self:auto;/*允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性*/ } ~~~ ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>關于class的多種函數封裝</title> <style> body{ margin: 0; } li{ height: 20px; } </style> </head> <body> <div class="box" id="box"> <ul class="list"> <li class="in abc ab "></li> <li class="in ac b "></li> <li class="in a "></li> <li class="in acb "></li> <li class="in ba "></li> <li class="abc"></li> </ul> </div> <script> //數組的indexOf方法封裝 function indexOf(arr,value,start){ //如果不設置start,則默認start為0 if(arguments.length == 2){ start = 0; } //如果數組中存在indexOf方法，則用原生的indexOf方法 if(arr.indexOf){ return arr.indexOf(value,start); } for( var i = 0; i < arr.length; i++){ if(arr[i] === value){ return i; } } return -1; } //數組去重方法封裝 function noRepeat(arr){ var result = []; for( var i = 0; i < arr.length; i++){ if(indexOf(result,arr[i]) == -1){ result.push(arr[i]); } } return result; } //inArray方法封裝 function inArray(arr,value){ for(var i = 0; i < arr.length; i++){ if(arr[i] === value){ return true; } } return false; } //去除首尾空格函數封裝 function trim(arr){ var result = arr.replace(/^\s+|\s+$/g,''); return result; } //getElementsByClassName函數封裝 function getElementsByClassName(parentObj,classStr){ var result = []; var objs = parentObj.getElementsByTagName('*'); //如果classStr用空格分隔，則表示class必須同時滿足才有效 var targetArr1 = noRepeat(trim(classStr).split(/\s+/)); //如果classStr用逗號分隔，則表示class只要有一個滿足就有效 var targetArr2 = noRepeat(trim(classStr).split(/\s*,\s*/)); if(classStr.indexOf(',') == -1 ){ //用空格分隔或者只有一個class label: for(var i = 0; i < objs.length; i++){ var arr = noRepeat(trim(objs[i].className).split(/\s+/)); for( var j = 0; j < targetArr1.length; j++){ if(!inArray(arr,targetArr1[j])){ continue label; } } result.push(objs[i]); } return result; }else{ //用逗號分隔 label: for(var i = 0; i < objs.length; i++){ var arr = noRepeat(trim(objs[i].className).split(/\s+/)); for( var j = 0; j < targetArr2.length; j++){ if(inArray(arr,targetArr2[j])){ result.push(objs[i]); continue label; } } } return result; } } //addclass函數封裝 function addClass(obj,classStr){ var array = noRepeat(trim(obj.className).split('\s+')); if(!inArray(array,classStr)){ array.push(classStr); } obj.className = array.join(' '); return obj; } //removeclass函數封裝 function removeClass(obj,classStr){ var array = noRepeat(trim(obj.className).split('\s+')); var index = indexOf(array,classStr); if(index != -1){ classStr.splice(index,1); obj.className = classStr.join(' '); } return obj; } //toggleClass函數封裝 function toggleClass(obj,classStr){ var array = noRepeat(trim(obj.className).split('\s+')); if(inArray(array,classStr)){ removeClass(obj,classStr); }else{ addClass(obj,classStr); } } </script> </body> </html> ~~~ HTTP：從客戶端到服務端的請求消息，包括消息首行中，對資源的請求方法，資源的表示服及使用的協議。 HTTP請求：當打開網頁的時候，所看到的文字，圖片，多媒體等等，這一切的內容，都是從服務器獲取的，每一個內容的獲取，就是一個HTTP請求。減少請求次數，圖片合并，css合并，js文件合并。 ![](https://box.kancloud.cn/5b2ee3922ed687a43a1243ecb5473625_1121x618.png) 避免重定向：增加用戶和服務器的往返次數。 301用戶請求的頁面a.com，被移動到了另外的位置b.com，用戶端收到反饋后，再發起請求去b.com下載文件，永久重定向 302用戶請求的頁面被找到了，但是不在原始位置，服務器會回復一個地址，用戶端收到反饋后，同樣會發起另外一個請求，去服務器返回的地址去下載資源，臨時重定向。找舊地址再跳新地址。