前端常见面试题

1、居中一个div盒子的三种方法

2、行内元素和块级元素
行内元素：</a></b></i></span><input></select></br><img><textarea>
块级元素：</h1></h6></div></form></Ul></li></p></ol></table>
3、前端对代码性能优化有哪些方式：
（1）减少http请求，资源压缩合并
（2）非核心代码异步加载
（3）利用浏览器缓存，如图片视频请求耗时长的资源
（4）使用CDN
4、ajax请求步骤
（1）创建XMLHttpRequest对象
（2）注册回调函数
（3）配置请求信息，open(),get
（4）发送请求,post请求下，要传递的参数放这
（5）创建回调函数
5、前端如何实现异步编程
（1）通过回调函数
（2）通过事件监听
（3）采用发布／订阅方式
（4）通过Promise 对象实现
6、网页盒子模型有几种类型：
有两种，分别是IE怪异盒子模型和W3C标准盒子模型
7、常用的css选择器有哪些：
标签选择器、类选择器、id选择器、通配符选择器
8、css怎么让图片自适应

img{
        Display:block;
        max-width:100%;
        max-height:100%;
        Margin:auto;
    }

9、图片默认1px的边距怎么解决：
（1）把图片变成块级元素：display:block
（2）把图片设置成左浮动：float:left
（3）把图片父元素的字体大小设置为0
（4）如果父元素下，只有一张图片，将父元素高度设置成和图片高度一致即可。
（5）给图片设置：vertical-align:middle
10、前端存储方式有那些：
（1）localStorage - 没有时间限制的数据存储
（2）sessionStorage - 针对一个 session 的数据存储
（3）cookie 用于存储web页面的用户信息
11、http1.0、1.1、2.0的区别
HTTP1.0不支持断点续传功能
HTTP1.1支持长连接和请求的流水线处理，不支持header数据的压缩，HTTP2.0使用HPACK算法对header的数据进行压缩
HTTP2.0做到同一个连接并发处理多个请求，而且并发请求的数量比HTTP1.1大了好几个数量级
12、 IE、谷歌、火狐等常见浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开发)
13、简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；
异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
14、如何理解闭包
当一个函数的返回值是另外一个函数，而返回的那个函数如果调用了其父函数内部的其它变量，如果返回的这个函数在外部被执行，就产生了闭包。
示例：

var count=10;   //全局作用域 标记为flag1
function add(){
    var count=0;    //函数全局作用域 标记为flag2
    return function(){
        count+=1;   //函数的内部作用域
        alert(count);
    }
}
var s = add()
s();//输出1
s();//输出2

15、 浅拷贝和深拷贝的区别和示例：
浅拷贝：复制一层对象的属性，并不包括对象里面的为引用类型的数据，当改变拷贝的对象里面的引用类型时，源对象也会改变。
深拷贝：重新开辟一个内存空间，需要递归拷贝对象里的引用，直到子属性都为基本类型。两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。
浅拷贝示例：

var obj = {
    name:'成都'
}
var obj1 = obj;
obj1.name = '北京'
console.log(obj)

深拷贝示例：

var region = {
    name:'张三',
    age:20,
    sex:'男',
    like:[
        '香蕉',
        '梨子',
        '草莓',
        {girl:'迪丽热巴'}
    ]
}
var newObj = {}
const extend = (region,newObj) => {
    for(let key in region){
        if(Object.prototype.toString.call(region[key]).indexOf('Object') != -1){
            newObj[key] = {}
            extend(region[key],newObj[key])
        }else if(Object.prototype.toString.call(region[key]) === '[object Array]'){
            newObj[key] = []
            extend(region[key],newObj[key])
        }else{
            newObj[key] = region[key]
        }
    }
}
extend(region,newObj)
region.name = '王二麻子'
region.like[3].girl = '杨幂'
console.log(region,newObj)

16、js数据类型有哪些
js数据类型共有八种
基本数据类型有：string、Number、Null、undefined、Boolean、Symbol、bigInt
引用数据类型：object（function、Array、Date）