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