前端测试总结

1.简述CSS盒子模型
边框盒子（IE盒子）
border-box
实际的宽度=width + margin
内容盒子（w3c标准盒子）
content-box
实际的宽度= width + margin + padding + border
2、css选择器的优先级
1）!importent
在修改第三方库样式是使用
2) 1000 在style标签样式中，行内样式
100 id选择器
10 类选择器，伪类选择器，属性选择器
1 元素选择器，伪元素选择器
3）特性值相同时，采用就近原则
3、简述css3布局机制
浮动布局
float:left/right;
定位布局
position:static/relative/absolute/fixed/sticky
伸缩盒布局【手机端】
display:flex;
栅格布局
第三方库使用的布局
boostrap 12栅格
element-ui 24栅格
4、如何实现盒子的居中？
1）定位
父元素：相对定位
子元素：绝对定位
left:50%;
top:50%;
margin-left:-子元素宽度的一半
margin-top:-子元素高度的一半
2) 定位
父元素：相对定位
子元素：绝对定位
top:0,
left:0,
right:0,
bottom:0,
margin:auto;
3) 伸缩盒布局
父元素 ：伸缩盒
display:flex;
justify-content:center;
align-items:center;
5、简述http协议
http协议是超文本传输协议，是客户端和服务器端进行交互的时候需要遵守的网络协议。
http协议中有请求报文和响应报文，请求报文中有请求头和请求体，响应报文中有响应头和响应体。
如果在浏览器中是以get方式向服务器发起的http请求，则请求参数以查询字符串形式携带在url后。
如果在浏览器中是以post方式向服务器发起的http请求，则请求参数携带在请求体中。
6、简述一下从在浏览器打开一个网页到网页加载完毕中间发生了什么事情？
输入url -> 浏览器会将输入的url封装为请求报文 -> 浏览器将请求报文发送给服务器 -> 服务器解析请求报文，拿到path及参数等信息 -> 会根据解析出来的信息查询数据 -> 将查询到的数据封装为响应报文 -> 将响应报文发送给浏览器 -> 浏览器解析响应报文
7、js对象创建的方式
1) 对象字面量
var obj = {}
2) Object构造函数
var obj = new Object()
3) 工厂函数
function factory(){
return {}
}
var obj = factory()
4) 自定义构造函数模式
function Person(){}
var obj = new Person()
5) 自定义构造函数模式与原型结合
function Person(){}
Person.prototype.sayName = function(){}
var obj = new Person()
8、ajax是什么？你在开发中如何使用它？
异步的javascript和xml，用于进行异步的请求
一般用于前后台分离开发的数据交互
1) 原生xhr
1. 创建实例
var xhr = new XmlHttpRequest()
2. 设置请求行
xhr.open(method, url)
3. 设置请求头
4. 设置请求体，发送请求
xhr.send(data)
5. 监听响应
xhr.onreadystatechange = function(){
}
2) jquery的ajax
$.ajax({})
$.get()
$.post()
9、什么是深拷贝和浅拷贝，如何实现？
深拷贝就是复制内部内容
浅拷贝就是复制内存地址
var obj = {};
var o = obj; 浅拷贝
如果是针对DOM的复制，深拷贝就是复制本身及内部内容，浅拷贝是复制节点不复制内部内容。
dom.cloneNode(false) 浅复制
dom.cloneNode(true) 深复制
10、js监听对象属性的变化？
Object.defineProperty(obj,’name’,{
set:function(param){
console.log(‘属性发生更改，在这里监听。。。’);
}
})
obj.name = ‘zhangsan’; 就可以执行set方法进行监听属性的变化
11.模拟Array.prototype.forEach编写Array.prototype.myForEach
Array.prototype.myForEach = function(handle,obj){
for(var i=0;i<this.length;i++){
handle.call(obj,this[i],i,this);
}
}
12、如何理解js的原型
每一个构造函数都有一个原型对象，通过构造函数的prototype属性访问原型对象，也可以通过实例的__proto__属性来访问。
实例所能调用的属性和方法可以是实例本身的，也可以是实例的原型对象的。
通过原型可以实现原型链继承，原型链继承需要将子元素的原型对象指向父元素的实例。
通过Object.getPrototypeOf()来获取原型对象，通过Object.setPrototypeOf()来设置原型对象。
13.当我们调用一个方法如何获取该方法的反馈结果？分别在哪种情况下使用。
可以使用return一个值来返回结果(同步的时候使用)，或者使用回调函数来将结果抛出（异步的时候使用）。
function test(a,b){
return a+b;
}
function test(a,b,fun){
fun(a+b);
}
14.说明RegExp.prototype.test()与String.prototype.search()的异同点
都是用于检测字符串中是否有满足正则表达式的内容
test()是正则表达式对象调用的，支持全局检索，返回true或者false
search()是字符串调用的，不支持全局检索,返回索引或者-1。
15.在开发过程中，我们经常会使用到cdn资源，请说明你在什么情况下使用了cdn资源，使用cdn好处在哪里？
在ajax需要给post后台传递表单格式数据的时候，使用了qs。是从bootcdn中获取的qs的资源。
引用第三方资源的时候使用cdn,例如导入jQuery、iconfont、animate.css等资源的，无需下载，只需要通过script或link方式导入cdn的资源即可。好处在于其加载速度高，获取方便。
16.简述事件流
发生在嵌套的html结构中，为每层html都绑定事件
事件冒泡：事件由具体的点接受，从内往外传递到不具体的点接受。
事件捕获：事件由不具体的点接受，从外往内到具体的点接受。
DOM事件流：先事件捕获，先由不具体的点接受，从外往内到具体的点接受，然后再事件冒泡，从内往外传递到不具体的点接受。
17.什么是事件代理？什么情况下会使用事件代理？
不将事件处理函数直接绑定到目标dom元素上，而是绑定在其父元素上。其好处在于只需要在父元素绑定就可以为所有的子元素代理事件，当子元素动态添加或者删除的时候也不会影响。
在子元素动态添加或者删除的时候，使用事件代理。
18.在阿里云使用过程中，如何进行文件的远程传输？如何进行远程登录？
scp命令用于远程传输，也可以使用fillzilla、cyberDuck(小黄鸭)等第三方工具
ssh命令用于远程登录 ssh 用户名@ip地址