HTML

CSS

前端常见的数值单位

  • px：绝对单位，页面按精确像素展示。
  • em：相对单位，按自身的font-size计算
  • rem：相对单位，相对根节点的字体大小来计算
  • vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
  • vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
  • vmin：vw和vh中较小的那个。
  • vmax：vw和vh中较大的那个。
  • %:百分比

display: none, visibility: hidden, opacity: 0的区别

在DOM树中的处理 是否占据空间 是否可以点击 性能 对后代的影响
display: none 从树中移除 不占空间 不能 触发回流 全部不能显示
visibility: hidden 不从树中移除 占据空间 不能 触发重绘 可以设置visibility为visible来显示
opacity: 0 不从树中移除 占据空间 可以 触发GPU硬件加速 全部不能显示

回流和重绘

css居中总结

https://www.sakura-snow.com/archives/615

JavaScript

let和Var的区别

  • let是块作用域，var是函数作用域
  • let不会挂载到全局对象上
  • 不允许在当前作用域内重复声明，不允许在定义前调用

底层实现上，let声明的变量实际上也会有提升，但是，提升后会将其放入到“暂时性死区”，如果访问的变量位于暂时性死区，则会报错：“Cannot access ‘a’ before initialization”。当代码运行到该变量的声明语句时，会将其从暂时性死区中移除。

在循环中，用let声明的循环变量，会特殊处理，每次进入循环体，都会开启一个新的作用域，并且将循环变量绑定到该作用域（每次循环，使用的是一个全新的循环变量）

在循环中使用let声明的循环变量，在循环结束后会销毁

箭头函数和普通函数的区别

  • 箭头函数的this永远指向定义时外层环境的this
  • 箭头函数不能作为构造函数
  • 箭头函数没有arguments参数
  • 箭头函数没有prototype
  • 箭头函数不能用作Generator函数

Vue

Vue生命周期

生命周期钩子 组件状态 最佳实践
beforeCreate 实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据 常用于初始化非响应式变量
created 实例创建完成，可访问data、props、computed、watch、methods上的方法和数据，provide和inject的数据也可以进行访问，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组 常用于简单的ajax请求，页面的初始化
beforeMount 在挂载开始之前被调用 –
mounted 实例挂载到DOM上，此时可以访问$el, $ref属性 常用于需要DOM参与的操作和ajax请求
beforeupdate 响应式数据更新时调用，发生在准备更新DOM前 适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器
updated 虚拟DOM 重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作 避免在这个钩子函数中操作数据，可能陷入死循环
beforeDestroy 实例销毁之前调用。这一步，实例仍然完全可用，this仍能获取到实例 常用于销毁定时器、解绑全局事件、销毁插件对象等操作
destroyed 实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁 -

React

webpack

其他