最新面试题整理

js原生

map和foreach的区别 **

2.2.1、forEach()返回值是undefined，不可以链式调用。
　　2.2.2、map()返回一个新数组，原数组不会改变。
　　2.2.3、没有办法终止或者跳出forEach()循环，除非抛出异常，所以想执行一个数组是否满足什么条件，返回布尔值，可以用一般的for循环实现，或者用Array.every()或者Array.some();
　　2.2.4、$.each()方法规定为每个匹配元素规定运行的函数，可以返回 false 可用于及早停止循环。
https://www.jianshu.com/p/83aa9a2a4055

5、解释下JavaScript中this是如何工作的。 ****

this永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向window 。
1.如果是call，apply,with，指定的this是谁，就是谁。
2.普通的函数调用，函数被谁调用，this就是谁。

异步线程，轮询机制，宏任务微任务 ****

https://blog.csdn.net/u013362969/article/details/89714436
https://www.cnblogs.com/ckAng/p/11133643.html
https://zhuanlan.zhihu.com/p/33058983

阻止冒泡 **

w3c方法是ev.stopPropagation()
IE中方法是window.event.cancelBubble = true

阻止默认事件 **

ev.preventDefault()
return false;//写在函数的最后一句

02.怎样判断array 和 object ***

https://www.jianshu.com/p/898d860497ed

-01 数据类型的隐式转换 **

https://www.jianshu.com/p/7cb41d109b7e

01 Div里面有一个div *****

1、有几种方法可以水平，垂直居中 https://www.cnblogs.com/a-cat/p/9019184.html
回答完后会继续问
2、当里面div的框高不固定时，怎么水平垂直居中 https://www.jb51.net/css/56268.html

说一说盒子模型 ****

布局的时候使用的，div ，div的 margin padding border
普通盒模型、怪异盒模型的区别
ie 和其他浏览器对盒模型的 margin 和 padding的解析有区别

11 算法，一个数组【000000000111111111111】这样，你怎么找出第一个1，最底层的js原生写法，列如第一个数与第二个数作比较，当第二个大于第一个元素的时候就找出了第一个1，那还有没有更效率的写法

使用循环或递归来实现

12 对象的key能使数字吗？ *

可以是数字,object对应的key没有限制,只是如果是数字,取值的时候就不能用英文句号(.),只能用[]的方式取值。

1. async await 和promise和generator有什么区别 ****

这几种都可以解决异步操作的地狱回调问题
async await 和promise对象的区别：
async和promise都是异步方法，区别是async生成的结果是promise对象，async是promise的终结版。
await只能在async中使用，await是阻塞的意思，就是暂停，你一起调用2个接口，第一个执行完，不输出结果，要等最第二个接口执行完，才返回这两个的结果。
是属于将异步操作转化为同步操作的做法

async await和generator：
async是Generator的语法糖，也就是说，async是对generator的实现，而generator代码更复杂。
generator 除了能解决回调地域问题，还可以作为迭代器使用。generator 语法一般用于redux-saga
redux-saga 一般在umi或dva框架中使用

2.手写promise ***

new Promise(
function (resolve, reject) {
// 一段耗时的异步操作
resolve(‘成功’) // 数据处理完成
// reject(‘失败’) // 数据处理出错
}
).then(
(res) => {console.log(res)}, // 成功
(err) => {console.log(err)} // 失败
)
/******************/
const promiseClick =()=>{
console.log(‘点击方法被调用’)
let p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log(‘执行完成Promise’);
resolve(‘要返回的数据可以任何数据例如接口返回数据’);
}, 2000);
});
return p
}
promiseClick().then(()=>{
//成功的回调
},()=>{
//失败的回调
});

new Promise(function(resolve,reject){
//返回resolve还是reject
}).then(function(){
//接收的成功回调
},function(){
//接收失败回调
})

3.promise.all作用 ***

Promise.all(iterable) 方法返回一个 Promise 实例，此实例在 iterable 参数内所有的 promise 都“完成（resolved）”或
参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），此实例回调失败（reject），
失败的原因是第一个失败 promise 的结果。
它通常在启动多个异步任务并发运行并为其结果创建承诺之后使用，以便人们可以等待所有任务完成。
通俗的说法：解决promise的同步调用问题，可以将多个异步操作转为同步操作，缺点：只要有一个promise返回错误，那么后面的promise都不会再执行

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});
Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});

promise.allsettled

4.什么是工厂模式，有什么优缺点 *

