在淘寶裏，他們總結的一些前端Tips

1.【約定】文件命名所有都用小寫和下劃線，樣式命名所有使用小寫和鏈接符，JS的鉤子使用「J_HiTao」

2.【HTML】須要爲html元素添加自定義屬性的時候，首先要考慮下有沒有默認的已有的合適標籤去設置，若是沒有，可使用以」data-「爲前綴來添加自定義屬性，避免使用」data:」

3.【約定】文件要求編碼必須爲GBK、GB2312或者GB18030

4.【HTML】html代碼要求全部的標籤、屬性都是用小寫字母，屬性值使用雙引號括起來，使用js插入html代碼的時候也要注意保持一致。

3.8 - 3.12

5.【JS】在書寫代碼時，應該儘可能在函數開始地方統一進行變量聲明，變量名注意語義化，通常使用名詞來命名，不要在乎名字的長度，壓縮後會替換爲簡短的變量名的。

6.【JS】浮點數的計算過程是：先將浮點數轉化爲二進制，而後進行計算，再轉化爲十進制，這樣子會有少量的偏差，因此爲了不這種偏差咱們可先將浮點數乘以10的n次方，轉化爲整數計算，而後再轉化爲小數。

7.【Firefox】Firefox中將同一域名下不一樣端口的訪問也視爲跨域操做。

8.【Mobile】強制WEB App在iPhone中全屏模式運行 <meta name=「viewport」 content=「width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;」 /> <meta name=「apple-mobile-web-app-capable」 content=「yes」 /> <meta names=「apple-mobile-web-app-status-bar-style」 content=「black-translucent」 />（王卓）

9.【Mobile】移動設備上的CSS媒體查詢應用： img {

margin:0 0 10px 10px;
float:right;

} @media all and (max-width: 480px) {

img {
  margin:10px auto;
  float:none;
  display:block;
}

} @media all and (max-width: 240px) {

img {
  display:none;
}

} 釋義：瀏覽器中的圖片在屏幕大於480px時會向右浮動，當屏幕小於480px時圖片display:block並居中，屏幕小於240px很是小時，直接讓圖片消失掉 (Opera/Safari3 only) （王卓）

3.15-3.19

10.【JS】Date()做爲普通函數被調用時，Date()將忽略傳遞給它的全部參數，返回當前日期和事件的字符串標識。

11.【HTML】在頁面中寫button的時候，必定要記得加上button的type類型，不然，某些瀏覽器會將其認爲是submit類型。

12.【JS】在綁定表單的提交事件時，若是button的type類型爲submit時，要經過綁定form的submit事件，避免使用button的click事件，由於若是表單能夠經過回車提交的話，綁定在button上的click事件是不會觸發的。

13.【HTML】img對象alt和title的解析： alt：當照片不存在或者load錯誤時的提示； title：照片的tip說明。 在IE中若是沒有定義title，alt也能夠做爲img的tip使用，可是在FF中，二者徹底按照標準中的定義使用 結論：你們在定義img對象時，最後將alt和title對象都寫全，保證在各類瀏覽器中都能正常使用（涵宇）

14.【JS】在使用form[name]的方式去取同一name的多個表單元素時，須要注意一點，若是有多個的話，返回的是一個數組，若是僅有一個的話直接返回這個元素而不是一個數組，因此你們在循環以前要先作判斷，以避免報錯。

3.22 - 3.26

15.【JS】關於Degrading Script Tags，這是一種腳本文件加載完成後執行一段腳本的方法，由jQuery的做者John提出，不瞭解的能夠看下做者的博客：http://ejohn.org/blog/degrading-script-tags/

16.【JS】有些瀏覽器對 try-catch-finally 的處理並不高效，因此把 catch 語句放在關鍵循環中將極大影響性能。若是可能，應在腳本中不頻繁被調用的地方進行異常處理，或經過檢查某種動做是否被支持來避免使用。

17.【JS】儘可能向 setTimeout() 和 setInterval()傳送函數名，而不要傳送字串。setTimeout() 和 setInterval() 方法近似於 eval。若是傳進參數是字符串，則在一段時間以後，會和 eval同樣執行字符串值，固然其低效率也和 eval 同樣。但這些方法也能夠接受函數做爲第一個參數。在一段時間後將調用此函數，但此函數可在編譯時被解釋和優化，也就是說會有更好的性能。

18.【CSS】經典的垂直問題中，img 的父容器若是 float 了，那麼其 display table-cell 將失效，table-cell 只能在 display static 的時候有效，所以解決方案是給 img 再加個包裝容器，原來的父容器 float，包裝器 table-cell……（法海）

19.【編輯器】編輯器下的bug,選中字體背景色時，除了對gecko瀏覽器要對backColor替換成hiliteColor,opera下也有問題。設置背景色時需用hiliteColor~（子涯）

3.29 - 3.31

20.【JS】若是頁面裏只有div和script標籤沒有body,head什麼的,並且div裏面只有空格沒有字符的話,這時候用document.getElementById(「」)獲取不到div的引用（孫信宇）

21.【JS】字符串合併是比較慢的。+ 運算符並無論是否將結果保存在變量中。它會建立新 string 對象，並將結果賦給此對象；也許新對象會被賦給某個變量。下面是一個常見的字符串合併語句： a += 'x' + 'y'; 此代碼首先建立臨時string對象保存合併後的'xy'值，而後和a變量合併，最後將結果賦給a。下面的代碼使用兩條分開的命令，但每次都直接賦值給a ，所以不須要建立臨時string對象。結果在大部分瀏覽器中，後者比前者快20%，並且消耗更少的內存： a += 'x'; a += 'y';

