一.cdn以及原理
先理解
使用A记录和CNAME进行域名解析的区别
A记录就是把一个域名解析到一个IP地址（Address，特制数字IP地址），而CNAME记录就是把域名解析到另外一个域名。其功能是差不多，CNAME将几个主机名指向一个别名，其实跟指向IP地址是一样的，因为这个别名也要做一个A记录的。但是使用CNAME记录可以很方便地变更IP地址。如果一台服务器有100个网站，他们都做了别名，该台服务器变更IP时，只需要变更别名的A记录就可以了。
基本情况就是存在多个缓存服务器。 有的东西会被cdn缓存 有的不会 图片和静态js html文件会 接口有的会 有的不会 要看配置
如果需要获取用户ip地址的话 cdn会出问题
二.ajax、fetch区别
ajax本质使用的是 XmlRequestHttp
fetch 则直接是 浏览器的对象
其特点
1、fetch()返回的promise将不会拒绝http的错误状态，即使响应是一个HTTP 404或者500
2、在默认情况下 fetch不会接受或者发送cookies
3.fetch无法监听数据传输的过程进度
开发人员需要注意的地方
1、所有的IE浏览器都不会支持 fetch()方法
2、服务器端返回 状态码 400 500的时候 不会reject
but why use fetch
因为原生的 XmlRequestHttp 不注重分离原则 首先直观的看
使用 XHR 发送一个 JSON 请求一般是这样：
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 后，顿时看起来好一点·
//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写法 因为他们需要的是 promise 风格 而fetch 就是 基于 promise 设计的：
try {
let response = await fetch(url);
let data = await response.json();
console.log(data);
} catch(e) {
console.log("Oops, error", e);
}
// 注：这段代码如果想运行，外面需要包一个 async function
优雅而完美 不是吗？
是说axios还是基于AJAX的，能防止CRSF攻击，但是不支持jsonp格式，提供 了并发请求的接口 fetch更注重底层，脱离了XHR对象，能直接通过mode指定请求是否跨域，只对网络请求报错，不支持abort、不支持超时控制，就算使用了settimeout和Promise.reject还是不能阻止请求过程继续在后台运行，造成流量的浪费，也没有progress
三.装饰者模式以及用途
首先装饰者是一个函数，对于被装饰者而言，会成为一个参数传入，对其进行一些统一的设置 可以 修改属性、添加log、设置只读、做行为限定等
动态将职责附加到对象上，若要扩展功能，装饰者提供了比继承更具弹性的代替方案。
了解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;
}
}
总之就是做功能扩展。
来看es6装饰者的写法
@before( function )
class Dog{}
function before (beforeFunc){
return function(originFunc){
return function(){
before.apply(this, arguments);
return originFunc.apply(this, arguments);
}
}
}
优雅而美 不是吗
四.IE和普通的浏览器W3C的事件模型区别
姚冉告诉我 ie 不支持 冒泡行为 二者 写法不一样 addAttachment 和 addEventListner
首先IE浏览器本身只支持Bubbling不支持Capturing；
最后一点，在别的浏览器中，它显然是无法工作的。
1、 当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。
2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。
3.而且在事件处理的function内部this关键字也无法使用，因为this永远都只想window object这个全局对象。要想得到event对象必须通过window.event方式。
兼容写法 傻而笨
window.onload=function(){…}
obj.onmouseover=function(e){…}
obj.onclick=function(){…}
5.绝对居中 写出几种 可以让弹框 绝对居中的方式
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;
}
缺点很明显 如果 wrap 设置 fixed 或 absolute 就会被破坏 居中
因为
vertical-align only applies to inline/table-cell elements.
not in position: absolute; display: table-cell; equals display: block; position: fixed;
定宽定高写法
.element {
width: 300px;
height: 300px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background: red;
}
他会自动分配给 margin 因为 margin auto的原因
需要明白一件事情 空间 margin border padding content
因为空间已经被撑开 而margin 的auto 让 其余空间给了 margin
我个人最爱的居中
<!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>
六.生命周期
这个答得还不错，不说了
七.promise机制和怎么实现
主要是 为了 指定 异步操作后的 执行顺序
存在三种状态 pending fullfilled reject
有几种方法 race all try resolve reject then catch等等 。。。
然后使用的是 宏任务 还不知道微任务怎么去写。
8.redux单数据流程和异步操作
主要说说异步操作，thunk 和 saga， 尤其是saga的控制流。
9.contentType有几种类型
我说了四种。
1.text/xml 2.application/json 3.application/x-www-form-urlencoded 4.multipart/form-data
10.npm包和所有的打包工具
DllPlugin 缓存 第三方包 增加 webpack 编译速度。。
Happypack——将 loader 由单进程转为多进程
Gzip 做法 是 抽离重复的代码 替换为 短的key
减少体积 ignorePlugin commonChunck babel-plugin-import
11.key
直接说vue的 patch函数。。
12 前端优化手段
1.预解析DNS
2.CDN
3.按需加载
4.gip 压缩
13.开发 webpack plugin的固定格式
class FileListPlugin { constructor(options) {} apply(compiler) { // 在 compiler 的 emit hook 中注册一个方法，当 webpack 执行到该阶段时会调用这个方法compiler.hooks.emit.tap('FileListPlugin', (compilation) => { // 给生成的 markdown 文件创建一个简单标题 var filelist = 'In this build:\n\n'// 遍历所有编译后的资源，每一个文件添加一行说明 for (var filename in compilation.assets) { filelist += ('- '+ filename +'\n') }// 将列表作为一个新的文件资源插入到 webpack 构建结果中 compilation.assets['filelist.md'] = { source: function() { return filelist }, size: function(){ return filelist.length }, } }) } }
