HTML部分
- 對(duì)HTML5的理解
html5一些問(wèn)題
<!DOCTYPE html>
manifest的部分被MDN標(biāo)記為過(guò)時(shí)
storage部分
視頻温算，音頻，位置薇宠，
placeholder <input type="search" name="user_search" placeholder="Search W3School">
postMessage: XDM跨文檔消息傳送 當(dāng)前頁(yè)面的iframe或者當(dāng)前頁(yè)面彈出的窗口 MDN
- Web語(yǔ)義化
語(yǔ)義化標(biāo)簽
優(yōu)點(diǎn)：結(jié)構(gòu)清晰酒来，利于閱讀和seo
- SEO
- 頁(yè)面加載的過(guò)程
http://blog.jobbole.com/12749/
dom tree, style rules, render tree(layout),paiting
- LocalStorage,cookie,session
localStorage 永久存儲(chǔ)，本地存儲(chǔ)觅够，長(zhǎng)度沒(méi)有限制,setItem,getItem,鍵值對(duì)存儲(chǔ)
SessionStorage 瀏覽器會(huì)話關(guān)閉以后就會(huì)清理掉，其他和localStorage一樣
cookie 最好不要超過(guò)4K 給服務(wù)器發(fā)送請(qǐng)求的時(shí)候會(huì)帶上巷嚣，數(shù)量有限喘先，
- history
history.go(-1)往前一個(gè)頁(yè)面
history.back() == history.go(-1)
history.forward() == history.go(1)
- requestAnimationFrame
把所有的dom操作都集中在一次重繪中，跟隨瀏覽器刷新頻率廷粒，不可見(jiàn)或者隱藏的元素不會(huì)進(jìn)行重繪窘拯，cancelAnimationFrame
- Canvas & SVG
- https
在http和TCP之間放置一層SSL（安全套接層）
拿到公鑰
公開(kāi)密鑰加密
- websocket
不是http協(xié)議，需要專門(mén)的服務(wù)器支持
ws:// ws://
帶寬小
var socket = new WebSocket("ws://example.com/")
socket.onopen = function(){}
socket.onerror = function(){}
socket.onclose = function(){}
CSS部分
布局
- 幾種布局方式
固定布局: 像素布局
流體布局: 百分比
彈性布局： 字體為基礎(chǔ)單位 em? 還有說(shuō)flexbox的
左邊定寬坝茎，右邊自適應(yīng)
經(jīng)典的圣杯布局 我的總結(jié)
高度定寬+自適應(yīng) (初步想法是利用js)
- 變形
transform: rotate() scale(0.8) skew() translate(50px,50px)
- 動(dòng)畫(huà)
兼容性涤姊，需要加前綴
@keyframes myfirst
{
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
- css3邊框
>圓角border-radius
陰影 box-shadow
- box-sizing
>box-sizing屬性可以為三個(gè)值之一：content-box（default），border-box嗤放，padding-box思喊。
content-box，border和padding不計(jì)算入width之內(nèi)
padding-box次酌，padding計(jì)算入width內(nèi)
border-box恨课，border和padding計(jì)算入width之內(nèi)舆乔，其實(shí)就是怪異模式了~
- flex
- css hack
>gulp post css autoprefixer
PostCSS插件 [CSSNext](https://github.com/cssnext/cssnext) 用下一代CSS書(shū)寫(xiě)方式兼容現(xiàn)在瀏覽器
PostCSS插件 [Autoprefixer](https://github.com/postcss/autoprefixer) 為CSS補(bǔ)全瀏覽器前綴
PostCSS插件 [CSS Grace](https://github.com/cssdream/cssgrace) 讓CSS兼容舊版IE
CSS3 transition transform animate
- CSS3選擇器
>[w3c](http://www.w3school.com.cn/cssref/css_selectors.asp)
#### 組合選擇器
**E, F**: E或者F
**E F**: E的所有后代F
**E>F**: E的子代F
**E+F**: E之后的所有同級(jí)元素F
偽類 (nth-of-type)
- w3c盒子模型 和 IE盒子模型，box-sizing屬性
- BFC
- 優(yōu)先級(jí)
> 內(nèi)聯(lián)1000 id 100 class 10 tag 1
less 與 sass
background-*系列屬性剂公，這個(gè)不要忽視了希俩，還是很重要的
#JS部分
- 原型鏈的解釋
>每個(gè)構(gòu)造函數(shù)都有一個(gè)原型對(duì)象，實(shí)例有一個(gè)指向原型的指針纲辽，如果原型是別的構(gòu)造函數(shù)的實(shí)例的時(shí)候斜纪，層層遞進(jìn)就有了原型鏈
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//繼承了SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true
- 作用域鏈
>
- 閉包(手寫(xiě))
- 繼承(手寫(xiě))
>利用原型鏈(就在上面)
利用call或者apply
綜合利用上面的兩種
或者是利用Object.create原型繼承
http://www.reibang.com/p/a82de7858dd7
- call,apply,bind
>call的話是單個(gè)參數(shù)，apply是參數(shù)數(shù)組文兑，綁定函數(shù)執(zhí)行的活動(dòng)對(duì)象
- 聲明提升
>JavaScript引擎在執(zhí)行的時(shí)候，會(huì)把所有變量的聲明都提升到**當(dāng)前作用域**的最前面腺劣。
- new Object()
>new其實(shí)是跟的是構(gòu)造函數(shù)
原型指針指向Object的原型绿贞，繼承Object的屬性
也可以用字面量方式生成 {}
關(guān)于[new](http://www.reibang.com/p/2b99d9ad83c5)
- 數(shù)據(jù)類型
>基本數(shù)據(jù)類型Undefined、Null橘原、Boolean籍铁、Number和String，按值訪問(wèn)
Object,后來(lái)ES6還除了Symbol趾断，
- typeof
>typeof是小寫(xiě)
其中Null的typeof是object
typeof顯示函數(shù)是function
正則表達(dá)式有可能是function拒名，ie會(huì)可能是object
es規(guī)定實(shí)現(xiàn)了[[call]]方法的typeof都顯示為函數(shù)
檢測(cè)類型建議用instanceof，數(shù)組的話建議Array.isArray()
- Number
> Number.MAX_VALUE 最大值
Number.NEGATIVE_INFINITY 最小值芋酌、Number.MIN_VALUE
isFinite(num)
NaN與自身也不等
三個(gè)函數(shù)轉(zhuǎn)化 Number,ParseInt,parseFloat
- 高階函數(shù)
- JSON
- 跨域
>JSONP 利用動(dòng)態(tài)生成javascript標(biāo)簽增显，服務(wù)器動(dòng)態(tài)生成js代碼，callback函數(shù)里面有json的數(shù)據(jù)
var flightHandler = function(data){
alert('你查詢的航班結(jié)果是：票價(jià) ' + data.price + ' 元脐帝，' + '余票 ' + data.tickets + ' 張同云。');
};
// 提供jsonp服務(wù)的url地址（不管是什么類型的地址，最終生成的返回值都是一段javascript代碼）
var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
// 創(chuàng)建script標(biāo)簽堵腹，設(shè)置其屬性
var script = document.createElement('script');
script.setAttribute('src', url);
// 把script標(biāo)簽加入head炸站，此時(shí)調(diào)用開(kāi)始
document.getElementsByTagName('head')[0].appendChild(script);
</script>
iframe 通信 設(shè)置domain，前提是兩個(gè)為主域名
CORS疚顷，ajax的
onmessage,也是可以跟頁(yè)面產(chǎn)生的頁(yè)面進(jìn)行跨域通信
web worker也有g(shù)lobal的
- Ajax
> xhr
- 原生DOM操作（比如 逆序DOM節(jié)點(diǎn)）
- 事件捕捉旱易，捕獲，冒泡腿堤，代理
- Array常用函數(shù)
>[mdn](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array)
length屬性阀坏，toString,toLocalString,valueOf push,pop,shift,unshift,
reverse sort,對(duì)當(dāng)前數(shù)組進(jìn)行排序
splice 刪除，插入笆檀，替換全释，針對(duì)當(dāng)前數(shù)組
concat slice針對(duì)當(dāng)前數(shù)組創(chuàng)建新數(shù)組
迭代方法 es5 every filter forEach map some (item,index,array)
檢測(cè)是不是數(shù)組Array.isArray() ,instanceof 在框架不同的時(shí)候容易出問(wèn)題
- String常用函數(shù)
- Object常用的
>toString,toLocalString,valueOf
hasOwnProperty,isPrototypeOf,propertyIsEnumerable
- Function
>Object有的都有了，還有arguments,apply,call,bind,caller,constructor,length,name,prototype
- JS動(dòng)畫(huà)
- ES5
>[Object.create()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create)误债、[Object.defineProperty()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty)浸船、[getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get)和[setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set)妄迁、[嚴(yán)格模式](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode)以及[JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)對(duì)象
- CommonJS、AMD李命、CMD 模塊化編程
- 多重繼承
>看到一個(gè)方案登淘，是利用設(shè)計(jì)模式的Mixin，比如Jquery的extend封字，其實(shí)本質(zhì)上是復(fù)制屬性
es6的proxy
- sort
>先大寫(xiě)再小寫(xiě)黔州，字母序
- es6
>箭頭函數(shù)(匿名函數(shù))
map
set
generator
proxy
class
模塊
super
## DOM&&BOM
- DOM操作
>添加節(jié)點(diǎn)，appendChild,insertBefore
移除節(jié)點(diǎn) removeChild
復(fù)制節(jié)點(diǎn) cloneNode
創(chuàng)建 createElement
查找 getElementById get
- elements
- onready和onload的區(qū)別
>onready表示整個(gè)文檔加載完了阔籽，onload表示所有的資源都加載完
樣式控制可以在onload方面加載完流妻，onready事件觸發(fā)類的可以加載
- 事件流
>事件流描述的是從頁(yè)面中接收事件的順序
事件先捕獲，再冒泡
最開(kāi)始ie只支持冒泡笆制，Netscape是捕獲绅这，然后后面ie9就開(kāi)始用捕獲，最保險(xiǎn)的方式是用冒泡
- ajax
var xhr = XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if (xhr.status === 200) {
option.onload(JSON.parse(xhr.responseText));
}
else {
option.onerror(xhr.status);
}
}
}
xhr.open("post",url,true);
xhr.send(form);
#框架部分（大部分按照簡(jiǎn)歷來(lái)）
Angular臟檢查機(jī)制
手寫(xiě)Angular指令在辆，知道其生命周期
手動(dòng)實(shí)現(xiàn)MVC（考察）
Angular的理解
你心中的前端框架
Promise(感覺(jué)已經(jīng)成了必考項(xiàng)目)[極客學(xué)院](http://wiki.jikexueyuan.com/project/javascript-promise-mini-book/how-to-write-promise.html)
worker多線程計(jì)算
- require.js使用什么設(shè)計(jì)模式
>我覺(jué)得是 觀察者模式
##HTTP
- HTTP1/2 理解
報(bào)文
>報(bào)文分為請(qǐng)求報(bào)文和相應(yīng)報(bào)文
報(bào)文由報(bào)文首部和報(bào)文主體組成中間由第一個(gè)CR+LF分割
請(qǐng)求報(bào)文首部：請(qǐng)求行+請(qǐng)求首部字段+通用首部字段+實(shí)體首部字段
響應(yīng)報(bào)文首部：狀態(tài)行+響應(yīng)首部字段+通用首部字段+實(shí)體首部字段
- 狀態(tài)碼
>200 OK
204 No Content
206 Partial Content 斷點(diǎn)續(xù)傳
301/302 Moved Permanently 重定向
301 Permanently Moved 代表永久性轉(zhuǎn)移
302 Temporarily Moved 代表暫時(shí)性轉(zhuǎn)移
303 See Other 和302有點(diǎn)像证薇，但是指定用GET獲取新資源
304 Not Modified
403
404 Not Found 未找到資源
500 Internal Server Error 服務(wù)器錯(cuò)誤
[r](http://kb.cnblogs.com/page/168720/)
- 優(yōu)化
- 緩存控制（必考）
- 網(wǎng)絡(luò)協(xié)議，TCP三次握手匆篓，四次揮手
- XSS
>跨站腳本攻擊浑度，表單數(shù)據(jù)加入html代碼或者script將document.cookie通過(guò)img發(fā)送給其他服務(wù)器，植入攻擊代碼
- SQL注入攻擊
>url上面q=ss之類的鸦概，代碼的sql就發(fā)生改變
- CSRF跨域請(qǐng)求偽造（必考）
通過(guò)已經(jīng)驗(yàn)證的信息箩张，然后發(fā)送腳本
避免方式1.ssl 2.每次都加上驗(yàn)證
>CSRF
- 跨域
>六種(document.domain+iframe,動(dòng)態(tài)創(chuàng)建script,利用iframe和location.hash,window.name,使用HTML5 postMessage,利用flash)
- 學(xué)習(xí)經(jīng)歷和方法
- 性能優(yōu)化
>文件合并，壓縮
減少dom操作
css動(dòng)畫(huà)代替js動(dòng)畫(huà)
web worker
局部變量代替全局變量
閉包記得回收
- 單元測(cè)試 [Mocha和chai.js](http://www.reibang.com/p/975de13d0406)
>測(cè)試驅(qū)動(dòng)開(kāi)發(fā)
- 瀏覽器有幾種內(nèi)核
>Trident IE
gecko Mozilla
WebKit chrome safari
Presto Opera
自動(dòng)化工具 gulp webpack
模板引擎如何實(shí)現(xiàn)變量替換
代碼考察窗市，
排序算法實(shí)現(xiàn)
數(shù)組去重伏钠。 兩種，一種利用哈希谨设，比較快熟掂，另外一種先排序后去重，這種節(jié)約空間扎拣。
條件注釋
數(shù)據(jù)庫(kù)知識(shí)
MongoDB, PostgreSQL,Redis,HBase
兼容性問(wèn)題
polyfill,shim
autoprefixer postCSS
reset
## 開(kāi)放題
- 用戶說(shuō)網(wǎng)頁(yè)有問(wèn)題赴肚，你怎么判斷
> 不知道怎么回答
- 怎么知道自己的網(wǎng)頁(yè)出問(wèn)題了
> 我的思路，一個(gè)是爬蟲(chóng)定時(shí)二蓝，第二個(gè)是頁(yè)面加載后發(fā)送ajax來(lái)統(tǒng)計(jì)誉券。
這位同學(xué)總結(jié)了前端[面試題目](http://www.reibang.com/p/fe62c7e33ba8)
前端的一些資源，https://github.com/JacksonTian/fks
趴蓿客網(wǎng)上經(jīng)典問(wèn)題
http://www.nowcoder.com/ta/front-end-interview/review?page=1
折磨人的面試題 http://www.tuicool.com/articles/feiayiq
requirejs的源碼
書(shū)籍推薦
《javascript高級(jí)程序設(shè)計(jì)》
《es6》
《Node》