22.【JS】在設置元素樣式時，應該儘可能一次設定，避免屢次設定，較少reflow，能夠經過改變元素的class來達到目的。

 

【2010.4】

4.1 - 4.2

 

23.【JS】在遍歷Dom結構時，應該儘可能避免修改Dom，好比在遍歷的時候不斷的增長元素，可能會形成無限循環，每次修改都是實時更新的，若是有須要能夠先創建一個靜態列表進行遍歷。

24.【CSS】在ie中若是設定了li元素的height,則項目列表中的序號不正常,並且list-style-position:inside;失效

4.6 - 4.9

25.【Mobile】GIF、PNG、TIFF最大尺寸上限是300萬像素，也就是說，確保width * height ≤ 3 * 1024 * 1024。JPEG二次採樣（顏色壓縮）後的最大尺寸上限是3200萬像素（王卓）

26.【JS】若是一個元素的 display 樣式被設置爲 none，即便其內容變化也再也不須要重繪此元素，由於根本就不會顯示此元素。能夠利用這一點，當咱們要顯示某個盒子而且要修改其內容時，先修改後再顯示，減小reflow。

27.【Mobile】canvas元素的最大尺寸上限是3百萬像素，canvas對象的默認寬高是150 x 300像素。（王卓）

28.【JS】絕對不能爲Object.prototype添加屬性，所添加的任何屬性和方法均可以經過for/in循環枚舉，當一個對象被當作關聯數組使用時將會帶來很大的問題。

4.12 - 4.16

29.【Mobile】JavaScript執行時間限制在10秒以內，若是腳本執行時間超過10秒的話，Safari會在一個隨機位置強制中止執行，可能會致使意想不到的後果。（王卓）

30.【CSS】針對全部IE瀏覽器的hack：/9，僅針對IE8的hack：/0。

31.【Mobile】單個資源文件必須小於10MB，適用於HTML、CSS、JavaScript、非流格式媒體。一次性打開最多的頁面數量是8個（慎用Framesets）（王卓）

32.【CSS】若是一個盒子裏只有圖片，那麼font-size的定義在現代瀏覽器下會影響到盒子的高度，設置line-height在現代瀏覽器下可讓圖片垂直居中，而在ie六、7下則須要設置font-size來達到目的。

33.【JS】focus和blur事件不支持冒泡，可是它支持捕獲，因此在事件代理中咱們可使用捕獲，可是ie不支持捕獲，ie能夠經過focusin和focusout這兩個專有事件來代替，它們是支持冒泡的。

4.19 - 4.23

34.【JS】須要作頁面刷新的時候推薦使用location.replace和location.href兩個方法，而不推薦使用location.reload和history.go(0)，由於這兩個刷新至關於按F5刷新，有表單提交的頁面很容易會給出是否重複提交表單的提示。

35.【CSS】關於ie的專有屬性behavior，最近在cssbeauty上有一篇相關文檔，你們能夠看下，不推薦這種方式：http://fetchak.com/ie-css3/

36.【CSS】可使用 @-moz-document url-prefix() {} 來單獨爲 Firefox 作樣式定義。

37.【CSS】important! 的優先級高於任何其餘樣式定義。

38.【JS】使用Array.join在Internet Explorer中進行字符串鏈接操做是最快的; 而+= 或者 String.prototype.concat.apply(object, arguments) 在其餘瀏覽器中表現得更好。詳細測試數據參見： http://www.sitepen.com/blog/2008/05/09/string-performance-an-analysis/ （趙成陽）

4.26 - 4.30

39.【JS】String.fromCharCode是String函數的一個靜態方法，因此每次使用的時候都要按照 String.fromCharCode(num1,num2,…)這樣的方式去使用。（此方法是用來反解碼charCodeAt()生成的數字的）（涵宇）

40.【HTML】頁面在載入圖像的時候並不知道圖像的尺寸，因此剛開始僅顯示混雜在一塊兒的問題，圖片徹底在載入後纔會顯示圖片，這樣在網速極慢的狀況下就會形成頁面的跳動，若是肯定圖片的大小尺寸的話，應該在img標籤上設置寬高，這樣的話能夠在頁面載入時會預先留好位置，避免發生相似問題。

41.【JS】關於Preload的一篇文章：http://www.phpied.com/preload-cssjavascript-without-execution/

42.【CSS】對於input框，在定義高度後在ie下會出現各類很怪異的問題，因此咱們通常不定義input框的高度，經過padding值來控制。

43.【JS】toFixed 方法返回一個以定點表示法表示的數字的字符串形式，可是有一點須要注意的是，各瀏覽器下返回的值會稍有不一樣，有些會進行四捨五入，而有些是進行直接截取，解決的方法一是重寫這個方法，二十在進行相應操做時先乘以10的n次方，而後再轉化爲小數。

 

【2010.5】

 

5.4 - 5.7

44.【JS】element.onclick無論是在前仍是在後，都會優於YAHOO.util.Event.on(element,'click',..)解析。（addEventListener/attachEvent，長天）

45.【JS】Firefox 對已存在的事件監聽程序（經過傳統事件模式註冊的）採起的是替換（replace）操做，而非Firefox瀏覽器採起的是重寫（overwrites）操做。（長天）

46.【CSS】若是有須要能夠經過設置br { display:none} 來隱藏換行效果，最好的辦法是建議在html中移除。（文河）

