原创 Web前端性能優化——使用Array.prototype.join代替字符串連接

一般情況下,我們會使用 “+” 來連接字符串,比如 var htmlStr = ""; for(var i = 0; i < 5; i ++){ htmlStr += "<li>" + i + "</li>"; } docume

原创 塊級元素與行內元素的區別

1、塊級元素的盒子會擴展到與父元素同寬:這就是爲什麼塊級元素獨佔一行的原因了。 2、行內元素的盒子會收縮到包緊其內容:這也是爲什麼幾個連續的行內元素會並排一行的原因。 3、塊級元素可以設置 width、height,而行內元素不行,行內元

原创 JS 基礎知識點總結

參考 《JavaScript 高級程序設計(第3版)》 <script> 1、<script> 標籤加載外部 JS :     1)defer="defer" :延遲腳本,腳本立即下載,但延遲執行,按順序執行。     2)async="

原创 JavaScript 閉包及其機制

首先要區分兩個概念,一是匿名函數,一是閉包。 所謂匿名函數,就是創建函數沒有給定函數名。經常出現的包括函數表達式,就是定義一個匿名函數,然後將函數賦值給某個變量,而此時這個變量就相當於該函數的函數名,例如: var sayHi = fun

原创 Web 前端性能優化——控制DOM大小

如果一個頁面中包含大量的 DOM 節點,使用 getElementsByTagName 等方法進行搜索的時候,將會是一個非常費力的過程。 另外,多餘的DOM節點也會使其他的程序變慢。 此時應該對 DOM 的大小進行必要的控制。常用的方法有

原创 CSS 特殊選擇符

1、子元素選擇符 > :父元素 > 子元素 2、緊鄰同胞選擇符 + :元素1 + 元素2       元素2 必須緊跟着元素1 3、兄弟選擇符 ~ :元素1 ~ 元素2       元素2 與元素1 同級並在元素1 之後,不一定緊跟 4、

原创 CSS 佈局總結——固定寬度佈局

固定寬度佈局 單列布局 固定寬度的單列布局中,外層指定寬度(如果沒指定寬度,會自動伸展),設置 margin: 20px auto; 實現居中即可。 HTML結構: <!DOCTYPE HTML> <html> <head>

原创 騰訊web前端實習一面

參加了筆試後已經感覺要跪了,讓一個搞前端的去做C++,整份卷子就一道JS選擇題,還差點做錯了。昨天大家陸續收到通知,等到晚上手機依然沒有動靜,在掙扎着要不要去霸面的時候,23:20左右,來了一封郵件,讓去面試。半夜11點半,讓第二天早上去

原创 Web前端性能優化——高頻觸發事件的防抖

JS 提供了行爲層的支持,爲用戶提供了交互的操作性。然而,部分事件卻經常有意無意的被頻繁觸發,比如瀏覽器窗口的 resize 事件,某個元素的 mouseover 事件,如果處理觸發事件的回調函數過重,那麼最後的結果就是瀏覽器死掉。 爲此

原创 CSS 佈局總結——變寬度佈局

變寬度佈局 1-2-1 等比例變寬 總寬度設置 width: 85%; min-width: 650px; (關於IE6的min-width支持,可用) content 設置 width: 66%; float: left; side

原创 Web前端性能優化——DocumentFragment或innerHTML取代複雜的元素注入

DOM 操作對於前端性能的影響是舉足輕重的,如何減少 DOM 節點的創建以及快速注入是特別重要的。 假設頁面中有一個 <ul> 元素,需要動態創建多個 <li> 子節點,常規的寫法是 var list = document.get

原创 WinJS 初體驗

利用 HTML + CSS + JS 就可以在 VS 中開發出一個 win8 app 對於前端開發人員來說無疑是令人興奮的。 首先看看在 VS 中新建一個項目後的基本架構(剛剛結束的 Build 2014 大會的 VS2013 updat