一.HTML,CSS (相容性)

1. animation

animation 屬性是一個簡寫屬性，用於設定六個動畫屬性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction

註釋：請始終規定 animation-duration 屬性，否則時長為 0，就不會播放動畫了。

語法

animation: name duration timing-function delay iteration-count direction;

2.transition (animate.css)

transition 屬性是一個簡寫屬性，用於設定四個過渡屬性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

註釋：請始終設定 transition-duration 屬性，否則時長為 0，就不會產生過渡效果。

語法

transition: property duration timing-function delay;

2. 彈性盒佈局(相容性),

display:box;
display:box-flex;
display:flex;

響應式佈局,百分比佈局,rem佈局

具體參考：https://www.cnblogs.com/lijiapeng/p/9923934.html
3. 字型圖示

二.JS (相容性)
1.ES5(map,filter,Object.create())
2.面向物件，建構函式，原型(prototype,__proto__)，原型鏈，繼承(call,apply)，閉包, bind
3.ES6(let,const,class,promise,箭頭函式,陣列去重,模組化)

(q.js實現了promise的思想， 用同步來表現非同步流程， 解決了回撥地獄的問題.promie 中 三種狀態， pending, reslove,reject, pending->reslove, pending-reject)

(1)commonJs規範 （cmd的規範）
nodejs
webpack

module.exports= { } exports.**方法或者屬性
require("");

(2)amd 規範(require.js) define

(3) export default {} export {name,getName,age}

import * from "" import {name,getName,age} from ""

4.cookie,sessionStorage,localStorage,websql,indexeddb--https://segmentfault.com/a/1190000005927232

5. 基於xhr的Ajax&Fetch(非標準)&Jsonp&axios

三.程式碼管理工具
1.svn
2.git
http://www.jianshu.com/p/bfec042349ca

四.css前處理器
1.sass （gulp-sass, sass-loader, 考拉）

$name:10px;

ul{
li{
$name:20px
a{
width:$name+20
}
}
}

@function px2rem(){
@return
}
2.less
@name:10px;
ul{
li{
@name:20px
a{
width:@name+20
}
}
}
3.stylus
五.前端構建工具,前端工程化工具
1.gulp
2.webpack
3.grunt
4.ant
六.後端開發
1.php-laravel-mysql
2.nodejs-express-mongodb <% %>
3.Java-structs-oracal,mysql,db2 ,jsp
4. asp, .net
3. 前後端開發方式->(1)前後端分離(2)後端巢狀模板 ssr

xml&json

七.框架
1.前web時代
jquery(js庫),zepto（tap）, touch.js手勢庫,swiper,echarts3（圖表，資料視覺化）

2.後web時代
angular1.6 版本->mvc,mvvm

(1)angular 中ng-if 和 ng-show/hide 區別
(2)內建的filter 有哪些?如何自定義filter
angular.module("app",[])
.filter()
.directives
.service
.factory("kerwinservice",function(){
return {

}
})

angualr.module("app",[])
.controller("main",function($scope,kerwinservice){

})
angualr.module("app",[])
.controller("child",function($scope,kerwinservice){

})
(3)自定義服務？（服務是單例）
(4)angular 資料繫結採用什麼機制？髒資料檢查機制
$scope.$apply();
通過 $watch 來監聽 dom上繫結的每一個數據的變化，然後$digest 來遍歷迴圈所有的 $watch
佇列，發現與原來不同的值，也就是髒值則進行修改，最後通過$apply ，$apply會
進入 angular context的執行環境，通知瀏覽器拿回控制權，修改相應的dom節點。

$scope.name="kerwin";

$scope.name="xiaoming"

ng-click ,$timeout $interval,$http請求，

(5)在angular 開發中， 兩個平級的兄弟，如何共享資料？

a. factory服務，將資料儲存在服務之內，然後在b中呼叫服務
b. 掛在 $rootScope之上進行共享
c. 也可以用 本地儲存來儲存資料，實現資料共享。
(6)一個angular 應用應當如何分層？
css
js
controllers
models （比較複雜的model 放在models裡面，然後$scope.info = info）
services
filters
templates

/home home.html home.js
/list list.html list.js
(7)angular 路由庫 （ngRoute, ui-router）

(8)兩個人開發angular 專案時，進行程式碼整合，可能會遇到哪些問題,如何解決？
angular.module('myApp.moduleA', [])
.factory('serviceA', function(){
...
})
angular.module('myApp.moduleB', [])
.factory('serviceA', function(){
...
})
angular.module('myApp', ['myApp.moduleA', 'myApp.moduleB'])
會導致兩個 module 下面的 serviceA 發生了覆蓋。

//沒有太好的解決方案，只能約定命名規範
(9)angular 缺點