47.【HTML】在各瀏覽器下對於HTTP1.1標準的請求支持（同一個域名）的並行下載數爲：ie6/7（2）、Firefox三、IE8（6）、Opera10/Chrome3/Safari4（4）（http://www.stevesouders.com/blog/2008/03/20/roundup-on-parallel-connections/）。（圓心）

5.10 - 5.14

48.【CSS】float 元素若是不指定寬度，在 ie6 下通常會有問題，若是出現此問題，能夠嘗試在 hack ie6，單獨爲 ie6 指定寬度。

49.【JS】相比其它語言來講，JavaScript 中位運算符的計算效率並不必定比其它計算方法高，有時候還會很是的低，並且不支持浮點數，通常不推薦使用。

50.【JS】link() method：建立一個連接能夠經過str.link(「http://www.taobao.com」))來建立。（涵宇）

51.【JS】var?m?=?n?=?0;???至關於?var?m?=?0;?n?=?0;?實際上?n?被聲明爲了全局變量，形成了名稱空間污染。（小馬)

5.15 - 5.19

52 【CSS】IE7中，若是在父級元素和子級元素之間（div > p）有一個HTML註釋，子選擇器將不會工做。（Google）

53 【CSS】若是text-decoration屬性指定給一個塊級元素，它會影響該元素的全部行間級後代。若是它指定給（或影響）一個行內元素，它會影響該元素產生的全部框。text-decoration的underline、overline及line-through僅做用於文本。若是該元素沒有內容或沒有文本內容（例如HTML中的IMG元素），UA必須忽略該屬性。IE與Opera在兩種文檔模式下均不會將text-decoration做用於IMG元素上，而Firefox、Chrome和Safari在混雜模式下與IE中一致，可是在標準模式下卻打破W3C的規範在IMG元素上能夠應用該樣式。（Google）

54 【CSS】當定位元素的z-index未設置時（默認爲auto），IE6/7/8下將會建立一個新的局部層疊上下文，其內的定位元素將受到父級元素的影響，即便子元素z-index設置高於與父元素平級的定位元素，也不會呈如今其上，而其它瀏覽器則不會。解決的方法就是明肯定位元素的z-index。

55 【CSS】E6/7/8中width或height任意一個或兩個都設爲0均可以隱藏iframe，可是其它瀏覽器均隱藏不了，由於iframe的默認樣式問題，還需設置border等樣式，因此最快捷的方法就是經過visibility和display來進行設置。

5.20 - 5.31

56 【TMS】TMS不容許發佈內容爲空的頁面，舉例：

場景：若是有一個條件式的輸出，在true的狀況下輸出一個片斷，在false的狀況下不輸出任何內容。

結果：在true的狀況下，是OK的；可是當false的狀況時，發現發佈始終沒法成功。

緣由：TMS開發設定的這個規則……沒有爲何，就是不讓發佈內容爲空的頁面，實在整不動的話，你放個相應的註釋來繞過這個規則

57.【CSS】在使用百分比定義寬高的時候，須要注意小數值的問題，取值都是四捨五入，IE六、IE七、Chrome、Safari的全部模式以及IE8的怪異模式下，百分比計算是基於其包含塊的實際使用值來計算的，而Firefox的全部模式以及IE8的標準模式下百分比的計算是根據其包含塊的計算值來計算的，也就是說，加入父級使用了百分比80%，子元素使用了百分比60%，那麼前者的計算應該是父級取得實際使用值後再乘以60%再四捨五入獲得子元素的實際使用值，然後者是80%*60%，最後四捨五入取的子元素的實際使用值。（Google）

58.【CSS】在IE6對A使用hover僞類以後，若是產生一些莫名其妙的問題，好比背景不顯示，抑或是hover離開以後A標籤的狀態沒有恢復。這時候能夠在僞類規則中添加:border:none;|zoom:1;或在A元素上添加background來解決問題（IE7 的其它類型hover也可能產生同類問題，解決方法相似）（熊鬆鬆）。

59.【HTML】IE6 條件註釋引發 IE8 下載阻塞：http://www.phpied.com/conditional-comments-block-downloads/

60.【CSS】IE六、7下button和type爲submit的input的默認padding沒法去掉，須要加overflow:visible才能消除。（鳴人）

61.【JS】對於小於 1e-6 的數值來講，ToString 時會自動轉換爲科學計數法，好比 （玉伯：http://lifesinger.org/blog/2010/05/the-trap-of-parseint/） ，此種狀況下使用 parseInt 獲得的值可能就不是本身想要的，因此在參數類型不肯定的時候，最好封裝一層。

62.【CSS】IE6/7/8 最多支持32個CSS文件引入。（測試地址：http://john.albin.net/ie-css-limits/link-test.html）

63.【CSS】爲長頁面添加上 body {overflow-y: scroll}，能夠減小一次reflow。（雲謙）

 

【2010.6】

 

6.1 - 6.4

64.【JS】IE下操做innerHTML，向裏面插入的內容包含有<style>標籤的，style標籤不會被解析，能夠經過內聯或者外聯樣式去解決。（龍剛）

65.【CSS】對於相似 .a.b {} 這樣的樣式，ie6僅能識別.b，會忽略掉前邊的 .a，使用這種方式就會帶來一些問題，並且在重置時也比較費勁，通常不推薦過多的使用此類形式來定義樣式。

66.【CSS】在做input與後邊文字元素垂直居中的時候，通常作法是：input⇒vertical-align:middle;在IE瀏覽器中都可實現垂直居中對齊，可是在火狐下不是太靈活，可使用vertical-align:-num（num:表明合適的數值），來調整差距。（涵宇）