工厂模式是一种设计模式，目的是为了创建对象，它通常在类或类的静态方法中实现，
有以下目的：当创建相似对象是执行重复操作
当编译时，不知道具体类型的情况下，为工厂客户提供一个创建对象的接口

//使用工厂方式创建一个对象
			function createPerson(name,sex){
				//1.原料
				var obj = new Object();
				//2.加工  -- 对属性进行赋值
				obj.name = name;
				obj.sex = sex;
				//3.方法
				obj.showName = function(){
					console.log("人物名称："+this.name);
				}
				obj.showSex = function(){
					console.log("人物的性别："+this.sex);
				}
				//4.加工结束,--输出返回
				return obj;	
			}
			//工厂模式的使用
			var person1 = createPerson("如花","男");
			//调用工厂里的方法
			person1.showName();
			person1.showSex();
			var person2 = createPerson("凤姐","女");
			//调用工厂里的方法
			person2.showName();
			person2.showSex();
			/*
			工厂模式：
			优点： 写好了工厂方法后，只要原料足够，我们可以无限次的创建新的对象
			缺点： 1.没有使用 new ,2.每个对象都有自己的函数，浪费资源

接触过哪些设计模式：工厂模式、单例模式（数据库连接）、观察者模式（双向绑定原理）、订阅模式、mvc模式、mvvm模式

5.图片/文件夹上传到后台是什么类型？ *

图片上传后台有三种格式：

file格式 (创建formData来完成file上传)

 var formData = new FormData();
                    $.each($(‘#imgfile‘)[0].files, function (i, file) {
                        formData.set(‘idcard‘, file);   //idcard  字段 根据自己后端接口定
                    });
                    //processData: false, contentType: false,多用来处理异步上传二进制文件。
                    that.$indicator.open();
                    $.ajax({
                        url: ‘http://wjtest.jecinfo.cn:9090/indentity/check‘,
                        type: ‘POST‘,
                        data: formData,                    // 上传formdata封装的数据
                       ....
                        }

base64格式

<input type="file" id="imgfile">
var base64Pic = ‘‘
document.getElementById(‘imgfile‘).onchange = function(){
      var fileReader = new FileReader();
      fileReader.readAsDataURL(this.files[0]);
      fileReader.onload = function(){
          base64Pic = fileReader.result;
          console.log(base64Pic )  //base64   可以直接放在src上 预览
      }

3.Blob流格式

6.原生基础数据类型和引用数据类型的区别 *

1.栈(stack)和堆（heap）stack为自动分配的内存空间，它由系统自动释放；而heap则是动态分配的内存，大小也不一定会自动释放。
2.基本的数据类型:String, Number, boolean, Null, Undefined,Symbol(ES6新增)　　*****
　　特点：存储的是该对象的实际数据，（存放在栈中）
3.对象数据类型(也称为引用数据类型):Array,Object,Function
　　特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里，（存放在堆内存中的对象，每个空间大小不一样，要根据情况进行特定的配置）
注:在JS中除了基本数据类型以外的都是对象，数据是对象，函数是对象，正则表达式是对象

7.深浅拷贝： ****

1、区别：浅拷贝/深度拷贝
判断：拷贝是否产生了新的数据还是拷贝的是数据的引用
知识点：对象数据存放的是对象在栈内存的引用，直接复制的是对象的引用

2、常用的拷贝技术
for循环完成深拷贝
二、深拷贝
1、js数组的slice方法
var arr1 = [“前端”,“安卓”,“苹果”];
var arr2 = arr1.slice(0);
arr2[0] = “后端”;
console.log(“原始值：” + arr1 );//前端,安卓,苹果
console.log(“新值：” + arr2);//后端,安卓,苹果
理解：通过JS的slice方法，改变拷贝出来的数组的某项值后，对原来数组没有任何影响。
缺点：适用于对不包含引用对象的一维数组的深拷贝
2、js数组的concat方法
var arr1 = [“前端”,“安卓”,“苹果”];
var arr2 = arr1.concat();
arr2[0] = “后端”;
console.log(“原始值：” + arr1 );//前端,安卓,苹果
console.log(“新值：” + arr2);//后端,安卓,苹果
理解：concat方法，原数组和新数组修改某值后，不会改变。
缺点：适用于对不包含引用对象的一维数组的深拷贝

1). arr.concat(): 数组深拷贝
　　2). arr.slice(): 数组深拷贝
　　3).Object.assign()对象深拷贝
　　4). JSON.parse(JSON.stringify(arr/obj)): 数组或对象深拷贝, 但不能处理函数数据
　　5). 浅拷贝包含函数数据的对象/数组
　　6). 深拷贝包含函数数据的对象/数组
对于多层对象和数组:可以使用递归调用、JSON.parse(JSON.stringify(arr/obj))、jquery的extend方法来实现深拷贝

https://blog.csdn.net/xuexizhe88/article/details/80990529
https://www.cnblogs.com/echolun/p/7889848.html

8.弹性布局。浮动布局 table布局 *****

弹性布局：使用百分比、rem 、flex 自适应布局
浮动布局：使用 float clear
table布局：一般用于后台显示
自适应布局和响应式布局：一般需要用到media媒体查询完成，需要根据屏幕宽度的不同，写多个css样式文件

9.flex 的水平居中和垂直居中 ****

水平：justify-content:center; 垂直：align-content：center;
flex:1 的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】 ***
flex属性是 flex-grow、flex-shrink、flex-basis三个属性的缩写。
推荐使用此简写属性，而不是单独写这三个属性。
flex-grow：定义项目的的放大比例；
默认为0，即即使存在剩余空间，也不会放大；
所有项目的flex-grow为1：等分剩余空间（自动放大占位）；
flex-grow为n的项目，占据的空间（放大的比例）是flex-grow为1的n倍。
flex-shrink：定义项目的缩小比例；
默认为1，即如果空间不足，该项目将缩小；
所有项目的flex-shrink为1：当空间不足时，缩小的比例相同；
flex-shrink为0：空间不足时，该项目不会缩小；
flex-shrink为n的项目，空间不足时缩小的比例是flex-shrink为1的n倍。
flex-basis：定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，
默认值为auto，即项目原本大小；
设置后项目将占据固定空间。
所以flex属性的默认值为：0 1 auto （不放大会缩小）
flex为none：0 0 auto （不放大也不缩小）
flex为auto：1 1 auto （放大且缩小）

10.闭包 *****

闭包定义：闭包就是能够读取其他函数内部变量的函数。
闭包可以就解决全局作用域污染的问题
闭包使用场景，闭包的应用场景：
1.setTimeout
　　原生的setTimeout传递的第一个函数不能带参数，通过闭包可以实现传参效果。

 function f1(a) {
     function f2() {
         console.log(a);
     }
     return f2;
 }
 var fun = f1(1);
 setTimeout(fun,1000);//一秒之后打印出1

2.回调
　　定义行为，然后把它关联到某个用户事件上（点击或者按键）。代码通常会作为一个回调（事件触发时调用的函数）绑定到事件。

   <a href="#" id="size-12">12</a>
     <script type="text/javascript">
         function changeSize(size){
             return function(){
                 document.body.style.fontSize = size + 'px';
             };
         }
         var size12 = changeSize(12);
         document.getElementById('size-12').onclick = size12;
     </script>

3.函数防抖 ***
　　在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
　　实现的关键就在于setTimeOut这个函数，由于还需要一个变量来保存计时，考虑维护全局纯净，可以借助闭包来实现。

 // fn [function] 需要防抖的函数
 // delay [number] 毫秒，防抖期限值
 
 function debounce(fn,delay){
     let timer = null
     //借助闭包
     return function() {
         if(timer){
             clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
             timer = setTimeOut(fn,delay) 
         }else{
             timer = setTimeOut(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
         }
     }
 }

4.封装私有变量
　　如下面代码：用js创建一个计数器

 function f1() {
     var sum = 0;
     var obj = {
        inc:function () {
            sum++;
            return sum;
        }
 };
     return obj;
 }
 let result = f1();
 console.log(result.inc());//1
 console.log(result.inc());//2
 console.log(result.inc());//3

所有js数据类型都拥有valueOf和toString这两个方法，null除外valueOf()方法：返回指定对象的原始值。
toString()方法：返回对象的字符串表示。在数值运算中，优先调用了valueOf，字符串运算中，优先调用toString. sum+’ '是一个字符串类型的数据

 function f1() {
     var sum = 0;
     var obj = {
        inc:function () {
            sum++;
            return sum;
        }
 };
     return obj;
 }
 let result = f1();
 console.log(result.inc());//1
 console.log(result.inc());//2
 console.log(result.inc());//3

闭包产生问题：容易产生内存泄漏（原因：闭包使用时，扩展了他变量的原有作用域，使变量常驻内存）
内部函数被外部函数包含时，内部函数会将外部函数的局部活动对象添加到自己的作用域链中。

 outerFun(outerArgument){
     //被包含的内部函数可以访问外部函数的变量
     return function(){  
         return outerArgument+1
     } 
 }

而由于内部匿名函数的作用域链在引用外部包含函数的活动对象，即使outFun执行完毕了，它的活动对象还是不会被销毁！
即，outerFun的执行环境作用域链都销毁了，它的活动对象还在内存中留着呢。
并且根据垃圾回收机制，被另一个作用域引用的变量不会被回收。
所以，除非内部的匿名函数解除对活动变量的引用（解除对匿名函数的引用），才可以释放内存。

 // 创建函数 还未调用
 var creatFun = outerFun(7)
 // 调用函数
 var result = creatFun(8)
 // 解除对匿名函数的引用
 creatFun = null

所以，闭包会造成内存泄漏，就是因为它把外部的包含它的函数的活动对象也包含在自己的作用域链中了，会比一般的函数占用更多内存。
怎样解决：在退出函数之前，将不使用的局部变量全部删除。可以使变量赋值为null;

 window.onload = function(){
         var el = document.getElementById("id");
         el.onclick = function(){
             alert(el.id);
         }
     }
     解决方法为
     window.onload = function(){
         var el = document.getElementById("id");
         var id = el.id;                                      //解除循环引用
         el.onclick = function(){
             alert(id); 
         }
         el = null;                                          // 将闭包引用的外部函数中活动对象清除
     }

循环使用闭包会有什么问题:在循环中使用闭包容易产生每个 i都有自己的独立作用于，导致输出结果都是循环的最后的值这种问题

 //循环里面包含闭包函数
 function box(){
     var arr = [];
     for(var i=0;i<5;i++){
         arr[i] = function(){
             return i;                            //由于这个闭包的关系，他是循环完毕之后才返回，最终结果是4++是5
         }                                        //这个匿名函数里面根本没有i这个变量，所以匿名函数会从父级函数中去找i，
     }                                            //当找到这个i的时候，for循环已经循环完毕了，所以最终会返回5
     return arr;
 }
 //alert(box());                                    //执行5次匿名函数本身
 //alert(box()[1]);　　　　　　　　　　　　　　　　　　　//执行第2个匿名函数本身
 //alert(box().length);                            //最终返回的是一个数组，数组的长度为5
 alert(box()[0]());

闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见的方式，就是在一个函数内部创建另一个函数，通过另一个函数访问这个函数的局部变量。
在for循环里面的匿名函数执行 return i 语句的时候，由于匿名函数里面没有i这个变量，所以这个i他要从父级函数中寻找i，
而父级函数中的i在for循环中，当找到这个i的时候，是for循环完毕的i，也就是5，所以这个box得到的是一个数组[5,5,5,5,5]。
解决方法：

 function box(){
     var arr = [];
     for(var i=0;i<5;i++){
         arr[i] = (function(num){                    //自我执行，并传参(将匿名函数形成一个表达式)(传递一个参数)
             return num;                            //这里的num写什么都可以                    
         })(i);                                    //这时候这个括号里面的i和上面arr[i]的值是一样的都是取自for循环里面的i                            
     }                                            
     return arr;
 }
 //alert(box());                                
 //alert(box()[1]);
 //alert(box().length);                            
 alert(box()[0]);

11.什么是内存泄漏，都什么情况容易产生内存泄漏 **

内存泄漏:即为变量内容持续占用内存空间，不释放，垃圾回收机制也没有将该内存回收的情况
死循环
定时器没有清除
绑定的事件没有解除
递归调用没有结束条件

主要存在内存泄漏的问题点
BOM DOM对象泄漏
scipt中存在对BOM DOM对象的引用
javaScript对象泄漏
闭包函数导致的泄漏
3、主要关注的代码点
DOM中的addEventLisner 函数及派生的事件监听，比如Jquery 中的on 函数， vue 组件实例的 $on 函数，第三方库中的初始化函数
BOM对象的事件监听，比如webSocket的监听事件
避免不必要的函数引用
如果是要render函数，避免在html标签中DOM BOM事件

12.原型，原型链，继承的方式 *****

原型：既构造函数的prototype.每个构造函数都有一个prototype属性指向生成这个函数的原型对象，简称原型；
prototype 可以对构造函数进行扩展，既添加构造函数的属性和方法
原型链：每个对象都有一个__proto__属性，指向生成改对象的原型对象，这样，我们就可以找到是哪个对象生成了改对象，
原型链一般用于继承
原型链的核心就是依赖对象的_proto_的指向，当自身不存在的属性时，就一层层的扒出创建对象的构造函数，直至到Object时，就没有_proto_指向了。
因为_proto_实质找的是prototype，所以我们只要找这个链条上的构造函数的prototype。其中Object.prototype是没有_proto_属性的，它==null。

 function Person(name){
             this.name = name;
      }
      var p = new Person();
      //p ---> Person.prototype --->Object.prototype---->null

原型继承

//原型继承的基本案例
function Person(name, age) {
	this.name = name;
	this.age = age;
}
//1.直接替换原型对象 
var parent = {
	sayHello : function() {
		console.log("方式1：替换原型对象");
	}
}
Person.prototype = parent;
var p = new Person("张三", 50);
p.sayHello();
//2.混入式原型继承
console.log(".............混入式原型继承..............");
function Student(name, age) {
	this.name = name;
	this.age = age;
}
var parent2 = {
	sayHello : function() {
		console.log("方式2：原型继承之混入式加载成员");
	}
}
for ( var k in parent2) {
	Student.prototype[k] = parent2[k];
}
var p = new Student("张三", 50);
p.sayHello();

继承的方式：

13. this指向，箭头函数的this指向 ****

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象

15. 使用node.js 创建本地服务器 *

16. Git常用命令 *****

git init 初始化 *****
git clone 克隆代码库 *****
git config 配置
git add 增加文件到暂存区 *****
git commit 提交暂存区到仓库 *****
git branch 名称新建分支 *****
git checkout 切换分支 *****
git merge 合并分支 *****
git branch -d 删除分支 *****
git tag 打tag 包 *****
git status 查看状态 *****
git log 查看日志 *****
git diff 查看暂存区和工作区差异
git fetch 下载远程仓库的变动 *****
git pull 取回远程仓库变化，并与本地分支合并 *****
git push 上传本地指定分支到远程仓库 *****
解决冲突：

17. 跨域的解决方案 *****

因为前端有同源保护政策，所以，不同源或者说不同的域名和ip之间不能进行访问。

1.jsonp jsonp有什么问题?只能是get方式不能是post方式 jsonp原理：script标签的src属性可以跨域
2.proxy代理只能是打包前使用，打包后需要后台配置跨域 nginx反向代理
3.后台头部设置 Access-Control-Allow-Origin ，cors
4.其他方式：
a. document.domain + iframe (只有在主域相同的时候才能使用该方法)
b. location.hash + iframe
c. window.name + iframe
d. postMessage（HTML5中的XMLHttpRequest Level 2中的API）
e. web socket
web sockets是一种浏览器的API，它的目标是在一个单独的持久连接上提供全双工、双向通信。

18. for循环定时器打印产生问题，怎么解决 ** js异步轮询机制

for(var i = 1; i <= 5; i++){
setTimeout(function () {
console.log(i);
}, 1000);
}
打印结果为5个6；
原因是：js是单线程，有任务队列，任务队列分为两种，同步任务和异步任务。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。
所以循环是同步任务先执行，当执行完之后，当setTimeout的异步操作准备好后，通知主线程，主线程将其从异步队列中取出来，再执行，所以当循环完成时，i的值位6，setTimeout再执行，打印5个6

所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
一旦"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。
只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。
"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。
事件循环（event loop）
主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

19. http协议详解 http请求方式有 http响应状态码 *****

1.http 特点：
1.支持客户/服务器模式。
2.简单快速：。
3.灵活：
4.无连接：
5.无状态：
2. http请求由三部分组成，分别是：请求行、消息报头、请求正文
请求方法（所有方法全为大写）有多种，各个方法的解释如下：
GET 请求获取Request-URI所标识的资源
POST 在Request-URI所标识的资源后附加新的数据
HEAD 请求获取由Request-URI所标识的资源的响应消息报头
PUT 请求服务器存储一个资源，并用Request-URI作为其标识
DELETE 请求服务器删除Request-URI所标识的资源
TRACE 请求服务器回送收到的请求信息，主要用于测试或诊断
CONNECT 保留将来使用
OPTIONS 请求查询服务器的性能，或者查询与资源相关的选项和需求

3.在接收和解释请求消息后，服务器返回一个HTTP响应消息。
HTTP响应也是由三个部分组成，分别是：状态行、消息报头、响应正文
3xx：重定向–要完成请求必须进行更进一步的操作
4xx：客户端错误–请求有语法错误或请求无法实现
5xx：服务器端错误–服务器未能实现合法的请求

301 永久移动，请求的资源被永久的移动到新url，返回信息会包括新的url。浏览器会自动定向到新url
302 临时移动，资源只是临时被移动，客户端赢继续使用原有url
304 未修改，所请求的资源未修改，服务器返回此状态码是=时，不会返回任何资源，客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

400 Bad Request //客户端请求有语法错误，不能被服务器所理解，解决方法：修改请求的参数及语法
401 Unauthorized //请求未经授权，这个状态代码必须和WWW-Authenticate报头域一起使用，
解决方式：即没有启用任何认证方式，只需要在IIS Manager里面启用需要的认证方式即可。
即被Authorization Rule阻挡，则需要分析这个authorization rule是否是否必须来决定对他的更改。
403 Forbidden //服务器收到请求，但是拒绝提供服务
　　1、你的IP被列入黑名单。
　　2、你在一定时间内过多地访问此网站(一般是用采集程序)，被防火墙拒绝访问了。
　　3、网站域名解析到了空间，但空间未绑定此域名。
　　4、你的网页脚本文件在当前目录下没有执行权限。
　　6、以http方式访问需要ssl连接的网址。
　　7、浏览器不支持SSL 128时访问SSL 128的连接。
　　8、在身份验证的过程中输入了错误的密码。
解决方式:　1、重建dns缓存
　　对于一些常规的403 forbidden错误，马海祥建议大家首先要尝试的就是重建dns缓存，在运行中输入cmd，然后输入ipconfig /flushdns即可。如果不行的话，就需要在hosts文件里把主页解析一下了。
　　2、修改文件夹安全属性
　　3、关于apache导致的403 forbidden错误，需设置Apache的配置文件。
　　4、关于HawkHost空间出现403 Forbidden错误需设置htaccess文件。
404 Not Found //请求资源不存在，eg：输入了错误的URL 解决办法：输入正确的url地址
405 请求方式不对 ,比如原本需要post方式请求的，你写了get方式请求

20. 一个页面从发送http请求到渲染页面的全过程（http事务流程）***

域名解析 --> 发起TCP的3次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求，浏览器得到html代码
–> 浏览器解析html代码，并请求html代码中的资源（如js、css、图片等） --> 浏览器对页面进行渲染呈现给用户
https://www.cnblogs.com/xiaohuochai/p/9193083.html

21.tcp和udp的区别 *

TCP与UDP区别总结：
1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据之前不需要建立连接
2、TCP提供可靠的服务。也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;UDP尽最大努力交付，即不保证可靠交付

3、TCP面向字节流，实际上是TCP把数据看成一连串无结构的字节流;UDP是面向报文的

UDP没有拥塞控制，因此网络出现拥塞不会使源主机的发送速率降低（对实时应用很有用，如IP电话，实时视频会议等）

4、每一条TCP连接只能是点到点的;UDP支持一对一，一对多，多对一和多对多的交互通信

5、TCP首部开销20字节;UDP的首部开销小，只有8个字节6、TCP的逻辑通信信道是全双工的可靠信道，UDP则是不可靠信道

##22.什么是长连接 *
在HTTP/1.0中默认使用短连接。也就是说，客户端和服务器每进行一次HTTP操作，就建立一次连接，任务结束就中断连接。
当客户端浏览器访问的某个HTML或其他类型的Web页中包含有其他的Web资源（如JavaScript文件、图像文件、CSS文件等），
每遇到这样一个Web资源，浏览器就会重新建立一个HTTP会话。
而从HTTP/1.1起，默认使用长连接，用以保持连接特性。使用长连接的HTTP协议，会在响应头加入这行代码：
Connection:keep-alive
在使用长连接的情况下，当一个网页打开完成后，客户端和服务器之间用于传输HTTP数据的TCP连接不会关闭，客户端再次访问这个服务器时
，会继续使用这一条已经建立的连接。Keep-Alive不会永久保持连接，它有一个保持时间，可以在不同的服务器软件（如Apache）中设定这个
时间。实现长连接需要客户端和服务端都支持长连接。

23.ajax是同步还是异步，ajax的流程 *****

ajax是异步的，
流程：
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求 .(sned)
(5)获取异步调用返回的数据.(onreadystatechange)
(6)使用JavaScript和DOM实现局部刷新.

24.h5新特性 ***

1.语义化标签

http://www.niftyadmin.cn/n/1496790.html

data (phantonjs onclick)exploring cleaning