css
1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解
js
1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
handleMouseMove = (event) => {
this.setState({
x: event.clientX,
y: event.clientY
})
}
render() {
return (
// 这里把 children 当做函数执行，来对外提供子组件内部的 state
{this.props.children(this.state)}
)
}
}
class App extends React.Component {
render() {
return (
// 这里就很像 Vue 的 作用域插槽
({ x, y }) => (
// render prop 给了我们所需要的 state 来渲染我们想要的
The mouse position is ({x}, {y})
)
)
}
})
ReactDOM.render(, document.getElementById(‘app’))
原理解析
初始化
对于这样的一个例子来说
Hello
{{prop.msg}}
这段模板会被编译成这样：
with (this) {
return _c(“test”, {
scopedSlots: _u([
{
key: “bar”,
fn: function () {
return [_c(“span”, [_v(“Hello”)])];
},
},
{
key: “foo”,
fn: function (prop) {
return [_c(“span”, [_v(_s(prop.msg))])];
},
},
]),
});
}
然后经过初始化时的一系列处理（resolveScopedSlots, normalizeScopedSlots） test 组件的实例 this.$slotScopes 就可以访问到这两个 foo 、 bar 函数。（如果未命名的话，key 会是 default 。）
进入 test 组件内部，假设它是这样定义的：
那么 template 就会被编译为这样的函数：
with (this) {
return _c(“div”, [_t(“bar”), _t(“foo”, null, null, { msg })], 2);
}
已经有那么些端倪了，接下来就研究一下 _t 函数的实现，就可以接近真相了。
_t 也就是 renderSlot的别名，简化后的实现是这样的：
export function renderSlot (
name: string,
fallback: ?Array,
props: ?Object,
bindObject: ?Object
): ?Array {
// 通过 name 拿到函数
const scopedSlotFn = this.$scopedSlots[name]
let nodes
if (scopedSlotFn) { // scoped slot
props = props || {}
// 执行函数返回 vnode
nodes = scopedSlotFn(props) || fallback
}
return nodes
}
其实很简单，
如果是 普通插槽，就直接调用函数生成 vnode，如果是 作用域插槽，
就直接带着 props 也就是 { msg } 去调用函数生成 vnode。2.6 版本后统一为函数的插槽降低了很多心智负担。
更新
在上面的 test 组件中， 1s 后我们通过 this.msg = "Changed"; 触发响应式更新，此时编译后的 render 函数：
with (this) {
return _c(“div”, [_t(“bar”), _t(“foo”, null, null, { msg })], 2);
}
重新执行，此时的 msg 已经是更新后的 Changed 了，自然也就实现了更新。
一种特殊情况是，在父组件的作用于里也使用了响应式的属性并更新，比如这样：
Hello
{{prop.msg}}
其实，是因为执行 _t 函数时，全局的组件渲染上下文是 子组件，那么依赖收集自然也就是收集到 子组件的依赖了。所以在 msgInParent 更新后，其实是直接去触发子组件的重新渲染的，对比 2.5 的版本，这是一个优化。
那么还有一些额外的情况，比如说 template 上有 v-if、 v-for 这种情况，举个例子来说：
Hello
function render() {
with(this) {
return _c(‘test’, {
scopedSlots: _u([(show) ? {
key: “bar”,
fn: function () {
return [_c(‘span’, [_v(“Hello”)])]
},
proxy: true
} : null], null, true)
这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道
HTML
-
HTML5有哪些新特性？
-
Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?
-
如何实现浏览器内多个标签页之间的通信？
-
⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？
-
简述⼀下src与href的区别？
-
cookies,sessionStorage,localStorage 的区别？
-
HTML5 的离线储存的使用和原理？
-
怎样处理 移动端 1px 被 渲染成 2px 问题？
-
iframe 的优缺点？
-
Canvas 和 SVG 图形的区别是什么？
JavaScript
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
-
问：0.1 + 0.2 === 0.3 嘛？为什么？
-
JS 数据类型
-
写代码：实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的？
-
new 一个函数发生了什么
-
什么是作用域？
-
JS 隐式转换，显示转换
-
了解 this 嘛，bind，call，apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行，Event Loop
-
手写题：Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些？
-
PWA使用过吗？serviceWorker的使用原理是啥？
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
-
事件循环机制 （Event Loop）
sdn.net/topics/618166371)**
-
问：0.1 + 0.2 === 0.3 嘛？为什么？
-
JS 数据类型
-
写代码：实现函数能够深度克隆基本类型
-
事件流
-
事件是如何实现的？
-
new 一个函数发生了什么
-
什么是作用域？
-
JS 隐式转换，显示转换
-
了解 this 嘛，bind，call，apply 具体指什么
-
手写 bind、apply、call
-
setTimeout(fn, 0)多久才执行，Event Loop
-
手写题：Promise 原理
-
说一下原型链和原型链的继承吧
-
数组能够调用的函数有那些？
-
PWA使用过吗？serviceWorker的使用原理是啥？
-
ES6 之前使用 prototype 实现继承
-
箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？
-
事件循环机制 （Event Loop）
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