67.【瀏覽器】瀏覽器對於樣式表的處理可分紅兩類。FF和Opera會先渲染，以後若是樣式被改則刷新渲染；Chrome、IE和Safari等到樣式表全好了後才渲染。(一般他們只延時渲染樣式表以後的內容，但IE在某種狀況下會延時渲染所有)（涵宇）

6.7 - 6.13

68.【CSS】IE6/7及IE8怪異模式中，text-align:center可使塊級元素也居中對齊。其餘瀏覽器中，textalign: center僅做用於行內內容上。IE怪異模式中，給塊級元素設置margin-left:auto;margin-right:auto沒法使其相對於其父容器居 中對齊。其餘瀏覽器中則不存在此現象。（Google）

69.【JS】有時候須要獲取到flash對象，所以給object添加了id，給embed添加了name，二者的值恰好相同。此時若是使用window[name]來獲取flash對象，各瀏覽器的表現就不一致了：在Opera/Safar/Chrome獲取到的是一個集合HTMLCollection，彈出其length是2，在Opera/Safari/chrome中分別取出第1,2個元素分別是object，embed元素。準確的獲取flash對象能夠經過如下方式：

function getFlashObj(name){   
     return document[name] || window[name];   
} 

（來源：http://www.javaeye.com/topic/684672）

70.【CSS】當A標籤缺失href屬性後，它至關於普通的標籤，在IE6下，普通標籤是不支持「:hover」僞類的。所以，對缺失href屬性的A標籤設置「:hover」僞類是無效的。（Google）

71.【CSS】w3c css21規範中指出：A:hover必須放置在A:link和A:visited以後，不然將隱藏A:hover內定義的相同規則。同理，A:active應在A:hover以後，不然A:active中的相同規則將被隱藏（L-V-H-A）。在IE7(S)/IE8(S)/Firefox(S)(Q)/Chrome(S)(Q)/Safari(S)(Q)下，A標籤的僞類遵循w3c css21規範中的L-V-H-A順序標準。而在IE6(S)(Q)/IE7(Q)/IE8(Q)下則不遵循。（注：Q：怪異模式，S：標準模式）（Google）

72.【JS】正則表達式中，g表示全局配，若是正則表達式中帶有g，每次匹配後lastindex會更新一次，好比：var s = 'abac',re = /a/g; 初始值lastIndex爲0，第一次匹配後，lastIndex變爲1，第二次匹配後lastIndex變爲3，第三次匹配沒有匹配到，lastIndex則變爲0，能夠經過如下代碼進行測試：

var s = 'abac',re = /a/g; console.log(re.lastIndex); console.log(re.test(s)); console.log(re.lastIndex); console.log(re.test(s)); console.log(re.lastIndex); console.log(re.test(s)); console.log(re.lastIndex);

另外，建議在使用test檢測的時候不要帶上全局配。（龍剛、空帷）

73.【CSS】在一些切圖的活動頁面，若是出現圖片裂縫問題，就在全局樣式里加一個 img { vertical-align:middle;}，便可解決。（龍剛）

74.【CSS】在IE8中，-ms-filter是filter的別名，二者的區別是前者的屬性值必須被單引號或雙引號包圍，然後者則不是必須的，而在IE8以前的版本中，filter的屬性值必須不被單引號或雙引號包圍。（http://www.ued163.com/?p=818）

6.17,6.21 - 6.25

75.【CSS】儘可能不要在浮動元素上使用 clear 特性，避免發生一些奇怪的兼容性問題，好比：在IE6(S)(Q)/IE7(S)(Q)/IE8(Q)中，若是clear特性被設置在一個浮動的元素上時，該浮動元素可能會與其前邊的浮動元素放置在同一行。。。等等~（Google）

76.【CSS】」Layout」是IE/Win的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其餘元素的關係和相互做用，以及對應用還有使用者的影響。」Layout」能夠被某些CSS特性(property)不可逆的觸發，而某些HTML元素自己就具備layout。（Google）

77.【CSS】在使用CSS來寫一個三角形的時候，須要注意一點，當邊框設置爲transparent時ie6下會顯示出一個灰底，因此，ie6下要設置成背景的顏色，可是對於漸變背景的話此方法就再也不適用了，建議使用圖片代替。

78.【JS】一篇關於計時器的文章：http://www.sitepoint.com/blogs/2010/06/23/creating-accurate-timers-in-javascript/

79.【HTML】IE中IFRAME元素有一個專有的allowtransparency屬性，參見：http://msdn.microsoft.com/zhcn/library/ms533072(en-us,VS.85).aspx。當其值爲「true」時，IFRAME元素能夠透明。當沒有allowtransparency屬性或者allowtransparency屬性值不爲「true」時，IFRAME元素的背景色始終爲「#FFFFFF」，而且設置其背景色也無效。當allowtransparency屬性爲「true」後，IFRAME元素的背景色隨 即變爲「transparent」，而後咱們能夠隨意設置其背景色。（Google）

80.【CSS】IE6及IE(Q)中BODY元素的背景色不是CSS規定的transparent，而是#FFFFFF。這個#FFFFFF是由 padding: 0px;">6.28 - 6.30

81.【JS】replace函數的第二個參數能夠爲字符串或者函數，當爲函數的時候，它有 n+3 個參數，其中 n 爲 () 的個數，第一個參數是匹配模式的字符串，中間的 n 個參數分別對應匹配到的各個 () ，第 n+2 個參數聲明瞭匹配在 string 中出現的位置，最後一個參數是 string 自身。

