CSS+HTML
1、H5新增特性
- Canvas -- 用于绘画的元素
- video、audio -- 用于播放视频和音频的媒体。
- 语义化标签 ：
headernavmainarticlesectionasidefooter - webSocket -- 单个TCP连接上进行全双工通讯的协议。
- localStorage、sessionStorage -- 本地离线存储。
- 新的表单控件 -- 如：date、time、email、url、search。
2、重绘&重排
- 重排（回流）：当DOM变化，引起了元素形状大小等几何变化，浏览器会重新计算元素的几何属性，将其放置到正确位置，这个过程叫重排。
- 重绘：当一个元素的外观发生变化但并未引起布局上的变化，重新把元素绘制出来对的过程叫做重绘
3、BFC
官方：块级格式上下文，是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。浏览器对BFC的限制规则是
- 生成
BFC元素的子元素会一个接一个的放置。 - 垂直方向上他们的起点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于元素的margin特性。在
BFC-- 中相邻的块级元素的外边距会折叠(Mastering margin collapsing)。 - 生成
BFC元素的子元素中，每一个子元素左外边距与包含块的左边界相接触（对于从右到左的格式化，右外边距接触右边界），即使浮动元素也是如此（尽管子元素的内容区域会由于浮动而压缩），除非这个子元素也创建了一个新的BFC（如它自身也是一个浮动元素）。 触发条件： - 根元素，即
HTML标签 - 浮动元素：
float值为left、right overflow值不为visible，为auto、scroll、hiddendisplay值为inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid- 定位元素：
position值为absolute、fixed
我的理解： 内部的盒子会在垂直方向上一个接一个放置；垂直方向上的盒子间距margin决定，但是同属于一个BFC的两个盒子会发生margin重叠;每个盒子左右外边距不会超出包含他的块;BFC的区域不会与float的元素区域重叠；计算高度时浮动元素也要计算在内;
- 解决
margin重叠问题：给其中一个盒子添加float利用规则（BFC的区域不会与float的元素区域重叠） - 利用
BFC可以清除浮动：计算高度时浮动元素也要计算在内所以可以利用这一点清除浮动
4、编写CSS代码的时候如何优化CSS渲染性能？
- 内联首屏关键关键Css，优先加载主要的内容。
- 异步加载Css
//设置link标签media属性为noexis，浏览器会认为当前样式表不适用当前类型，会在不阻塞页面渲染的情况下再进行下载。加载完成后，将media的值设为screen或all，从而让浏览器开始解析CSS
<link rel="stylesheet" href="mystyles.css" media="noexist" onload="this.media='all'">
//通过rel属性将link元素标记为alternate可选样式表，也能实现浏览器异步加载。同样别忘了加载完成之后，将rel设回stylesheet
<link rel="alternate stylesheet" href="mystyles.css" onload="this.rel='stylesheet'">
复制代码- 合理使用选择器
5、CSS响应式布局有哪些？
- CSS3媒体查询@media 查询（麻烦，需要考虑的情况很多，不推荐）
- 在头部meta标签中加入“name=“viewport元标签””代表网页宽度默认等于屏幕宽度
- 借助bootstrap中的栅格
- 弹性盒子（推荐使用）
6、CSS盒模型（标准盒模型和IE盒模型）
共同点：两种盒模型都是由 content + padding + border + margin 构成，其大小都是由 content + padding + border 决定的，但是盒子内容宽/高度（即 width/height）的计算范围根据盒模型的不同会有所不同：
- 标准盒模型：只包含
content。 - IE盒模型：
content + padding + border。
box-sizing 改变元素的盒模型：
box-sizing: content-box：标准盒模型（默认值）。box-sizing: border-box：IE（替代）盒模型。
JS相关
1、闭包（面试+笔试===高频）
闭包是指有权访问另一个函数作用域中的变量的函数
- 优点：延长变量生命周期、私有化变量
- 缺点：会导致函数的变量一直保存在内存中，过多的闭包可能会导致内存泄漏
function fun1() {
let n = 0;
function fun2() {
n++;
console.log("@"+n);
return n
}
return fun2;
}
let res = fun1();
// 执行12次,fn2中的变量的生命周期变长了，fun2函数中的n被外部使用了
for (let i = 0; i < 12; i++) {
console.log(res()+"执行的第"+(i+1)+"次");
}
复制代码2、原型、原型链（高频）
- 原型链：当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，这就是原型链。
- 原型链的尽头一般来说都是
Object.prototype所以这就是我们新建的对象为什么能够使用toString()等方法的原因。Object.prototype.toString.call([])//tostring可以返回一个精确的类型 - 原型：在
JS中，每当定义一个对象（函数）时，对象中都会包含一些预定义的属性。其中每个函数对象都有一个prototype属性，这个属性指向函数的原型对象
3、this指向
- 全局函数中，this指向window
- 作为对象的方法调用 this 指向调用对象
- 自定义构造函数中，this指向新的实例化对象（new 会改变 this 的指向）
- 事件绑定中this指向事件源
- 定时器函数中this指向window
4、JS继承的方式有哪些？
- 原型链的方式继承
- 借用构造函数来实现继承
- 组合继承
ES6中使用extends和super关键字来实现继承
5、JS事件循环机制或js的执行机制？
一次弄懂Event Loop
EventLoop，就像是一个银行叫号系统，负责去找到对应任务队列中的函数，然后放入执行栈中进行调用，任务队列分为宏任务和微任务。在执行过程中，某个宏任务执行结束后，然后查看是否有微任务，如果没有，则执行下一个宏任务，以此类推直到全部执行结束。
js是一个单线程、异步、非阻塞I/O模型、 event loop事件循环的执行机制
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。 同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务。异步 任务指的是，不进入主线程、而进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程， 某个异步任务可以执行了，该任务才会进入主线程执行。
宏任务包含
script(整体代码)
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)
复制代码微任务
Promise.then
Object.observe
MutationObserver
process.nextTick(Node.js 环境)
复制代码请写出下段代码的输出结果（js事件循环机制）
new Promise(resolve => {
console.log(1);
setTimeout(() => console.log(2), 0)
Promise.resolve().then(() => console.log(3))
resolve();
}).then(() => console.log(4))
console.log(5)
复制代码1 5 3 4 2
6、原生ajax
ajax是一种异步通信的方法,从服务端获取数据,达到局部刷新页面的效果。
实现步骤：
- 创建XMLHttpRequest对象;
- 调用open方法传入三个参数 请求方式(GET/POST)、url、同步异步(true/false);
- 监听onreadystatechange事件，当readystate等于4时返回responseText;
- 调用send方法传递参数。
7、事件冒泡、委托（捕获）
-
事件冒泡指在在一个对象上触发某类事件，如果此对象绑定了事件，就会触发事件，如果没有，就会向这个对象的父级对象传播，最终父级对象触发了事件。
-
事件委托本质上是利用了浏览器事件冒泡的机制。因为事件在冒泡过程中会上传到父节点，并且父节点可以通过事件对象获取到目标节点，因此可以在父节点上定义监听函数，我们就可以到具体触发事件的元素，由父节点的监听函数统一处理多个子元素的事件，这种方式称为事件代理。
event.stopPropagation() 或者 ie下的方法 event.cancelBubble = true; //阻止事件冒泡
8、promise？（高频）
是异步编程解决的一种方案，可以浅显的认为他就是个容器，里面存放着未来才会结束的事情的结果。同时Promise也是一个对象，可以从该对象获取异步操作的消息。可以解决回调层层嵌套的问题。
promise有几种状态？三种
promise有三种状态pending（等待）、已完成（fullled）、已拒绝（rejected）- 一个
promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换
promise的方法有哪些？
promise.all-----同时多个异步操作时，同时发生，等待最后一个结束才结束。只要有一个出错，则都获取不到
const request1 => () => axios.get()
const request2 => () => axios.get()
const request3 => () => axios.get()
const request4 => () => axios.get()
Promise.all([request1(), request2(), request3(), request4()]).then(res => {
// res中就包含了四个请求得到的结果
})
复制代码promise.race-----可以在同时多个异步操作时，同时发生，第一个结束就结束 在一些异步处理中，我们想要设置超时时间的话，xhr对象可以调用xhr.abort()让请求结束，但是其他的没有
const asyncFn = () => new Promise(() => {
// 代码
})
Promise.race([asyncFn(), new Promise((resolve) => {
setTimeout(() => {
resolve()
}, 5000)
})])
复制代码- Promise.reject （返回一个失败的 promise）
- Promise.resolve （返回一个成功的 promise）
- Promise.prototype.finally （无论成功还是失败都会执行 finally）
- Promise.prototype.catch （就是调用 promise 自身的 then 方法，只传入失败的回调）
Async和await
- sync/await是生成器函数的语法糖 async/await是基于promise实现的，他们不能用于普通的函数回调 async/await更符合同步语义 使得异步代码看起来更像同步代码 async/await与promise一样，是非阻塞的 执行async函数返回的都是promise对象
9、函数防抖和节流（高频---笔试+面试）
函数防抖：在规定时间内多次执行代码，只执行最后一次（按钮频繁点击时，只让最后一次生效） 函数节流：定义一个执行频率时间，在执行的过程每隔对应的频率时间执行一次（表单验证中输入内容时、滚动条事件）
平时项目中我们会直接使用lodash库，来解决对应的问题
// 防抖
function debounce(func, wait) {
let timeout;
return function () {
let context = this;
let args = arguments;
if (timeout) clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args)
}, wait);
}
}
// 节流函数
function throttle(fn, delay) {
// 记录上一次函数触发的时间
var lastTime = 0;
return function() {
// 记录当前函数触发的时间
var nowTime = Date.now();
if (nowTime - lastTime > delay) {
// 修正this指向问题
fn.call(this);
// 同步时间
lastTime = nowTime;
}
}
}
document.onscroll = throttle(function() { console.log('scroll事件触发' + Date.now()) }, 200)
复制代码10、let；const；var区别？
不同点：
作用域：
- Var声明的变量只能是全局对的或者是函数块的
- let声明的变量它的作用域既可以是全局或者整个函数块
- var 允许在同一作用域中重复声明，而 let 不允许在同一作用域中重复声明，否则将抛出异常
- var 在全局环境声明变量，会在全局对象里新建一个属性，而 let 在全局环境声明变量，则不会在全局对象里新建一个属性。
- var 声明变量存在变量提升；let 声明变量存在暂存死区
相同点：
- var 和 let 的作用域规则都是一样的，其声明的变量只在其声明的块或子块中可用
总结给大家推荐一个实用面试题库
1、前端面试题库 （面试必备） 推荐：★★★★★
地址：前端面试题库
2、前端技术导航大全 推荐：★★★★★
地址：前端技术导航大全
3、开发者颜色值转换工具 推荐：★★★★★
地址 ：开发者颜色值转换工具