標(biāo)簽語(yǔ)義化
去掉或者丟失樣式的時(shí)候能夠讓頁(yè)面呈現(xiàn)出清晰的結(jié)構(gòu)
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個(gè)關(guān)鍵字的權(quán)重
方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動(dòng)設(shè)備）以意義的方式來渲染網(wǎng)頁(yè)
便于團(tuán)隊(duì)開發(fā)和維護(hù)，語(yǔ)義化更具可讀性，是下一步網(wǎng)頁(yè)的重要?jiǎng)酉?，遵循W3C標(biāo)準(zhǔn)的團(tuán)隊(duì)都遵循這個(gè)標(biāo)準(zhǔn)，可以減少差異化
塊級(jí)標(biāo)簽，行內(nèi)標(biāo)簽
塊級(jí)：div, ul, li, ol, table, th, tbody, tfoot, tr, pre, fieldset, form, h1-h6, p等
a, abbr, b, br, code, em, img, input, label, select, textarea, strong等
盒子模型(IE盒子模型的區(qū)別)
總寬度 ＝ margin＋padding＋border＋content，IE的盒子模型的寬度不計(jì)padding和border
css3的box-sizing
屬性，詳見https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizingcontent-box，border和padding不計(jì)算入width之內(nèi)
border-box，border和padding計(jì)算入width之內(nèi)
樣式繼承
可繼承的樣式font-size
font-family
color
text-indent
CSS sprite
減少請(qǐng)求
link和@import的區(qū)別
link屬于XHTML標(biāo)簽，而@import是CSS提供的
頁(yè)面被加載的時(shí)，link會(huì)同時(shí)被加載，而@import引用的CSS會(huì)等到頁(yè)面被加載完再加載
@import只在IE5以上才能識(shí)別，而link是XHTML標(biāo)簽，無兼容問題
link方式的樣式的權(quán)重 高于@import的權(quán)重
CSS優(yōu)化
嵌套層級(jí)不要太深，一般三層最多
css解析從右向左，所以最右邊的應(yīng)該是相對(duì)少一點(diǎn)
html用了base64的img的話，并不會(huì)緩存起來，可以將這個(gè)base64的圖片放在css文件里，css會(huì)緩存，圖片就緩存起來了
盡量不用后代元素選擇器，最右邊的一層不要是標(biāo)簽，尤其是像div這種非常常用的標(biāo)簽
多使用css的繼承，而不是每一次都書寫時(shí)都全部重寫一遍。寫多個(gè)css屬性時(shí)，能連在一起寫的就連在一起寫
預(yù)處理器
Sass
Ruby Sass 與 Lib Sass 的區(qū)別
Less
Stylus
嚴(yán)格模式
'use strict'
不能使用eval()
抑制this的行為
不允許讀寫eval和arguments的值
不允許意外創(chuàng)建全局變量
變量
使用var定義的全局變量不能使用delete刪除
無var創(chuàng)建的全局變量可以使用delete刪除
隱式類型轉(zhuǎn)換
數(shù)字與字符串相加，結(jié)果為字符串
數(shù)字與字符串相減，結(jié)果為數(shù)字
比較變量的是否相同時(shí)，要采用===，==會(huì)發(fā)生隱式類型轉(zhuǎn)換
NaN與任何變量不相等
類型檢測(cè)
typeof
instanceof
constructor
Object.prototype.toString.apply()
作用域
全局作用域
函數(shù)作用域
數(shù)組
數(shù)組的類型檢測(cè)
數(shù)組的方法
slice()
map()
every()
some()
filter()
閉包
概念
作用
創(chuàng)建匿名執(zhí)行函數(shù)
緩存變量，防止被垃圾回收
實(shí)現(xiàn)函數(shù)的封裝
應(yīng)用場(chǎng)景
內(nèi)部函數(shù)訪問外部函數(shù)的變量
使用閉包代替全局變量
封裝相關(guān)功能
回調(diào)函數(shù)
創(chuàng)建私有變量和公有變量
特性
經(jīng)典例子：列表點(diǎn)擊，彈出每一個(gè)的index
/* 錯(cuò)誤做法 */var elems = document.getElementById('links').getElementsByTagName('li');for ( var i = 0; i < elems.length; i++ ) { elems[i].addEventListener('click', function ( event ) { event.preventDefault(); alert(i); }, false);}
/* 正確的做法，使用閉包 */var elems = document.getElementById('links').getElementsByTagName('li');for ( var i = 0; i < elems.length; i++ ) { (function ( index ) { elems[i].addEventListener('click', function ( event ) { event.preventDefault(); alert(index); }, false); })( i );}
數(shù)組去重
最簡(jiǎn)單的方法
function removeDuplicate( arr ) { var len = arr.length, temp = []; for ( var i = 0; i < len; i+=1 ) { if ( temp.indexOf(arr[i]) === -1 ) { temp.push(arr[i]); } } return temp;}
冒泡排序
function bubbleSort( arr ) { var len = arr.length, temp; for ( var i = 0; i < len - 1; i ++ ) { for ( var j = 0; j < len - 1 - i; j++ ) { if ( arr[j] > arr[j+1] ) { temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } return arr;}