82.【JS】一般狀況下，當一個頁面出現滾動條的時候，獲取scrollTop方法在各個瀏覽器下有些差別。Chrome、Opera、Safari能夠經過doc.body.scrollTop方式來獲取，而IE、FF下獲得的值是0，但能夠經過doc.getElementsByTagName('html')[0].scrollTop來獲取。簡便的解決辦法： var s1=document.body.scrollTop,s2=document.getElementsByTagName('html')[0].scrollTop;,返回非0，即真實有效的值 return Math.max(s1,s2);（熊鬆鬆）

83.【JS】若是一個對象並存valueOf和toString方法，那麼在數值運算中，優先調用valueOf，字符串運算中，優先調用toString。（涵宇，龍剛）

 

【2010.7】

 

7.1 - 7.2

84.【CSS】絕對定位元素蓋住連接或添加某事件handle的元素後，那麼該連接的默認行爲（頁面跳轉）或元素事件將不會被觸發。Firefox3.6+/Safari4+/Chrome支持一個稱爲pointer-events的css屬性，使用該屬性能夠決定是否能穿透絕對定位元素去觸發下面元素的某些行爲。（https://developer.mozilla.org/en/CSS/pointer-events）

83.【JS】Number,Boolean,String,Undefined這幾種基本類型混合比較時，會將其轉換成數字再進行比較；基本類型與複合對象進行比較時，會先將複合對象轉換成基本類型（依次調用valueOf與toString方法）再進行比較；undefined被當成基本類型，undefined轉換成數字是NaN，所以undefined與除null以外的其它類型值進行比較時始終返回false(注意NaN==NaN返回false)；null被當成複合對象，因爲null沒有valueOf與toString方法，所以和除了undefined以外的其它類型值進行比較時始終返回false。（http://www.javaeye.com/topic/696802）

7.5 - 7.9

84.【CSS】IE6及IE7/8怪異模式下，絕度定位元素當指定了left及right，而width或者height爲默認值auto，此時瀏覽器沒法正確地計算出width或者height的值，應該儘可能避免此種狀況設定固定的寬高，如不能避免，能夠經過js獲取寬高進行設置。（Google）

85.【JS】在插入文檔後，IE下input.type屬性爲只讀，若是須要修改能夠經過新建另外一個input控制顯隱來達到目的。

86.【HTML】media type(媒體類型)是css 2中的一個很是有用的屬性，經過media type咱們能夠對不一樣的設備指定特定的樣式，從而實現更豐富的界面。media query(媒體查詢)是對media type的一種加強，是CSS 3的重要內容之一。（詳情：http://www.qianduan.net/media-type-and-media-query.html）

87.【HTML】關於 Canvas 和 SVG 探討的一篇文章：http://www.sitepoint.com/blogs/2010/07/06/canvas-vs-svg-how-to-choose/

88.【JS】」==」 比較兩個對象會自動進行類型轉換，例如比較 '12' == 12將返回 true；而 」===」 不進行任何轉換必須徹底相等 '12' === 12 將返回 false。

7.12 - 7.16

89.【JS】想在IE6,IE7中建立一個父頁面元素，那麼你必須使建立元素屬於父頁面。var dummy = parent.document.createElement(「div」); 在Firefox,IE8中，它容許在一個文檔中建立要追加到另外一個文檔的元素。因此在Firefox,IE8中，可使用parent.document也可使用document。（張軍）

90.【JS】e.preventDefault()僅僅是阻止默認事件，而 return false; 同時阻止了事件冒泡，詳情參閱：http://css-tricks.com/return-false-and-prevent-default/

91.【JS】在webkit排版引擎瀏覽器中，用腳本動態設置style後，即便removeAttribute('style');,也能夠訪問到style中的css屬性值，而FF、IE、Opera下均不可獲取。 例子： obj.style.width='500px'; obj.removeAttribute('style'); console.log(obj.style.width);webkit排版引擎下能夠獲取到值（熊鬆鬆）

92.【HTML】關於 Firefox 在怪異模式下的一些特性：http://www.javaeye.com/topic/709316

93.【CSS】在 IE6/7/8 怪異模式中，當使用一對引號將全部的字體家族名連同分割的逗號所有包含，瀏覽器會修復此定義錯誤，多餘的引號會被忽略。好比：body{font-family: 「Arial, Tahoma」}，IE6/7/8 怪異模式會修復此定義錯誤，而解析爲：body{font-family: Arial, Tahoma}，因此默認的字體爲 Arial，而其它瀏覽器或者標準模式下則會以之爲錯誤而不解析，最終使用瀏覽器默認字體。（Google）

7.19 - 7.23

94.【JS】Array.prototype.sort的兼容以及相關知識：http://www.javaeye.com/topic/714688

95.【HTML】僅在Firefox中，table元素寬度屬性百分比大於100%時，Firefox會按100%處理；若是是style中的CSS特性，則不會這麼處理。建議給TABLE元素設置寬度的時候，不要使用width屬性，而是使用CSS中的width特性。（Google）

96.【PHP】$_GET 和 $_POST 等用戶提供的數據若是使用不當，如驗證、過濾不全面，就很容易形成安全問題。一般狀況下，咱們會編寫「一坨」正則來驗證數據格式是否合法。詳情請參閱：http://www.gracecode.com/archives/3029/ （明城）

97.【JS】focus() 方法可滾動文檔以使 Anchor 對象或者表單元素的位置變爲可見，所以在定位表單或者錨點時不需改變 hash 而經過 focus() 方法來實現。

