2023-3-10HTML5 的新特性 hrader、footer、音频、视频标签、Canvas绘图、svg等。 HTM

HTML5 的新特性

hrader、footer、音频、视频标签、Canvas绘图、svg等。

HTML 语义化

HTML 语义化是反对大篇幅的使用无语义化的 div 或者span标签，而鼓励使用 HTML 定义好的语义化标签。

CSS盒模型

标准盒模型块总宽度=width+margin+padding+border。
怪异盒模型总宽=width+margin。

垂直水平居中

绝对定位+margin负值属性;
绝对定位+transform属性;
绝对定位+calc 计算;
flex;

隐藏元素

opacity：0会触发绑定在元素上的事件，
visibility：hidden不会触发事件，会触发重绘，
display：none不会触发事件，会触发重绘重排，

CSS实现三角符号

after伪类+盒子宽高均为零，三面边框皆透明

Flex

flex-direction:rowcolumn,
flex-wrap换行

数据类型检测

typeof（Object、Array和Null）,
instancsof,
Object.prototype.toString.call()。

let\var\const

ES6新增

let、const声明变量、结构赋值、Set、Map、箭头函数、class、Promise。

作用域优先

声明变量》声明函数》参数》变量提升。

JS垃圾回收机制

内存不被释放，页面会变卡，垃圾回收机制会找出那些不在继续使用的变量，然后释放其内存。标记清除：变量进入执行环境，被标记为“进入环境”，当变量离开执行环境时，会被标记为“离开环境”。垃圾回收器会销毁那些带标记的值并回收内存空间。内存泄露全局变量、闭包、定时器。

事件循环

事件循环是为了解决JS单线程运行阻塞的问题而设计的循环机制。js是单线程语言，同步任务都执行完了才会执行事件循环（宏微任务）的内容（微任务->宏任务->微任务...）、宏任务有setTimeout调用接口、DOM操作页面渲染，微任务有promise.then、asgnc和await。

函数式组件和类组件的区别

函数式组件是一个函数直接返回的是react元素，class组件需要先创建rander再返回react元素，有生命周期，但16.8后的hooks让函数式组件也拥有了类生命周期的钩子函数。

React Hooks

useRef获取DOM元素和组件实例，父组件可以调用子组件方法或属性，
useState定义自变量，
useMemo|useCallback定义没有副作用的因变量，
useEffect定义有副作用因变量，
useContext跨组件层级操作自变量（creatContext）。

React 事件绑定原理

React并不是将click事件绑在该div的真实DOM上，而是把事件统一绑定到document中，当事件发生并冒泡至document处时，再由真正的处理函数运行（减少内存消耗）。

setSatet是同步异步

React控制之外的事件中调用setState是同步更新的。如setTimeout，promise.then。

React生命周期

挂载constructor》render》ComponentDidMount，

更新rander》componentDidUpdate，

卸载componentWillUnMount。

React版本当前版本18.2.0 | hook版本16.8 |16.4版本移除两个钩子函数

重排重绘

重排页面初始渲染、添加/删除Dom、改变元素位置或尺寸、改变浏览器窗口尺寸，
重绘修改元素的填充颜色。

http常见状态码

2成功、3重定向、4客户端错误、5服务端错误。

GET和POSTpost更安全

性能优化

减少重绘重排、使用字体图标代替图片图标、防抖和节流、图片懒加载、降低css选择器的复杂度，最多不要超过三层。

Js事件流

捕获阶段》目标阶段》冒泡阶段。

iframe优缺点

iframe是嵌入式框架，移动设备无法完美适配，兼容性差；可能会出现多个滚动条；优点是可以原封不动的把嵌入的网页展现出来。

单点登录

使用存在cookie里的Token，判断是来利用cookic里的子域名共享。

2023-3-10