HTML和css篇
1、说下你常用的几种布局方式
1.浮动布局
float+margin的方式
2.百分比布局
宽度百分比自适应
3.双飞翼布局(改进版)
.wrap{
padding: 0 200px;
position: relative;
}
.left{
width:200px;
height:400px;
background:red;
position: absolute;
top:0;
left:0;
}
.right{
width:200px;
height:400px;
background:green;
position: absolute;
top:0;
right:0;
}
.center{
width: 100%;
height:400px;
background:pink;
}
5.Flex布局
6.grid网格布局
2、实现水平居中的几中方式
1.绝对定位(父元素宽度未知)
.parent{
position: relative;
}
.child{
position: absolute;
left:50%;
}
2.使用text-align(父元素宽度未知)
.parent{
text-align: center;
}
.child{
display: inline-block;
width: 100px;
height: 100px;
background-color: aqua;
}
3.使用 margin:0 auto;(固定宽度)
4.使用transform(水平垂直居中)
.parent{
width: 300px;
height: 200px;
ackground: pink;
position: relative;
}
.child{
width: 100px;
height: 50px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
}
3、animate和translate有没有用过,介绍一下常见的属性
animate属性:
animation-name:绑定到选择器keyframes名称
animation-duration 规定完成动画的时间,以秒或毫秒记
animation-iteration-count 动画播放的次数
transform属性:
translate(x,y) 2d平移
translate3d(x,y,z) 3d转换
scale(x,y) 2d缩放
rotate(deg) 2d旋转
rotate3d(deg) 3d旋转
skew(x-angle,y-angle) x轴和y轴的2d倾斜转换
transition属性(允许css属性在一定的时间内平滑过渡)
property:css属性,比如width或者color
duration:持续时间
delay:延迟
4、CSS实现宽度自适应100%,宽高16:9的比例的矩形
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,html{
margin:0;
padding:0;
}
.b169 {
width: 100%;
height: 0;
padding-bottom: 56.25%; //实现的关键
position: relative;
background:red;
}
.b169>.innerb169 {
width: 100%;
height: 100%;
background-color: gainsboro;
position: absolute;
}
</style>
</head>
<body>
<div class="b169">
<div class="innerb169">your hstml</div>
</div>
</body>
</html>
5、如何实现左边两栏一定比例,左栏高度随右栏高度自适应
javscript篇
1、变量提升
2、说一下对闭包的理解,什么场景下会用到闭包
闭包:
闭包是在一个函数的主体内定义的另一个函数,一般有两种情况,一是函数作为返回值,二是函数作为参数传递,闭包的重要特性是即使在外部函数返回后,内部函数仍然可以访问外部函数的变量,因为外部函数的执行上下文不会被销毁。所以使用闭包会增加内存开销,在不需要使用的时候要即使清除,避免内存泄漏。
场景:
保护函数内的变量安全:如迭代器,生成器
在内存中维持变量:如缓存数据,柯里化
将函数关联到对象的实例方法
封装相关的功能集
3、说一下你对原型和原型链的了解,有几种方式可以实现继承,用原型实现继承有什么缺点,怎么解决?
原型和原型链:
在javascript中,每个对象都会在内部引用一个叫做prototype的对象,被称之为原型,而这个原型对象也会引用自己的原型对象,并以此类推,这个链式引用被称之为原型链,原型链的末尾是一个以null为原型的对象。而javascript就是通过原型链机制来实现继承的,当一个对象引用了不属于自身的属性时,就会向上查找,遍历原型链,直到找到该属性,如果没有找到,则说明该属性未定义。
实现继承的方式:
//构造父类
function Class(name){
this.name=name || "张三";
this.sleep=function(){
console.log(this.name+"正在睡觉!");
}
}
//原型方法
Class.prototype.eat=function(food){
console.log(this.name+"正在吃"+food);
}
(1)原型链继承(使用prototype,将父类的实例作为子类的原型)
function Wwp(){
}
Wwp.prototype=new Class();
Wwp.prototype.name="wwp";
var wwp=new Wwp();
console.log("1:"+wwp.name);
wwp.eat("fish");
wwp.sleep();
(2)构造继承
function Wwp(name){ //构造继承
Class.call(this);
this.name=name || "李四";
}
var wwp=new Wwp();
console.log(wwp.name);
//wwp.eat("fish");//不能继承原型属性
wwp.sleep();
(3)实例继承
function Wwp(name){
var clas =new Class();
clas.name=name || "李四";
return clas;
}
var wwp=new Wwp();
console.log(wwp.name);
wwp.eat("fish");
wwp.sleep();
(4)组合继承
优点:可以继承原型属性
function Wwp(name){
Class.apply(this);
this.name=name || "李四";
}
Wwp.prototype=new Class();
Wwp.prototype.constructor=Wwp; //修复构造函数指向
var wwp=new Wwp();
console.log(wwp.name);
wwp.eat("fish");
wwp.sleep();
(5)拷贝继承
function Wwp(){
var clas=new Class();
for(var p in clas){
Wwp.prototype[p]=clas[p];
}
Wwp.prototype.name=name || "李四";
}
var wwp=new Wwp();
console.log(wwp.name);
wwp.eat("fish");
wwp.sleep();
(6)寄生组合继承
function Wwp(name){ //寄生组合继承
Class.call(this);
this.name=name || "李四";
}
(function(){
var Super =function(){};
Super.prototype=Class.prototype;
Wwp.prototype=new Super();
})();
Wwp.prototype.constructor=Wwp; //修复构造函数指向
var wwp=new Wwp();
console.log(Wwp.prototype.constructor);
console.log(wwp.name);
wwp.eat("fish");//不能继承原型属性
wwp.sleep();
原型实现继承的缺点:
1.来自原型对象的引用属性是所有实例对象共享的。
2.创建子类实例时,不能向父类构造函数传参。
解决:
使用 【组合继承】或者 【寄生组合继承】
4、iframe的优缺点有那些?
优点:
1.iframe可以原封不动的把嵌入的网页展现出来.
2.如果有多个网页调用iframe,只需要修改iframe的内容,就可以实现对调用iframe的每个页面内容的更改。
3.增加复用性。
缺点:
1.页面比较多,不容易管理。
2.几个iframe都出现滚动条时,严重影响美观,且占据很大空间。
3.必须设置正确的链接,否则会形成框架套框架的情况。
4.设备兼容性差。
5.阻塞主页面的onloade事件。
5、ajax的原生写法?
function getAjax(url){
var _xhr=null;
if(window.XMLHttpRequest){
_xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
_xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
_xhr.onread=function(){
if(Request.readyState===4 && Request.status===200){
console.log(_xhr.responseText);
}
}
_xhr.open("get",url,true);
_xhr.send();
}
6、为什么会有同源策略?
为了安全起见,如果没有同源策略,那各个网页的cookie或localStorage都可以用document.cookie被随意获取,用户信息就会被随意泄露。
7、前端处理跨域的方式有哪几种方式解决?
1.jsonp,只支持GET请求
2.CORS,w3c标准,全称为“跨域资源共享”
服务器端一般需增加:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400
3.代理,通过服务端发送请求
4.window.postMessage(),可以向其他window对象发送消息,需要注意的得等到所有脚本执行完毕才能发送MessageEvent,否则会让后边的函数超时无法执行。
8、怎么判断两个对象是否相等?
function isObjValueEqual(a,b){
//返回该对象可枚举和不可枚举的属性的名称,该方法返回的是一个数组
var propa=Object.getOwnPropertyNames(a);
var propb=Object.getOwnPropertyNames(b);
//先判断长度是否相等,如果不相等,直接返回false
if(propa.length!=propb.length){
return false;
}else{ //然后遍历每个属性值是否相等,
for(var i=0;i<propa.length;i++){
var propName=propa[i];
console.log("propName"+propName)
console.log(a[propName],b[propName])
if(a[propName]!==b[propName]){
return false;
}
}
return true;
}
}
9、代码实现一个对象的深拷贝?
1.通过JSON实现
var newObj=JSON.parse(JSON.stringify(obj)); //会忽略函数对象和自定义原型属性
2.通过递归实现
function deepClone(obj){
var objArray=Array.isArray(obj)?[]:{}; //定义一个对象,来确定参数是数组还是对象
if(obj && typeof obj === "object"){ //如果对象存在且类型为对象
for(var key in obj){
if(obj.hasOwnProperty(key)){ //如果是原型链上的自定义属性,则不拷贝
//如果obj的子元素是对象,递归操作
if(obj[key] && typeof obj[key] === "object"){
objArray[key]=deepClone(obj[key]);
}else{
//如果不是,直接复制
objArray[key]=obj[key];
}
}
}
}
return objArray;
}
10、从发送一个URL地址到返回页面,中间发生了什么?
0.输入URL
1.解析URL
2.构造并发送http请求
3.http报文传输过程
4.服务器接收并处理http报文
5.服务器构造并发送响应报文
6.浏览器接收报文,并开始构造页面
7.浏览器发送静态资源请求
8.浏览器发送Ajax请求
9.页面构建完成
11、说下工作中你做过的一些性能优化处理的例子?
ES6篇
箭头函数中的this指向谁?
因为箭头函数实际上根本没有自己的this,所以导致内部的this实际上就是外层代码块的this,也就是父对象环境中的this。
如何实现一个promise,promise的原理,以及它的两个参数是什么?
var promise=new Promise(function(resolve,reject){
if("异步执行成功"){
resolve(value);
}else{
reject(error);
}
})
参数:
resolve:将promise对象的状态从“未完成”变为“成功”,在异步操作成功时调用,并将异步操作的结果,作为参数传递出去
reject:将promise对象的状态从“未完成”变为“失败”,在异步操作失败时调用,并将异步操作的error,作为参数传递出去
promise中第二个参数的reject中执行的方法和promise.catch()都是失败执行的,分别这么写有什么区别,什么情况下会两个都同时用到?
map和set有没有用到,如何实现一个数组去重,map数据结构有什么优点?
数组去重:
Set是一个类似于数组的数据结构,但是成员的值是唯一的,没有重复的值
new Set([1,2,3,2,4,5,4,3])
Map数据结构的优点:
传统对象Object本质上是键值对的集合,但是只能用字符串当作键,而Map这种是数据结构类似于对象,也是键值对的集合,但是“键”的范围不局限于字符串,各种类型的值都可以作为键
计算机网络篇
http、https、以及websocket的区别
http协议是用在应用层的协议,他是基于tcp协议的,http协议建立链接时需要经过三次握手才能发送信息,每一个request对应一个response.http协议分为短链接和长连接,长连接是指在一定时间内,客户端和服务端保持TCP链接不断开,但是必须由客户端发起请求,然后服务端响应请求返回结果,端口为80。
https协议是在http协议的基础上增加了SSL协议,SSL依靠证书来验证服务器的身份,并为浏览器和服务器之间的通信加密,端口为443。
websocket协议也是一个应用层协议,产生的原因是为了解决http不能保持持久连接的问题,使得服务器可以主动向客户端推送信息,客户端也可以主动向服务端发送信息,真正的双向平等对话。
http常见的状态码,400,401,403状态码分别代表什么?
301:请求的网页已经永久移动到新的位置
302:临时移动,请求者应继续使用原有位置进行以后的请求
400:访问的页面域名不存在或者请求错误
401:请求要求身份验证
403:服务器拒绝请求
500:服务器内部错误
协商缓存和强缓存的区别
协商缓存:
强缓存:
说下计算机的相关协议?