1.BFC了解（什么是BFC，如何实现BFC，解决什么问题）
BFC是浏览器自带的一种CSS渲染模式,也是一种盒子模型
四种方式开启BFC盒子
-
float不是none (有float属性且不为none,此时盒子自动变成BFC盒子)
-
overflow属性不是visible(有overflow属性且不为visible,此时盒子自动变成BFC盒子)
-
position属性不是static和relative
-
display属性为以下值 ： table-cell 、 inline-block 、 table-caption
开启BFC 盒子变化
-
当一个块级盒子触发BFC之后，其内部形成独立环境，在里面做任何事都不会对盒子外部有影响。
-
在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列
BFC解决哪些问题
-
清除元素内部浮动
-
解决盒子margin合并问题（塌陷也可以解决）
-
实现元素宽度自适应多列布局
-
制作右侧盒子自适应宽度的问题（左侧盒子宽度固定，右侧宽度不固定）
-
当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。
-
-
2.事件委托
-
1.什么是事件委托
-
给父元素注册事件，委托给子元素处理
-
-
2.事件委托原理：==事件冒泡==
-
3.事件委托注意点
-
this : 指向父元素
-
e.target : 指向触发事件的子元素
-
-
4.事件委托场景 ：
给动态新增元素注册委托事件
3.如何判断数据类型
- typeof有两种数据类型无法检测： null 、array
- Object.prototype.toString.call(数据)
4.浅拷贝与深拷贝
-
1.浅拷贝：拷贝地址， 修改拷贝后的数据原数据也会变化
-
2.深拷贝：拷贝数据， 修改拷贝后的数据原数据不会变化
-
推荐 json : let obj = JSON.parse( JSON.stringify( 对象 ) )
-
递归
-
5.for in与for of区别
1.功能不同
for-in是遍历数组的下标
for-of是遍历数组的元素
2.原型的属性
for-in会遍历原型的属性
for-of不会遍历原型的属性
3.数据类型
for-in可以遍历Object类型
for-of不可以遍历Object类型
总结：如果只想要属性值/元素，使用for-of效率更高
6.get请求与post请求区别
-
1.传参方式不同
-
get在url后面拼接(请求行)
-
post在请求体传参
-
-
2.大小限制不同
-
get有大小限制，不同浏览器大小限制不同。 一般2-5 MB
-
post没有大小限制
-
-
3.安全性不同
-
get参数直接暴露在url，不安全(一般查询类数据都是get)
-
post参数在请求体中，更加安全（一般登录注册必须是post）
-
-
4.传输速度不同
-
get传输速度快
-
post传输速度慢
-
7.一个页面从输入url到呈现过程
-
1.DNS域名解析： 将url中的域名解析成ip地址
-
2.TCP三次握手： 建立安全的网络传输协议
-
2.1 什么是TCP : 一种 传输控制协议
-
2.2 TCP作用 : 保证HTTP网络传输是 安全 + 可靠的 （检测客户端 与 服务器的网卡是不是通的）
-
2.3 TCP三次握手 :
第一次: 浏览器 -> 服务器 (你能听到我说话吗?,检测浏览器:发送)
第二次: 服务器 -> 浏览器 (我听到了,你能听到我说话吗。 检测浏服务器: 接收 + 发送)
第三次: 浏览器 -> 服务器 (嗯,我听到了. 检测浏览器: 接收)
-
-
3.HTTP建立连接
-
3.1 客户端发送请求
-
3.2 服务器处理请求
-
3.3 服务器响应请求
-
-
4.渲染引擎开始渲染响应返回的HTML文本
-
4.1 解析html生成：dom树
-
4.2 解析css生成：样式树
-
4.3 dom树 与 样式树 合并得到 渲染树
-
4.4 呈现页面
-
8.防抖节流
-
函数防抖：单位时间内，频繁触发事件，只会触发最后一次
-
函数防抖实际开发应用场景： 实时获取输入框文本
<!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>
</head>
<body>
<input type="text" placeholder="请输入文本">
<script>
/*
1.函数防抖 : 单位时间内，频繁触发事件，只会触发最后一次
2.经典应用场景 ： 输入框输入事件
3.函数防抖流程 ：
3.1 声明全局变量存储定时器ID
3.2 每一次触发事件, 先清除上一次定时器。 然后将事件处理代码放入本次定时器中
*/
let timeID = null
document.querySelector('input').oninput = function(){
//清除上一次定时器
clearTimeout(timeID)
//开启本次定时器. 500ms内用户没有触发，自动执行定时器代码。
timeID = setTimeout(()=>{
console.log(`发送ajax请求，搜索内容为${this.value}`)
},500)
}
</script>
</body>
</html>-
函数节流：单位时间内，频繁触发事件，只会触发一次
-
函数节流应用场景 ： 解决高频事件，频繁触发事件浪费性能
<!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>
body{
width: 3000px;
height: 3000px;
}
</style>
</head>
<body>
<script>
/*
1.函数防抖 : 单位时间内，频繁触发事件，只会触发一次
2.经典应用场景 ： 滚动条事件
3.函数防抖流程 ：
3.1 声明全局变量存储上一次触发交互时间
3.2 每一次触发事件, 获取当前时间 与 上一次时间做比较。判断是否超过节流间隔
3.3 如果 超过节流时间，则执行事件处理代码。 并且存储本次触发时间。
*/
let lastTime = null
window.onscroll = function(){
//判断时间间隔
let currentTime = Date.now()
if( currentTime - lastTime >= 500 ){
console.log('执行滚动条事件处理代码')
//存储本次触发时间
lastTime = currentTime
}
}
</script>
</body>
</html>9.什么是跨域
跨域是浏览器一种安全策略，如果你的ajax地址与页面地址不同源，也就是协议名和ip地址和端口号不一致的时候，浏览器就会拒收服务器响应的数据。一般在开发中，公司后台主要使用cors技术来解决跨域，前端不需要做任何处理，后台大概好像是设置一个响应头'Access-Control-Allow-Origin '.前端出来在config.js中设置代理服务器,服务器与服务器不存在跨域.
10.前端web优化方案
-
1.减少HTTP请求数
-
这是必须要放在第一个回答的，因为这是优化web最优方案
-
具体示例 ： 精灵图、多个文件合并成一个
-
精灵图适用场景 : （1）图片不经常更换的，比如按钮图标 （2）图片不能太大
-
-
-
2.资源压缩
-
就是一般我们第三方包有一个min版本,就是通过压缩文件体积来优化web
-
-
具体示例 ：响应min文件
-
3.合理利用浏览器缓存
-
某些接口的数据是固定的,服务器就没有必要每一次都响应数据。可以让浏览器进行缓存。
-
具体示例：例如省市县数据, 这种数据一般不会变化
-
11.请说一下你对promise的理解
promise是ES6新增的一个构造的数，主更是用干好决开发中的回调地默问题。promise对象有三种工作状态，分别是进行中，已成功，已失败。一旦创建promise就会立即进入进行中状态，此时立即执行promise里面的代码
promise状态改变有两种，从进行中到已成功，此时对应resolve方法(通过resolve修改状态为已成功)从进行中到己失败，此时对应reject方法
promise状态一旦改变就不会再变，resolve和reject分别对应promise实例的then和catch
promise相关的几个静态方法
- promise.race():接收多个promise实例，可以得到最先处理完毕的结果（可能成功，可能失败）
- promise.all():接收多个promise实例&
最低0.47元/天 解锁文章
1392
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