98.【CSS】IE6及IE7/8怪異模式僅支持A元素的:hover及:active，IE7標準模式支持全部元素的:hover，但:active仍僅支持A元素，除IE8標準模式之外的IE均不支持:focus。（Google）

7.26 - 7.30

99.【JS】設置option元素中的文本時須要注意：用doc.createElement('option')建立的節點，IE是沒法直接設置text來改變文本的。必須經過 option.appendChild(doc.createTextNode(txt));來實現。可是，一旦節點被插入到頁面DOM後，就能夠直接設置option.text了。（熊鬆鬆）

100.【JS】delete 操做符用來刪除對象的屬性或者數組元素，對於使用 var 來聲明的變量，是不能刪除的，這一點在全部瀏覽器裏表現一致（注意：在 firebug 中能夠刪除），直接全局聲明（未帶 var）的變量能夠刪除，這一點在 IE 9 preview 中除外。詳情可參閱：https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Operators/Special_Operators/delete_Operator; http://www.javaeye.com/topic/720816;

101.【HTML】樣式的解析規則是從右到左，好比 div p {},瀏覽器解析是先匹配到 p，再匹配到 div。（圓心）

102.【Flash】SWF 嵌入到網頁中默認 wmode 爲 window，意味着是在頁面中以新窗口模式播放flash，不受HTML影響,永遠在頁面最頂端。（龍藏）

103.【CSS】IE6 下沒有「乾淨」的空 div，必須顯式地設置 line-height 爲 0 方可。（法海）

 

【2010.8】

 

8.2 - 8.6

104.【JS】獲取當前時間的毫秒數可經過如下方法：new Date().getTime(), new Date().valueOf(), +new Date(), new Date() * 1, Date.parse(Date()) … 等等，前四種方法括號內能夠帶時間的參數，能夠返回相應的時間的毫秒數，而最後一個會忽略掉任何參數。推薦看下：http://www.gracecode.com/archives/3004/ （劍翎，喬福）

105.【Flash】頁面中的swf配置參數中wmode通常 爲 window。即獨立窗口模式播放，不與當前HTML產生交互。（龍藏）

106.【Mobile】兼容iPhone/Android的屏幕旋轉事件： var supportsOrientationChange = 「onorientationchange」 in window, orientationEvent = supportsOrientationChange ? 「orientationchange」 : 「resize」; window.addEventListener(orientationEvent, function() {

 switch(window.orientation){
    case 0:
       //do sth;
       break;
    case 90:
       //do sth;
       break;
 }

}, false); （王卓）

107.【JS】+ 的字符串鏈接在傳統的 IE 瀏覽器下性能低下，可考慮使用數組索引（或push，索引略快）添加、join最終拼接的方式（但：Safari、Opera、Chrome和IE8瀏覽器都已優化了+的字符串鏈接性能，優於數組的方法）。（圓心）

108.【JS】!!能夠便捷的強制把其餘類型轉換爲布爾類型，好比 !!1。

8.9 - 8.13

109.【CSS】應該特別關注的引發 reflow 的幾個緣由：計算 offsetWidth 和 offsetHeight 屬性、改變字體。 詳細可閱讀：http://www.planabc.net/2009/04/13/reflow/ （圓心）

110.【Mobile】獲取當前地理位置的方法：navigator.geolocation.getCurrentPosition(showMap/*回調函數*/)，座標變量：latitude = position.coords.latitude; longitude = position.coords.longitude;（王卓）

111.【Flash】在頁面中應用swf對象的，若是對顯示沒有特殊要求，請不要將wmode 強制寫爲 opaque 或 transparent，這會影響其性能。（龍藏）

112.【JS】在使用 parseInt 函數轉換數字的時候，儘可能帶上第二個參數，強制轉換爲某一進制類型的數字，不然，如 parseInt('080') 可能不能得到你想要的結果，推薦使用 parseInt('080', 10)

113.【JS】在 IE 中當從新設置新的 href 屬性值時，若是連接文字含有 「http://;」 或 「@」 ，則其 innerHTML 將顯示不正確，顯示成設置的 href 屬性。解決方法是在修改href時，賦值前面加一個空格。（圓心）

8.16 - 8.20

114.【JS】在作數組或者其它依賴 length 屬性的循環時，建議先對 length 賦值，這樣能夠避免每次循環都去計算 length（特殊狀況除外），例如：

var myString = "Hello";
for ( var i = 0, len = myString.length; i < len; i++ ) {
 	alert( myString.charAt( i ) );
}

115.【Mobile】Android 2.2 webkit新APIs：navigator.connection.type能夠判斷當前網絡鏈接的類型；navigator.onLine檢測設備是否聯網；navigator.isApplicationInstalled檢測是否安裝某一個本地應用（王卓）

116.【JS】當腳本將 img 元素 innerHTML 給其餘建立的元素，未添加到 DOM 樹，則除 Opera 外，其餘瀏覽器都會當即請求圖片。（圓心）

117.【Flash】對於swf的內容，優雅降級的最佳事件是給出可替換內容「alternative content」. 這部份內容僅在<object>中被直接支持。這就是爲何推薦通常採用 <object> 進行swf嵌入的緣由。（龍藏）

118.【CSS】IE bug Table： http://ued.alipay.com/2010/07/ie-beat-the-holy-canon-css-bug-table/ （龍剛）

8.22 - 8.26

119.【JS】IE爲setInterval提供的延時時間不能爲0。當setInterval的延時時間爲0時，它會轉變成 setTimeout（僅執行一次回調函數），能夠經過爲其提供1ms的延遲來解決這個問題。（圓心）