a.選擇器比較弱，
b.學習成本較高，對前端不友好。但遵守 AngularJS 的約定時，生產力會很
高，對 Java 程式設計師友好
c.因為所有內容都是動態獲取並渲染生成的，搜尋引擎沒法爬取 {{name}}
(10)使用ng-repeat出錯，Error:[ngRepeat:dues](迭代陣列，陣列兩個值相同)
item in items track by $index

(11)使用第三外掛或者原生js 修改angular 中model的值，介面並不會變化，感覺上繫結失效了。為什麼？怎麼辦？
要手動髒檢。
$scope.$apply()或者將
操作的程式碼放在$scope.$apply(function(){//
操作的程式碼...})

(12) 在依賴注入服務時，需要注意的?
防止被壓縮 改寫成["$scope","kerwinservice",function($scope,kerwinservie){

}]

angular4
=>

1. Typescript (ES6 的超集) 和 typescript 解析器 ==>js 標準程式碼
2. angular ,router
3. angular-cli腳手架

react->flux,redux

(1)生命週期
(2)效能優化在哪個周期函式？ shouldComponentUpdate
(3)虛擬dom？為啥能提高效能?
虛擬dom相當於在js和真實dom 中間加了一個快取，利用diff 演算法避免了沒有必要的dom操作。
a. 用js物件表示dom 結構，然後用這個虛擬的物件樹，真正建立一個dom樹，插入到文件中。
b. 當狀態變更，重新造一顆新的物件樹，將新的物件樹，與舊的物件樹進行對比，記錄兩棵樹的差異。
c. 將差異的地方應用到真正的dom 樹，檢視就更新。

(4)diff演算法？
a. 把樹按照層級進行分解， 只比較同級元素
b. 給列表加上key 值，唯一不重複
c. 只匹配相同元件名字的component
d. setState() 將其標記為dirty 並不是馬上執行，等一個事件迴圈（生命週期）結束，react 會檢查所有dirty的元件並重新繪製。

e.選擇性子樹渲染，shouldComponentUpdate
(5)flux 思想和redux 思想

vue->vuex

(1)vue slot 是什麼？
假如父元件需要在子元件內放一些dom，那麼這些dom是顯示還是不顯示，在哪顯示，就需要用slot分發負責了。

(2)vue.use(外掛)

(3)vue 與react 對比
a. 都有虛擬dom 和元件化思想，有配套的路由與負責全域性狀態的管理的庫。
b. 效能方面vue 是優於react的
c. 開發架構
react:ES6+Webpack+React+React-router+Redux
vue：ES6+Webpack+vue+vue-router+單檔案元件+vuex
d. 如果你想同時適用於web端和原生app開發，請選擇用react（react native）,
如果你的應用小而快(模板開發)，用vue
八.地圖
1.百度地圖
2.高德地圖

九.混合開發：
1.phonegap
2.h5+

十.微信開發：
1.微信webapp開發
2.微信js-sdk開發
3.微信後臺開發
4.微信小程式開發
wx:for, bindtap , setData,wx.request

十一.常見UI框架
1.jquery:
PC: bootstrap(12 柵格 ),jquery UI,easy UI
移動端:mui,sui mobile

<ul class="row">
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
<li class="col-sm-3"></li>
</ul>
2.React:
PC: react-boostrap
移動端：
(1)amazeUI-react,
(2)yo元件-http://ued.qunar.com/hy2/yo/component-Scroller.html
(3)material UI

3.餓了麼UED團隊推出的vue 前端框架：
(1)PC框架：
http://element.eleme.io/#/
https://github.com/ElemeFE/element
(2)移動端框架：
http://mint-ui.github.io/#!/zh-cn
https://github.com/ElemeFE/mint-ui

十二.擴充套件
1.懶載入的原理：
目的：主要作為伺服器前端的優化，延遲請求數。
原理:先載入一部分資料，當觸發某個條件時，利用非同步載入剩餘的資料。
2. 輪播原理, 放大鏡原理

2. 移動端開發平時在什麼瀏覽器測試？
chrome,safari,微信x5,,UC

3.移動端如何除錯？
(1)chrome 模擬手機除錯
(2)android真機+chrome inspect
(3)iphone真機 +safari

4. 優化頁面，加快頁面載入速度
(1)優化圖片資源格式和大小
(2)開啟網路壓縮
(3)使用cdn儲存靜態資源
(4)壓縮js css
(5)瀏覽器快取(cache)

5. xss(跨站指令碼攻擊),避免？
(1)前端轉義-正則表示式
(2)後端轉義處理（轉成html實體 再存入到資料庫）
(3)cookie加上httponly 屬性，保護cookie

6. websocket,
node服務端(ws,socket.io)

var ws= new Websocket()
ws.onopen
ws.onmessage
ws.send()
ws.onerror
ws.onclose