一.cdn以及原理
先理解
使用A記錄和CNAME進(jìn)行域名解析的區(qū)別
A記錄就是把一個(gè)域名解析到一個(gè)IP地址（Address，特制數(shù)字IP地址）譬正，而CNAME記錄就是把域名解析到另外一個(gè)域名宫补。其功能是差不多檬姥，CNAME將幾個(gè)主機(jī)名指向一個(gè)別名，其實(shí)跟指向IP地址是一樣的粉怕，因?yàn)檫@個(gè)別名也要做一個(gè)A記錄的健民。但是使用CNAME記錄可以很方便地變更IP地址。如果一臺(tái)服務(wù)器有100個(gè)網(wǎng)站斋荞，他們都做了別名荞雏，該臺(tái)服務(wù)器變更IP時(shí)，只需要變更別名的A記錄就可以了平酿。
基本情況就是存在多個(gè)緩存服務(wù)器。 有的東西會(huì)被cdn緩存 有的不會(huì) 圖片和靜態(tài)js html文件會(huì) 接口有的會(huì) 有的不會(huì) 要看配置
如果需要獲取用戶(hù)ip地址的話 cdn會(huì)出問(wèn)題
二.ajax悦陋、fetch區(qū)別
ajax本質(zhì)使用的是 XmlRequestHttp
fetch 則直接是 瀏覽器的對(duì)象
其特點(diǎn)
1蜈彼、fetch()返回的promise將不會(huì)拒絕http的錯(cuò)誤狀態(tài)，即使響應(yīng)是一個(gè)HTTP 404或者500
2俺驶、在默認(rèn)情況下 fetch不會(huì)接受或者發(fā)送cookies
3.fetch無(wú)法監(jiān)聽(tīng)數(shù)據(jù)傳輸?shù)倪^(guò)程進(jìn)度
開(kāi)發(fā)人員需要注意的地方
1幸逆、所有的IE瀏覽器都不會(huì)支持 fetch()方法
2、服務(wù)器端返回 狀態(tài)碼 400 500的時(shí)候 不會(huì)reject
but why use fetch
因?yàn)樵?XmlRequestHttp 不注重分離原則 首先直觀的看
使用 XHR 發(fā)送一個(gè) JSON 請(qǐng)求一般是這樣：
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();
使用 Fetch 后暮现，頓時(shí)看起來(lái)好一點(diǎn)·
//code from http://caibaojian.com/fetch-ajax.html
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});
其次 xhr 不支持 generator 和 async await寫(xiě)法 因?yàn)樗麄冃枰氖?promise 風(fēng)格 而fetch 就是 基于 promise 設(shè)計(jì)的：
try {
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
// 注：這段代碼如果想運(yùn)行还绘，外面需要包一個(gè) async function
優(yōu)雅而完美 不是嗎？
是說(shuō)axios還是基于AJAX的栖袋，能防止CRSF攻擊拍顷，但是不支持jsonp格式，提供 了并發(fā)請(qǐng)求的接口 fetch更注重底層塘幅，脫離了XHR對(duì)象昔案，能直接通過(guò)mode指定請(qǐng)求是否跨域，只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò)电媳，不支持abort踏揣、不支持超時(shí)控制，就算使用了settimeout和Promise.reject還是不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行匾乓，造成流量的浪費(fèi)捞稿，也沒(méi)有progress
三.裝飾者模式以及用途
首先裝飾者是一個(gè)函數(shù)，對(duì)于被裝飾者而言拼缝，會(huì)成為一個(gè)參數(shù)傳入娱局，對(duì)其進(jìn)行一些統(tǒng)一的設(shè)置 可以 修改屬性、添加log珍促、設(shè)置只讀铃辖、做行為限定等
動(dòng)態(tài)將職責(zé)附加到對(duì)象上，若要擴(kuò)展功能猪叙，裝飾者提供了比繼承更具彈性的代替方案娇斩。
了解aop模式
Function.prototype.before = function(beforeFunc){
var that = this;
return function(){
beforeFunc.apply(this, arguments);
return that.apply(this, arguments);
}
}
Function.prototype.after = function(afterFunc){
var that = this;
return function(){
var ret = that.apply(this, arguments);
afterFunc.apply(this, arguments);
return ret;
}
}
總之就是做功能擴(kuò)展仁卷。
來(lái)看es6裝飾者的寫(xiě)法
@before( function )
class Dog{}
function before (beforeFunc){
return function(originFunc){
return function(){
before.apply(this, arguments);
return originFunc.apply(this, arguments);
}
}
}
優(yōu)雅而美 不是嗎
四.IE和普通的瀏覽器W3C的事件模型區(qū)別
姚冉告訴我 ie 不支持 冒泡行為 二者 寫(xiě)法不一樣 addAttachment 和 addEventListner
首先IE瀏覽器本身只支持Bubbling不支持Capturing；
最后一點(diǎn)犬第，在別的瀏覽器中锦积，它顯然是無(wú)法工作的。
1歉嗓、 當(dāng)我們需要阻止瀏覽器某DOM元素的默認(rèn)行為的時(shí)候在W3C下調(diào)用e.preventDefault()丰介，而在IE下則通過(guò)window.event.returnValue＝false來(lái)實(shí)現(xiàn)。
2鉴分、當(dāng)我們要阻止事件冒泡的時(shí)候哮幢，在W3C標(biāo)準(zhǔn)里調(diào)用e.stopPropagation()，而在IE下通過(guò)設(shè)置window.event.cancelBubble=true來(lái)實(shí)現(xiàn)志珍。
3.而且在事件處理的function內(nèi)部this關(guān)鍵字也無(wú)法使用橙垢，因?yàn)閠his永遠(yuǎn)都只想window object這個(gè)全局對(duì)象。要想得到event對(duì)象必須通過(guò)window.event方式伦糯。
兼容寫(xiě)法 傻而笨
window.onload=function(){…}
obj.onmouseover=function(e){…}
obj.onclick=function(){…}
5.絕對(duì)居中 寫(xiě)出幾種 可以讓彈框 絕對(duì)居中的方式
position absolute
flex
table-cell
.wrap{
height:500px;
width: 1000px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome柜某、Firefox*/
vertical-align:middle;/*IE8以上及Chrome、Firefox*/
text-align: center;
}
.container{
display: inline-block;
margin: auto;
background: red;
min-width: 300px;
min-height: 50px;
padding: 20px;
}
.wrap{
height:500px;
width: 1000px;
background:#ccc;
display:table-cell;/*IE8以上及Chrome敛纲、Firefox*/
vertical-align:middle;/*IE8以上及Chrome喂击、Firefox*/
text-align: center;
}
.container{
display: inline-block;
margin: auto;
background: red;
min-width: 300px;
min-height: 50px;
padding: 20px;
}
缺點(diǎn)很明顯 如果 wrap 設(shè)置 fixed 或 absolute 就會(huì)被破壞 居中
因?yàn)?/p>
vertical-align only applies to inline/table-cell elements.
not in position: absolute; display: table-cell; equals display: block; position: fixed;
定寬定高寫(xiě)法
.element {
width: 300px;
height: 300px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
他會(huì)自動(dòng)分配給 margin 因?yàn)? margin auto的原因
需要明白一件事情 空間 margin border padding content
因?yàn)榭臻g已經(jīng)被撐開(kāi) 而margin 的auto 讓 其余空間給了 margin
我個(gè)人最?lèi)?ài)的居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*方法一*/
.outer {
display: table;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
}
.middle {
display: table-cell;
vertical-align: middle;
text-align: center;
}
.inner {
display: inline-block;
background: red;
padding: 30px 50px;
}
</style>
</head>
<body>
<div class="outer">
<div class="middle">
<div class="inner">
fdjsfkld
</div>
</div>
</div>
</body>
</html>
六.生命周期
這個(gè)答得還不錯(cuò)，不說(shuō)了
七.promise機(jī)制和怎么實(shí)現(xiàn)
主要是 為了 指定 異步操作后的 執(zhí)行順序
存在三種狀態(tài) pending fullfilled reject
有幾種方法 race all try resolve reject then catch等等 淤翔。翰绊。。
然后使用的是 宏任務(wù) 還不知道微任務(wù)怎么去寫(xiě)办铡。
8.redux單數(shù)據(jù)流程和異步操作
主要說(shuō)說(shuō)異步操作辞做，thunk 和 saga， 尤其是saga的控制流寡具。
9.contentType有幾種類(lèi)型
我說(shuō)了四種秤茅。
1.text/xml 2.application/json 3.application/x-www-form-urlencoded 4.multipart/form-data
10.npm包和所有的打包工具
DllPlugin 緩存 第三方包 增加 webpack 編譯速度。童叠。
Happypack——將 loader 由單進(jìn)程轉(zhuǎn)為多進(jìn)程
Gzip 做法 是 抽離重復(fù)的代碼 替換為 短的key
減少體積 ignorePlugin commonChunck babel-plugin-import
11.key
直接說(shuō)vue的 patch函數(shù)框喳。。
12 前端優(yōu)化手段
1.預(yù)解析DNS
2.CDN
3.按需加載
4.gip 壓縮
13.開(kāi)發(fā) webpack plugin的固定格式
class FileListPlugin { constructor(options) {} apply(compiler) { // 在 compiler 的 emit hook 中注冊(cè)一個(gè)方法厦坛，當(dāng) webpack 執(zhí)行到該階段時(shí)會(huì)調(diào)用這個(gè)方法compiler.hooks.emit.tap('FileListPlugin', (compilation) => { // 給生成的 markdown 文件創(chuàng)建一個(gè)簡(jiǎn)單標(biāo)題 var filelist = 'In this build:\n\n'// 遍歷所有編譯后的資源五垮，每一個(gè)文件添加一行說(shuō)明 for (var filename in compilation.assets) { filelist += ('- '+ filename +'\n') }// 將列表作為一個(gè)新的文件資源插入到 webpack 構(gòu)建結(jié)果中 compilation.assets['filelist.md'] = { source: function() { return filelist }, size: function(){ return filelist.length }, } }) } }