120.【Flash】swf在不綁定或動態加載字體的狀況下，通常僅支持 _sans (相似 Helvetica 或 Arial)、_serif (相似 Times Roman) 和_typewriter (相似 Courier) 三類字體。（龍藏）

121.【Mobile】iPhone上使用Gestures API來實現縮放和旋轉：

var width = 100, height = 200, rotation = ;

node.ongesturechange = function(e){
 var node = e.target;
 // 縮放和旋轉都是相對值，
 // 因此要等手勢結束時再更改咱們的變量
 node.style.width = (width * e.scale) + "px";
 node.style.height = (height * e.scale) + "px";
 node.style.webkitTransform = "rotate(" + ((rotation + e.rotation) % 360) + "deg)";
}

node.ongestureend = function(e){
 // 更新這些變量，以備後用
 width *= e.scale;
 height *= e.scale;
 rotation = (rotation + e.rotation) % 360;
}

（王卓）

122.【JS】對於select中的值，用JS選中它，除了用xxx.options[指定的index]之外，若是已經預先知道須要選中的那項的值，還能夠直接用select.value=指定的值來快速搞定。（龍剛）

123.【JS】條件判斷時，好比 if ( myNum == 3 )，建議書寫爲 if ( 3 == myNum )，由於後者在你誤寫 == 爲 = 或者其它失誤時，錯誤發生後你能夠很容易的發行問題，瀏覽器的報錯提示也會有更友好的提示。

8.30 - 8.31

124.【Flash】給swf傳遞參數或者以flashvars方式傳遞。能夠支持內容編碼過的JSON和 XML。如對 JSON的全部 value 進行 encodeURIComponent。（龍藏）

125.【JS】在使用 setTimeout 或者 setInterval 函數時，須要注意，若是第一個參數傳入的是字符串，那麼將在全局做用域裏尋找此函數，而不會在當前做用域中尋找，因此建議第一個參數傳入函數，好比：setTimeout( function() { loop(counter); }, 1000 );。

 

【2010.9】

 

9.1 - 9.3

126.【Mobile】iPhone/Android 如何去掉超連接點擊高亮的邊框? dom.ontouchstart = function(){ return false; } 便可去除（王卓）

127.【JS】計時器在OS上，瀏覽器的最小延時時間爲10ms，在windows上爲15ms。咱們能夠經過爲計時器提供0（或任何10ms如下的任何數值）做爲延時時間獲得這個值。（圓心）

128.【JS】setTimeout能夠改變調用棧的順序：

alert(1); setTimeout(function (){

 alert(2)

},0); alert(3); alert(4); 執行順序 1 → 3 → 4 → 2

相關延伸閱讀: http://ejohn.org/blog/how-javascript-timers-work/ （龍剛）

9.6 - 9.10

129.【JS】在建立img時，src不要設置爲空或者#，不然會對頁面再次發生請求，建議設置爲about:blank;。

130.【JS】typeof 某一個 string 可能出來 object 或是 string，視其建立方式。（法海）

131.【JS】幾種國產瀏覽器的 UA 信息：https://spreadsheets.google.com/ccc?key=0AjjyN0rjIwrydGx1b2QyVkdlNjBfY2VEckFhTXJmTXc&hl=zh_CN#gid=0 （子涯）

132.【JS】邏輯運算符&&和||的「短路」原理，如&&中第一個表達式爲假就不會去處理第二個表達式，而||正好相反。在js中有意思的是它們的返回值： 例：var attr = true && 4 && 「aaa」;那麼運行的結果attr就不是簡單的true或這false，而是」aaa」 。 例：var Yahoo = Yahoo || {};常常用來判斷一個變量是否已定義，若是沒有定義就給他一個初始值。 那麼，能夠這樣優化代碼： if(a >=5){alert(「你好」);} 能夠寫成： a >= 5 && alert(「你好」); 注：js中||和&&的特性幫咱們精簡了代碼的同時，也帶來了代碼可讀性的下降。須要咱們本身來權衡了！（涵宇）

133.【JS】字面量 string 不以對象實現，做爲 16 位無符號整數存儲，當局稱這麼作的目的是爲了「簡單高效」。（法海）

9.13 - 9.17

134.【JS】var x = 「this is string…」; var y = [「this」,」is」,」string」]; x與y不一樣之處在於類型，javascript的解析器把字符串直接賦值（其實就是copy）給x（直接量），卻把數組的指針賦給y（引用量）。（涵宇）

