1冗尤、數(shù)據(jù)雙向綁定
http://jixianqianduan.com/frontend-javascript/2015/11/29/js-data-two-ways-binding.html
實現(xiàn)方式：
（1）發(fā)布-訂閱模式（backbone.js)
http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day
（2）臟值檢查（angular 1.0）
最簡單就是使用 setInterval() 定時輪詢檢測數(shù)據(jù)變動蹈集，Google 是在指定的事件發(fā)生時進行檢測价脾，如DOM事件充石，XHR響應(yīng)事件颈畸，Timer事件
（3）數(shù)據(jù)劫持（+發(fā)布-訂閱模式）（Vue.js）
Object.defineProperty() 對數(shù)據(jù)對象做get和set的監(jiān)聽
https://segmentfault.com/a/1190000006599500
2咐旧、https的過程？https將什么加密了？
http://blog.csdn.net/wangjun5159/article/details/51510594
- 客戶端發(fā)送請求到服務(wù)器
- 服務(wù)器返回證書和公開密鑰絮识，公開密鑰作為證書的一部分而存在
- 客戶端驗證證書和公開密鑰的有效性绿聘，如果有效，則生成共享密鑰并使用公開密鑰加密發(fā)送到服務(wù)器
- 服務(wù)器使用私有密鑰解密數(shù)據(jù)次舌，并使用收到的共享密鑰加密數(shù)據(jù)熄攘，發(fā)送到客戶端
- 客戶端使用共享密鑰解密數(shù)據(jù)
- SSL加密建立
https 加密了共享密鑰和數(shù)據(jù)
對性能的影響：
- 加密解密消耗了計算機的CPU資源
- 連接過程中客戶端與服務(wù)器的通信次數(shù)比三次握手多，建立連接的時間花銷較大
3彼念、實現(xiàn) remove 刪除 object 的屬性
// 如果鍵名不是字符串挪圾，則用一個變量保存鍵名
Object.prototype.remove = function (attr) {
delete this[attr];
}
4、實現(xiàn) map
Array.prototype.myMap = function (callback, context) {
context = context || window;
var newArray = [];
if (typeof callback === 'function') {
for (i = 0; i < this.length; i++) {
var val = callback.call(context, this[i], i, this);
newArray[i] = val;
}
}
return newArray;
}
5逐沙、實現(xiàn) compose
// 自左到右
var flow = function (...funcs) {
var length = funcs.length;
var index = length;
while (index--) {
if (typeopf funcs[index] !== 'function') {
throw new TypeError('Expected a function');
}
}
return function (...args) {
var index = 0;
var result = length ? funcs[index].apply(this, args) : args[0];
while (++index < length) {
result = func[index].call(this, result);
}
return result;
}
}
// 自右到左
var flowRight = function (...funcs) {
return flow(funcs.reverse());
}
6哲思、瀏覽器緩存
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache">
7、移動端點擊事件的300ms延時
http://blog.csdn.net/qq_34986769/article/details/62046696
- 禁用縮放
- 更改視口寬度
- 使用指針事件（IE10+）：touch-action(非標準css)
- FastClick
點擊穿透（使用touchstart代替click時會出現(xiàn)的情況）：
假如頁面上有兩個元素A和B吩案。B元素在A元素之上棚赔。我們在B元素的touchstart事件上注冊了一個回調(diào)函數(shù)，該回調(diào)函數(shù)的作用是隱藏B元素务热。我們發(fā)現(xiàn)忆嗜，當我們點擊B元素己儒，B元素被隱藏了崎岂，隨后，A元素觸發(fā)了click事件闪湾。
這是因為在移動端瀏覽器冲甘，事件執(zhí)行的順序是touchstart > touchend > click。而click事件有300ms的延遲途样，當touchstart事件把B元素隱藏之后江醇，隔了300ms，瀏覽器觸發(fā)了click事件何暇，但是此時B元素不見了陶夜，所以該事件被派發(fā)到了A元素身上。如果A元素是一個鏈接裆站，那此時頁面就會意外地跳轉(zhuǎn)条辟。
8、HTTP狀態(tài)碼
http://www.runoob.com/http/http-status-codes.html
- 1** ：信息宏胯，服務(wù)器收到請求羽嫡，需要請求者繼續(xù)執(zhí)行操作
- 2** ：成功，操作被成功接收并處理
- 3** ：重定向肩袍，需要進一步的操作以完成請求
- 4** ：客戶端錯誤杭棵，請求包含語法錯誤或無法完成請求
- 5** ：服務(wù)器錯誤，服務(wù)器在處理請求的過程中發(fā)生了錯誤
200：請求成功
301：永久移動氛赐。請求的資源已被永久的移動到新URI魂爪，返回信息會包括新的URI先舷，瀏覽器會自動定向到新URI。今后任何新的請求都應(yīng)使用新的URI代替
302：臨時移動滓侍。與301類似密浑。但資源只是臨時被移動〈志客戶端應(yīng)繼續(xù)使用原有URI
304：未修改尔破。所請求的資源未修改，服務(wù)器返回此狀態(tài)碼時浇衬，不會返回任何資源懒构。客戶端通常會緩存訪問過的資源耘擂，通過提供一個頭信息指出客戶端希望只返回在指定日期之后修改的資源
307：臨時重定向胆剧。與302類似。使用GET請求重定向
400：客戶端請求的語法錯誤醉冤，服務(wù)器無法理解
401：請求要求用戶的身份認證
403：服務(wù)器理解請求客戶端的請求秩霍，但是拒絕執(zhí)行此請求
404：服務(wù)器無法根據(jù)客戶端的請求找到資源（網(wǎng)頁）。通過此代碼蚁阳，網(wǎng)站設(shè)計人員可設(shè)置"您所請求的資源無法找到"的個性頁面
410：客戶端請求的資源已經(jīng)不存在铃绒。410不同于404，如果資源以前有現(xiàn)在被永久刪除了可使用410代碼螺捐，網(wǎng)站設(shè)計人員可通過301代碼指定資源的新位置
500：服務(wù)器內(nèi)部錯誤颠悬，無法完成請求
501：服務(wù)器不支持請求的功能，無法完成請求
9定血、原型鏈
對象的原型指向原型對象赔癌，原型對象的原型又指向其父類的原型...
obj.__proto__ = Object.prototype
10、babel配置, webpack配置澜沟，gulp配置
http://www.ruanyifeng.com/blog/2016/01/babel.html
webpack配置：
var path = require('path')
var webpack = require('webpack')
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
devtool: '#eval-source-map' // 包含dataURL
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map' // 只在末尾加上sourcemap文件的地址灾票，需要請求
module.exports.plugins = [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
})
]
}
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
}
// 導(dǎo)入模塊
var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var rename = require('gulp-rename'); // 改名
// 配置任務(wù)
gulp.task('uglify:css', function() {
gulp.src('css/*.css')
.pipe(cssmin()) // 壓縮
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/css')) // 輸出
});
gulp.task('uglify:js', function() {
gulp.src('js/*.js')
.pipe(uglify()) // 壓縮
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('build/js')) // 輸出
});
gulp.task('uglify:html', function() {
gulp.src('*.html')
.pipe(htmlmin({ // 壓縮
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('build')) // 輸出
});
gulp.watch('*.*', ['uglify:css', 'uglify:js', 'uglify:html']);
gulp.task('default', ['uglify:css', 'uglify:js', 'uglify:html']);
11、同源策略茫虽，跨域方式刊苍，手動實現(xiàn)jsonp
同源策略：
對于絕對的URIs，源就是{協(xié)議席噩，主機班缰，端口}定義的。只有這些值完全一樣才認為兩個資源是同源的悼枢。
同源策略可以保護用戶信息埠忘，防止用戶在A網(wǎng)站的信息被B網(wǎng)站獲取到
cookie只有同源的網(wǎng)站可以訪問到，可設(shè)置document.domain設(shè)置同源獲取cookie，localstorage和IndexDB不可以通過這種方式獲取
cookie 可設(shè)置所屬域名為一級域名莹妒，其二級域名名船，三級域名等就可以直接獲取
iframe和window.open可以通過片段識別符（即url的#后面的內(nèi)容）修改和獲取
window.postMessage可以跨文檔通信
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
跨域方法：
jsonp
-
document.domain設(shè)置同源
使用條件：
- 有其他頁面 window 對象的引用。
- 二級域名相同旨怠。
- 協(xié)議相同渠驼。
- 端口相同。
-
window.name
window.postMessage(HTML5)
websocket(里面發(fā)出的請求頭包含了Origin鉴腻，指定了請求源)
-
CORS（允許任何類型的轉(zhuǎn)換）
IE10+
簡單請求和非簡單請求迷扇，跟正常的ajax調(diào)用差不多，關(guān)鍵是服務(wù)器實現(xiàn)CORS接口
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
手動實現(xiàn)jsonp：
function addScriptTag (src) {
var scriptTag = document.createElement('script');
scriptTag.setAttribute('type', 'text/javascript');
scriptTag.src = src;
document.body.appendChild(scriptTag);
}
window.onload = function () {
addScriptTag('http://example.com/ip?callback=foo');
}
function foo(data) {
console.log('Your public Ip address is: ' + data.ip);
}
服務(wù)器返回的信息
foo({
'ip': '8.8.8.8'
});
12爽哎、手動實現(xiàn)ajax
http://www.jb51.net/article/104873.htm
function ajax ({url, type = 'GET', data = {}, success, error}) {
type = type.toUpperCase();
data = formatData(data);
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
var status = xhr.status;
if (status >= 200 && status < 300) {
var response = '';
var type = xhr.getResponseHeader('Content-type');
if (type.indexOf('xml') !== -1 && xhr.responseXML) {
response = xhr.responseXML;
} else if (type == 'application/json') {
response = JSON.parse(xhr.responseText);
} else {
response = xhr.responseText;
}
success && success(response);
} else {
error && error(response);
}
}
}
if (type === 'GET') {
xhr.open(type, url + '?' + data, true);
xhr.send();
} else {
xhr.open(type, url, true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=UTF-8');
xhr.send(data);
}
function formatData (data) {
var arr = [];
for (var name in data) {
arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
// 加上一個隨機數(shù)蜓席，防止緩存
arr.push('v=' + random());
return arr.join('&');
}
function random () {
return Math.floor(Math.random() * 10000 + 500);
}
}
13、漸進增強和優(yōu)雅降級
漸進增強：一開始就針對低版本瀏覽器進行構(gòu)建頁面课锌，完成基本的功能厨内，然后再針對高級瀏覽器進行效果、交互渺贤、追加功能達到更好的體驗
優(yōu)雅降級：一開始就構(gòu)建站點的完整功能雏胃，然后針對瀏覽器測試和修復(fù)。比如一開始使用css3的特性構(gòu)建了一個應(yīng)用志鞍，然后逐步針對各大瀏覽器進行hack使其能在低版本瀏覽器上正常瀏覽瞭亮。
http://www.reibang.com/p/d313f1108862
14、HTTP長連接述雾，keep-alive
Connection: keep-alive
keep-alive: 20ms
保持TCP的長連接不斷開街州，20ms 后斷開連接兼丰，TCP的keep-alive是檢查當前TCP連接是否還活著玻孟，兩者概念不一樣，使用Content-Length（靜態(tài)）或Transfer-Encoding（動態(tài)鳍征，chunk模式）判斷消息內(nèi)容的大小
http://www.cnblogs.com/skynet/archive/2010/12/11/1903347.html
15黍翎、從輸入url到看到頁面發(fā)生了什么
http://www.cnblogs.com/xianyulaodi/p/6547807.html
- 輸入地址
- 瀏覽器查找域名的IP地址
- 瀏覽器向web服務(wù)器發(fā)送一個HTTP請求
- 服務(wù)器的永久重定向響應(yīng)
- 瀏覽器跟蹤重定向地址
- 服務(wù)器處理請求
- 服務(wù)器返回一個HTTP響應(yīng)
- 瀏覽器顯示HTML
- 瀏覽器發(fā)送請求獲取嵌在HTML中的資源（如圖片，音頻艳丛，視頻匣掸，JS，CSS等）
16氮双、前端性能優(yōu)化
https://www.cnblogs.com/liulilin/p/7245125.html
17碰酝、深拷貝
http://blog.csdn.net/sysuzhyupeng/article/details/70340598
18、前端安全
http://blog.csdn.net/fengyinchao/article/details/52303118
http://www.cnblogs.com/vajoy/p/4176908.html
19戴差、類數(shù)組
具有l(wèi)ength屬性送爸，其他屬性為非負整數(shù)，不具備數(shù)組所具有的方法
類數(shù)組：arguments，以及DOM操作返回的結(jié)果
20袭厂、for...in..
- 循環(huán)計數(shù)器是字符串墨吓，不是數(shù)字
- 會遍歷原型上的方法和屬性，不適合遍歷數(shù)組
21纹磺、forEach
forEach 無法使用return終止
22帖烘、HTML5 新特性
http://blog.csdn.net/gane_cheng/article/details/52819118
23、IE盒子和W3C盒子
IE5.5以下：width = content + padding + border
W3C: width = content
避免IE盒子的方法：頭部加上 <!DOCTYPE html>
24橄杨、實現(xiàn)斐波那契序列
// 遞歸秘症，時間復(fù)雜度O(2^n)，空間復(fù)雜度O(n)
function fib (n) {
if (n == 1 || n == 2) {
return 1;
}
return fib(n - 1) + fib(n - 2);
}
// 非遞歸式矫，時間復(fù)雜度O(n)历极，空間復(fù)雜度O(n)
function fib (n) {
var ret = [1, 1];
if (n == 1 || n == 2) {
return 1;
}
for (var i = 2; i < n; i++) {
ret[i] = ret[i - 1] + ret[i - 2];
}
return ret[n - 1];
}
// 非遞歸，時間復(fù)雜度O(n)衷佃，空間復(fù)雜度O(1)
function fib (n) {
var res, a, b;
a = b = 1;
if (n == 1 || n == 2) {
return 1;
}
for (var i = 3; i <= n; i++) {
res = a + b;
a = b;
b = res;
}
return res;
}
25趟卸、盒子模型的折疊問題
http://blog.csdn.net/zerlinda_c/article/details/50054639
margin塌陷：http://www.cnblogs.com/hugejinfan/p/5901320.html
水平方向不會坍塌
26、塊級元素和行級元素
http://www.cnblogs.com/asqq/archive/2012/10/04/3194956.html
27氏义、Less特性
http://blog.csdn.net/u014695532/article/details/50957356
28锄列、git 命令
http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html
30、面經(jīng)回答
http://blog.csdn.net/bossmango/article/details/77369805
https://segmentfault.com/a/1190000008644536
31惯悠、行內(nèi)元素設(shè)置行高
display或者float
32邻邮、requireJS 解決循環(huán)依賴
http://www.cnblogs.com/terrylin/p/3347073.html
33、實現(xiàn)垂直居中
http://blog.csdn.net/wolinxuebin/article/details/7615098
- 行內(nèi)文字：line-height
- display：table-cell克婶；vertical-align：middle筒严；
- position和margin（負數(shù)）
- position和stretch
- 設(shè)置相同padding-top和padding-bottom
- display：flex；aling-items：center情萤；
34鸭蛙、偽類和偽元素
http://www.cnblogs.com/ihardcoder/p/5294927.html
35、AMD 和 CMD的區(qū)別
http://blog.csdn.net/jackwen110200/article/details/52105493
36筋岛、event loop
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
37娶视、DOCTYPE
<!DOCTYPE> 聲明不是 HTML 標簽；它是指示 web 瀏覽器關(guān)于頁面使用哪個 HTML 版本進行編寫的指令
38睁宰、強緩存和協(xié)商緩存
http://caibaojian.com/browser-cache.html
39肪获、https與http
https比http長3倍的時間
優(yōu)化：
- CDN加速，拉進節(jié)點
- 服務(wù)器硬件加速柒傻，釋放CPU
- 遠程解密孝赫，使用CPU負載較低的服務(wù)器