135.【JS】對一個字符串使用replace方法的時候，用正則模式能夠替換掉字符串裏面的所有子字符串，用字符串模式則只作一次匹配,只替換第一個匹配， var aa = 」{}{}{}」; Var cc = aa.replace(」{」,」LEFTQUOTE」);只作一次匹配 console.log(cc); var bb = 」{}{}{}」; Cc = bb.replace(/{/g,」LEFTQUOTE」);可作所有的替換 console.log(cc); （喬福）

136.

137.【JS】「+」運算符的所謂「重載」，其實只是同一個算法內部的不一樣分支。（法海）

138.【CSS】p是block_level元素,沒有其餘的塊級元素能夠牽入到p裏,由於在P元素中遇到塊級元素後會當即閉合P元素；如：<p><div></div></p>會被解析成<p></p><div></div><p></p>。（涵宇）

9.19 - 9.21

139.【JS】「+」運算符進入「串鏈接」操做的分支後，調用左運算元（轉換成 String 對象後）的 Concatenate 方法，這意味着返回的是對象（運算元均爲數字時，將調用另外的方法，不返回對象）。（法海）

140.【JS】JavaScript不支持重載，在JavaScript中，腳本在執行時不會顧及函數定義時的參數，而是直接使用在做用域鏈中最後定義的那個函數。這意味着，相同名稱的函數永遠只存在一個實例。（涵宇）

141.【CSS】在 IE6/7 中，hr 默認有上下 14px 的 margin，同時不能消除。使用 float 清除上邊距，負邊距清除下邊距。（法海）

9.25 - 9.30

142.【HTML】建立複雜的HTML標籤或是多層的嵌套標籤時，能夠選擇使用DocumentFragment機制，它能夠提供一個緩衝的機制，將DOM節點先放到內存中，當節點都構造完成後，再將DocumentFragment對象添加到頁面中，這時全部的節點都會一次渲染出來，能減小瀏覽器不少的負擔，明顯的提升頁面渲染速度。（涵宇）

143.【HTML】關於 HTML5 表單驗證的文章：http://www.alistapart.com/articles/forward-thinking-form-validation/

144.【JS】將函數的引用做爲參數傳遞到setTimeout()和setInterval()裏優於將函數名做爲字符串參數傳遞（硬編碼）。例如，setTimeout(」someFunc()」, 1000)執行效率慢於setTimeout(someFunc, 1000)。（涵宇）

145.【JS】對於簡單的任務，最好使用基本操做方式來實現，而不是使用函數調用實現。例如val1 < val2 ? val1 : val2;執行速度快於Math.min(val1, val2);，相似的，myArr.push(newEle);慢於myArr[myArr.length] = newEle;（涵宇）

146.【JS】ie下非表單連接元素在觸發click事件的時候，focus事件也會被觸發，非ie不會觸發。（龍藏）

147.【瀏覽器】當發出的請求未收到response時，刷新頁面，firefox和chrome會自動中斷請求，而IE不會，因此在模擬長鏈接時屢次刷新頁面就會由於積累太多請求而遇到IE併發請求數的瓶頸，須要在觸發beforeunload事件時手動abort請求來解決。（鳴人）

 

【2010.10】

 

10.8 - 10.9

148.【JS】關於鼠標在頁面中座標顯示的種種：http://www.javaeye.com/topic/775445

149.【CSS】CSS3 Text 草案修改：http://www.css3.info/w3c-releases-updated-working-draft-of-css3-text/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+css3+%28css3.info%29&utm_content=Youdao+Reader

10.11 - 10.15

150.【JS】IE下對Select標籤設置innerHTML無效，替代方法是使用一個div對象封裝SELECT元素和而後設置div對象的innerHTML屬性或者建立 option 對象而後置入。（鳴人）

151.【JS】用 if 斷定時，if(variable) 這樣的和 if(variable == true) 的比較是不一樣的，後者因爲牽涉到「==」運算符，會先將 true 轉換成數字，即 1 而後比較，也就是當表達式中有一個爲布爾值時，會轉化爲數字而後進行比較。（法海）

152.【JS】在IE中，彈出文件選擇對話框時會觸發blur事件。（劍翎）

153.【Mobile】<link rel=「apple-touch-icon」 href=「apple-touch-icon.png」/>，第一行就是設置桌面快捷方式圖標的，圖標必須是57*57像素的文件，不須要本身作圓角和高亮效果，系統會自動幫你搞定這個，放在網頁根目錄會做用於下面的所有網頁，固然也能夠爲每一個頁面設置單獨的圖標。（喬福）

154.【JS】編寫高質量 JavaScript 代碼概要：http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/

10.18 - 10.22

155.【CSS】在IE6，7，8中（經測試，IE9 beta2下無此問題），若是link載入了一個html文檔（一般發生在目標資源不存在時，服務器端重定向到了404頁面），那麼文檔中的內聯樣式，可能會做用於父頁面中的相應元素。詳情請看 http://www.mytcer.com/773 。（長天）

156.【CSS】「font: 14px / 28px Georgia, 「Times New Roman」, Times, sans-serif;」，IE6/7 下得不到 28px 這個 line-height，緣由是 14px / 28px 斜槓先後有空格的關係，IE67 下將 28px 解析爲 font-family 的一部分了。（法海）

157.【JS】關於連續賦值的兩篇文字：http://www.javaeye.com/topic/785445 ， http://lifesinger.org/blog/2010/10/a-x-a/

158.【JS】webkit中，input =[search]的表單元素中 ，先獲取input焦點輸入內容按刪除，再離開input焦點後設置內容再得到焦點再刪除，最後頁面全部鏈接和事件綁定都失效了。（子涯）

159.【JS】firefox中返回函數時不包含註釋，ie,chrome,opera,safari均支持,此處開用做特性判斷。再擴展,如何利用註釋寫腳本：

//ie,chrome,opera,safari
function ziya() {
  var caller = arguments.callee.caller;   
  isFireFox(function(){/* moon */}) && eval(caller.toString().match(/ziya/(///*(([/n/r]|.)+)/*///)/m)[1]);
}
function isFireFox(o) {
  return o && o.toString().match(/moon/gi);
}
~function test(){
  ziya(/*
     window.k = "shiran:賣小螞蟻的MM真好看";
  */);
}()
alert(window.k || "firefox不支持");

10.25 - 10.29

160.【JS】使用frameElement.contentWindow（chrome不支持）能夠返回當前對象或者frame，或者iframe所在frame的window對象，而且這個屬性是隻讀的。參考：http://msdn.microsoft.com/en-us/library/ms533692(VS.85).aspx 。frameElement.contentDocument（IE67不支持）能夠返回當前frame、iframe的document對象。